网页设计与制作实验指导书 1_免费下载.doc

实验一 建立站点 一、实验目的： (1)熟悉DreamWeaver CS3的界面及其操作。 (2)熟悉使用DreamWeaver CS3建立站点，理解本地站点和远程站点的概念。 二、实验内容： 本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。 三、实验步骤与要求： (1)打开DreamWeaver CS3，熟悉整个界面，尝试打开、关闭各种面板、视图、工具栏。使用参数设置把常用的快捷图标添加到状态栏。 (2)规划站点（导航结构请遵循本实验的要求），然后新建站点，将站点所在文件夹命名为自己名字的汉语拼音，设计站点的结构。 (3)在站点中添加若干个网页，将其中的一个命名为index.htm并设置为主页。 (4)打开站点管理器，熟悉站点管理的界面，了解网站地图。 (5)将各个网页依次打开，进行编辑，页面中要有文字、图片、背景等网页元素。 (6)浏览各个网页的实际效果。 实验二 编辑文本及超级链接 一、实验目的： (1)掌握在文档中插入常规文本的方法。 (2)学会用dreamwaver“属性”检查器对各类文本进行各种基本格式设置。 二、实验内容 本实验将综合应用前面所学知识，对一段文本进行段落格式化综合操作，复习插入水平线、日期等特殊符号的操作，并对文本标题、段落等设置操作进行进一步巩固；制作带锚点超级连接的目录列表。 三、实验步骤与要求 从FTP下载素材文件 第4章 index.html打开: (1)在右侧第一段文本后插入一条高为1的水平线。 (2)在左侧“最后更新”文本下方插入日期。 (3)将右侧第一段文本转换为标题，居中对齐。 (4)选中第二段文本的小标题，设置格式为“黑体、16PX、#006”。 (5)将左侧文本目录下的7行分段。 (6)将目录转换为项目列表。 (7)分别在右侧水平线下每小段标题后添加锚点，命名为a1-a7。 (8)设置目录锚点链接。 最终页面效果图： 实验三 制作图文混排页面 一、实验目的： 综合本章学习知识，要求完成一个完整的页面设计，包括图像的插入、属性何止、物理编辑、热点绘制和图文混排等方面的操作 二、实验内容 制作一个图文混排的完整网页，网页中包含文本、图片、热点链接等网页基本元素。 三、实验步骤与要求 从FTP下载素材文件 第5章/video/iphone4 (1)打开素材文档，在图像top中插入导航图文件。 (2)分别为导航图像中的4段文本设置矩形热点区域，设置相关属性。 (3)在第一段文本第1行行首插入图像img1.jpg。 (4)设置图像水平边距10，对齐方式为“左对齐”使得该图像在左侧围绕文本段落1呈现。 (5)在文本段落2第1行行首定位插入点，插入图像img2.jpg。 (6) 设置图像水平边距10，对齐方式为“右对齐”使得该图像在右侧围绕文本段落2呈现。 实验四 利用表格布局页 一、实验目的： (1)利用表格进行文本的整齐排列和自由的图文混排。 (2)在整个表格内使用背景图像和色彩。 二、实验内容 本实验的内容主要是利用表格进行网页的定位练习 三、实验步骤与要求 (1)建立一个本地站点。 (2)在站点中建立一个网页文件index.htm并打开进行编辑。 (3)最外层的表格宽度为800像素，嵌套的表格宽度为100%，整体上分为上下两个表格。 (4)上表格为2行1列的表格如图一所示。 图一 布局表格一 （5）下表格为4行3列的表格如图二所示。 图二 布局表格二 （6）将下表格的单元格进行合并，调整为如图三所示 图三 布局表格三 （7）在下表格的左侧嵌套7行1列的表格，在下表格的右侧上边单元格内嵌套1行1列的表格，在右侧下边单元格嵌套2行4列的表格。如图四所示。 图四 布局表格四 （8）在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并如图五所示。 图五 布局表格五 （9）上表格的第二行和下表格右侧第二行制作水平线，将单元格的高度设为“2”；下表第二列制作垂直线，宽度值勤为“2。” （10）向表格内添加图像和文字，将所有表格的边框值设置为“0”。 (11) 浏览网页的实际效果。  实验五 框架网页的创建 一、实验目的： (1)框架网页的创建和编辑操作 (2)目标框架的设定 二、实验内容 本实验的内容主要是利用框架结构来建立网页，并设置目标框架。 1.建立一个本地站点,包括2-3个网页。 2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥。 3.设置网页间的超链接,并设置目标框架。 三、实验步骤与要求 (1)新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方框架为主框架（mainFrame）。 (2)保存框架及框架集。 (3)在顶部