第四章 WEB实验指导书(第2版).pdf

WEB 术及应用实习指导书 ( 2 版) 西北农林科技大学信息工程学院 2012 年7 月 实习一 HTML标记基本应用与网页设计 一、实习目的 1. 熟悉Dreamweaver 的工作环境； 2. 掌握Dreamweaver 站点管理功能； 3. 掌握Dreamweaver 制作网页的基本方法； 4. 掌握网页制作中的利用表格布局方法。 二、实习内容 1. 熟悉Dreamweaver 的工作环境； 2. Dreamweaver 管理站点功能； 3. 制作图文混排的网页； 4. 制作图片展示网页； 5. 制作个人网站首页。 三、实习步骤 1.熟悉Dreamweaver 的工作环境。 启动Dreamweaver，熟悉Dreamweaver 工作环境,了解Dreamweaver 的界面的组成。 2. Dreamweaver 管理站点 ① 创建站点 打开 “站点”菜单，单击 “新建站点”，按照向导步骤完成站点的创建。 ② 查看站点目录结构 单击 “文件”面板,即可查看站点目录结构。 ③ 网站其它目录 根据要制作的网站的内容，可以建立相应的目录，用以分类存放网站制作中的相关文件。 在本站点中，请建立如下目录车 xiangce 和 aihao，然后分别在这两个目录中建立文件夹 images。 注意： 站目录结构一般在 站创建初期就完成，但也可以在制作 站过程中，随时根据 要求建立。 3.制作一个图文混排的网页 ① 打开 “文件 “菜单”，单击 “新建”，选择 “基本页”中的“HTML”，在Dreamweaver 中 将出现一个空白的网页。 ② 在网页中输入（粘贴）一段文字 （孙悟空自传，教学资源网上可以下载），设置 一段 （作为标题）为“黑体、24 磅”，其余文字设置为 “宋体、14磅”。 ③ 在网页中插入一张图片(sunwukong.jpg，教学资源网上可以下载)，设置图片的对齐属 性为 “左对齐”。调整位置,如图2-1 所示。 -1- ④ 将保存网页到网站的根目录（d:\myweb）中，文件名为zizhuan.htm。 注意：1. 本 页所用到图片都要存入d:\myweb\images 文件夹中。 2. 观察在插入图片时出现的“确认”对话框(如图2-2)，并复制图片到正确的位置。 3．“另存为”文件对话框中，注意保存 页到指定的位置。 图2-1 zizhuan.htm 网页 图2-2 “保存嵌入式文件”对话框 4.制作一个图片展示网页 ① 打开 “文件”，单击“新建”，选择选择 “基本页”中的“HTML”，在Dreamweaver 中将 出现一个空白的网页。 ② 在网页中插入一个7 行3 列的表格，在表格属性中，将表格的边框粗细设置为0，接着 再将 1行的3 列合并,输入文字 孙悟空的幸福生活”，设置为“标题一”格式。调整单 格行 高，如图2-3 所示。 图2-3 制作中的xiangche.htm 网页 图2-4 完成的xiangce.htm 网页 ③ 在表格的单 格中，插入图片和文字说明(教学资源网上可以下载)。如图2-4 所示。 ④ 将保存网页到网站的根目录（d:\myweb\xiangce）中，文件名为xiangce.htm。 注意:本 页所用到图片都要存入d:\myweb\xiangce\images 文件夹中。 5.制作个人主页 （首页） 网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个 标准。在设计布局时，通常采用表格的方式。在本网站首面的制作中，我们也将使用表格方式 -2- 布局。 ① 打开 “文件”，单击“新建”，选择选择 “基本页”中的“HTML”，在Dreamweaver 中将 出现一个空白的网页。 ② 在网页中插入一个7 行2 列的表格 （宽：7