网页设计实验指导(NEW).docVIP

Dreamweaver网页设计 实 验 指 导 书  目 录 实验一 网页中的基本元素 3 实验二 网页中的表格 5 实验三 CSS基础 8 实验四 CSS 10 实验五 网页布局 12 实验六 精彩网站制作实战 14 实验一 网页中的基本元素 一、实验目的 1．熟悉软件的界面掌握如何建立站点实验二 网页中的表格 一、实验目的 1、超链接的基本定义及基各种超链接的创建和编辑操作 2、利用表格进行文本的整齐排列和自由的图文混排 3、在整个表格内使用背景图像和色彩。 二、实验主要内容 1、利用上次实验的内容制作超级链接，包括文本、图像、热区以及锚点链接。 2、制作两个利用表格定位的网页 3、设置超链接将站点中的网页链接起来。 三、实验步骤 (1)建立一个本地站点 (2)在站点中建立一个网页文件index.html并打开进行编辑。 (3)最外层的表格宽度为700像素，嵌套的表格宽度为100%，整体上分为上下两个表格。 (4)上表格为2行1列的表格如图一所示。 图2-1 布局表格一 （5）下表格为4行3列的表格如图二所示。 图2-2 布局表格二 （6）将下表格的单元格进行合并，调整为如图三所示 图2-3 布局表格三 （7）在下表格的左侧嵌套7行1列的表格，在下表格的右侧上边单元格内嵌套1行1列的表格，在右侧下边单元格嵌套2行4列的表格。如图四所示。 图2-4 布局表格四 （8）在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并如图五所示。 图2-5 布局表格五 （9）上表格的第二行和下表格右侧第二行制作水平线，将单元格的高度设为“2”；下表第二列制作垂直线，宽度值勤为“2。” （10）向表格内添加图像和文字，将所有表格的边框值设置为“0”。 (11) 浏览网页的实际效果。 (12)设计另一个网页，网页效果图如图2-6所示。 (13)用超链接将两者链接起来 (14)浏览网页的实际效果，并测试超链接的有效性。 图2-6 四、实验要求 1、实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包上传到试验系统，并保存设计结果供下一个实验使用。 2、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验三 CSS基础 一、实验目的 1、掌握CSS的基本语法；CSS选择器 列表 （6）创建一个简单的图文并茂的子页面命名为second.html，子页面通过超链接与主页面相连, second.html网页效果图如图3-2所示。 图3-2 (7)浏览网页的实际效果，并测试超链接的有效性。 四、实验要求 1、实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包上传到试验系统，并保存设计结果供下一个实验使用。 2、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验四 CSS 一、实验目的 1、掌握CSS的 主页面效果图 （6）创建一个复杂列表的子页面命名为list.html，子页面通过超链接与主页面相连, list.html网页效果图如图4-2所示。 图4-2 子页面效果图 (7)浏览网页的实际效果，并测试超链接的有效性。 四、实验要求 1、实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包上传到试验系统，并保存设计结果供下一个实验使用。 2、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验五 网页布局 一、实验目的 1、框架网页的创建和编辑操作 2、目标框架的设定 二、实验主要内容 本实验的内容主要是利用框架结构来建立网页，并设置目标框架。 1.建立一个本地站点,包括5-6个网页 2.用框架结构为网页布局,其中一个网页为图5-1所示,其他网页自由发挥. 3.设置网页间的超链接,并设置目标框架. 图5-1 页面效果图 三、实验步骤 (1)新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方框架为主框架（mainFrame）。 (2)保存框架及框架集 (3)在顶部框架中插入图像 (4)左侧框架中设置页面属性背景图像。 (5)在左侧框架中插入7行1列无边框架和背景表格。 (6)在表格中插入导航图像按钮。 (7)在右侧框架中插入文字、图像等网页元素。 (8)制作两个网页分别命名为dianying.html和jingyue.html，保存在同一站点内。 (9)为左侧导航按钮制作超链接，设置链接目标为“mainFrame”。 (10)单击菜单栏“文件”|“保存全部” (11)预览网页并检测超链接是否在指定框架内打开。 四、实验要