网页设计-实验.doc

1、1目 录实验一 网页制作基础知识 1实验二 简单网页制作 4实验三 网页美化 12实验四 网站建设基本规划与综合网站实例 19实验五 项目化网站 综合建设 2121实验一 网页制作基础知识 实验目的：熟悉 Dreamweaver 操作环境；在 Dreamweaver 中建立站点；对站点进行编辑、删除等管理操作；掌握简单网页设计过程，并进行页面设置等；学习表格的简单应用，并应用表格完成简单的网页布局。（注意：实验内容中打“*”为选做部分，供有网页制作基础同学测验） 实验内容： 1、 在学生盘新建一个文件夹，命名规则：学号的末尾 2 位姓名，例如“01 张三” ，试验中完成的文件均放在该文件夹中；

2、2、 打开“记事本”应用程序，新建简单 HTML 文件“first.htm” ，如下图 1-1 所示，注意基本标记的使用，扩展名采用“htm” ，双击该文件，直接运行，查看结果。3、 *试在“first.htm”中添加 javascript 效果，代码可以在所给的“JavaScript.txt”文件中复制。图 1-1 最简单网页4、 *使用文本编辑器，建立“学号+姓名.HTM”文件，利用 HTML 代码完成图 1-2 所示2的网页设计。要求如下：（1） 网页标题为“张三的第一个 HTML 网页”；（title）（2） 网页背景颜色为“黄色（yellow） ”，文本颜色为“blue”（body）

3、 ；（3） 其它要求见图中详细说明。另外，尝试添加背景图片（注意图片文件的路径） 。图 1-2 使用文本编辑器设计网页5、 在自己的文件夹中，例如“01 张三”中新建“web01”文件夹，其中“01”为自己真实学号，作为站点文件夹；6、 运行 Dreamweaver CS5，在 Dreamweaver 中建立站点，方法如下：站点- 新建站点- 输入自己站点名称，选择“web01” 作为本地站点文件夹，如下图1-3 所示。标题 3 设置为居中水平线：红色，靠左，大小为5pt，宽度为 50% 没有阴影正文黑体红色，大小20pt有序号条列标记无序号条列标记：隶书，大小为 5，红色，符号为圆圈（cir

4、cle）表格线宽为 5，边框颜色蓝色，背景为白色3图 1-3 站点的建立7、 使用 Dreamweaver 完成下图 1-4 所示网页设计，文件为“网页 1 .htm”；使用记事本设计相同的网页，文件为“网页 2 .htm”，并比较两者的异同。 （注意网页标题与图片插入）图 1-4 插入图片8、 下载“素材 1.rar”，解压缩到自己站点文件夹中，利用给定的图片等素材，使用Dreamweaver 设计如下图 1-5 所示的网页（尽量一模一样，注意表格布局中各个属性设置，分 11 列，每列宽度为 82，最后一列为 80） 。图 1-5 企业主页设计 思考题：1、 Web 标准中，网页的组成分为结

5、构、表现、行为三种成分，试用 HTML 标记实例，举例说明这三种成分。2、 如何在 Dreamweaver 中建立站点？3、 如何使各个标记的属性自动弹出？4、 使用表格布局，如何不显示表格单元格边框线？45、 HTML 标记中，多数标记需要成对出现，例如 ，但是也有不需要成对出现的，例如 ，请列举其他不需要成对出现的标记，并说明它们的作用。5实验二 简单网页制作 实验目的：学习 HTML 文档基本结构，学习 HTML 基本语法，掌握主要网页元素的相应标签，掌握应用 HTML 代码进行网页的编辑；使用 Dreamweaver 工具，进行文本的输入与属性设置，掌握创建链接的方法，掌握图像的插入及

6、属性设置；进一步掌握表格的应用，掌握表单及表单对象的使用。 实验内容：1、 建立“学号+姓名.HTML”文件，利用 HTML 代码完成图 2-1 所示的网页设计。要求如下：（1） 网页标题为“张三的 HTML 网页” ；（2） 进行页面设置：背景偏绿色，文本为蓝色，左边距 50px；（3） 使用 HTML 代码完成下图 2-1 页面设计，主要包括列表、文本字体、标题、特殊字符等，详见图中要求。标题 2，靠右页面设置：背景偏绿色，文本为蓝色，左边距50px 标题 1，居中水平线：红色，靠左，大小为5pt，宽度为 50% 没有阴影6图 2-1 HTML 标记的使用2、 利用已有的素材，设计如图 2

7、-2 所示的网页，文件名“学号+姓名+满屋花.html ”。基本要求如下：（1） 页面背景淡粉色；（2） 整体采用表格布局， “用户登录”与“鲜花分类”模块使用内嵌表格布局；（3） 网页标题为“张三的鲜花坊” ，其中张三为自己的真实姓名。7图 2-2 满屋花表格布局3、 *对网页添加动态效果（上下滚动文本，左右滚动图片等） ，例如“清华大学”滚动文本参考代码如下，试调整滚动方向、速度等。王大中院士热情寄语天津考生我校参加今晚报组织的天津招生电话咨询清华园中最美的风景线4、 利用已有的素材，设计如图 2-3 所示的“Baidu 搜索”主页或者如图 2-4 所示的“Google 搜索”主页。请修改

8、网页标题为“姓名+的百度”或“姓名+的谷歌”此处使用图像（Button1.jpg）填充8图 2-3 百度、谷歌网页5、 使用 Dreamweaver 新建 formtest.html 文件，设计如下图 2-4 表单网页，代码见图 2-5。9图 2-4 表单的设计图 2-5 表单代码6、 参考上述代码，使用 HTML 代码编写完成如下图 2-6 表单（请尽量不要使用 DW 的可视化编辑） ，文件名为 myform1.html，表单的 ACTION 设为空，提交方法为 POST。问 1：如果把表单的 ACTION 设为自己的文件名 myform1.html，结果如何？问 2：把表单的 ACTION

9、 设为其他文件名，例如 regist.asp，结果又如何？图 2-6 表单107、 *表单设计综合练习：设计如图 2-7 所示“126 免费邮箱申请页面” 。注意表格布局，可以设计为 4 行 3 列，表格整体居中，背景为淡蓝色；网页页面背景为白色，整体文本设置为 14px，其他见图。图 2-7 126 免费邮箱注册页面8、 HTML 网页设计综合练习：（1） 8848 网页设计（基础题）新建站点（如 web00） ，将素材文件复制到站点中，完成下图网页设计。使用表格（ 4行 2 列）进行整体布局，使用常见的 HTML 标记，设计下图 2-8 所示的网页，注意表单的action 提交文件。详细要

10、求见图中标注。 表单的字段集11图 2-8 8848 网页 导航条使用图片背景（bg.gif）填充，插入 LOGO 图像，位置靠左； 此处使用表单，点击提交按钮后，打开用户注册信息网页文件（前面第 6 小题完成的文件） ； 插入 flash； 另一个表单，只求形似，功能不限； 内嵌表格布局，3 行 5 列，边线为红色。（2） *合创网页（提高题）根据给定的素材，使用表格进行（嵌套）布局，并实现表单的提交（登录后打开用户注册信息网页文件，即前面第 6 小题完成的文件）插入 FLASH 文件，并且至少包含有以下效果之一的网页动态效果： 文本或图片滚动效果 影片播放效果 表单数据验证如图 2-9 所

11、示。图 2-9 合创主页（3） *个人博客网页（挑战题）参考 Internet 网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布此处为表单，点击登录提交到本网页导航条背景为图像index_11.gif插入图片，链接到视频文件各条新闻动态超链接到其他网页产品公告为滚动（从下到上）播出从右到左滚动图像12局，插入图像，flash 或者影片播放，插入超级链接，例如点击“关于我” ，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。图 2-10 个人博客网页 思考题：1、 如何在设置整个网页的效果，例如网页背景，网页整体字体大小等？2、 HTML 标记中中最常用的属性有哪

12、些？3、 表单的英文名称是什么？表单中的 action 有什么作用？4、 最常用的表单输入标记是什么？共有几种类型？如何设置其中文本框的长度与高度？5、 *至此，你看到或学习了哪些网页动态特效？ 课外题：13完成 19LOU 秋季房交会（部分）页面设计。图 2-11 房展网页14实验三 网页美化 实验目的：掌握 CSS 的基本语法，了解 CSS 布局与 Table 布局的区别；使用 CSS 设计背景、文字、图片、链接、表单、表格和滤镜效果；掌握 CSS 定位与 DIV 标记；了解 CSS+DIV 的布局方法；掌握时间轴的应用，进一步理解 HTML 代码，了解简单的脚本语言，学会应用脚本实现部分

13、网页特效，充分利用各种工具进行网页美化。 实验内容：从 ftp 下载文本与图片素材，完成以下 CSS 样式设置：1、 基本练习：参考教材 P164，完成 CSS 样式的基本设置，了解代码的基本意义。图 3-12、 基本应用：新建 HTML 文件，完成 “互联网发展的起源”的 CSS 设置，样式主要代码如下：图 3-215图 3-3设置要求如下：（1） 所有格式全部采用 CSS 样式；（2） 背景图像与背景颜色设置：自行设计渐变的图形文件命名为“bg1.jpg” ，使用X 方向填充，并且填充网页背景；（3） 设置 imgCSS 样式：边距（margin）为 20px，留白(padding)15p

14、x ，边框线 3 px；（4） 设置 zcz（祖冲之）段落的格式：p.zcz；（5） 设置 zcz（祖冲之）段落中图片的 ID: #idzcz；（6） 其他见图中效果，另外未指定部分请自行设置其格式。（7） 改写上述 HTML 文件，采用 “链接式”方法进行 CSS 设置。3、 实际应用：新建 HTML 文件，完成 “太阳系”CSS 样式设置，如下图 3-4：16图 3-4（见所给素材中的效果图 1、效果图 2、效果图 3）代码如下：图 3-54、 完成以下固定网页背景位置，并使用 CSS 样式对表格进行美化（教材 P235-238） 。17图 3-7其中，CSS 设置代码如下：图 3-8 图

15、 3-95、 CSS 设置超链接与导航菜单根据教材 P223-225 给定的代码，完成如图 3-9 菜单设计，并把它改为能够横竖自由转换的菜单，参考代码如下图 3-10。18图 3-10（加分题：试将第 4、5 小题内容合并在一张网页中，其 CSS 样式采用“链接式” ）6、 使用 div 进行网页布局：代码如下：body 背景浅绿色container 背景：蓝色图像 填充：repeat-yBanner（插入图片后）Content，背景图像在右下方Links 无序项目列表，固定宽度，不换行。请修改颜色与上边margin 值。leftbar 宽度与container 背景长度正好相同 foote

16、r 使用clear：both197、 利用所给的文本素材，完成教材中相同的个人网页，如下图所示。8、 图像特效练习（1） 热点区域链接：在给定的“植物大战僵尸”图片中，添加三种不同图形（多边形、矩形、圆）的热点区域，并分别连接到（空） 、上述“个人文集”网页、机电学院主页（） ；20（2） 滚动字幕、滚动图片：使用标记“marquee”制作滚动字幕（或者滚动图片）（3） 图片交替：寻找一张个人喜欢的彩色图像，将其制作为黑白图像；使用Dreamweaver 中的交换图像功能，进行鼠标在上为彩色，鼠标移开为黑白的图片交替显示设置。9、 Dreamweaver 中层的使用与行为练习请完成鼠标移动到某

17、个位置出现提示或图片，方法步骤如下：1）插入图层 1（AP div） ，在该图层中添加文字或图片；2）插入图层 2（需命名，如 layer2） ，添加要显示的文字或图像内容；3）将图层 2（layer2）的 visibility 属性设置为 hidden；4）为图层 1 设置行为：onMouseOut() - 设置图层 2（layer2 ） “隐藏” ；5）为图层 1 设置行为：onMouseOver() - 设置图层 2（layer2） “显示”；6）测试结果，并查看其代码。10、搜集素材，选定主题，设计自己的个人网页，要求如下：（1） 使用 CSS+DIV 布局（主体部分 “左窄右宽” 、

18、 “左宽右窄” 、 “左中右”布局任选其一） ；（2） 应该有容器、标题栏、导航栏、内容栏、版权栏等；（3） 尽可能多样化地使用 CSS 样式（类、标签、ID、复合内容选择器） 、网页特效（图像热区链接、图片交换、点击按钮行为、层的使用、滚动字幕等）（4） 布局合理，色调清新自然，整体风格协调一致。（5） 评分标准：布局、色调、CSS 样式复杂度、网页特效、其他个人特色等（班级评奖并巡回展示，每班名额 35 人） 思考题：1、 CSS 设置的标记名称是什么？2、 基本选择器有哪三种？3、 复合的选择器有哪几种情况？请逐一举例说明。4、 使用 CSS 样式有哪四种方式？如何使用？5、 什么是块级

19、元素(block level)、行内元素(inline)？6、 DIV 页面布局中，ID 的作用是什么？21实验四 网站建设基本规划与综合网站实例 实验目的：通过网站建设实例，了解网站建设的基本流程，对常见网站进行网站建设的需求分析，学会编写小型企业网站规划书，并对其进行讨论分析。了解典型门户网站建设的站点规划；进一步掌握 CSS 样式的应用；掌握不同类型网站首页的制作。了解模板的应用，能够应用模板进行网站建设；了解网站空间的申请及网站的发布。 实验内容：1、 上网搜查看下列网站，分析网站特点，网站结构，页面布局，设计风格等 综合网站：http:/ 论坛：http:/ 企业网站：http:/

20、http:/ http:/ http:/ http:/ 2、 浏览常见网站，分析各个网站特点，最终选择一个企业网站（不得重复）完成以下要求：分析其设计风格，绘制其布局，注明布局中主要内容；对所看到的网站进行不少于 500 字的评论。回答以下问题，写 500 字以上评论。 网址 首页截图 网站核心功能 面向人群 设计特性（优点） 需要改进之处（缺点）3、 *试着重新设计所截获的网页；4、 选择合适的中小型企业网站（或根据所给的中小型企业网站效果图与素材） ，下载素材文件，重新设计该中小型企业网站，要求如下：（1） 确定页面宽度，利用 CSS+DIV 布局（细节部分可以采用表格布局） ；（2） 网

21、页居中；（3） 尽可能相似（颜色、位置、线框等）（4） 完成 1 张主页，23 张子页，主页能链接到子页，子页链接回到主页。5、 *框架的使用226、 *模板的使用 思考题：1、 分析典型企业网站的布局，重新实现其布局。2、 使用 DIV+CSS 进行布局有什么好处？3、 通常企业网站使用哪些网页特效？4、 如何将特效用于网站主页中？5、 在左中右布局中，如何使这三个板块平齐并排？23实验五 项目化网站综合建设 实验目的：进一步理解网站建设的基本流程；掌握中型企业网站建设的站点规划；掌握一个小型网站制作从功能结构分析、页面设计规划到网页设计实现的全过程。学会分析网站中不同功能页面的特点；能综合

22、应用网页设计元素如表格、表单、超链接、CSS 样式、CSS+DIV的布局方法等，以及 JavaScript 等脚本语言等进行项目化的网站建设。 实验内容：利用所学知识，参考前述企业网站，分组完成中小型企业网站的建设，内容包括：企业网站建设规划书 1 份，1 张主页（需要有 LOGO） ，若干（ 3-4 张）子页。主题自拟，可以是生产型企业，也可以是服务型（宾馆、咨询培训等）企业，素材自理。1、过程如下：（1） 分组：34 人一组，自由组合（2） 角色分配：总负责、美工设计、网页制作、文档（3） 讨论确定网站主题（4） 完成企业网站建设规划书：网站功能、颜色基调配色、基本布局、链接、特效要求等（

23、5） 网页设计：网页框架结构、主页设计、子页设计（6） 网页间链接（7） *网站发布2、项目化建设的网站基本要求：（1） 页面宽度 7001000 像素之间，网页居中；（2） 利用 CSS+DIV 布局（细节部分可以采用表格布局） ；（3） 主页中有企业 logo，布局合理，颜色基调一致；（4） 主页中有登录注册部分（表单） ，并至少链接到 1 张注册或登录页面（可添加表单数据验证）（5） 除注册页面外，各个子页布局色调应该一致。（6） *使用框架网页可酌情加分。3、最后需要上交材料（电子稿，以小组为单位）：（1） 规划书 1 份（2） 主页 1 张（3） 子页若干张（其中 1 张为注册页面） 思考题：1、 为什么一般需要确定网页页面宽度？2、 如何使整个页面居中？3、 你认为综合企业网站建设中，哪个环节最为重要？