网页设计-实验

《网页设计-实验》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、目录实验一网页制作基础知识1实验二简单网页制作4实验三网页美化12实验四网站建设基本规划与综合网站实例19实验五项目化网站综合建设212121实验一网页制作基础知识²实验目的：熟悉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-221所示的网页设计。要求如下：（1）网页标题为“张三的第一个HTML网页”；（title）（2）网页背景颜色为“黄色（yellow）”，文本颜色为“blue”（body）；（3）其它要求见图中详细说明。另外

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

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

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

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

7、-2所示的网页，文件名“学号+姓名+满屋花.html”。基本要求如下：（1）页面背景淡粉色；（2）整体采用表格布局，“用户登录”与“鲜花分类”模块使用内嵌表格布局；（3）网页标题为“张三的鲜花坊”，其中张三为自己的真实姓名。此处使用图像（Button1.jpg）填充图2-2满屋花表格布局2、***对网页添加动态效果（上下滚动文本，左右滚动图片等），例如“清华大学”滚动文本参考代码如下，试调整滚动方向、速度等。