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 中将 出现一个空白