网页设计-实验.docVIP

目 录 实验一 网页制作基础知识 1 实验二 简单网页制作 4 实验三 网页美化 12 实验四 网站建设基本规划与综合网站实例 19 实验五 项目化网站综合建设 21  实验一 实验目的： 实验内容： 在新建一个文件夹，命名规则：学号的末尾2位＋姓名使用文本编辑器，建立“.HTM”文件，利用HTML代码完成图-2所示的网页设计。要求如下： 网页标题为“张三的第一个HTML网页”；（title） 网页背景颜色为“黄色（yellow）”，文本颜色为“blue”（body）； 其它要求见图中详细说明。另外，尝试添加背景图片（注意图片文件的路径）。 图-2 使用文本编辑器设计网页 在自己的文件夹中，例如“01张三”中新建“web01”文件夹，其中“01”为自己真实学号，作为站点文件夹； 运行Dreamweaver CS5，在Dreamweaver中建立站点，方法如下： 站点- 新建站点- 输入自己站点名称，选择“web01”作为本地站点文件夹，如下图1-3所示。 图1-3 站点的建立 使用Dreamweaver完成下图1-4所示网页设计，文件为“网页1 .htm”；使用记事本设计相同的网页，文件为“网页2 .htm”，并比较两者的异同。（注意网页标题与图片插入） 图1-4 插入图片 下载“素材1.rar”，解压缩到自己站点文件夹中，利用给定的图片等素材，使用Dreamweaver设计如下图1-5所示的网页（尽量一模一样，注意表格布局中各个属性设置，table width=900 height=300 border=0 cellspacing=0，分11列，每列宽度为82，最后一列为80）。 图1-5 企业主页设计 思考题： ？ 如何使各个标记的属性自动弹出？实验二 实验目的： 实验内容： 建立“.HTML”文件，利用HTML代码完成图2-1所示的网页设计。要求如下： 网页标题为张三的HTML网页使用Dreamweaver新建formtest.html文件，设计如下图-4表单网页，代码见图-5。 图2-4 表单的设计 图-5 表单代码 参考上述代码，使用HTML代码编写完成如下图-6表单（请尽量不要使用DW的可视化编辑）表单的ACTION设为，提交方法为POST。ACTION设为ACTION设为其他文件名，例如regist.asp，结果又如何？ 图-6 表单 ***表单设计综合练习：设计如图2-7所示“126免费邮箱申请页面”。 图2-7 126免费邮箱注册页面 HTML网页设计综合练习： 8848网页设计（基础题） 新建站点（如web00），将素材文件复制到站点中，完成下图网页设计。使用表格（4行2列）进行整体布局，使用常见的HTML标记，设计下图2-8所示的网页，注意表单的action提交文件。详细要求见图中标注。 图2-8 8848网页 ① 导航条使用图片背景（bg.gif）填充，插入LOGO图像，位置靠左； ② 此处使用表单，点击提交按钮后，打开用户注册信息网页文件（前面第6小题完成的文件）； ③ 插入flash； ④ 另一个表单，只求形似，功能不限； ⑤ 内嵌表格布局，3行5列，边线为红色。 **合创网页（提高题） 根据给定的素材，使用表格进行（嵌套）布局，并实现表单的提交（登录后打开用户注册信息网页文件，即前面第6小题完成的文件）插入FLASH文件，并且至少包含有以下效果之一的网页动态效果： 文本或图片滚动效果 影片播放效果 表单数据验证 如图2-9所示。 图2-9 合创主页 ***个人博客网页（挑战题） 参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接，例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。 图2-10 个人博客网页 思考题： HTML标记中中常用的有哪些？ 表单的英文名称是什么？最常用的表单输入标记是什么？共有几种类型？题： 实验 网页美化 实验目的： 实验内容： 图3-2 图3-3 设置要求如下： 所有格式全部采用CSS样式； 背景图像与背景颜色设置：自行设计渐变的图形文件命名为“bg1.jpg”，使用X方向填充，并且填充网页背景； 设置imgCSS样式：边距（margin）为20px，留白(padding)15px，边框线3 px； 设置zcz（祖冲之）段落的格式：p.zcz； 设置zcz（祖冲之）段落中图片的ID: #idzcz； 其他见图中效果，另外未指定部分请自行设置其格式。 改写上述HTML文件，采用“链接式”方法