在站点新建lxwm的html文件,2015网页设计与制作实验指导.doc

网页设计与制作实验要求

实验一

【实验目的】

练习本地站点和远程站点的建立。

掌握链接的建立。

掌握主页的设置和站点地图的建立和查看。

【实验内容】

创建一个名为“国画欣赏”的站点，将其中的本地站点保存在“D:\guohua”文件夹下，远程站点保存在“E:\guohua”文件夹下。然后为“国画欣赏”网站建立一个存放图片的文件夹“pic”，并新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件，最后设置“index.html”的页面属性。设置出如图7所示网站地图效果。

图1

【实验步骤】1、建立虚拟目录2、打开Dreamweaver界面，新建本地站点保存在”D：\guohua”文件夹下3、为“国画欣赏”网站建立一个存放图片的文件夹“pic”，依次建名为“index.html”、“ghzs.html”、“?jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件，最后设置“index.html”的页面属性4、将“index.html”与“ghzs.html”、“?jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”建立超链接5、设置显示网页标题得出最后结果。【实验结果】

【实验总结】本地站点和远程站点的建立是设计并应用网页的基础，建立逻辑结构合理的站点地图很重要。

实验二

【实验目的】

掌握框架的使用，框架中标题的设置以及网页中导入已有word文档的方法。

掌握锚链接的建立。

掌握css样式的概念及其建立，能够区分三种css样式，并根据要求建立相应的样式。

【实验内容】

1、建立一个包含框架的网页，标题为“笑傲江湖”，网页由左右两个框架组成，左侧框架显示” 3.1框架主题.doc”中内容，右侧显示“3.1框架文件.doc”中内容。建立超链接，实现点击左侧标题，右侧框架顶端显示相应内容，(xajh?.html,) (?表示数字) 如下图2所示：

图2

2、设置CSS样式。左侧框架内内容设置样式，存储在css1.css样式文件中，

增加h3标签，行高36px，大小18px；笑傲江湖 设置为标题3 ；

增加a标签，字体颜色为#000066，无修饰；

增加body标签，字体大小12px,背景色#99CC66，扩展Glow,颜色为红色， Strength为5

增加ol标签，设置行高40px,列表项图像为“3.1list.gif”；设置框架中四个标题为ol格式，效果如下图所示。

右侧框架中设置 “第一章灭门”字体颜色#000099，字体大小为18px，加粗，并对另外三个标题均应用此设置

最终效果如下图3所示：

图3

【实验步骤】

1.鼠标点到左框架，文本-css样式-新建，点选 标签，键入标签名h3，保存在css1，对h3作如下设置。

2.同样增加设置其它标签

3. 鼠标点到笑傲江湖，属性面板格式改为标题3.

4．右侧框架中设置 “第一章灭门”为标题，字体颜色#000099，字体大小为18px，加粗，自动保存为style2,并对另外三个均设为标题，标题样式均设为style2。

5.保存全部并预览。

【实验结果】学生填

【实验总结】CSS样式应用广泛，应在实践操作中积累经验，熟练掌握。

注意代码内容。

实验三

【实验目的】

学会建立表单对象和表格

能够按要求对表格进行美化处理

掌握表单中各个表单对象的特殊设置及对表单的检查

【实验内容】

制作表单如下图4(form.html)：

1、单元格1列和最后一行的背景颜色为#00CCFF，

2列的1-6行单元格边框颜色为#0000CC；

2、第1(多行)，2，3，4文本域可输入的内容与提示相对应，并且是必需的；当点击提交按钮(onsubmit)时会对输入内容进行检测，是否都有内容填入，并检测2，3，4文本框是否输入的为数字、邮箱地址、0-5之间的数字。

3、出生年份：点击后面的下拉菜单，前面的文本域会显示所选择内容，其中下拉菜单从1900—2002年。

4、最后自己在最后一行表格的前面增加一个文件域。

图4

【实验步骤】

1.

点击,下图第一个按钮，添加表单。

2.在表单中插入表格，七行两列，合并最后一行单元格。

3．单元格1列和最后一行的背景颜色为#00CCFF，

2列的1-6行单元格边框颜色为#0000CC