网页设计实验报告

1、1 / 68学 年：20052006第一学期课程名称：网站建设及网页设计班 级：12级网络经济姓名： _学 号：_实验项目编号：E14209801实验名称：HTML语言基础实验时间：实验一网站建设相关基础（2学时）一、实验目的2 / 681.掌握门户网站设计的基本原则、网站及网页的基木风格及基木 构图特点；2.熟悉页而排版，掌握网页布局的方法。二、实验内容1.上网访问实际若干门户网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。2.在网上找出下列版而布局的结构形式：（1）“厂”结构布局（2）. “ 口”型（“国”字型）布局（3）. “三”型布局（4）

2、.对称对比布局3.找出若干旅游网站（至少5个）；4.找出若干B2B网站（至少5个）；5 .使用电脑中的图片工具（Photoshop ）把不同图片转换为.JPG、.GIF和PNG格式，比较三种图片格式的区别。三、实验步骤及要求按“实验内容”中15完成网上的操作，完成实验报告，在实验 报告中要求记录如下内容：（1）.所访问各门户网站的风格及特点；（2）.各种版面布局网站的域名和所采用的版面布局形式；.记录旅游、B2B网站的名称、域名、URL及LOGO；3 / 68（4）.记录B2B网站主页上的宣传标语或体现企业精神的代表性词 句。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果

3、, 若发现有结果雷同者，按实验课考核办法处理。4 / 68实验二基本页面元素操作(2学时)一、实验目的：(1)熟悉基木网元素及其操作(2)熟悉使用页而属性二、实验内容本实验的内容主要是制作一个“XXX景点介绍”网站的页而文件, 它包括文本、图像、水平线以及日期和时间，效果如下图所示。5 / 68签最点兔首页 景諭行旅游坟略最美地方 1 = *国浙江A寿次乌镇t<:浙江苣焉六市悔乡比乌瑕石傑国跆丄8号(西聒门)电话镇共有丄张图片景点详情乌镇是全国二十个黄金胃懸衰点及江南四大名镇之一。晋名乌墩和育墩具有K于余年悠久历 史。宜镇是典型的江南水乡古填,簸有”鱼米之乡f

4、丝绸之府”之称。尊MS史渊源流长.根垢齢 “潭家湾古立化遥址出土的陶器、石舉、骨皐 雲骨等的鉴走 该处厲于马家浜文化廻，处于新石器时代，可见,六千多年前，乌镇的袒先就繁衍、兰息在这里。宜镇最佳旅游时可乌缜的汽候与憨、西;唐无多大区别。一年中最美的爭节是春天与秋天。一天 中最黄的时候是清层与傍魂 淸晨r河道上会漫起歸的碧气f仿佛梦境。傍晚.夕阳西照,游人散三、实验步骤及要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发 生的现象并分析原因。创建页而LOGO。(2)创建主页，建立一个网页文件index, htm并打开进行编辑。(3)输入自己拟定撰写的文字内容。(4)将“XXX景点欢迎你”

5、设置滚动效果的文字。6 / 68(5)对文字进行排版。(6)插入水平线，并设置水平线的颜色。(7)插入导航条(8)插入图片(9)插入日期和时间(10)打开页面属性对话框仃1)设置网页的背景图像。(12)浏览各个网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。7 / 68实验三页面链接和表格(2学时)一、实验目的：(1)利用表格进行文木的整齐排列和自由的图文混排(2)利用链接打开不同的页而。二、实验内容木实验的内容主要是利用表格进行网页的定位练习1.建立一个本地站点,站点内至少包含网页五个。2.页面用表格定位，自定

6、义不同的区块，效果可以及下图相似。实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发3.设置超链接将站点中的网页链接起来。三、实验步骤及要求8 / 68生的现象并分析原因。(1)建立一个本地站点文件夹。(2)在站点中建立一个网页文件index, htm并打开进行编辑。(3)最外层的表格宽度为700像素，嵌套的表格宽度为100%,整 体上分为上下两个表格。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。9 / 68实验项目编号：E14209802实验名称：制作个人主页实验时间：实验四制作个人网站(6学时)一、实验目的：(1)

7、综合利用所学的HTML语言制作页面。(2)页而布局及内容的合理设计。二、实验内容本实验的内容主要是综合利用所学的HTML对网页设计制作进行 的练习1.建立一个包含多页面的网站。2.页面用表格定位，自定义不同的区块。3.主页用以介绍自己，分页而介绍一些细节，效果图如下两图所zjs o10 / 68制作单隹：徐州工程学院经济学院电子商务专业制作人，XXX11/68个人姦料巴竺少必刘约丄详细剜；个人H.1；史多册施片灼血入魁违直请冏试电帰科俱乐邹我1D（ 600001C6 倒刘：Y1P 雉名,nW.女 佯舲：日 gfiu 168 g ： 4H “ 职业畀股庚处 宁仪，Q臾戏剧牛程袍设 侨学C业* 3

8、fr*：北丈 从艺魚切2001山徐齐存形缁小執人赛丢 2002T金B广各税眉犬矣山东亚可 金 2001F山东齐形殂小姐大冠0 2002全广気仪恂X宴山事*% 令惊卜仕 Mil炉芟力丈昵图网山三、实验步骤及要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发 生的现象并分析原因。（1）建立一个本地站点文件夹。（2）主页定为文件index, htm并打开进行编辑。（3）建议最外层的表格宽度为700像素，嵌套的表格宽度为100%o（4）要求包含导航、自己的照片、链接、表格等元素。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。

9、实验项目编号：E14209803实验名称：HTML高级应用12 / 68实验时间：实验五框架网页的创建(4学时)一、实验目的：(1)框架网页的创建和编辑操作(2)目标框架的设定二、实验内容木实验的内容主要是利用框架结构来建立网页，并设置目标框架。1.建立一个本地站点，包括2-3个网页。2.用框架结构为网页布局，其中一个网页为下图，其他网页自由发3.设置网页间的超链接，并设置目标框架.4.页面间要求包含至少一个动画、声音和视频。13 / 68月季花 杜齢花 海棠花 牡丹花 迎春花 向日葵 汕菜花框架式网页实例-花的世界三、实验步骤及要求实验前认真预习，熟练掌握有关框架网页的基础概念和知识。实 验

10、过程中记录发生的现象并分析原因。(1)新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方 框架为主框架(mainFranie)。(2)保存框架及框架集(3)在顶部框架中插入图像(4)左侧框架中设置页而属性背景图像。(5)在左侧框架中插入7行1列无边框架和背景表格。(6)在表格中插入导航图像按钮。(7)在右侧框架中插入文字、图像等网页元素。(8)制作两个网页分别命名为dianying. html和jingyue. html,保存在同一站点内。(9)为左侧导航按钮制作超链接，设置链接目标为“mainF违me”。(10)单击菜单栏“文件”丨“保存全部”(11)预览网页并检测超链接是否在指定框架内

11、打开。14 / 68四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。15 / 68实验项目编号：E14209804实验名称：交互设计实验时间：实验六表单网页的创建(4学时)一、实验目的：(1)熟悉表单的各元素(2)创建表单网页实例二、实验内容本实验的内容主要是熟练表单的基本操作，并制作表单网页。1.建立一个本地站点，包括2-3个网页2.其中一个网页为表单网如下图，其他网页为中含中表单项目自 由发挥制作.3.设置超链接将站点中的网页链接起来。16 / 68表单网页一留言簿姓名:1网址：|http:/密码21 1确认密码：1 1At

12、tachment:1浏览留言：提交1重置1表单网页二17 / 68三、实验步骤及要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发 生的现象并分析原因。实验完毕将所有文件打包交给老师。(1)建立一个本地站点(2)在站点中建立一个网页文件index, htm并打开进行编辑。(3)绘制布局表格(4)在表格中插入相应的表单元素。(5)对网页内容进行排版。(6)浏览网页的实际效果。(7)在站点中建立一个网页文件bbs. htm并打开进行编辑。(8)绘制布局表格(9)在表格中插入相应的表单元素。(10)对网页内容进行排版。(11)浏览网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完

13、成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。实验项目编号：E14209805实验名称：CSS样式使用实验时间：实验七CSS样式使用(6学时)18 / 68一、实验目的：(1)了解CSS的基木概念。(2)掌握css的常用属性，并应用在设计中，使网页设计内容更 加丰富。二、实验内容(1)使用不同的方法(HTML属性,JavaScript, CSS)为页面底版设置颜色(2)在不同位置设置CSS (直接写在控件中，另外设置样式表)， 取得相同的结果(3)修改控件中字体的尺寸和颜色(4)利用CSS设置菜单(展开和隐藏效果)三、实验步骤及要求实验前认真预习，熟练掌握有关概念和知识

14、。实验过程中记录发 生的现象并分析原因。实验完毕将所有文件打包交给老师。1.用html设置页而底板颜色：使用 BODY 属性设置页而颜色 页面颜色为红色 2、用JavaScript设置页而底板颜色：使用 JavaScript 设置页面颜色19 / 68document. bgColor =FF0000” ;页而颜色为红色3、用CSS设置页面底板颜色：使用 CSS 设置页而颜色页而颜色为红 色以上三种设置效果均为如下所示：20 / 684、在不同位置设置css；(1)在控件中：使用 CSS 设置页面颜色CSS 直接写在控件属性中21 / 68B 姓 名/fontinputm iFJBCSS设背贞

15、商綺色-licrosoft Intexnet Ezplozez文件 砂 S*（Y） 咖 工且 foQi）O 3 iU ；-丿如弘唤&回*l-J.il IJI C. Ulcujaritz wd八黨而lUtditladT. h51css直播写在挂件属性中设豈样貳表（2）另外设置样式表:Style-nameBackground-color:#00FF005.修改控件中字体的尺寸和颜色:默认控件中字体的尺寸和颜色 type二” textfield value二”杨晓玉” 设置前：22 / 68姓名:杨晓玉默认控件中字体的尺寸利顔色- licrosoft Internet Explorer文件的编辑查看

16、遡收議）工具I帮助O后退，0 国崗*卩縣 收藏夹1 2盘回口地址 C: UocwTients and S e 11 ixigskdmi ni str at or V 桌面 Wuti tie d4. html修改控件中字体的尺寸和颜色inputfont-size: 20;color: #OOffOO;font-family: 宋体；font-weight: bold;姓名：input type二textfield value=/杨晓玉设置后：修改控件中字体的尺寸和颜色-IlcrosoTt Int ernet Explorer文件（）编辑g）查看（V）收藏）工具a）帮助（W0后退0 回肉y A搜索

17、收藏夹血 画口 讥I 倉 C:Douwxntm and. SettingsVAd/riinistrator面Unti tLwd5. html:I杨晓玉6、设置控件属性：设置前:（font size二+2姓名;）z3 C:Docimcnts and ScttmeXAdwini trator4feffij0ntit J cd b.htl licrosoft Internet Explorer文泮回 須杨 SSCJT）收竜囚 3 帮肋钞23 / 68Qf.iE -/ ：环.收蘇 |G 勺 J绘址（5）iQc： Docufttnis nd SettanczVAinastrotrXv fl姓名；身份：i

18、nI密码；:设置后：（.STYLE1 font-family:宋体；font-size: 20px;styleinputfont-size: 20;color: #00ff00;font-family: 宋体；fontweight: bold;24 / 68)3 C:DocuBents and SettiixcAdMiiiisrtxator%SUntitled5. html - Iicrosoft Internet Explorerfl艾件址） 啦 se（y：i收黴 工且 WttlU）后區 o 3 i，亦 师疾e 3 $画口 . 1二讪 2 岂 C Docuwnt s xitd Swt11ag

19、tSAdriimstrtor面UntiQloM htnl姓名；身份；业7密码；1_1四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雷同者，按实验课考核办法处理。25 / 68实验项目编号：E14209806实验名称：CSS网页设计实验时间：实验八 CSS网页设计(6学时)一、实验目的：(1)掌握CSS样式表的引用的几种方式。(2)掌握三种CSS样式类型的创建及应用。(3)掌握” CSS规则定义”对话框中样式八大类别的使用。二、实验内容利用CSS定义各种链接显示效果，学习如何控制字号，字模及加 入特殊效果，了解要素和图象方而的样式设置。三、实验步骤及要求实验

20、前认真预习，熟练掌握有关概念和知识。实验过程中记录发 生的现象并分析原因。实验完毕将所有文件打包交给老师。1、整页套用样式：不执行这个网页程序，回答程序中的问题，为什么？hl 网站 h2网站 hl请指出这个几字的颜色及对齐方式h2请指出这个几字的颜色及对齐方式h3请指出这个几字的颜色2、样式文件引入不改变以下程序，分别使“网站实验”几个字变红色，“css网页实验”几个字变成绿色（分别使用外联和导入方式）27 / 68hl网站实验css网页实验/h23、如何使有超级链接的文字不岀现下划线，如何使鼠标移动到超链上产生变色的效果写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线

21、的类型link css28 / 68p style二font-family:行书体;font-size: 28ptahref二”未访问的链接p style=/，font-family:; font-size: 18pt，z ahref二访问过的链接p style=font-faniil.y:行书体;font-size:18ptahref二鼠标激活的链接4、用css控制的网页1）用以下语句建立一个6. htm文件用css控 制的网 页link rel=/zstylesheet type二text/css href二style, css 29 / 68hl align二center用 css 控制

22、的网页b文章标题:/td/trb2CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(CascadingStylesheet)o 在主页制作时采用css技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。br只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。30 / 68相关文章hl它的作用可以达到：（1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就 可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页而真正赏心悦 目。

23、（4）你可以轻松地控制页面的布局。b作者：/tdtd width二544 height二26来源：/td/td/td2）用记事本程序建立一个css文件：style, css,改变文件中b, input, small Input, hl,. b2, img的属性,使页面的字体变得更 32 / 68漂亮，使页而及图片更赏心悦目b font-size: 10pt; font-family: z，Verdana，z, Arial,宋体;color:#5F9EA0;input, smallInputborder:1 solid;FONT-SIZE: 13pt;FONT-STYLE: normal;FON

24、T-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 28px;LINE-HEIGHT:normal; color: #000000; background-color: #F5F5DChl font-size: 12pt; font-family: z，Verdanaz/, Arial,宋体;color:#CC9966;.b2font-size: lOpt; font-family:Verdana, Arial,宋 体，z; color:#006400;imgfilter:Alpha(opacity=100, style=3)四、说明：1、所有实验环

25、节均由每位学生独立完成，严禁抄袭他人实验结果, 若发现有结果雳同者，按实验课考核办法处理。实验九CSS页面应用(选做)33 / 68一、实验目的初步掌握为网页添加CSS样式表的方法。二、实验内容为网页添加CSS样式表，页面可以自定义，也可以下图为样页做 出。三、操作步骤1.创建index.html”等页面文件。2.新建CSS样式表文件，保存在自定义文件夹中，命名为 style, cssoiiLdex. html計屈代码拆分画设计标题: 1234Scharsec ut-8 /* CSS Do client1r f*/(注意：此时文档窗口中有两个文件，一个网页文件，一个样式 表文件。)3.为uin

26、dex, html”文件附加样式表,并添加样式。(1)将文档窗口切换至index, html文件。(2)单击CSS面板上的“附加样式表”按钮，并选择style, css 作为外部样式表。I附加祥式表t(3)将文档窗口切换至style, css文件，添加如下样式。* :*是通配选择器C；margin: 0;:设置网页上所有元素的边界(margin)为0,: :填充(padding)为 0。;padding: 0;body :body是类型选择器。:设置网页主体(body)上的文字(font)大小 :为0.75字体高(cm),字体为“宋体”,文字;font: 0. 75em 宋体；:颜色(colo

27、r)为#000080,网页的背景颜色 :(background-color)为#c2cdff。；33 / 6835 / 68color: #000080;background-color: #e2edff;p, h2, h3 margin: 0. 8em 0;P, li line-height: 1.8;hl font-size: 180%;color: #FFFFFF;h2 font-size: 150%;:p, h2. h3是群选择器。:同时设置段落(p)、二级标题(1】2)、三级标 !题(h3)的边界(margin)上下值为0.8字体 :高(cm),左右值为0。Ipli是群选择器。:同时

28、设置段落(p)、列表项(li)的行高(line-height)为 1.8 倍。：hl是类型选择器。设置一级标题(hl)的文字大小(font-size) 为基础字号的180%,文字颜色(color)为 白色。:h2是类型选择器。!设置二级标题(h2)的文字大小和文字颜色。 color:#FF6633;h3 font-size: 100%;color:#FF6633;font-weight: normal;h3是类型选择器。设置h3的文字大小和文字颜色。 文字粗细(font-weight)为正常(normal)。 背景图像(background)为dot.gif,该背景图 像不重复(no-repc

29、at),位于113的左上角(left top)。左填充(padding-left)为15像素。background:ur1(images/dotgif) no-repeat left top;36 / 6837 / 68padding-left: 15px;ol margin-left: 2em;a color: #000080; font-weight: bold;a:hover text-decoration: none;color: #FFFFFF;01是类型选择器。设豊编号列表（O1）的左边界（margin-left）: 为2字体髙（em）o :a是类型选择器。设置超链接（a）的文字颜

30、色为#000080,文 字粗细（font-weight）为粗体（bold）。 ;a:hover是伪类选择器。;设置超链接（a）鼠标经过（hover）时，文 本装饰（Wxtdccoration）为无装饰（none）, ! 文字颜色为白色，背景颜色为#000080.:header是ID选择器。：设lt#header块的背景颜色为#000080,背景 图像为header-bg.jpg,该背景图像不重复， background-color: #000080丿 deader块的右卜角。!填充（padding）上、右.下.左值分别是40px、; :0. 5pXx 20pxo;ftheader backgr

31、ound: #000080 url(images/header-bg. jpg)no-repeat right bottom;i -padding： 40px 0 5px 20px;；设置#header块的卞边框(border-bottom)宽!度为3px,边框样式为实线(solid),边框颜 border-bottom: 3px solid 件TH碉碗沁8。_J . . . Navigation 是 ID 选择器:!设置Navigation块的宽度(width)为 180px, !ttnavisation !向左浮动(仙讥 背景颜色#98b6e8,背景:图像nav-bg.jpg ,该背景图像

32、不重复 width* 180px* ； (no-repeat),位于左下角(leftbottom)o ；float: left;background: #98b6e8 url (images/naybg.卩或.理工2匹设置Navigation块的最小高度(min-height) left bottom;min-heigh丰为1 国幅；底部填充 330pxo 150+330=480:由于IE6浏览器不识别min-height属性,所 padding-bottom: 330px;；以使用“下划线属性过滤器”专门为IE6浏:览器设置高度(height)为150px。_height: 150px;L-

33、! #mainContent 是 ID 选择器。;:设置#mainComcnt 块的左边界(marginJcfl);!为 180pXo;丨设#mainContent 块的填充(padding)上.: padding: 0 20px 30px 20px;右、卜、左值分别是 、20px、30px、20px ；ttmainContent margin-left: 180px;fffooter clear： both; border-top:! frfooter是ID选择器。;:设置#footer块淸除(clear)两边(both)的:浮动对象。：:设置#footer块的上边框、填充和背景颜色。3px

34、 solid #7da5d&;.padding: 20px 0;background-color: #bed8f3;header p color: #ffffff;margin-bottom: 0; navigation ul font-size: 120%;headerp是后代选择器。设#header块中段落(p)的文字颜色和下 边界。；Navigation ul是后代选择器。!设置Navigation块中项目列表(ul)的文字 :大小为基础字号的120%。:项目符号的样式(list-style)为无符号(none)。 边界(margin)上、右、下、左值分别是15px、 :0、 0、 20

35、pXo36 / 6840 / 68liststyle: none;margin: 15px 0 0 20px;fffooter p text-align: center;margin: 0;.fltrt float: right;margin-left: 8px; footer p是后代选择器*设置#footer块中段落(p)的文字对齐方式 (text-align)为居中(center) 边界(margin)； 值为0。!是类选择器。：设宜class=fltrt的元素向右浮动(float),左; 边界(margin-left)值为 8px。4.为uabout, html文件附加样式表，并添加样

36、式。(1)打开 about, html 文件。(2)附加样式表style, csso(3)将文档窗口切换至style, css文件，添加如下样式。 emphasize font-size: 120%; font-weight: bold; font-style: normal;#emphasize是类选择器;设巻class=emphsize的元素文字大小为基础匚 字号的120%,文字粗细(font-weight)为粗; 体(bold)o文字倾斜(font-style)为正常。;5.为uevents, htmlv文件附加样式表，并添加样式。(1)打开 events, html 文件。(2)附加样

37、式表style, csso(3)将文档窗口切换至style, css文件，添加如下样式。41 / 6842 / 68table. events caption font-size: 120%; font-weight: bold; padding-bottom: 0. 5em;table, events ； table.events 是类选择器。设置class=events的表格(table)边框合并 bordercollapse: collapse；; (border-collapse)为合并(collapse)o ;； -；-:table.events th. table.events t

38、d 是群选择器; table, events th, table, eventi. class=events 的表格中标题单元格:(th)和普通单元格(td)的边框和填充。I border: lpx solid #000066; -Jpadding: 8px 20px;:- -table.events th是后代选择器。!11；设class=events的表格中标题单元格(山)： -的背景和文字颜色。table. events thbackground: #241374url(images/th-bg jpg);color: #ffffff;- -! table.events td是后代选择器

39、。丨设置class=events的表格中普通单元格(d):1 *:的背景颜色为#c2cdff,背景图像为td-bg.jpg, :该背景图像水平重复，位于底部。1table events td -Jbackground: #e2edff url(images/tdbgjpg) repeatxbottom;- - - table.events caption 是后代选择器。;设昼class=events的表格中标题(caption)的 文字大小为基础字号的120%,文字粗细 (font-weight)为粗体(bold )。下填充; (padding-bottom)值为 0.5cm6.为ugalle

40、ry, html文件附加样式表,并添加样式。(1)打JF gallery, html 文件。43 / 68div.galleryphoto p是后代选择器。设置 class=galleryphoto 的 div 块中段落（p） 的宽度。form.contact fieldset 是后代选择器。 设置class=contact的表单（form）中字段集 （fieldset）的宽度、边框和填充。(2)附加样式表style, csso(3)将文档窗口切换至style, css文件，添加如下样式。div. galleryphoto : div.galleophoto 是类选择器。!设宜class=ga

41、ller*photo的div块的卜边框和; border-bottom: lpx solid;；L_1 _:margin-bottom: 20px;div. galleryphoto img div.galleryphotoimg 是后代选择器。;:设置 class=galleryphoto 的 div 块中图像(img)； border: 15px solid #FFFFFjF勺边框。:div.galleryphoto p width: 430px;div. galleryphoto p span ;: div.galleryphotopspan 是后代选择器。!设置 class=galle

42、ryphoto 的 div 块中段落(p)； color： #808080 ;:中行内块(span)的文字颜色。:_I7.为“reserve.html”文件附加样式表，并添加样式。(1)打reserve, html 文件。(2)附加样式表style, csso(3)将文档窗口切换至style, css文件，添加如下样式。form. contact fieldset width: 40em;border: lpx solid #000080;padding: 0 0 lOpx lOpx;44 / 68form. contact legend font-weight: bold; color:#0

43、00080;form.contact legend 是后代选择器；设置class=contact的表单（form）中说明文 字（legend）的文字粗细和文字颜色。 Iform, contact label, fixedwidt：hfoTlcontacl IabeLfixedwidth 是后代选择器。display: block;width： 6em;float: left; center text-align: center; !设置 class=contact 的表单(form )中 class=fixedwidth 的标签(label)显示方式 :(display)为块(block),宽

44、度为 6cm,向左 :浮动。I! .center是类选择器。:设置class=center的元素文字对齐方式!（text-align）为居中（ccn（cr）8.保存网页，预览网页，效果如下。45 / 6846 / 68俚乐棉締介 近拐话动 袪彩B3片欢迎来到三*体骏淆水魅力三JE大不洱枸血四而开溥.何曲人坏轆忧翼.召“览陆天玄“空洁阳垃 海洋.於环.赶召当地的氏恪文化，枷 了根网邑的三亚风光述更一年C1孚示可以芋奚日卅鉄冲愿俪、緘仪、水上F托.衿诞加r左休用送功中当世小扯龙个哲。B不合憫也繼塚水目M坏厢水于近年兴圮，沼才才再是赵运动乩 海:带球-歩綁IO枸怖工件舌眇？刊，曽楚一可莎手芙色册炸的

45、链世凍各地牙“看效千个劭但临J寄行&复纟亳幣卫于店哲休砌*EUW技的*删行（：（氓日氏反內） 5I2T人仿.战乐咨询硏C的UR ,很mg芋的壬本功味可UT*股馆而11购诟丹的人由于疋有夠旦&洋甭诙习恃用，反而更各易水期?目菇，溶水眩供 不同Q加格点途 坊训材宓,你耳以目由选蘇合目己的磁B细価初步体E注尺上UJI听15另軒注口期及的评，fi汩啊伙.下症建手均，按巳上冷MK,专广MGttSiXW勾HJite下H,在和KH丹开曲B匕和C 创0併松M楼在夕壬律倉昭 4矣、訐兵么件之伺，妙妙带创総15列如怕殆51Q広l船e曲伽私冷冷M迁书仔何一个年海12為锻*人：t口超知U0删;3,盘如小的的垢讥（住问

46、d曲殛论讶和】&J冊水T实政），到fF泳弘中轨止-水中艾貝0. Rl$9Stt. H试乞抵E,即BE铅世矗8t用抄2卬血左证书，有爲禮在全球各个肿：克18立下钛 趴化，泠徉卄于冋砂将运珈2 Et&韭悻的抄诧.删和魅客e肱介干彫卿倣浴弘歼不*许豹、佬律ffCT么磁、据妖计，飯年0B京爭矽死匸的人窓电至少于EffWT%死亡的人跖It闵君木瘀報I刨更是格沼*啓帰制 在安殳怎困之內反丧葩申敷“用.為水计切的r 一住叭規sen* e洱不狂t：冷BJ】.虫守二人用行制2.足贵粋莎生衣、&帀帝気倉緒V勿俟用京5.址左蕭浴;，:农的浮力6.疋妾将而支例“渕廉虽T.不工磁囱砂忆年3.芫全富*岸诵才拿怖芟程，面孔

47、W啜営Ccj”icM吨80 W）WelJniiir. cn Ail Kicbts Ke:erve4.点应所玄 也老*曰乐3：沌址：向雨習三亚而衣退大戕坯日那燈号dHS - PlflebMLQWal r. e容也电话：刚用乙超秽檢超752 139761 mS547 / 68实验十XHTML语言（选做）一、实验目的1.掌握XHTML语法。2.掌握XHTML标记及属性。3.掌握XHTML标记校验的方法。二、实验内容制作“唯存教育-探究学习”栏目中的“article01.html”网页。惟存敦育-拜丸学习迫回首瓦48 / 68操作步如何构建高效的webquest細5华初施丸学数肓扶彳卿圻i.什么是 W

48、ebQnet?7eKwi#SS的Psgfr和TcttMewht 1995年侶导并虫的_沖&谍程计划” .俶个谀用耳2、任鉄 过& 股猱円仆跻论六千茎牛樓宋费4：在-形成iT*湖#体孤做如翊与F的戦&倉4阮数雯相忧冷加了一也g全性嗣霸ue（運炽龄生君网一欧5性冃S2.氏滋空一左廉袖如 会.让孩子in生Sb手就徹壻中皮用颐卫KDVb &币努力韭孩子花校决的丈干上思致陌一个w&k 比喉住是一个开曲任何册.送个何姬亡定丁 畛仲笑审农怖m折，汕学空田I常先利初加识黑珑字习 辛违一步阳貳翊I 隔替只的驚点2耍让宇生G?用W物9能3?鮒毎风次的据则:叩曲MW活防冷电更柏 削p仏za?e磁皀班曲工規式吹jrm

49、t汎丑电子an样E丈农3走筋茹t手刃猪嘶K皆，一s昭別作妆山日己的只 页二WebQutfl体的枚建过程-）送畀合泄的主是wQoei iZteZW方式中的一祝 它并不M对斫女纽楓溟御S用，对于倾的R姿性规识，并不声台便用预如1创 方式卿级讲Bh El比逊！，惣述比循一定跡0J:首先,主国想立血盼吏，学生可氐筋坏冃叙总船址任孙 彌结要 是开战审，不刚芋土可以形成彳进伽字习结島 只戏，娅石价乐 务恥时浒坦蹶展冃步港行，不 1曲氓昵观 痂囲僦.耒三，糊I学丫输玄合由干这科锣或本身皈天性以及各笑学牲乙何的目场文戈合聂另用om4m合为了浜迁 waKFmtttt 可理捋缶免$能幷4的工屈史有喊.开規网上与两

50、T和湖住罚匝狂动墓手习盛0是科迪珈迄实总的各个旳段可购诫P茅疋应沐压由于不是斫有 的地計有这洋的务件，an,网上芜歹的她讲环耳加站浮锻）貝件负如肿厘主豹r两科科s侏纵一种是住合关圧的 也点忒 一他&者氓在田尢诲恵晦 另外、和8讲场1逗JfiU.谊论0%,交迅硏计才能帀助于牛加龙应冋思，券働込 知曲各（二） 任务在8计任老对要结台以下麻瓏任舍：科HtL知业：做W.事目拯震妃E：弓憫学习君慌霉旳砂冬 CT幺作性：E站耍只仃，一E莊崔危一疋由产品.幵故性:任君弋如m 钗不删电 任务箫观没丸固主苔克伸誘住：可她任色分力3$QB和犷展出日日.溝是魄力晦如生（三）VfcWEQEiSK艮用激许好來龙甥三生作

51、品的不向万ffl（ jfijitt- 玄0 Bt5 ） . Se5 vFti-的对0町 劇财书耐乍业令生89作、创作的師赵世冈玄Copp矽1CBEIHG 农co.险坷 Left. AU 啟血 PJSWEQ.0盘衍百伦存傩育磁点1.制作article01.html” 网页。（1）新建网页。（2）使用“文件|保存”命令保存网页，命名为articleOl. htmlo（3）在文档工具栏上设置网页标题“唯存教育一一探究学习”。49 / 68（4）切换到代码视图,从“文本.txt”中将文字粘贴到HTML文 档 之间。2.根据网页语义添加XHTML标记和属性。标题标记： 段落标记：超链接标记：图像标记：换

52、行标记：项目列表及列表项标记： 表格、表格行、标题单元格、普通单元格标记： 3.使用div标记定义网页的逻辑结构，包扌舌container header content、footer儿个部分。结果如下:div id二header惟存教育一一探究学习a href二#返回首页女口何构建高效的webquestp杨淑莲华南师范大学教育技术研究所/p50 / 68一、什么是 WebQuestWebQuest 是美国的 Bernie Dodge 和 Tom March J 1995 年倡 导开发的一种“课程计划”。它把整个课程用导言、任务、过程、资 源、评价、结论六个基木模块贯串在一起，形成一个完整的教学

53、体系。h3二、WebQuest具体的构建过程 （一）选择合适的主题WebQuest仅仅是教学方式中的一种，.图 1 选择学习任务/pp开展网上及网下丰富的专题讲座活动， （二）任务p在设计任务时要结合以下原则确定任务：di科学性、知识性：体现教学目标。di趣味性：引发学习者探索的积极性。di可操作性：任务要具体，一般要形成一定的产品。di开放性：任务完成可以采取不同的途径，任务解决没有固定答案。di伸缩性：可以把任务分为基本题目和扩展性题目，满足能力较强 51 / 68的学生。 （三）评价WebQuest通常采用测评表格来考察学生作品的不同方面（包括过 程、结果、态度、情感等）。根据任务的差异

54、，评价的对象可表现为 书而作业、学生的作品、创作的网页或其他内容。评价对象起步阶段发展阶段完成阶段th scope=row参及讨论td 优秀 td良好 td优秀 搜集资料/tdtd 良好 td 优秀 52 / 68td 良好 作品创作td 良好 良好 td 优秀 div id二footerCopyright©BEING, otg. cn, Being Lab. All RightsReservedp版权所有惟存教育实验室/p4.登录网站，使用文件上传的方式进行标记校验，并修改发现的 错误。5.使用CSS控制网页的表现。(1)打articleOl. html 文件。ttcontaine

55、r width: 760px;margin: auto;P, li line-height: 1.8;hlfont-size: 130%;font-weight: normal;! Container 是 ID 选择器:设置Container块的宽度和边界（margin）。：当设置margin:aino时，块在英父元素中水平 :居中。Ipli是群选择器。；同时设置段落（p）、列表项（li）的行高（line-height）为 1.8 倍。；hl是类型选择器。:设置一级标题（hl）的文字大小（fom-size） 和文字粗细（fomwcight）。：（2）新建样式表，保存为style, csso（3

56、）为 articleOl. html 文件附加样式表 style, css。（4）在style, css文件中添加如下样式。* :*是通配选择器。:!设置网页上所有元素的边界（margin）为0,；margin:0;:填充(padding)为 0。;_1padding:0;:body是类型选择器。:设置网页主体（body）上的文字大小、字体body !和背景。:font: 0. 75em 宋体;background: #e0e0e0 url(images/mygrd. gif);:h2是类型选择器。:设置二级标题（h2）的文字大小（fom-sizc）48 / ：8和文字对齐方式（text-al

57、ign）o;54 / 68h2P.h2h3.h4是群选择器。：同时设置段落（p）、二级标题（h2）、三级标 题（1】3）、四级标题（h4）的边界（margin）; 上下值为0.8字体髙（cm）,左右值为0。:a是类型选择器。：设麗超链接（a）的文字颜色为黑色，文字装 饰（text-decoration）为无装饰（none）。a:hover是伪类选择器。设置超链接（a）鼠标经过（hover）时，文 字颜色为红色。:table是类型选择器。；设置表格table）的边界（margin）为自动匚 ! （auto）,边框合并（bordcr-collapsc）为合并 !（collapse ）o;:当设置m

58、argin:auto时，块在其父元素中水平 :居中。font-size: 180%;text-align: center;h3 font-size: 130%;color: #660000;h4 font-size: 110%; p, h2, h3, h4 margin: 0.8em 0;a color: #000000; text-decoration: none;a:hover color: #ffOOOO;table margin: auto;55 / 68header hl float: left;header p. goback float: right;#headerhl是后代选择

59、器. 设置#header块中hl向左浮动。header p.goback是后代选择器。：设置#header块中class=goback的段落向右浮 动，文字大小为130%,边界为0,行高为1.3 : 倍。border-collapse:collapse;1td, th :111padding: 5px 15px;:kMh是群选择器。同时设置标题单元格(th和普通单元格(d): 的填充、边框和文字对齐方式。border: lpx solid #000000;textalign: center;.center是类选择器。设豊class=center的元素文字对齐方式i i :1(text-alig

60、n)为居中(center )o center textalign: center;iheader是ID选择器。设置#header 块的卜边框(border-bottom);11 :1填充(padding)溢岀方式(overflow)和宽;度(wid(h)e11 ftheader ;i当设 overflow:auto时,可以迫使父元素包:border-bottom: 5px solid *藕舉駕嘗蠢(width)可以迫使父元 padding: 30px 5px 2px 5px吏竺覚世勺子匹土今空竺overflow: auto;width: 750px;font-size: 130%;56 / 6