网页设计实用教程 第2章 Dreamweaver CS4基础.ppt

1、第2章Dreamweaver CS4基础，制作人：王飞、重点和难点、互联网概念理解网页和网站的基础知识及其关系理解HTML基础知识理解网站设置修订基本流程。 识别2.1dreamweavercs4和2.1.1dreamweavercs4的新功能， 1 .新用户界面2 .相关文件和代码导航器3 .实时视图4. Adobe AIR创作支持新功能Ajax和JavaScript框架代码提示6. Adobe Photoshop智能对象7 .智能对象CS4为旧版本的Dreamweaver添加了以下惊人的新功能：2.1.2Dreamweaver CS4的工作环境，dreamweavercs4的接口在几乎一次

2、性更新的改良中增加了更多DreamweaverCS4工作界面包括菜单栏、工具栏、文档窗口、属性面板、面板组和下拉按钮。 2.1.2 DreamweaverCS4工作环境，1 .菜单栏2 .文档窗口3 .属性面板4 .面板组5 .外观模式6 .下拉按钮7 .起始页，2.2站点修订画面和制作本地配置的网站DreamweaverCS4提供了本地和远程站点管理、2.2.1站点修订和2.2站点修订以及便于创建的专业站点创建工具，可以在创建站点之前， 网站必须有明确、全球性的构想1 .确定网站的主题和名称网站的主题是网站的主题，网站必须有明确的主题，所有的网页都必须围绕主题展开。 同样，网站也需要简单、容

3、易记住、有特色、表示主题的名称。 例如淘宝、视听空、易车网等。 可以在表达网站主题的同时，提出特色。 2 .确定网站专栏网站专栏的修订计划，其实也是高度提取网站内容，确定网站的纲要和结构。 3 .站点的整体风格(style )确定是抽象的，站点的整体形象给予阅览者一种综合的感觉，站点的CI (标志、颜色、字体、标语)、布局、阅览方式、互动性、文字、气氛、 4 .确定包含内容价值的网站目录结构的网站目录是指在创建网站时创建的目录，主要用于管理网站中包含大量图像、文档、媒体等文件的2.2.1网站2.2.2使用DreamweaverCS4创建站点和创建本地站点的目的是在本地文件和Dreamweave

4、rCS4之间建立联系，以便设置修订者可以使用DreamweaverCS4管理站点文件。 以创建本地网站“学子之家”的情况为例，具体说明创建网站的操作步骤。 (1)在本地磁盘目录C:Inetpubwwwroot下，创建名为“Mystuhome”的文件夹作为存储站点文件的本地站点的根目录。 (2)单击菜单栏“站点”“新站点”，显示“站点定义”对话框。 单击“新建”按钮，然后从弹出菜单中选择“站点”项目。 如图2-10所示。 在打开的对话框上方有两个选项卡：“基本”和“高级”，您可以在站点向导和高级设置之间切换。 然后选择“基本”标签。演示文稿，在2.2.2DreamweaverCS4中创建一个站点

5、，(3)在“您的站点名称”下面的文本框中输入名为“学子之家”的站点名称，dreamweavercs4中标识该站点的站点URL为临时(4)点击“下一步”，进入向导的下一个画面，询问是否使用服务器技术。 如图2-11所示，选择“否，不想使用服务技术”，因为目前已经创建了静态页面。 (5)点击“下一步”，显示如图2-12所示的对话框，可以设定站点的编辑方法和保存文件的位置。 编辑方法有两种选择，在本例中选中“编辑我的电脑上的副本，完成后上载到服务器(推荐)”单选按钮。 “您要把文件保存在计算机上的哪里？ 下面的文本框用于设置网站文件的保存路径。 在文本框中输入现有路径，或者单击后面的按钮，在如图2-

6、13所示的“选择站点学子家的本地根文件夹”对话框中选择保存位置。 (6)点击下一步后，如图2图14所示的设定进入连接到远程服务对话框的方法。 本例在站点建设完成后链接到FTP，不需要管理远程站点，所以选择“无”。 (7)点击“下一步”，进入如图2-15所示的对话框。 对话框列出刚才设定的主要内容，如果发现错误，可点击关按钮关闭修正。 如果没有错误，请单击“完成”退出“站点定义”对话框。 现在将创建一个新的本地站点“学子之家”，并在文件面板中显示该站点，如图2-16所示。 如果需要创建其他站点，请重复上述步骤。 2.2.2使用Dreamweaver cs 4创建站点，1 .站点本身管理(1)站点

7、切换(2)管理站点文件夹和文件管理，创建站点是为了管理站点内的文件和资源， dreamweavercs4通常同时管理多个站点管理站点文件和资源主要包括站点中的文件、资源和文件夹的创建、复制、删除和移动等操作。2.2.3站点管理、2.3工作界面的设置通常用于配置DreamweaverCS4工作界面，以便在创建网页时方便操作和满足不同的编辑需求。 打开或关闭面板首选项标尺设置网格设置，创建和保存2.4web文档，1 .启动新的web文档(如果启动DreamweaverCS4，将显示类似于图2-9的起始页。 可以通过单击要在新选项下创建的文档类型来创建文档(在DreamweaverCS4主窗口中，单

8、击“文件”“新建”菜单命令，创建如图2-21所示的“新建文档”模板选择网页类型，然后单击“创建”，演示文稿，2 .保存文档并保存网页文档有三种方法： (在DreamweaverCS4主窗口中，单击菜单“文件”“保存”或“全部保存”菜单命令。 (2)点击标准工具栏的“保存”按钮或“全部保存”按钮。 (3)按下“ctrls”键。3 .打开web文档打开web文档有两种方法： (在DreamweaverCS4主窗口中，单击菜单“文件”“打开”菜单命令，显示“打开”对话框，选择要打开的文档，然后单击“打开”按钮打开对应的文档。 (2)在“文件”面板中双击要打开的文件。 4 .关闭web文档在Dream

9、weaverCS4主窗口中，可以通过单击菜单“文件”“关闭”或“全部关闭”菜单命令来关闭web文档。 如果网页没有保存，将显示一个对话框，询问您是否要保存。 5 .页面属性设定为DreamweaverCS4的主窗口，单击菜单“修改”“页面属性”菜单命令，打开如图2-22所示的“页面属性”对话框。“页面属性”对话框左侧的“分类”列表中列出了五个不同的类别。 选择类别后，该类别的所有可用选项都将显示在对话框右侧的属性设置区域中，根据需要更改残奥仪表，然后单击“确定”或“应用”按钮。演示说明、2.5练习题、1、选择题1、可以保存web文档，然后按键。 a .【ctrla】b .【ctrlw】c .【ctrls】d .【ctrln】2、DreamweaverCS4可编辑的文件类型是() A.htm、2、DreamweaverCS4站点的作用是什么？ 3 .简要说明建立本地网站的主要步骤。 三、熟悉上机实践1、DreamweaverCS4的工作界面。 2 .创建一个名为“mywebsite”的静态站点，并将站点的所有文件保存到本地计算机的c盘“mywebsite”文件夹中。 3 .在站