《dreamweaver网页制作》.docVIP

实验1 Dreamweaver网页制作 Dreamweaver是“所见即所得”的专业网页制作软件，本实验通过具体的网页制作实例，详细介绍了用Dreamweaver8软件进行网页制作、创建网站的操作方法。 本次实验共分2个内容，包括： 1、网站的架构； 2、制作网页。 实验1.1 网站的架构 要将信息发布到Internet上，应先建立一个网站，确定网站的目录结构和组织形式（即进行网站的规划设计），然后进行具体的页面制作，最后将网站发布到Internet上。 网站是由网页组成的，网页之间由超链接相互连接在一起，网站就是对这些网页等文档提供一套维护管理的机制。本小节给出使用Dreamweaver软件建立网站的实验，通过实验掌握建立网站的基本规则和方法。 1. 实验目的 学习网页制作首先要认识页面、网站及其组成，通过创建网站的上机实验可以具体掌握网站的目录结构、组织形式，以及使用Dreamweaver软件管理网站。 2. 知识点 建立一个网站应先想好网站的模式，确立存放的物理磁盘位置。仔细规划好网站的结构，根据网站中设置的栏目建立不同的子文件夹，然后将与该栏目相关的所有文档都保存在这个子目录中。 3. 实验内容和要求 图1.1 网站首页 通过Dreamweaver8创建一个“花卉”网站，将网站名称命名为flower-web。在网站的根目录（flower-web）下创建四个子目录，目录名分别命名为flower（常见花卉）、life（花与生活）、server（养花指导）和images（图片），网站首页（index.htm）如图1.1所示。 4. 实验步骤 ⑴启动Dreamweaver8，选择“创建新项目”中的“Dreamweaver站点”（见图1.2所示），弹出“站点定义”对话框，在“基本”和“高级”页中可以定义站点名称、站点存储位置等信息（见图1.3、1.4所示）。本实验选择将网站存储在本地，请在D盘上创建flower-web目录用于存放本实验中设计的花卉网站。 图1.2新建网站 图1.3 站点定义——定义站点名称 图1.4 站点定义——指定站点位置 ⑵点击确定后，可以看到flower-web站点的文件管理器（如图1.5所示）。在站点名称上单击右键可以选择在本站点的根目录下创建新文件、新文件夹，也可以双击已存在的文件进行编辑。 在网站根目录下新建文件，文件名为“index.html”，该网页为网站首页。 在网站根目录下新建四个文件夹：flower、life、server、images。 图1.5 站点文件管理器 ⑶双击文件夹列表中的index.htm文件，此时右边出现index.html页面设计视图（见图1.6所示）。点击红框中的“代码”、“设计”分别显示源代码视图（可以直接编辑网页源代码）和设计视图（所见即所得设计网页），点击“拆分”则同时显示源代码视图和设计视图。 设计窗口的下方是属性窗口，在设计视图的设计窗口内选择了网页元素后，可以在属性窗口定义网页元素的属性。 图1.6 设计窗口和属性窗口 ⑷单击属性窗口的“页面属性”按钮可以进行页面属性设置（见图1.7所示），设置index.html页面的标题为“花卉网站首页”，文档类型为“HTML 4.01 Transitional”。 图1.7 页面属性设置 ⑸在index.htm页面中输入文字“花卉网站欢迎您”，在属性窗口选择格式为“标题1”、字体为“华文楷体”（默认字体中没有此字体，通过“编辑字体列表”窗口从“可用字体”列表中向“选择的字体”列表中增加字体）、文字前景色为#FF6600、字体大小为56px，并设置居中。 ⑹在菜单栏中选择“文件/保存全部”命令，保存新建立的网站。 ⑺单击工具栏中的“在浏览器中预览/调试”按钮，浏览本网页（如图1.1）。 实验1.2 制作网页 当一个网站创建好后，就要进行网页制作。网页是承载文字、图形图像、声音、动画、视频等媒体元素内容的载体。本小节给出使用Dreamweaver8软件的设计视图制作网页的基本方法。 一、制作一个“花香与健康”网页 1. 实验目的 掌握在一个页面中添加文本、设置文本格式、水平线属性的方法。 2. 知识点 Dreamweaver8提供的“所见即所得”设计页面功能，使在一个网页中添加文字信息变得非常地容易，然而一个能够真正吸引用户的页面，除了文字外，还应对页面进行整体的布局设计。在制作页面时，应事先安排好页面元素摆放在那里，使用什么格式，设计页面的格式（包括页面的边距、背景颜色、背景音乐）等等。 3. 实验内容和要求 为 “flower-web” 网站（实验1.1创建的网站）的“花与生活（life）”栏目制作一个“花香与健康”网页。要求按照图2.1所示页面的内容和样式进行制作。页面的名称为flower_life.html。 图2