网页设计与制作.docx

网页设计与制作.docx

《网页设计与制作.docx》由会员分享，可在线阅读，更多相关《网页设计与制作.docx（11页珍藏版）》请在冰豆网上搜索。

网页设计与制作

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

实验一创建站点

实验目的:

1.熟练掌握FrontPage2000的启动与退出方法。

2.掌握站点的建立方法。

3.掌握简单网页的制作方法。

4.熟悉网页属性的设置与修改方法,并掌握超链接的建立方法。

实验内容:

1.新建一个站点,并在该站点中增加一个网页。

2.完成网页文本的输入及网页属性的修改。

3.在建好的网页中插入适当的超链接。

实验指导:

1.利用我的电脑建立新的文件夹,为保存所建站点及网页做好准备。

2.启动FrontPage2000,并熟悉其工作环境。

3.新建站点:

两种方法

a利用工具栏中的新建按钮（从该按钮旁的下拉列表中选取站点项。

b也可以利用〖文件〗菜单中的〖新建〗菜单项（选站点进行。

<要求>:

在打开的Web站点模板对话框中为新站点指定保存的位置（设定为1中所建的文件夹。

4.在建好的站点中增加一个新网页:

类似于2中的操作,选择网页即可。

5.完成网页文本的编辑。

6.进行网页属性的修改:

两种方法

a普通视图下,在工作区中单击右键,从弹出的快捷菜单中选取〖网页属性〗项进行设置。

b也可在普通视图下,利用〖文件〗菜单中的〖属性〗菜单项进行设置。

7.超链接的建立:

利用〖插入〗菜单中的〖超链接〗菜单项进行。

8.根据具体情况再自行设计几个网页。

9.保存网页文件。

10.退出FrontPage2000。

思考题:

1.如何为FrontPage2000设置一个默认的浏览器?

2.保存网页时,应注意哪些问题?

实验二网页布局

实验目的:

1.掌握网页标题的添加方法。

2.掌握网页文本的修饰方法及段落样式的使用。

3.了解网页定位的方法

4.学会利用列表来组织网页内容。

实验内容:

1.添加标题

2.文本格式的设置及边框与阴影的应用

3.网页定位

4.利用列表组织网页内容

5.段落样式的设置

实验指导:

1.启动FrontPage2000。

2.打开实验一中所建站点。

3.选择其中的一个网页

4.添加标题:

两种方法,都是利用〖格式〗菜单中的〖样式〗菜单项或格式工具栏中的“样式”下拉列表框进行设定。

a先选定标题样式,再输入文本。

b选取要作为标题的文字,再进行设定。

5.修饰文本

<要求>:

掌握文本字体、字号的设置方法,学会运用文字效果,掌握文本颜色的改变方法。

6.边框与阴影的运用

选定段落（或段落局部,再利用〖格式〗→〖边框与阴影〗,在打开的对话框中进行设置。

7.网页内容定位:

了解定位网页内容的方法。

8.利用列表组织网页内容

a添加列表

b设置列表样式

9.可折叠列表的制作

a利用6中所建列表,进行样式设定

b设置嵌套列表

c选中“启用折叠大纲”复选框。

10.改变段落样式

11.保存所做修改

12.退出FrontPage2000。

思考题:

1.怎样在网页中创建嵌套式列表?

2.在FrontPage2000中提供了几级标题,如何进行设定?

实验三网页修饰设计

实验目的:

1.掌握插入特殊符号、水平线、注释及时间的方法。

2.掌握图片的插入及图像的处理方法。

3.学会为网页添加背景的方法。

实验内容:

1.插入特殊符号

2.图像的插入与处理

3.图像效果及外观的修改

4.水平线、时间及时间及注释信息的插入与设置

5.修改段落样式

6.背景的设置

实验指导:

1.启动FrontPage2000,打开所建站点。

2.打开所建的一个网页。

3.特殊符号的插入:

〖插入〗菜单→〖符号〗菜单项,在打开的对话框中进行选择插入。

4.图像的添加:

不同来源的图像的插入。

a当前站点中的图片。

b本地计算机中的图片。

cWeb上的图片。

5.图像处理及图片的保存。

6.图像特殊效果的运用

7.图像外观的修改

8.水平线的插入及属性设置:

在网页中插入几条水平线,并分别设置为不同的宽度和颜色。

9.时间及注释信息的插入:

在网页的适当位置进行插入,并将时间设置为不同的显示格式。

10.段落格式的划分

11.背景的设置及修改:

将一幅已经过冲浊处理的图片作为网页背景。

12.保存所做修改。

13.退出FrontPage2000。

思考题:

1.简述在网页设计过程中保存图像文件的特点。

2.简述水平线在网页设计中的作用及插入方法,

实验四超链接的创建及设定实验目的:

1.熟练掌握超链接的创建及其属性设置方法

2.掌握图像地图的使用

3.掌握导航栏的使用方法

4.学会共享边框的创建方法

实验内容:

1.与各种不同来源内容进行超链接

2.链接颜色的设定

3.超链接的取消

4.图像地图的创建

5.导航栏的创建与属性设置

6.共享边框的创建

实验指导:

1.启动FrontPage2000,打开所建站点。

2.启动其中一个网页。

3.创建超链接

a与当前站点中的其他网页的链接

b与空白网页的链接

c与E_mail的链接

d与WWW上任意一个Web页面的链接

e在同一网页中使用书签进行超链接的创建

4.对超链接的颜色进行修改:

学会以不同的颜色表示不同种类的超链接。

5.超链接的取消。

6.新建一个网页,插入一幅地图图片。

7.图像地图的使用:

a设置不同形状的热点区域。

b热点链接的创建。

c在地图中插入文字及创建文本热点（超链接的方法。

d为图像设置默认热点。

8.导航栏的使用

a导航结构的定义

b导航栏属性的设置

c导航栏的创建

9.在网页中创建共享边框。

10.保存所做修改。

11.退出FrontPage2000。

思考题:

1.谈谈你对超链接的认识。

2.简述导航栏的作用。

3.简述共享边框的作用。

实验五在网页中运用表格

实验目的

1.熟练掌握在网页中插入及填充表格的方法。

2.掌握设置表格属性的方法。

实验内容

1.用不同的方法在网页中插入表格。

2.填充表格内容

3.单元格的拆分与合并操作

4.表格属性的设置

实验指导

1.启动FrontPage2000,打开所建站点。

2.新建一个网页。

3.用不同的方法在网页中插入几个表格

a用菜单项:

〖表格〗→〖插入〗

b用常用工具按钮。

c使用表格工具栏。

d由文本转换表格。

4.对单元格进行操作:

单元格的插入、拆分与合并。

5.在网页中对表格进行填充操作:

制作一个通讯录表,要求表格内容包括班级、学号、姓名、性别、出生年月、电话号码、照片（图片信息、家庭通信住址及邮编。

6.对表格中的某个局部进行背景图片的插入。

7.保存所做修改。

8.退出FrontPage2000。

思考题:

1.如何进行表格属性的查看与设置,可包含哪些方面的内容?

2.单元格属性设置包含哪些方面的内容?

实验六表单设计（分2到3次完成

实验目的

1.熟练掌握进行表单网页设计的方法。

2.学会对各种表单域进行属性设置。

3.掌握表单提交结果的几种处理方法。

4.学会对各种表单域进行字段验证的方法。

实验内容:

1.利用表单向导生成表单。

2.手工修正所生成的表单。

3.为表单设计处理程序,进行各种不同的处理。

实验指导

1.启动FrontPage2000,打开所建站点。

2.新建一个网页。

3.利用表单向导生成一张表单（要求用到各种表单域。

4.对所生成的表单进行手工修改,并对各个表单域进行适当的属性设置（包括必须的字段验证设置。

5.为上述表单设计一个表单处理程序,要求:

a将结果保存到当前站点中的..\data\formresu.txt文件中。

b将结果以邮件的方式发送到某个信箱中。

c将结果保存到数据库中。

6.在表单网页中根据内容需要插入适当的水平线,并进行适当的文字说明。

7.保存所做修改。

8.退出FrontPage2000。

思考题

1.简述表单的作用。

2.对表单处理程序的各种方法进行比较,简要说明它们各自的异同之处。

实验七框架网页

实验目的

1.通过实验,进一步加深对框架概念的理解。

2.掌握框架网页的设计、保存及打开方法。

3.学会对框架网页进行属性设置。

实验内容:

1.创建框架网页。

2.保存、打开框架网页,并会对其中的任一网页进行编辑修改。

3.设置框架网页属性。

实验指导

1.启动FrontPage2000,打开所建站点。

2.创建一个框架网页（自选一种模板,并为新建的框架网页中的每一个框架设置初始网页。

3.保存所建的框架网页,保存时,应注意以下几点:

a若某个框架窗口中的网页是新建的,则应首先保存框架窗口中的网页。

b区分保存区域的范围显示（是整个框架网页,还是其中的每个部分。

c保存时的参数设定:

如网页标题的更改、保存位置的选定、保存类型的选定及文件名的指定。

d框架中网页的保存:

利用菜单〖框架〗→〖保存网页〗（或〖另存新网页〗进行。

4.打开所保存的框架网页。

5.学会对框架中的某个网页进行编辑:

〖框架〗→〖在新窗口中打开网页〗（或在快捷菜单中选取此命令。

6.对框架网页的属性进行设置。

7.进行框架布局的调整,直至能满足所建网页的要求为止。

8.对框架网页的有关视图进行显示切换,观察其中的不同之处。

9.目标框架的设定。

10.保存所做修改。

11.退出FrontPage2000。

思考题

1.简述框架网页的应用场合。

2.创建框架网页时应注意些什么?

实验八实验目的1.2.3.数据库的连接掌握创建ODBC数据文件的方法学会在网页中建立数据库连接并显示数据库网页的方法。

了解编辑数据库信息的方法，并对调整数据库信息的方法。

实验内容1.2.创建ODBC数据文件。

建立数据库连接，并显示于网页中。

实验指导1.创建ODBC数据文件a创建MicrosoftAccess2000数据库的连接。

b创建SQLServer2000数据库的连接。

启动FrontPage2000。

建立数据库的连接：

〖插入〗→〖数据库〗→〖结果〗。

数据库网页的显示a将网页以.asp扩展名进行保存。

b在浏览器中进行浏览。

编辑数据库信息。

a字段的插入。

b数据库信息的调整。

保存所做修改。

退出FrontPage2000。

2.3.4.5.6.7.思考题1.2.显示数据库网页时，需注意些什么？

画出访问数据库的流程。

11

实验九实验目的1.高级网页设计技术初步掌握在网页插入HTML、音频、ActiveX控件及视频嵌入的方法。

实验内容1.2.3.4.插入HTML代码。

嵌入视频。

插入音频。

ActiveX控件的插入及其属性设置。

实验指导1.2.3.4.5.6.7.8.启动FrontPage2000。

新建一个网页。

在网页中插入一段HTML代码（内容为文字段落、表格、超链接等）。

嵌入视频。

插入音频。

插入ActiveX控件并对其属性进行设置。

保存所建网页。

退出FrontPage2000。

思考题1.2.简述脚本程序在网页设计中的作用。

ActiveX控件有那些属性？

如何进行设置？

12