网页设计与制作实验指导书

网页设计与制作实验指导书齐鲁理工学院目录TOC\o"1-3"\h\z实验一站点与文档的创建 3实验二文本及其格式化 3实验三图像 4实验四超级链接 5实验五表格和页面布局 6实验六框架 8实验七层 9实验八模板与库 12实验九表单 13实验十行为 15实验十一多媒体组件的插入、使用代码设计网页与站点管理 20实验十二动态网站制作 22补充： 28ASP与SQLServer数据库相连 28实验一站点与文档的创建一、实验目的

熟悉DreamweaveMX环境，掌握站点的创建，学会制作页面的一般制作方法。二、实验内容1.DreamweaverMX2004简介，启动，界面认识；2．创建一个站点；3．创建和打开一个文档；4．网页的新建，保存，预览，关闭，打开；5．字体，标题级，颜色，效果设定。三、实验步骤1．在Dreamweaver中，创建站点；

2.新建网页；

3.设置文档的属性；四、实验要求按实验内容完成操作，完成实验报告，在实验报告中要求记录设计网页的全过程；

所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果。实验二文本及其格式化一、实验目的

通过本例要求掌握网页的一些基本常识，例如：文档的创建、打开与保存，标尺与网格的使用，捕捉与辅助设计图片的应用等。掌握设置文本格式的方法，如文本的断行与缩进、文本列表及格式化文本的方法。。要求掌握CSS样式面板的使用，插入样式表的方式、样式表的优先顺序、CSS的基本语法与功能，能够为HTML设置样式，熟悉CSS样式定义对话框的各项功能。并熟练使用CSS滤镜进行各种样式的设置。二、实验内容1.文档及其格式化，练习文本的输入及属性的设置；；2．创建文本列表；3．利用HTML格式化文本；4．层叠样式表；熟悉CSS样式面板；设置各种类型的CSS样式；熟悉CSS样式定义对话框中各项的含义；CSS基本样式设置；5．文本格式化；文本录入与编辑；6．网页的预览。【实例参考】1.制作如图所示的列表网页，要求一级标题有序列表，二级标题无序列表，样式如下图所示。实验三图像一、实验目的

1、通过本例要求掌握常见的图像格式及图像的插入方法。

2、能够修改图像属性，利用外部图像处理软件编辑图像。

3、创建图像映射，建立WEB相册。二、实验内容1．图像创建实例与应用技巧；2．设置图像的属性；3．使用图像地图；4．创建鼠标经过图像；5．创建WEB相册。【实例参考】1.制作一个“图片热点”效果网页。要求在自选图片上创建三个热点，分别连接到自拟的文字段中。并要求当鼠标悬停在相应热点上时，显示该区提示信息。实验四超级链接一、实验目的

1、掌握设置文本超级连接的方法；

2、掌握设置图片超级连接的方法；

3、掌握设置图片热点超级连接的方法；

二、实验内容超链接的基本概念和种类；创建超链接；文本和图片超链接的实现；锚点超链接的实现邮件超链接；创建跳转菜单和导航条；管理超级链接。设置超级链接的属性【实例参考】1.新建一个网页，在此网页中，创建到电子邮件地址yzsysl@163.com的超级链接。2.创建一个网页，在此网页中插入一幅图片，当鼠标移动到不同部位（至少两个部位）时，显示不同的提示信息，并且超级链接到不同网页中去。3.制作一个如图所示的锚点。4.要求网页中所示具有超级链接属性的文字起初不具有下划线，当鼠标悬念在上面时，字体变成红色，且具有下划线。5.整合以前做的各种网页，创建一个主页default.asp，将上述各网页链接起来。并且要求在此主页写上自己的真实班级、学号和姓名。实验五表格和页面布局一、实验目的

1、掌握表格的创建、结构调整与美化方法；

2、熟悉表格与单元格的主要属性及其设置方法；

3、掌握通过表格来进行网页页面的布局方法。二、实验内容表格创建及属性设置练习；插入表格，对表格进行各种操作；外部数据的导入；表格美化；创建复杂表格；绘制布局单元格和布局表格【实例参考】1．制作一个如图所示的表格。要求样式如下，并将各自单元格分别设置成不同颜色（颜色自拟）。2.创建一个如图所示“图文并茂”的效果，文字内容及图片自拟。实验六框架一、实验目的

1、掌握框架网页在创建、选择、设置、存储与应用方面的特点；

2、掌握框架结构网页的制作方法；

3、掌握iframe标记以及各个属性。二、实验内容框架的基本操作练习，创建框架和框架集，设置框架和框架集的各种属性。框架布局练习框架中的链接练习三、实验步骤1.设计制作演示中的框架网页；（文件——新建——框架网页）

2．设置边距、选项、滚动条、拆分框架在定义目标框架替换之前，给目标框架命名

链接到目标框；

3.进一步完善自己的网页，制作图、文、声并茂的页面，完成个人站点信息的制作

与测试。四、实验要求通过网络空间网站的设计,熟练掌握利用框架来组织布局网页内容,灵活运用目标框架来设计超级链接网页的目标位置.【实例参考】整合以前做的各种网页。要求创建一个框架主界面，样式如下图所示。要求主框架文件名为default.asp，网页标题为：网页制作考试网页，其余网页文件名自定。框架结构为上、左、右样式，并分别设置成不同背景颜色（颜色自拟）。顶层网页写上自己的真实班级、学号和姓名。在左边框架文件中点击相应目录项，在右侧框架中显示相应的内容。实验七层一、实验目的

通过本章的学习，应掌握层的基本操作方法如层的创建方法、层的各种编辑、层的相关属性设置及层与表格间的转换方式等。掌握移动、删除层的方法。初步将层与行为进行简单结合。二、实验内容创建并进行层的编辑层的相关属性设置练习层的基本操作和管理层与表格间的相互转换练习尝试层与行为的初步结合在页面布局中使用层和表格。【实例参考】1.创建如下的效果网页：当鼠标分别悬停在“我的童年”、“我的少年”、“我的青年”三个文本时，在图中央分别显示三种不同的图片，当鼠标移走时，相应图片消失。2.制作如下图所示的效果。要求当鼠标分别悬停在“春露”、“夏荷”、“秋叶”、“冬雪”四个文本时，在图中央分别显示四种不同的图片，当鼠标移走时，相应图片消失。制作一个下拉式菜单，界面如图所示。实验八模板与库一、实验目的

通过本例要求掌握库与模板的基础知识和应用：如何创建和设置库部件、为网页添加和编辑库部件。并掌握创建模板、设置模板的各项属性等内容。了解模板的固定区域与可编辑区域的区别和用途。了解更改模板或库元素对使用选定的模板或包含选定库元素的网页的影响。学会通过模板和库元素创建网页的方法二、实验内容1、熟悉资源面板

2、创建、设置库部件，练习为网页添加库部件

3、创建、设置、修改模板

4、套用模板创建文档，利用库部件更新网站【实例参考】设计一个如下图所示的模板，并将此模板应用于以前制作的一些网页。最后再设计一个主页default.asp，将上述所有的网页连接起来。实验九表单一、实验目的

学会使用Dreamweaver中应用表单设计网页的方法，全面掌握表单的创建、编辑、处理方法，以及各表单对象的功能、特点和用途（包括：复选框、下拉列表框、按钮）的特点与使用方法。二、实验内容练习表单及表单对象在网页中的插入表单对象的编辑练习表单元素正确性的验证创建脚本，表单的处理建立动态交互式表单示例验证表单创建ASP文件。【实例参考】创建一个如下图所示的客户留言表单。表单提交方式为GET。提交后交给abc.asp程序去处理。制作如下图所示的表单，并进行验证录入数据的正确性，要求姓名为任意字符，长度为4个汉字，E-mail符合电子邮件的格式，年龄在18－88之间。3.设置一个如图所示的网页，内容包括两组单选框，四组下拉列表框和一个命令按钮。实验十行为一、实验目的

了解行为、事件与动作的概念；学会利用行为面板设置控制对象的行为；会利用系统提供的主要行为，设置网页对象的行为从而实现交互式网页的设计；能够下载、安装并使用第三方行为。二、实验内容1．熟悉行为面板2．各种Dreamweaver内置行为练习，行为和事件的类型；4．弹出欢迎信息，跳转页面，播放声音，导航条的制作。5．基本行为制作的实例。6．应用行为技巧实例。翻滚图，动态图片说明。利用行为命令制作页面。页面播放声音，背景音乐。7．掌握时间轴的使用【实例参考】1.创建一个“交互图像”。要求当鼠标悬念在图像上时变换成另一幅图像，当鼠标单击时打开第三幅图像。2.制作如下图所示的跳转菜单，要求列表项至少有3项，并分别链接到不同的网页上去。3.制作一个网页，设置一个按钮，当鼠标点击它时，弹出一个消息框，如下图所示。4.作一个如下图所示的播放器，网页上要求具有“播放”、“停止”、“返回”按钮。5.制作如图所示的一个“九宫图”游戏。6.创建如图所示的导航条。7．制作一个自动跳转网页“test.htm”，当打开这个网页时，此网页自动打开另一个网页index.htm。8.利用层和时间轴制作一个如图所示的动画。实验十一多媒体组件的插入、使用代码设计网页与站点管理一、实验目的

掌握如何在Dreamweaver中插入Flash动画、Flash按钮、Flash文本、视频、声音以及插件。要求掌握通过站点管理器发布站点的方法与上传、下载与同步更新站点内容的方法。熟悉站点管理器的用途，学会利用站点地图查看、管理各网页之间的超链接关系。二、实验内容1．理解Dreamweaver与fireworks协同工作。2．理解Dreamweaver与flash协同工作。3．使用flash对象。为页面添加Flash动画，Shockwave动画，添加Flash文字，添加Flash按钮。4．查看代码，编写代码，利用代码设计页面。5．管理站点；6．站点地图；7．建立远程站点；8．使用存回和取出系统；9．远程站点文件的上传和获取，测试站点。【实例参考】1.插入如图所示的flash按钮，并链接到其它网页中去。2.制作一个如下图所示的flash文本和flash按钮。3.制作一个主页，此主页能够超级链接到各种网页中去，导出这个站点的站点地图，文件名为myweb.bmp。4.创建一个水平滚动条。5.制作一个垂直滚动的文本。6.新创建一个网页，将此网页的标题和关键字都设置为“来鹤台,个人网站,扬州职业大学”。实验十二动态网站制作一、实验目的学会配置web服务器，定义一个动态站点，创建一个Access数据库并进行配置，能够创建动态网页，并对其进行正确的运行，操纵数据库中的数据。二、实验内容1.配置web服务器，配置IIS，定义动态站点2.创建并配置一个Access数据库。3.创建动态网页；4．在动态网页上创建记录集，添加记录，显示记录。【实例参考】1.用Access创建一个数据库，在其中再创建一个数据库表，在此表中再输入一些记录。现要求制作如下图所示的通讯录系统，要求能显示数据库中的记录信息。在此Web页面中要求包括“记录集导航状态”和“记录集导航条”。2.制作如下一个通讯录，要求能动态的查询记录和添加记录。3.制作一个用户登录动态表单login.asp。(1)该表单的学号、用户名、密码分别如下所示：(2)登录界面login.asp如下图所示：(3)如登录成功，进入如下success.asp网页。(4)如登录不成功，则进入如下页面fail.asp。4.制作一个修改数据库中记录的一个动态表单record.asp。该数据库中的学号、用户名、密码分别如下所示：（1）显示数据库中的所有记录信息record.asp，要求包括记录集导航状态和记录集导航状态条。界面如下图所示。(2)制作上题中的插入信息的动态表单insert.asp。制作上题中的更新数据库表中信息的动态网页update.asp。制作上题中的删除信息的动态网页。

补充：ASP与SQLServer数据库相连实验目的：利用SQLServer的数据库和ASP技术相连实验内容：已知SQLServer2000数据库中有一个用户数据库Pubs，其中有一个表authors（字段名为au_id和au_lname），要求用ASP技术显示其中的所有记录。实验步骤：编制ASP程序法一：用DSN连接数据库法。设置DSN。步骤是：（1）“控制面板”－“管理工具”－“管理工具”－“ODBC”－“系统DSN”－“添加”－“SQLServer”－“完成”。（2）名称：Pubs，服务器：(local)或你所安装的SQLServer服务器名。（3）选中：“使用用户输入登录ID和密码的SQLServer验证”，选中：“连接SQLServer获得其它配置选项的默认设置”。（4）选中：更改默认的数据库为pubs。（5）测试数据源，直到“测试成功！”。（6）确定。用“记事本”或Dreamweaver编写ASP程序。文件名假设为list1.asp，其作用是显示数据库pubs中表authors的字段au_id和au_lname的内容。<%@language="VBScript"%><%SetObjConnection=Server.CreateObject("ADODB.Connection")ObjConnection.Open"DSN=pubs;uid=sa;pwd=123456;"SQLQuery="select*fromauthors"SetrsCustomerslist=ObjConnection.Execute(SQLQuery)%><%DoUntilrsCustomersList.EOF%><tableborder=1><tr><tdbgcolor="d7efde"align=centerwidth=120> <%=rsCustomerslist("au_id")%></td><tdbgcolor="f7efde"align=centerwidth=140><%=rscustomerslist("au_lname")%></td></tr></table><%rsCustomerslist.movenextloop%><%ObjConnection.close%>法二：用服务器名型连接数据库。用“记事本”或Dreamweaver编写ASP程序。文件名假设为list2.asp，其作用是显示数据库pubs中表authors的字段au_id和au_lname的内容。<%@language="VBScript"%><%SetObjConnection=Server.CreateObject("ADODB.Connection")ObjConnection.Open"driver={SQ