《网页设计与制作基础》实验指导
《网页设计与制作》课程实验指导书
XXX学院男生宿舍X号楼综合布线系统设计方案设计单位：设计指导：宿舍布线系统的设计一、综述A.布线系统将贯穿雨1~5楼的各个平面。
主要为语音、数据、图像等系统信号提供高性能传输路由。
B.作为一个综合性的线路平台，应具有一定的兼容性和开放性，可满足各类通讯及计算机等传输需要和网络结构，提供一个标准化、高带宽、低成本的网络环境。
C.系统应具有开放的模块化结构，可灵活地进行资源分配，线路管理、变更和扩展。
D.系统应提供一个安全、有序。
便于管理的设备安装及连接环境，可快捷简便地进行系统安装和运行。
E.在充分考虑目前应用情况下，以高起点和适度超前的原则来规划本系统。
为各种高性能应用踢狗充足的传输带宽，为日后系统的升级提供充足的空间。
F.宿舍楼基本情况：楼层面积约为16*9米，且已有中国移动和中国电信的无线网络热点分布。
二、具体布置系统包括工作区子系统、配线(水平)子系统、干线子系统、设备问子系统、管理子系统和建筑群子系统。
1.工作区子系统。
工作区子系统是由学生信息插座到计算机网络的连接线缆。
学生宿舍的房间设置一般为6人间其内部语音及网络数据点的位置不像大开问办公那样难以布置，因室内床位布置均已确定，很容易确定其数据端口的位置。
日前宿舍布置一般为上铺居住，床铺下设置学习书桌，因此数据端安装在书桌下，高度为0．3 m。
应根据校方的要求，选择数据端口的安装数量。
对于要求较高的，每个学生书桌下方设置一个数据端口，房间内公共部位设置一个电话端『_J。
要求较低的，可每两个同学共用一个数据端口，然后采用交换机分别接引至电脑。
其优点是减少了水平引来线路和保护管线(槽)，缺点是影响网络速度，需自加分配没备。
除考虑数据端r]的位置外，还需相应布置供电电源插座，间距应为0．2 m。
2.配线(水平)子系统配线(水平)子系统由楼层配线架(FD)至信息插座之间的线缆、信息插座(含转换点及配套设施)组成，它将偻层弱电竖井内配线架与每个宿舍室内的信息插座相连。
《网页设计与制作教程》实验指导书
《网页设计与制作教程》实验指导书班级姓名学号实验一网页基础知识一、实验目的理解网页组成元素。
理解主页、静态网页、动态网页等概念。
了解常见的网页布局。
熟悉Dreamweaver CS6的桌面结构。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容1．打开“九江学院”官网，并回答以下问题：（1）该网页上有哪些网页元素组成？（2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？（3）如果分页面中有图片，把图片下载到电脑中，如何操作？2．查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。
3．查找若干个与图1所示布局相似的网页并记录网址。
图1网页布局4．启动Dreamweaver CS6，并完成以下操作：（1）新建一个空白网页，并保存，存储名为myweb.html。
（2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。
（3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。
（4）给网页输入标题栏标题：我的第一张网页。
（5）在网页中输入一首唐诗，并完成简单排版。
（6）保存网页，并用浏览器预览。
四、实验思考1．动态网页与静态网页如何快速区分？2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。
实验二常见HTML标签与简单CSS的使用一、实验目的理解常见HTML标签在HTML文档中的作用。
掌握通过纯文本编辑器熟练编写简单HTML的技能。
掌握简单CSS的使用。
熟练掌握各种常用标签并利用其来实现网页的排版。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
《网页设计与制作基础》实验报告
课程 网页设计与制作基础 课程代码
---------------------------------------------装--------------------------------- --------- 订 -----------------------------------------线----------------------------------------
四、设计结果
一、历史悠久
4
5
6
二、文化
7
8
三、大好河山
9
四、英雄人物
10
五、总结
11
通过这次的实验，总体上回顾了一个学期来的所学所用，让我感觉到我没有白学。当 然在创作过程中，也遇到了不少困难，但后来都解决了。如： 1、搞不清楚模板的制作，一开始是用框架来做的，但是得到的模板只是一个小框架 里面的，根本不是我要的结果。后来我看了一下书，发觉书是用表格做的，所以，我也用表 格，最后做出来了。 2、搞不清楚样式的制作中的表格的定位。在那个样式中，一些文字在表格中被遮住 了，但不知道如何定位才能让全部内容都被看到。后来弄了很久，最终决定将样式的字号该 小，这样就可以看得到全部内容了。 3、做行为的时候一开始是急躁的。因为一开始用框架做，也就是用了 9 个框架，但 发现框架的大小很难把握，就改用表格。糟糕的是层是不可以复制粘贴的，所以要全部从头 来过， 因为工程量比较大， 所以真的有点不想做得那么复杂了。 可是， 后来还是坚持下来了。 看到自己的成果，心中喜悦之情油然而生。 4、视频总是出错。 不知道为什么， 跟着书上的步骤来也不行， 是了好几次， 只有 flash 格式的才行。所以，耐心地在网上找到了一个 flash 的视频。
网页设计与制作实验指导书
网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。
二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。
2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。
三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。
四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。
2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。
三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。
《网页设计与制作基础》实验指导书实验6
实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒模式和定位技术2、熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素；3、掌握模板的创建、编辑和应用。
实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆CSS盒模式和定位技术◆灵活利用层来实现网页元素的精确定位。
◆利用模板生成多个风格一致的网页。
实验内容1、在你的站点中创建文件夹：sy6。
在sy6文件夹下创建两个文件：index.html、和zzy.html。
并将给定的多媒体文件放入相应的文件夹中。
2、结合所学的CSS布局知识和实验操作说明中关于AP Div（层）的知识，利用Dreamweaver对index.htm进行设计编辑，效果如下图所示。
说明：1）红色显示的文字“中国四大名园”不是图片的一部分2）左下的各行文字为空超链接3、编辑网页文件“zzy.html”，效果如下图所示。
说明：1）“首页”链接index.html，“拙政园”链接zzy.html，其它为空链接。
4、a)根据网页文件“zzy.html”生成模板文件“zzy.dwt”。
文件存放Templates 文件夹下。
b)根据模板文件“zzy.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站点中的my.html的导航莱单内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。
实验操作说明使用CSS 对页面进行布局关于Dreamweaver 中的AP 元素AP 元素（绝对定位元素，层）是分配有绝对位置的HTML 页面元素，具体地说，就是div 标签或其它任何标签。
AP 元素可以包含文本、图像或其它任何可放置于HTML 文档正文中的内容。
AP 元素用于设计页面的布局。
《网页设计与制作》综合项目实训指导书
《网页设计与制作》综合实训指导书前言为了加强学生能力的培养，提高学生的实践操作技能，以适应社会、经济和科技的发展对职业人才的需求，向社会提供大批能够直接从事网站开发和技术服务的应用型操作人才。
特编写本指导书《网页设计与制作》是一门实践性很强的课程，网页设计与制作实训是学好网站开发、掌握网页制作基础知识的极为重要的环节，是培养学生动手能力的重要途径。
因此，加强网页设计与制作实验课程的教学具有十分重要的意义。
本指导书是在多年的教学实践经验的基础上，广泛听取了有关任课教师的意见，并结合我校网络专业实训设备的现状编写而成的。
编写中，精选实验项目与内容，力求简明扼要、通俗易懂、目的明确、原理简洁、步骤清晰、结论正确。
针对学生知识面及个人特长的不同，本指导书设计有选做内容，此部份内容主要为数据库开发及动态模块设计与程序编写等内容，以此拓展学生知识面与技能的全面性，学生可根据自身特点及时间来选择是否完成网站的动态开发部分。
本指导书适用于计算机网络三年制（或四年制、五年制）专业教学使用。
由于编者时间仓促，水平有限，对指导书中存在的缺点和错误，望大家给予指正，在此深表感谢！编者二零一一年五月十日目录实训课程概述 (4)项目一：设计与制作“博爱”助学网站。
(7)项目二：设计与制作“华医”中医健康网站。
(12)项目三：设计与制作世博会志愿者网站 (17)项目四：设计与制作传统节日网站 (22)项目五：设计与制作环保网站 (27)项目六：设计与制作音乐网站 (33)项目七：设计与制作台湾旅游网站 (38)项目八：设计与制作图书网站 (43)项目九：设计与制作军事新闻网站 (48)项目十：设计与制作科技公司网站 (53)项目十一：设计与制作健身俱乐部网站 (58)项目十二：设计与制作婚礼策划公司网站 (63)项目十三：设计与制作奶茶网站 (69)项目十四：设计与制作植物园网站 (75)项目十五：设计与制作快餐连锁店网站 (81)项目十六：设计与制作青年旅舍网站 (86)项目十七：设计与制作鞋业有限公司网站 (91)项目十八：设计与制作摄影公司网站 (96)项目十九：设计与制作中国杏仁网站 (102)项目二十：设计与制作李小龙截拳道网站 (108)实训课程概述项目一：设计与制作“博爱”助学网站。
《网页设计与制作实训》项目指导书
《网页设计与制作实训》指导书一、实训目的与要求网页设计与制作是实践性很强的课程，学生必须通过不断上机实习以及使用它来解决实际的问题，才能更好地掌握。
因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。
二、实训内容1.实例实训让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。
2.自建站点实训让学生自行选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。
3.总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。
三、实训材料准备1.软件准备Dreamweaver MX中文版/英文版、PhotoShop6.0以上版本、Fireworks MX以上版本、FlashMX2004 中文版。
2.硬件准备网络条件：与因特网连接的局域网。
教师用机：Windows2000 Server版。
学生用机：Windows2000 Professional版。
四、考核办法1.见《网页设计与制作实训》项目描述书目录实训一基本知识回顾 (1)实训二实训作品的站点规划 (4)实训三整体布局设计 (5)实训四搜集和创建资源 (8)实训五页面素材设计 (9)实训六样式设计 (10)实训七特效设计 (11)实训八首页模板设计 (12)实训九二级页面模板设计 (13)实训十各页面的细化、测试和上传作品 (14)实训十一总结 (16)附录一网站规划书书写格式 (17)附录二搭建本地站点 (19)附录三CUTEFTP使用说明 (22)实训一基本知识回顾一、实训目的和要求温习一学期的课程重点难点，使学生对一学期Dreamweaver MX 各方面的操作知识系统的由“片”的认识转向“面”的认识。
二、实训内容Dreamweaver MX的基本操作：站点、表格、图像、链接、框架等。
《网页设计与制作》综合实训指导书.doc
《网页设计与制作》综合实训指导书1.1实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。
因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。
1.2实训目的1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
1)掌握规划网站的内容结构、目录结构、链接结构的方法。
2)熟练掌握网页制作软件Dreamweaver CS4的基本操作和使用技能。
3)掌握页面的整体控制和头部内容设置的方法。
4)熟练掌握网页页面布局的各种方法。
5)熟练掌握在网页中输入、设置标题和正文文字的方法。
6)熟练掌握用Photoshop制作和处理网页的图片素材，用Flash制作动画的方法。
7)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
8)掌握建立各种形式超级链接的方法。
9)掌握表单网页制作方法。
10)掌握网页特效的制作方法。
11)掌握网站测试的方法。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。
1.3实训要求1．动手制作网页之前：1)必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
2)规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉HTML的结构、语法。
◆熟悉HTML基本标记的使用。
实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。
5、通过附录1的练习熟悉HTML基本标记的使用。
（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆文字的插入及设置。
◆图像的插入及设置。
◆各种超链接的创建。
实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。
3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
●标题文字大小用<h1></h1>标记；●作者信息文字大小为24像素，字体为幼圆，颜色为红色；●古诗文字大小为24像素，字体为隶书，颜色为蓝色；●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20个像素，颜色为棕色；4、在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。
●插入背景图片：Welcome-Popup-Background.gif●在古诗左下方插入作者的照片：司空曙.jpg5、在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。
●改“目录”下的列表符号类型为方框。
●给“【注释】”下的条目加数字编号●以标题为热点创建空超链接●以图片为热点创建空超链接●以“大历十才子”为热点创建空超链接6、在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件，以作实验三制作留言簿备用。
7、在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。
●以标题和图片为热点的超链接均指向/view/1121590.htm（使用绝对路径，在当前窗口中打开）。
●为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。
●在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。
●以“留言”为热点创建指向sy3-1.html的超链接。
（使用相对路径，在新窗口中打开）。
●以“邮件联系”为热点创建指向ggyx@的超链接。
实验三 Dreamweaver基本操作（二）实验目的1、熟练掌握在网页文件中多媒体对象的添加和设置；2、熟练掌握在网页文件中表格的添加和设置；3、熟练掌握在网页文件中表单的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆多媒体对象的添加和设置。
◆表单及表单对象的添加及设置。
◆利用表格来归整表单。
实验内容1、为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，要求循环播放，结果另存为sy3-2.html。
2、在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。
3、打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html，制作一个留言簿表单，效果如下图所示。
件中用表格来布局sy3-1.html网页文件中的留言簿，效果如下图所示。
实验四 CSS样式表实验目的1、了解CSS 的基本知识；2、熟悉“CSS样式”面板；3、掌握样式表的创建和应用。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆选择器的使用。
◆利用样式表对页面进行美化。
◆样式应用的优先级实验内容1、创建本地站点“CSS样式表”，在该站点下有若干网页文件：人生最美是淡然.html和淡然.html。
将网页文件淡然.html另存为sy4_1.html，将网页文件人生最美是淡然.html另存为sy4_2.html。
2、对网页文件sy4_1.html的标题“淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#666666，并对该标题采用Glow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。
3、在网页文件sy4_1.html中建立内部样式.ziti：字体为“仿宋_GB2312”，大小为24像素，颜色设置为#666699，粗体。
将该样式应用于sy4_1.html中表格上方的正文内容（不包括表格本身）。
4、在网页文件sy4_1.html中建立内部样式.bg：字体为“隶书”，大小为24像素，颜色设置为#993366，粗体，背景颜色为#CCCCCC，表格的上边框是颜色为#003399的双线，表格的下边框是颜色为#669999的实线，表格的左边框是颜色为#FF6666的虚线，表格的右边框是颜色为#999999的点划线，表格所有框线的宽度均为8像素。
将该样式应用于sy4_1.html中的表格部分。
5、在网页文件sy4_1.html中更改超链接的样式，其中a:link定义为：字体：幼圆，颜色：#669999，修饰：无（无下划线）；a:visited，字体：华文行楷，颜色：#660033，修饰：无；a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线；a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：删除线。
6、建立外部样式表wenzi.css：字体为“楷体_GB2312”，大小为18像素，颜色设置为#996600，粗体。
将该样式应用于sy4_1.html中表格下方的正文内容（不包括表格本身）。
7、在网页文件sy4_1.html中为“淡然的释义”部分加上方块列表符号，并给这部分内容设置为字体颜色为#993333，背景颜色为#999999。
8、使用内嵌样式使得第二段文字“淡然，常用义为淡泊……失意坦然”。
”实现首行缩进两个字符。
9、将外部样式表wenzi.css应用于网页文件sy4_2.html的正文部分。
对标题“人生最美是淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#CC3366，并对该标题采用Shadow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。
实验五 Dreamweaver网页布局设计（一）实验目的1、熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；2、熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆利用布局表格来规划网页的设计。
◆利用框架来来设计网页。
◆利用表格、框架这两种布局工具来共同布局网页。
实验内容1、建立一个名为“布局表格与框架”的本地站点并在该站点中新建一个名为sy5-1.html的网页文件，利用布局表格来布局表单。
效果如图所示。
2、在本地站点“布局表格与框架”中新建一个名为sy5-2.html的网页文件，利用布局表格来和表格配搭使用来布局网页。
效果如图所示。
3、利用框架集和框架来规划在本地站点“布局表格与框架”建立的首页文件index.html，为目录内容“主讲课程”、“请您留言”建立超链接，分别链接到网页文件sy5-2.html、sy5-1.html,此外为目录内容“和我联系”建立电子邮件链接。
实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒子模式和定位技术；2、熟悉层（AP Div）的基本操作并能利用层来定位页面元素；3、掌握模板的创建、编辑和应用。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆CSS盒模式和定位技术◆灵活利用层来实现网页元素的精确定位。
◆利用模板生成多个风格一致的网页。
实验内容1、在本地站点“基于CSS的网页布局设计”中创建文件夹sy6。
在sy6文件夹下创建两个文件：my.html和zzy.html。
并将给定的多媒体文件放入相应的文件夹中。
2、结合所学的CSS布局知识和AP Div（层）的知识，利用Dreamweaver对my.html进行设计编辑，效果如下图所示。
3、编辑网页文件“zzy.html”，效果如下图所示。
4、根据网页文件“拙政园.html”生成模板文件“my.dwt”。
文件存放于sy6文件夹下。
5、根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，本地站点的网页文件my.html中的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。
实验七行为和时间轴实验目的1、了解行为、事件和动作的含义以及认识行为面板，掌握行为的编辑方法以及具体应用；2、了解时间轴、帧和关键帧以及通道的含义，掌握利用时间轴制作动态效果的网页。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。