2.1 使用Dreamweaver制作简单网页（课件）-高二《网页设计与制作》同步教学（北京出版社）

第2章 Dreamweaver基本操作 在已经确定网站基本风格后，小赵非常兴奋，摩拳擦掌，准备开始设计网页，但是使用什么工具来完成设计呢？老张向小赵推荐经典网页制作工具Dreamweaver。 Dreamweaver是美国Macromedia公司开发的集网页制作和管理于一身的“所见即所得”网页编辑器，它是第一套针对专业网页设计师的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 第2章 Dreamweaver基本操作 本章以Dreamweaver CS3版本为例，介绍使用该软件进行网页设计与制作的基本方法。主要内容包括： （1）创建一个简单的公司简介网页index.htm。 （2）利用CSS进行文字排版。 （3）创建公司网站中的导航栏页面lianxi.htm。 （4）创建公司表格布局网页index.htm。 （5）设置公司网站中网页间的链接。 2.1 使用Dreamweaver制作简单网页 2.2 制作表格布局的首页 2.1 使用Dreamweaver制作简单网页 任务导入 学习目标 任务实施 知识拓展 思考与练习 任务导入 对于一个陌生的软件，小赵向老张虚心请教。老张指导小赵从一个简单的网页着手（如公司简介网页、公司导航网页），从而学会Dreamweaver的基本使用方法。 本任务将学习使用Dreamweaver制作一个简单网页的方法，以及利用CSS进行文字排版的技巧，最后还将创建公司网站中的导航栏页面lianxi.htm。 学习目标 了解Dreamweaver启动与参数设置，能够对Dreamweaver进行初始设置。 掌握Dreamweaver站点管理，能够对站点进行增加、删除、编辑等操作。 掌握Dreamweaver文字的使用，能够利用CSS设置文字格式。 掌握Dreamweaver图像的使用，并能够进行鼠标经过图像的设置。 任务实施 2.1.1 启动Dreamweaver 2.1.2 认识工作界面 2.1.3 参数设置 2.1.4 设置标尺和网格 2.1.5 Dreamweaver站点管理 2.1.6 新建站点的步骤 2.1.7 编辑站点 2.1.8 删除站点 2.1.9 制作简单网页实例 2.1.10 使用CSS文字样式 2.1.11 使用Dreamweaver图像 2.1.1 启动Dreamweaver 在安装Dreamweaver后，会自动在Windows的“开始”菜单中创建程序组。单击“开始”菜单→“程序”→“AdobeDreamweaver CS3”→“Dreamweaver CS3”命令，就可启动Dreamweaver软件。 Dreamweaver启动界面 2.1.2 认识工作界面 （1）标题栏 （2）菜单栏 （3）工具栏 （4）插入栏 （5）文档窗口 （6）属性设置面板 （7）面板组 Dreamweaver工作区 2.1.3 参数设置 单击“编辑”菜单→“首选参数”项，将弹出“首选参数”对话框，在此可以进行基本环境设置。 1）常规设置 “首选参数”对话框中的“常规”选项 2.1.3 参数设置 2）设置不可见元素 在“首选参数”对话框中，选择“分类”中的“不可见元素”项，可以进行不可见元素设置。 “不可见元素”选项 2.1.4 设置标尺和网格 在网页排版过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具。 1）显示标尺 在文档窗口中，选择“查看”菜单→“标尺”→“显示”命令，将在页面中显示标尺 2）显示网格 在文档窗口中，默认状态下不显示网格。如果需要显示网格，可在文档窗口中，选择“查看”菜单→“网格设置”→“显示网格”命令 “网格设置”对话框 2.1.5 Dreamweaver站点管理 小赵在了解了Dreamweaver基本界面后，想开始设计网页。老张告诉他，且慢，在具体设计网页之前，需要先建立站点。建立站点后，所有该公司的网页文件、素材文件都统一地在一个站点下管理，而且在一个站点中对网页文件的操作能够实现自动更新链接。 2.1.6 新建站点的步骤 （1）启动Dreamweaver。 （2）单击“站点”菜单→“管理站点”项，将弹出“管理站点”对话框。在该对话框中，单击“新建”按钮，从弹出式菜单中选择“站点”，将弹出“站点定义”对话框。 “管理站点”对话框 2.1.7 编辑站点 2.1.8 删除站点 如果Dreamweaver中的某个站点已经没有用了，可以将其删除。在“管理站点”对话框中，单击“删除”按钮，则可删除本站点。 2.1.9 制作简单网页实例 2.1.9 制作