网页制作实验指导书xin

1、网页设计与制作实验指导书李步升 编著目录网页设计与制作实验大纲实验（一）简单网页制作实验（二）XHTML语言实验（三）CSS选择器实验（四）CSS盒模型实验（五）格式化文本实验（六）应用背景图像实验（七）CSS两列浮动布局实验（八）CSS三列布局实验（九）CSS两列定位布局实验（十）CSS多列定位布局实验（十一）创建导航条实验（十二）格式化表格和表单网页设计与制作实验教学大纲课程名称：网页设计与制作英文名称：Design and Making of Webpages设置形式：非独立设课课程模块：专业核心课实验课性质：专业实验课程编号：501868课程负责人：李步升大纲主撰人：李步升大纲审核人：

2、一、学时、学分 课程总学时：实验学时：课程学分：3二、适用专业及年级 教育技术学专业 本科二年级三、课程目标与基本要求课程的目标：课程全面介绍网页设计与制作的相关知识，包括网页制作工具Dreamweaver的使用方法、XHTML语言、CSS语言及网站的发布与维护等，目标是使学生具备网页制作的基本知识和基本技能，并能够独立完成中、小型网站的前端设计与制作，为开发网络教学软件和专题学习网站打下基础。基本要求：1熟练使用网页制作工具Dreamweaver，能够在网页中插入标题、段落、列表、特殊字符、图像、表格、表单、超链接等基本元素；2掌握XHTML的语法结构及各种标记、属性；3掌握CSS网页样式控

3、制方法，能灵活利用CSS选择器及其属性设置文本、标题、列表、图像、表格、表单、超链接等元素的样式；4掌握CSS网页布局方法，能灵活利用浮动、定位等多种方法实现网页两列、三列、多列及混合布局。5掌握网站管理及发布方法。四、主要仪器设备 多媒体计算机，安装Dreamweaver、Fireworks、Firefox等应用软件。五、实验项目及教学安排序号实验项目名称实验基本方法和内容项目 学时项目类型每组人数教学 要求1简单网页制作建立站点；新建并保存网页；在网页中插入段落、标题、列表、特殊字符、图像、超链接、表格、表单等基本元素。2基础1必修2XHTML语言设置网页的XHTML 标记及属性，并进行语

4、法校验。2基础1必修3CSS选择器利用CSS选择器及其属性设置网页元素样式。2基础1必修4CSS盒模型设置网页元素的宽度、高度、边框、填充、边界、背景等属性。2基础1必修5格式化文本对文字应用样式；对段落应用样式；对列表应用样式；对链接应用样式。2基础1必修6应用背景图像用背景图像制作圆角框；用背景图像制作阴影；用背景图像替换文本。2基础1必修7CSS两列浮动布局利用浮动的方法制作两列布局网页。2综合1必修8CSS三列浮动布局利用浮动的方法制作三列布局网页。2基础1必修9CSS两列定位布局利用定位的方法制作两列定位网页。2基础1必修10CSS多列定位布局利用定位的方法制作多列布局网页。2基础1

5、必修11创建导航条制作垂直导航条；制作水平导航条。2基础1必修12格式化表格和表单对表格应用样式；对表单应用样式。2综合1必修13网站制作综合训练自命主题网站制作。8设计综合1选修六、考核方式及成绩评定考核方式：1实验：根据实验考勤和实验报告评定成绩，满分为100分。2作业：根据作品评定成绩，满分为100分。3实验考试：上机考试，满分为100分。成绩评定：实验成绩占本课程成绩的30%。实验成绩实验平时成绩×20%作业成绩×30%实验考试成绩×50%。七、实验教科书、参考书1实验教科书网页设计与制作实验指导书，李步升，20062实验参考书精通CSS-高级Web标准解

6、决方案，英Andy Budd等，人民邮电出版社，2006年11月实验一 简单网页制作一、实验目的1熟悉Dreamweaver软件的操作界面。2掌握建立本地站点的方法。3掌握简单网页制作方法。4掌握超链接的建立方法。二、实验内容1创建“潜水俱乐部”站点。2制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。三、操作步骤1创建“潜水俱乐部”站点（1）在D盘新建文件夹，命名为myweb；（2）将images文件夹和gallery文件夹复制到中myweb中；（3）启动Dreamweaver，使用“站点新建站点”命令创建站点。2制作“俱乐部首页”

7、。（1）新建网页。（2）使用“文件保存”命令保存网页，命名为index.html。（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。（4）从“文本.txt”中将首页的相关文字粘贴到网页中。（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。（6）插入图像。（7）在Copyright后插入版权符号©。（8）在电话号码之间插入半角空格。（9）在电子邮箱地址上建立超链接，mailto: vipBubbleU。（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。（11）保存网页，按

8、F12，预览网页。3制作“俱乐部简介”网页。（1）在文件面板上复制index.html网页，重新命名为about.html。（2）在文件面板上双击打开about.html。（3）删除mainContent区域中的原有内容，然后粘贴俱乐部简介文字。（4）设置二级标题。（5）选中“国际潜水运动协会”，设置为“强调”。（6）选中“泡泡俱乐的宗旨是开创新的篇章”，设置为“块引用”。（7）保存网页，按F12，预览网页。4制作“近期活动”网页。（1）在文件面板上复制index.html网页，重新命名为events.html。（2）在文件面板上双击打开events.html。（3）删除mainContent

9、区域中的原有内容，然后粘贴俱乐部近期活动文字。（4）设置二级标题。（5）插入表格。（6）保存网页，按F12，预览网页。5制作“精彩图片”网页。（1）在文件面板上复制index.html网页，重新命名为gallery.html。（2）在文件面板上双击打开gallery.html。（3）删除mainContent区域中的原有内容，然后粘贴精彩图片文字。（4）设置二级标题。（5）插入5张图片，为每张图片设置替换文本。（6）选中图片及其下面的段落，然后单击“插入Div标签”按钮，将图片及其说明文字分别装入5个Div中。（7）保存网页，按F12，预览网页。6制作“在线预约”网页。（1）在文件面板上复制i

10、ndex.html网页，重新命名为reserve.html。（2）在文件面板上双击打开reserve.html。（3）删除mainContent区域中的原有内容，然后粘贴在线预约文字。（4）设置二级标题。（5）插入“表单”。（6）光标置于表单内，插入“菜单”表单元素。（7）选中“菜单”，在属性面板上单击“列表值”按钮，设置选项。（8）在表单内插入其它表单元素。（9）保存网页，按F12，预览网页。7建立网站内各页面之间的超链接。实验二 XHTML语言一、实验目的1掌握XHTML 语法。2掌握XHTML标记及属性。3掌握XHTML 标记校验的方法。二、实验内容制作“唯存教育探究学习”栏目中的“ar

11、ticle01.html”网页。三、操作步骤1创建站点（1）在D盘新建文件夹，命名为myweb；（2）将“文本.txt”和images文件夹复制到中myweb中；2用记事本打开“文本.txt”。3选择“文件 | 另存为”命令，将文件另存为article01.html。4在网页中添加XHTML标记和属性。5使用<div>标记定义网页的逻辑结构，包括container、header、content、footer几个部分。6登录/网站，使用文件上传的方式进行标记校验，并修改发现的错误。实验三 CSS选择器一、实验目的1掌握在网页上应用CSS的方

12、法。2掌握CSS的基本语法规则。3掌握CSS的常用选择器。4掌握使用Dreamweaver定义CSS的方法。二、实验内容定义“泡泡潜水俱乐部”网站首页的样式。三、操作步骤1创建“潜水俱乐部”站点（1）将“潜水俱乐部”文件夹中的myweb文件夹复制到D盘；（2）启动Dreamweaver，使用“站点新建站点”命令创建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。2定义“首页”的CSS样式。（1）在Dreamweaver中打开index.html文件。（2）选择“文件 | 新建”命令，新建CSS文件，保存在myweb文件夹中，命名为style.css。（3）将文档窗

13、口切换到index.html，单击CSS面板上的“附加样式表”按钮，将style.css作为外部样式表链接到index.html。附加样式表（4）在style.css文件中定义index.html的样式。* margin: 0;padding: 0;body font: 0.75em "宋体"color: #000080;background-color: #e2edff;p, h2, h3 margin: 0.8em 0;p, li line-height: 1.8;h1 font-size: 180%;color: #ffffff;background: #000080

14、 url(images/header-bg.jpg) no-repeat right bottom;padding: 40px 0px 4px 10px;h2 font-size: 150%;color:#FF6633;h3 font-size: 100%;font-weight: normal; color:#FF6633;background:url(images/dot.gif) no-repeat left top;padding-left: 15px;ol margin-left: 3em;a font-weight: bold;color: #000000;a:hover text

15、-decoration: none;color: #ffffff;background-color: #000080;#header border-top: 3px solid #7da5d8;border-bottom: 3px solid #7da5d8;#navigation width: 180px;height: 484px;float: left;background: #7da5d8 url(images/nav-bg.jpg) no-repeat;#mainContent margin-left: 180px;padding: 0 20px 30px 20px;#footer

16、clear: both;border-top: 3px solid #7da5d8;background-color: #bed8f3;padding: 20px 0;#header p padding: 4px 0 4px 10px;margin: 0;background: #bed8f3 url(images/line-fade.jpg) repeat-y right;#navigation ul font-size: 120%;list-style: none;margin: 15px 0 0 20px;#footer p text-align: center;margin: 0;.f

17、ltrt 注意：这是一个类选择器，需要在<img />上标识class=“fltrt”。float: right;margin-left: 8px;实验四 CSS盒模型一、实验目的1深入理解CSS盒模型及其属性。2熟练掌握CSS属性的定义方法。二、实验内容定义“悠然我思”网站首页的样式。三、操作步骤1创建“悠然我思”站点。（1）将“悠然我思”文件夹中的myweb文件夹复制到D盘；（2）启动Dreamweaver，使用“站点新建站点”命令创建站点。2打开index.html，定义其逻辑结构。<body><div id="container">

18、;<h1 id="header">悠然我思</h1><div id="content"><h2><a href="poems.html">月光诗集</a></h2></div><div id="footer"><p>旖旎信箱：moonlili.cc</p><p>版权所有&copy;旖旎 1999</p></div></div>&l

19、t;/body> 3定义“首页”的CSS样式。（1）新建CSS文件，保存在style文件夹中，命名为style_homepage.css。（2）将文档窗口切换到index.html，单击CSS面板上的“附加样式表”按钮，将style_homepage.css作为外部样式表链接到index.html。（3）在style_homepage.css文件中定义index.html的样式。* margin: 0px;padding: 0px;body font: 0.75em/1.5 "宋体"color: #dee3c1;background: #134113 url(./im

20、ages/bg_body.jpg);text-align: center;padding: 30px 0px;h1 font-size: 300%;h2 font-size: 130%;p, h2 margin: 0.8em 0;a color: #dee3c1;text-decoration: none;a:hover text-decoration: underline;#container width: 750px;margin: auto;background: url(./images/bg_container.jpg);text-align: left;#header height

21、: 80px;padding: 150px 0px 0px 300px;background: url(./images/bg_header.jpg) no-repeat left top;#content padding: 0px 100px 30px 100px;#content p padding-bottom: 50px;background: url(./images/bg_divide.jpg) no-repeat center bottom;#footer height: 128px;padding-top: 30px;background: url(./images/bg_fo

22、oter.jpg) no-repeat left bottom;text-align: center; 实验五 格式化文本一、实验目的1掌握文本样式的设置方法。2掌握段落样式的设置方法。3掌握列表样式的设置方法。4掌握超链接文字样式的设置方法。二、实验内容定义“唯存教育探究学习”栏目中“article01.html”网页的样式。三、操作步骤1创建站点。（1）将“article01”文件夹中的myweb文件夹复制到D盘；（2）启动Dreamweaver，使用“站点新建站点”命令创建站点。2打开article01.html，定义其逻辑结构。<body><div id="

23、container"><div id="header"><h1><a href="#">惟存教育探究学习</a></h1><p><a href="#">返回首页</a></p></div><div id="content"><h2>如何构建高效的 webquest</h2><p>杨淑莲 华南师范大学教育技术研究所</p>&

24、lt;/table></div><div id="footer"><p>Copyright&copy;BEING, Being Lab. All Rights Reserved</p><p>版权所有 惟存教育实验室</p></div></div></body>3定义“article01.html”网页的CSS样式。* margin:0;padding:0;body font: 0.75em "宋体"background: #E0E0E

25、0 url(images/mygrd.gif);text-align: center;#container margin: auto;width: 760px;text-align: left;position: relative;p, li line-height: 1.8;h1font-size: 130%;font-weight: normal;h2 font-size: 180%;text-align: center;h3 font-size: 130%;color: #660000;h4 font-size: 110%;h2, h3, h4 margin: 0.8em 0;table

26、 margin: 0.8em auto;border-collapse:collapse;td,th padding: 5px 15px;border: 1px solid #000000;text-align: center;a color: #000000;text-decoration: none;a:hover color: #000000;text-decoration:underline;#header border-bottom: 5px solid #666666;padding: 30px 0 2px 5px;#header p.goback 注意：这个以及下面几个样式都使用

27、的是类选择器，需要在<p>上标识class=”goback”。position: absolute;right: 10px;top: 20px;#header p.goback a text-decoration: none;display: block;width: 7em;height: 2em;line-height: 2em;border: 1px solid #666666;background-color:#cccccc;text-align: center;#header p.goback a:hover color:#FFFFFF;background-color:

28、#000000;#content padding: 30px;#content p text-indent: 2em;注意：这个样式使用的是类选择器，需要在<p>上标识class=”center”。#content p.center text-indent: 0;text-align: center;注意：这个以及下面几个样式都使用的是类选择器，需要在<p>上标识class=”pic”。#content p.pic img display: block;#content p.pic float: right;text-align: center;margin-botto

29、m: 10px;#content ul margin-left:3em;#footer text-align: center;padding: 20px 0px;border-top: 1px solid #666666;实验六 应用背景图像一、实验目的1掌握CSS背景（background）属性。2掌握设置背景图像位置的方法。3掌握使用背景图像替换文本的方法。4掌握使用背景图像制作圆角框的方法。二、实验内容1制作圆角框。2制作泡泡俱乐部首页。三、操作步骤1制作圆角框。（1）创建站点。（2）打开inf.html，创建内部样式表，内容如下。* margin: 0;padding: 0;body

30、font: 0.75em/1.5 "宋体"margin: 20px 0px 0px 20px;a color: #000000;text-decoration: none;#box width: 190px;background: url(images/box-foot.gif) no-repeat left bottom;padding-bottom: 15px;#box h3 font-size: 110%;padding: 5px 15px;background: url(images/box-head.gif) no-repeat left top;color:#F

31、FFFFF;#box ul list-style: none;padding: 1px 15px;background: url(images/box-main.gif) repeat-y left top;#box li margin: 10px 0;background: url(images/bullet.gif) no-repeat left top;padding-left: 20px;border-bottom: 1px dashed #000000;2制作泡泡俱乐部首页。（1）创建站点。（2）打开index.html，新建CSS文件，内容如下。* margin: 0;paddin

32、g: 0;html background: #112981 url(images/seafloor.jpg) repeat-x left bottom;body font: 0.75em "宋体"color:#FFFFFF;background: url(images/coral.jpg) no-repeat left bottom;padding-top: 180px;padding-bottom: 250px;position: relative;p, h2, h3 margin: 0.8em 0;p, li line-height: 1.8;h1 font-size:

33、 230%;color:#FFFFFF;padding-bottom: 20px;text-align: center;h2 font-size: 150%;color:#FF9600;h3 font-size: 100%;font-weight: normal; color:#FF9600;background: url(images/icon.gif) no-repeat -253px -437px;padding-left: 18px; ol margin-left: 3em;a font-weight: bold;color: #FFFFFF;a:hover text-decorati

34、on: none;color: #FF9600;#container width: 700px;margin: auto;#footer padding-top: 50px;#footer p text-align: center;margin: 0;#extraDiv1 width: 100%;height: 800px;background: url(images/gradient.jpg);position: absolute;left: 0;top: 0;z-index: -3;#extraDiv2 width: 100%;height: 104px;background: url(i

35、mages/clouds.jpg);position: absolute;left: 0;top: 0;z-index: -2;#extraDiv3 width: 100%;height: 75px;background: url(images/water_edge.jpg);position: absolute;left: 0;top: 104px;z-index: -2;#extraDiv4 width: 315px;height: 316px;background: url(images/sunlight.jpg);position: absolute;left: 0;top: 0;z-

36、index: -1;#extraDiv5 width: 180px;height: 80px;background: url(images/fish_top.gif);position: fixed;top: 220px;left: 20px;z-index: 1;#extraDiv6 width: 224px;height: 110px;background: url(images/fish_bottom.gif);position: fixed;bottom: 30px;right: 20px;z-index: -1;* html #extraDiv5, * html #extraDiv6

37、 position: absolute; 实验七 CSS两列浮动布局一、实验目的1掌握固定宽度网页布局的方法。2深入理解浮动的概念。3掌握两列布局网页的典型逻辑结构。4熟练掌握CSS两列浮动布局的方法。二、实验内容制作csszengarden网站的163号作品。三、操作步骤1定义站点。2打开index.html，新建CSS文件，内容如下。* padding: 0;margin: 0;body font: 0.7em Tahoma, Arial, Helvetica, sans-serif;color: #566047; background: #FBFBE5 url(images/grass.

38、gif) right bottom fixed no-repeat;p line-height: 1.5em;p, h3 margin: 1em 0;ul list-style: none;a color: #566047; text-decoration: underline;a:hover text-decoration: none;#container width: 760px; margin: auto; background: url(images/container_bg.gif) repeat-y left top;position: relative;#header heigh

39、t: 300px; background: #8C9777 url(images/header_bg.jpg) no-repeat;text-indent: -9999px;#summary .p1 color: #FBFBE5; font-weight: bold; width: 475px;position: absolute; top: 65px; left: 40px;#summary .p2color: #566047;position: absolute;top: 245px; right: 30px;#content width: 445px;float: right;margi

40、n-right: 50px;display: inline; /*修复IE浮动元素双边距bug*/padding-bottom: 40px;margin-top: -30px;#linkList width: 138px; float: left; margin-left: 60px;display: inline; /*修复IE浮动元素双边距bug*/#footer clear: both; height: 130px; text-align: right; background: url(images/footer_bg.jpg) no-repeat;padding: 20px 50px

41、0 0;#content h3 height: 32px; border-bottom: 1px solid #7D8965;text-indent: -9999px;#preamble h3 background: url(images/h3_preamble.gif) no-repeat;margin-top: 0;#explanation h3 background: url(images/h3_explanation.gif) no-repeat;#participation h3 background: url(images/h3_participation.gif) no-repe

42、at;#benefits h3 background: url(images/h3_benefits.gif) no-repeat;#requirements h3 background: url(images/h3_requirements.gif) no-repeat;#linkList h3 height: 24px;border-bottom: 1px solid #7D8965;text-indent: -9999px;#select h3 background: url(images/h3_select.gif) no-repeat left top;margin-top: 0;#

43、archives h3 background: url(images/h3_archives.gif) no-repeat left top;#resources h3 background: url(images/h3_resources.gif) no-repeat left top;#linkList li color: #8C9777; margin: 0.7em 0;#linkList a color: #8C9777;font-weight: bold;#select li background: url(images/select_a_bg.gif) no-repeat;padd

44、ing-left: 20px;#select a display: block;#select a.c display: inline; font-weight: normal; text-decoration: none;实验八 CSS三列浮动布局一、实验目的1掌握固定宽度网页布局的方法。2深入理解浮动的概念。3掌握三列布局网页的典型逻辑结构。4熟练掌握CSS三列浮动布局的方法。二、实验内容制作csszengarden网站的193号作品。三、操作步骤1定义站点。2打开index.html，新建CSS文件，内容如下。* padding: 0;margin: 0;body font: 0.8em

45、/1.5 tahoma,sans-serif; color: #7A745A;background: url(images/bg.gif) no-repeat center top;margin-bottom: 30px;p margin: 0.75em 0;letter-spacing: 0.05em;word-spacing: 0.1em;h3 height: 30px;margin: 1em 0;text-indent: -9999px;ul list-style: none;acolor: #D25C3E;text-decoration: none;border-bottom: 1px

46、 dashed #d25c3e;a:hovercolor: #0CF;border-bottom: 1px solid #ddd1a8;#container width: 750px;margin: 270px auto 0 auto;padding-bottom: 30px;background: url(images/bg_container.gif) bottom left no-repeat;position: relative;#header height:120px;background: url(images/bg_h1.gif) no-repeat;text-indent: -

47、9999px;#summary .p1display:none;#summary .p2 width:70px;height:4em;position: absolute;right: 0px;top: 180px;text-align: right;font-size: 80%;line-height: 1.1em;letter-spacing: 0;word-spacing: 0;#preamble width: 170px;float: left;#content width: 345px;float: right;#linkList width: 200px;float: right;

48、#footer clear: both;padding-top: 20px; margin-left:405px;#preamble pfont: italic 120% georgia,serif;letter-spacing:0;word-spacing:0;#preamble h3 height:220px;background: url(images/h3_preamble.gif) no-repeat;margin-top: 0;#explanation h3 height: 121px; background: url(images/h3_explanation.gif) no-r

49、epeat;margin-top: 0;#participation h3 background: url(images/h3_participation.gif) no-repeat;#benefits h3 background: url(images/h3_benefits.gif) no-repeat;#requirements h3 background: url(images/h3_requirements.gif) no-repeat;text-indent: -9999px;#select h3 height:121px; background: url(images/h3_s

50、elect.gif) no-repeat;margin-top: 0;#archives h3 background: url(images/h3_archives.gif) no-repeat;#resources h3 background: url(images/h3_resources.gif) no-repeat;#linkList ul margin: 0 40px 0 5px;#linkList li font-size: 90%; margin: 0.8em 0;#select atext-transform:uppercase;display:block;background: #fff0f0;padding-left:3px;margin-left:-3px;border-bottom:0;#select a.cdisplay:inline;background:none;text-transform:none;font-style: italic;实验九 CSS两列定位布局一、实验目的1理解定位的概念。2掌握两列布局网页的典型逻辑结构。3熟练掌握CSS