网页设计与制作.docx

1、网页设计与制作网页设计与制作 实验指导书实验一 创建站点实验目的:1. 熟练掌握 FrontPage 2000的启动与退出方法。2. 掌握站点的建立方法。3. 掌握简单网页的制作方法。4. 熟悉网页属性的设置与修改方法,并掌握超链接的建立方法。实验内容:1. 新建一个站点,并在该站点中增加一个网页。2. 完成网页文本的输入及网页属性的修改。3. 在建好的网页中插入适当的超链接。实验指导:1. 利用我的电脑建立新的文件夹,为保存所建站点及网页做好准备。2. 启动 FrontPage 2000,并熟悉其工作环境。3. 新建站点:两种方法a 利用工具栏中的新建按钮(从该按钮旁的下拉列表中选取站点项

2、。b 也可以利用文件菜单中的新建菜单项(选站点进行。:在打开的 Web 站点模板对话框中为新站点指定保存的位置(设定为 1中所建的 文件夹。4. 在建好的站点中增加一个新网页:类似于 2中的操作,选择网页即可。5. 完成网页文本的编辑。6. 进行网页属性的修改:两种方法a 普通视图下,在工作区中单击右键, 从弹出的快捷菜单中选取 网页属性 项进行 设置。b 也可在普通视图下,利用文件菜单中的属性菜单项进行设置。7. 超链接的建立:利用插入菜单中的超链接菜单项进行。8. 根据具体情况再自行设计几个网页。9. 保存网页文件。10. 退出 FrontPage 2000。思考题:1. 如何为 Fron

3、tPage 2000设置一个默认的浏览器?2. 保存网页时,应注意哪些问题?实验二 网页布局实验目的:1. 掌握网页标题的添加方法。2. 掌握网页文本的修饰方法及段落样式的使用。3. 了解网页定位的方法4. 学会利用列表来组织网页内容。实验内容:1. 添加标题2. 文本格式的设置及边框与阴影的应用3. 网页定位4. 利用列表组织网页内容5. 段落样式的设置实验指导:1. 启动 FrontPage 2000。2. 打开实验一中所建站点。3. 选择其中的一个网页4. 添加标题:两种方法, 都是利用 格式 菜单中的 样式 菜单项或格式工具栏中的 “样 式”下拉列表框进行设定。a 先选定标题样式,再输

4、入文本。b 选取要作为标题的文字,再进行设定。5. 修饰文本:掌握文本字体、 字号的设置方法, 学会运用文字效果, 掌握文本颜色的改变方法。 6. 边框与阴影的运用选定段落(或段落局部 ,再利用格式边框与阴影 ,在打开的对话框中进行设 置。7. 网页内容定位:了解定位网页内容的方法。8. 利用列表组织网页内容a 添加列表b 设置列表样式9. 可折叠列表的制作a 利用 6中所建列表,进行样式设定b 设置嵌套列表c 选中“启用折叠大纲”复选框。10. 改变段落样式11. 保存所做修改12. 退出 FrontPage 2000。思考题:1. 怎样在网页中创建嵌套式列表?2. 在 FrontPage

5、2000中提供了几级标题,如何进行设定?实验三 网页修饰设计实验目的:1. 掌握插入特殊符号、水平线、注释及时间的方法。2. 掌握图片的插入及图像的处理方法。3. 学会为网页添加背景的方法。实验内容:1. 插入特殊符号2. 图像的插入与处理3. 图像效果及外观的修改4. 水平线、时间及时间及注释信息的插入与设置5. 修改段落样式6. 背景的设置实验指导:1. 启动 FrontPage 2000,打开所建站点。2. 打开所建的一个网页。3. 特殊符号的插入:插入菜单符号菜单项,在打开的对话框中进行选择插入。4. 图像的添加:不同来源的图像的插入。a 当前站点中的图片。b 本地计算机中的图片。c

6、Web 上的图片。5. 图像处理及图片的保存。6. 图像特殊效果的运用7. 图像外观的修改8. 水平线的插入及属性设置:在网页中插入几条水平线, 并分别设置为不同的宽度和颜色。9. 时间及注释信息的插入:在网页的适当位置进行插入, 并将时间设置为不同的显示格式。 10. 段落格式的划分11. 背景的设置及修改:将一幅已经过冲浊处理的图片作为网页背景。12. 保存所做修改。13. 退出 FrontPage 2000。思考题:1. 简述在网页设计过程中保存图像文件的特点。2. 简述水平线在网页设计中的作用及插入方法,实验四 超链接的创建及设定 实验目的:1. 熟练掌握超链接的创建及其属性设置方法2

7、. 掌握图像地图的使用3. 掌握导航栏的使用方法4. 学会共享边框的创建方法实验内容:1. 与各种不同来源内容进行超链接2. 链接颜色的设定3. 超链接的取消4. 图像地图的创建5. 导航栏的创建与属性设置6. 共享边框的创建实验指导:1. 启动 FrontPage 2000,打开所建站点。2. 启动其中一个网页。3. 创建超链接a 与当前站点中的其他网页的链接b 与空白网页的链接c 与 E_mail的链接d 与 WWW 上任意一个 Web 页面的链接e 在同一网页中使用书签进行超链接的创建4. 对超链接的颜色进行修改:学会以不同的颜色表示不同种类的超链接。5. 超链接的取消。6. 新建一个网

8、页,插入一幅地图图片。7. 图像地图的使用:a 设置不同形状的热点区域。b 热点链接的创建。c 在地图中插入文字及创建文本热点(超链接的方法。d 为图像设置默认热点。8. 导航栏的使用a 导航结构的定义b 导航栏属性的设置c 导航栏的创建9. 在网页中创建共享边框。 10. 保存所做修改。11. 退出 FrontPage 2000。 思考题:1. 谈谈你对超链接的认识。2. 简述导航栏的作用。3. 简述共享边框的作用。实验五 在网页中运用表格实验目的1. 熟练掌握在网页中插入及填充表格的方法。2. 掌握设置表格属性的方法。实验内容1. 用不同的方法在网页中插入表格。2. 填充表格内容3. 单元

9、格的拆分与合并操作4. 表格属性的设置实验指导1. 启动 FrontPage 2000,打开所建站点。2. 新建一个网页。3. 用不同的方法在网页中插入几个表格a 用菜单项:表格插入b 用常用工具按钮。c 使用表格工具栏。d 由文本转换表格。4. 对单元格进行操作:单元格的插入、拆分与合并。5. 在网页中对表格进行填充操作:制作一个通讯录表,要求表格内容包括班级、学号、姓 名、性别、出生年月、电话号码、照片(图片信息 、家庭通信住址及邮编。6. 对表格中的某个局部进行背景图片的插入。7. 保存所做修改。8. 退出 FrontPage 2000。思考题:1. 如何进行表格属性的查看与设置,可包含

10、哪些方面的内容?2. 单元格属性设置包含哪些方面的内容?实验六 表单设计(分 2到 3次完成实验目的1. 熟练掌握进行表单网页设计的方法。2. 学会对各种表单域进行属性设置。3. 掌握表单提交结果的几种处理方法。4. 学会对各种表单域进行字段验证的方法。实验内容:1. 利用表单向导生成表单。2. 手工修正所生成的表单。3. 为表单设计处理程序,进行各种不同的处理。实验指导1. 启动 FrontPage 2000,打开所建站点。2. 新建一个网页。3. 利用表单向导生成一张表单(要求用到各种表单域 。4. 对所生成的表单进行手工修改, 并对各个表单域进行适当的属性设置 (包括必须的字段 验证设置

11、 。5. 为上述表单设计一个表单处理程序,要求:a 将结果保存到当前站点中的 .dataformresu.txt文件中。b 将结果以邮件的方式发送到某个信箱中。c 将结果保存到数据库中。6. 在表单网页中根据内容需要插入适当的水平线,并进行适当的文字说明。7. 保存所做修改。8. 退出 FrontPage 2000。思考题1. 简述表单的作用。2. 对表单处理程序的各种方法进行比较,简要说明它们各自的异同之处。实验七 框架网页实验目的1. 通过实验,进一步加深对框架概念的理解。2. 掌握框架网页的设计、保存及打开方法。3. 学会对框架网页进行属性设置。实验内容:1. 创建框架网页。2. 保存、

12、打开框架网页,并会对其中的任一网页进行编辑修改。3. 设置框架网页属性。实验指导1. 启动 FrontPage 2000,打开所建站点。2. 创建一个框架网页(自选一种模板,并为新建的框架网页中的每一个框架设置初始网 页 。3. 保存所建的框架网页,保存时,应注意以下几点:a 若某个框架窗口中的网页是新建的,则应首先保存框架窗口中的网页。b 区分保存区域的范围显示(是整个框架网页,还是其中的每个部分 。c 保存时的参数设定:如网页标题的更改、 保存位置的选定、 保存类型的选定及文件 名的指定。d 框架中网页的保存:利用菜单框架保存网页 (或另存新网页 进行。4. 打开所保存的框架网页。5. 学

13、会对框架中的某个网页进行编辑:框架 在新窗口中打开网页 (或在快捷菜单 中选取此命令 。6. 对框架网页的属性进行设置。7. 进行框架布局的调整,直至能满足所建网页的要求为止。8. 对框架网页的有关视图进行显示切换,观察其中的不同之处。9. 目标框架的设定。10. 保存所做修改。11. 退出 FrontPage 2000。思考题1. 简述框架网页的应用场合。2. 创建框架网页时应注意些什么?实验八 实验目的 1. 2. 3. 数据库的连接 掌握创建 ODBC 数据文件的方法 学会在网页中建立数据库连接并显示数据库网页的方法。 了解编辑数据库信息的方法，并对调整数据库信息的方法。 实验内容 1.

14、 2. 创建 ODBC 数据文件。 建立数据库连接，并显示于网页中。 实验指导 1. 创建 ODBC 数据文件 a 创建 Microsoft Access 2000 数据库的连接。 b 创建 SQL Server2000 数据库的连接。 启动 FrontPage 2000。 建立数据库的连接： 插入数据库结果 。 数据库网页的显示 a 将网页以.asp 扩展名进行保存。 b 在浏览器中进行浏览。 编辑数据库信息。 a 字段的插入。 b 数据库信息的调整。 保存所做修改。 退出 FrontPage 2000。 2. 3. 4. 5. 6. 7. 思考题 1. 2. 显示数据库网页时，需注意些什么

15、？ 画出访问数据库的流程。 11 实验九 实验目的 1. 高级网页设计技术 初步掌握在网页插入 HTML、音频、ActiveX 控件及视频嵌入的方法。 实验内容 1. 2. 3. 4. 插入 HTML 代码。 嵌入视频。 插入音频。 ActiveX 控件的插入及其属性设置。 实验指导 1. 2. 3. 4. 5. 6. 7. 8. 启动 FrontPage 2000。 新建一个网页。 在网页中插入一段 HTML 代码（内容为文字段落、表格、超链接等） 。 嵌入视频。 插入音频。 插入 ActiveX 控件并对其属性进行设置。 保存所建网页。 退出 FrontPage 2000。 思考题 1. 2. 简述脚本程序在网页设计中的作用。 ActiveX 控件有那些属性？如何进行设置？ 12