网页设计实验报告.doc

学 年：20052006第一学期课程名称：网站建设与网页设计班 级：12级网络经济 姓 名： 学 号： 实验项目编号：E14209801实验名称：HTML语言基础实验时间：=实验一 网站建设相关基础（2学时）一、实验目的 1掌握门户网站设计的基本原则、网站及网页的基本风格与基本构图特点； 2熟悉页面排版，掌握网页布局的方法。 二、实验内容 1上网访问实际若干门户网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。2在网上找出下列版面布局的结构形式：“厂”结构布局“口”型（“国”字型）布局“三”型布局对称对比布局3找出若干旅游网站（至少5个）； 4找出若干B2B网站（至少5个）；5使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG、.GIF和PNG格式，比较三种图片格式的区别。三、实验步骤与要求 按“实验内容”中15完成网上的操作，完成实验报告，在实验报告中要求记录如下内容： 所访问各门户网站的风格及特点； 各种版面布局网站的域名和所采用的版面布局形式；记录旅游、B2B网站的名称、域名、URL及LOGO； 记录B2B网站主页上的宣传标语或体现企业精神的代表性词句。 四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验二 基本页面元素操作（2学时）一、实验目的：(1)熟悉基本网元素及其操作(2)熟悉使用页面属性二、实验内容 本实验的内容主要是制作一个“XXX景点介绍”网站的页面文件，它包括文本、图像、水平线以及日期和时间，效果如下图所示。三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。(1)创建页面LOGO。(2)创建主页，建立一个网页文件index.htm并打开进行编辑。(3)输入自己拟定撰写的文字内容。(4)将“XXX景点欢迎你”设置滚动效果的文字。(5)对文字进行排版。(6)插入水平线，并设置水平线的颜色。(7)插入导航条(8)插入图片(9)插入日期和时间(10)打开页面属性对话框(11)设置网页的背景图像。(12)浏览各个网页的实际效果。四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。实验三 页面链接和表格（2学时）一、实验目的：(1)利用表格进行文本的整齐排列和自由的图文混排(2)利用链接打开不同的页面。二、实验内容 本实验的内容主要是利用表格进行网页的定位练习1.建立一个本地站点,站点内至少包含网页五个。2.页面用表格定位，自定义不同的区块，效果可以与下图相似。3.设置超链接将站点中的网页链接起来。三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。(1)建立一个本地站点文件夹。(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)最外层的表格宽度为700像素，嵌套的表格宽度为100%，整体上分为上下两个表格。四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。实验项目编号：E14209802实验名称：制作个人主页实验时间：=实验四 制作个人网站（6学时）一、实验目的：(1)综合利用所学的HTML语言制作页面。(2)页面布局及内容的合理设计。二、实验内容 本实验的内容主要是综合利用所学的HTML对网页设计制作进行的练习1.建立一个包含多页面的网站。2.页面用表格定位，自定义不同的区块。3.主页用以介绍自己，分页面介绍一些细节，效果图如下两图所示。三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。（1）建立一个本地站点文件夹。（2）主页定为文件index.htm并打开进行编辑。（3）建议最外层的表格宽度为700像素，嵌套的表格宽度为100%。（4）要求包含导航、自己的照片、链接、表格等元素。四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。实验项目编号：E14209803实验名称：HTML高级应用实验时间：=实验五 框架网页的创建（4学时）一、实验目的：(1)框架网页的创建和编辑操作(2)目标框架的设定二、实验内容 本实验的内容主要是利用框架结构来建立网页，并设置目标框架。1.建立一个本地站点，包括2-3个网页。2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥.3.设置网页间的超链接,并设置目标框架.4.页面间要求包含至少一个动画、声音和视频。三、实验步骤与要求 实验前认真预习，熟练掌握有关框架网页的基础概念和知识。实验过程中记录发生的现象并分析原因。(1)新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方框架为主框架（mainFrame）。(2)保存框架及框架集(3)在顶部框架中插入图像(4)左侧框架中设置页面属性背景图像。(5)在左侧框架中插入7行1列无边框架和背景表格。(6)在表格中插入导航图像按钮。(7)在右侧框架中插入文字、图像等网页元素。(8)制作两个网页分别命名为dianying.html和jingyue.html，保存在同一站点内。(9)为左侧导航按钮制作超链接，设置链接目标为“mainFrame”。(10)单击菜单栏“文件”|“保存全部”(11)预览网页并检测超链接是否在指定框架内打开。四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验项目编号：E14209804实验名称：交互设计实验时间：=实验六 表单网页的创建（4学时）一、实验目的：(1)熟悉表单的各元素(2)创建表单网页实例二、实验内容 本实验的内容主要是熟练表单的基本操作，并制作表单网页。1.建立一个本地站点,包括2-3个网页2.其中一个网页为表单网如下图,其他网页为中含中表单项目自由发挥制作.3.设置超链接将站点中的网页链接起来。表单网页一表单网页二 三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。(1)建立一个本地站点(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)绘制布局表格(4)在表格中插入相应的表单元素。(5)对网页内容进行排版。(6)浏览网页的实际效果。(7)在站点中建立一个网页文件bbs.htm并打开进行编辑。(8)绘制布局表格(9)在表格中插入相应的表单元素。(10)对网页内容进行排版。(11)浏览网页的实际效果。四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验项目编号：E14209805实验名称：CSS样式使用实验时间：=实验七 CSS样式使用（6学时）一、实验目的：(1) 了解CSS的基本概念。(2) 掌握css的常用属性，并应用在设计中，使网页设计内容更加丰富。二、实验内容 (1)使用不同的方法（HTML属性，JavaScript，CSS）为页面底版设置颜色(2)在不同位置设置CSS（直接写在控件中，另外设置样式表），取得相同的结果(3)修改控件中字体的尺寸和颜色(4)利用CSS设置菜单（展开和隐藏效果）三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。1. 用html设置页面底板颜色：使用BODY属性设置页面颜色页面颜色为红色2、用JavaScript设置页面底板颜色： 使用JavaScript设置页面颜色 document.bgColor = “FF0000”;页面颜色为红色3、用CSS设置页面底板颜色： 使用CSS设置页面颜色页面颜色为红色 以上三种设置效果均为如下所示：4、在不同位置设置css；（1）在控件中：使用CSS设置页面颜色CSS直接写在控件属性中 （2）另外设置样式表： Style-name Background-color:#00FF005、修改控件中字体的尺寸和颜色：默认控件中字体的尺寸和颜色姓名： 设置前：修改控件中字体的尺寸和颜色 input font-size: 20; color: #00ff00; font-family: 宋体; font-weight: bold; 姓名： 设置后：6、设置控件属性： 设置前：（姓名;）设置后：（.STYLE1 font-family: 宋体;font-size: 20px; input font-size: 20; color: #00ff00; font-family: 宋体; font-weight: bold; ）四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验项目编号：E14209806实验名称：CSS网页设计实验时间：=实验八 CSS网页设计（6学时）一、实验目的：(1) 掌握CSS样式表的引用的几种方式。(2) 掌握三种CSS样式类型的创建及应用。(3) 掌握”CSS规则定义”对话框中样式八大类别的使用。二、实验内容 利用CSS定义各种链接显示效果，学习如何控制字号，字模及加入特殊效果，了解要素和图象方面的样式设置。三、实验步骤与要求 实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。1、整页套用样式：不执行这个网页程序，回答程序中的问题，为什么？网站网站请指出这个几字的颜色及对齐方式请指出这个几字的颜色及对齐方式请指出这个几字的颜色2、样式文件引入不改变以下程序，分别使“网站实验”几个字变红色，“css网页实验”几个字变成绿色（分别使用外联和导入方式）网站实验css网页实验3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型link css 未访问的链接 访问过的链接 鼠标激活的链接4、用 css 控 制 的 网 页1)用以下语句建立一个6.htm文件用 css 控 制 的 网 页 用 css 控 制 的 网 页文章标题：CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（CascadingStylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。相关文章它的作用可以达到：（1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）你可以轻松地控制页面的布局 。作者：来源：2）用记事本程序建立一个css文件：style.css,改变文件中b,input.smallInput,h1,.b2，img的属性，使页面的字体变得更漂亮，使页面及图片更赏心悦目bfont-size: 10pt; font-family:Verdana, Arial, 宋体;color: #5F9EA0;input.smallInputborder:1 solid;FONT-SIZE: 13pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 28px; LINE-HEIGHT: normal; color: #000000; background-color: #F5F5DCh1font-size: 12pt; font-family:Verdana, Arial, 宋体;color: #CC9966;.b2font-size: 10pt; font-family:Verdana, Arial, 宋体;color: #006400;imgfilter:Alpha(opacity=100,style=3)四、说 明： 1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。 实验九 CSS页面应用（选做）一、实验目的初步掌握为网页添加CSS样式表的方法。二、实验内容为网页添加CSS样式表，页面可以自定义，也可以下图为样页做出。三、操作步骤1创建“index.html”等页面文件。2新建CSS样式表文件，保存在自定义文件夹中，命名为style.css。（注意：此时文档窗口中有两个文件，一个网页文件，一个样式表文件。）3为“index.html”文件附加样式表，并添加样式。（1）将文档窗口切换至index.html文件。（2）单击CSS面板上的“附加样式表”按钮，并选择style.css作为外部样式表。（3）将文档窗口切换至style.css文件，添加如下样式。* 是通配选择器。设置网页上所有元素的边界（margin）为0，填充（padding）为0。* margin: 0;padding: 0;body 是类型选择器。设置网页主体（body）上的文字（font）大小为0.75字体高（em），字体为“宋体”，文字颜色（color）为#000080，网页的背景颜色（background-color）为#e2edff。body font: 0.75em 宋体;color: #000080;background-color: #e2edff;p, h2, h3 是群选择器。同时设置段落（p）、二级标题（h2）、三级标题（h3）的边界（margin）上下值为0.8字体高（em），左右值为0。p, h2, h3 margin: 0.8em 0;p, li 是群选择器。同时设置段落（p）、列表项（li）的行高（line-height）为1.8倍。p, li line-height: 1.8;h1 是类型选择器。设置一级标题（h1）的文字大小（font-size）为基础字号的180%，文字颜色（color）为白色。h1 font-size: 180%;color: #FFFFFF;h2 是类型选择器。设置二级标题（h2）的文字大小和文字颜色。h2 font-size: 150%;h3 是类型选择器。设置h3的文字大小和文字颜色。文字粗细（font-weight）为正常（normal）。背景图像（background）为dot.gif，该背景图像不重复（no-repeat），位于h3的左上角（left top）。左填充（padding-left）为15像素。color:#FF6633;h3 font-size: 100%;color:#FF6633;font-weight: normal; background:url(images/dot.gif) no-repeat left top;padding-left: 15px; ol 是类型选择器。设置编号列表（ol）的左边界（margin-left）为字体高（em）。ol margin-left: 2em;a 是类型选择器。设置超链接（a）的文字颜色为#000080，文字粗细（font-weight）为粗体（bold）。a color: #000080;a:hover 是伪类选择器。设置超链接（a）鼠标经过（hover）时，文本装饰（text-decoration）为无装饰（none），文字颜色为白色，背景颜色为#000080。font-weight: bold;a:hover #header 是ID选择器。设置#header块的背景颜色为#000080，背景图像为header-bg.jpg，该背景图像不重复，位于#header块的右下角。填充（padding）上、右、下、左值分别是40px、0、5px、20px。text-decoration: none;color: #FFFFFF;background-color: #000080;#header background: #000080 url(images/header-bg.jpg) no-repeat right bottom;设置#header块的下边框（border-bottom）宽度为3px，边框样式为实线（solid），边框颜色为#7da5d8。padding: 40px 0 5px 20px;border-bottom: 3px solid #7da5d8;#navigation 是ID选择器。设置#navigation块的宽度（width）为180px，向左浮动（float）。背景颜色#98b6e8，背景图像nav-bg.jpg，该背景图像不重复（no-repeat），位于左下角（left bottom）。#navigation width: 180px;float: left;设置#navigation块的最小高度（min-height）为150px，底部填充330px。150+330=480由于IE6浏览器不识别min-height属性，所以使用“下划线属性过滤器”专门为IE6浏览器设置高度（height）为150px。background: #98b6e8 url(images/nav-bg.jpg) no-repeat left bottom;min-height: 150px;padding-bottom: 330px;_height: 150px;#mainContent 是ID选择器。设置#mainContent块的左边界（margin-left）为180px。设置#mainContent块的填充（padding）上、右、下、左值分别是0、20px、30px、20px。#mainContent margin-left: 180px;padding: 0 20px 30px 20px;#footer 是ID选择器。设置#footer块清除（clear）两边（both）的浮动对象。设置#footer块的上边框、填充和背景颜色。#footer clear: both;border-top: 3px solid #7da5d8;padding: 20px 0;background-color: #bed8f3;#header p 是后代选择器。设置#header块中段落（p）的文字颜色和下边界。#header p color: #ffffff;margin-bottom: 0;#navigation ul 是后代选择器。设置#navigation块中项目列表（ul）的文字大小为基础字号的120%。项目符号的样式（list-style）为无符号（none）。边界（margin）上、右、下、左值分别是15px、0、0、20px。#navigation ul font-size: 120%;list-style: none;margin: 15px 0 0 20px;#footer p 是后代选择器。设置#footer块中段落（p）的文字对齐方式（text-align）为居中（center），边界（margin）值为0。#footer p text-align: center;margin: 0;#fltrt 是类选择器。设置class=fltrt的元素向右浮动（float），左边界（margin-left）值为8px。.fltrt float: right;margin-left: 8px; 4为“about.html”文件附加样式表，并添加样式。（1）打开about.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。#emphasize 是类选择器。设置class=emphsize的元素文字大小为基础字号的120%，文字粗细（font-weight）为粗体（bold）。文字倾斜（font-style）为正常。.emphasize font-size: 120%;font-weight: bold;font-style: normal; 5为“events.html”文件附加样式表，并添加样式。（1）打开events.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。table.events 是类选择器。设置class=events的表格（table）边框合并（border-collapse）为合并（collapse）。table.events border-collapse: collapse;table.events th, table.events td 是群选择器。同时设置class=events的表格中标题单元格（th）和普通单元格（td）的边框和填充。table.events th, table.events td border: 1px solid #000066;table.events th 是后代选择器。设置class=events的表格中标题单元格（th）的背景和文字颜色。padding: 8px 20px;table.events th background: #241374 url(images/th-bg.jpg);table.events td 是后代选择器。设置class=events的表格中普通单元格（td）的背景颜色为#e2edff，背景图像为td-bg.jpg，该背景图像水平重复，位于底部。color: #ffffff;table.events td background: #e2edff url(images/td-bg.jpg) repeat-x bottom;table.events caption 是后代选择器。设置class=events的表格中标题（caption）的文字大小为基础字号的120%，文字粗细（font-weight）为粗体（bold）。下填充（padding-bottom）值为0.5em。table.events caption font-size: 120%; font-weight: bold; padding-bottom: 0.5em;6为“gallery.html”文件附加样式表，并添加样式。（1）打开gallery.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。div.galleryphoto 是类选择器。设置class=galleryphoto的div块的下边框和下边界。div.galleryphoto border-bottom: 1px solid #000080;margin-bottom: 20px;div.galleryphoto img 是后代选择器。设置class=galleryphoto的div块中图像（img）的边框。div.galleryphoto img border: 15px solid #FFFFFF;div.galleryphoto p 是后代选择器。设置class=galleryphoto的div块中段落（p）的宽度。div.galleryphoto p width: 430px;div.galleryphoto p span 是后代选择器。设置class=galleryphoto的div块中段落（p）中行内块（span）的文字颜色。div.galleryphoto p span color: #808080;7为“reserve.html”文件附加样式表，并添加样式。（1）打开reserve.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。form.contact fieldset 是后代选择器。设置class=contact的表单（form）中字段集（fieldset）的宽度、边框和填充。form.contact fieldset width: 40em;border: 1px solid #000080; padding: 0 0 10px 10px; form.contact legend 是后代选择器。设置class=contact的表单（form）中说明文字（legend）的文字粗细和文字颜色。form.contact legend font-weight: bold; color:#000080; form.contact label.fixedwidth 是后代选择器。设置class=contact的表单（form）中class=fixedwidth的标签（label）显示方式（display）为块（block），宽度为6em，向左浮动。form.contact label.fixedwidth display: block; width: 6em; float: left; .center 是类选择器。设置class=center的元素文字对齐方式（text-align）为居中（center）。.center text-align: center;8保存网页，预览网页，效果如下。实验十 XHTML语言（选做）一、实验目的1掌握XHTML 语法。2掌握XHTML标记及属性。3掌握XHTML 标记校验的方法。二、实验内容制作“唯存教育探究学习”栏目中的“article01.html”网页。三、操作步骤1制作“article01.html”网页。（1）新建网页。（2）使用“文件保存”命令保存网页，命名为article01.html。（3）在文档工具栏上设置网页标题“唯存教育探究学习”。（4）切换到代码视图，从“文本.txt”中将文字粘贴到HTML文档之间。2根据网页语义添加XHTML标记和属性。标题标记： 段落标记：超链接标记：图像标记：换行标记：项目列表及列表项标记： 表格、表格行、标题单元格、普通单元格标记： 3使用标记定义网页的逻辑结构，包括container、header、content、footer几个部分。结果如下：惟存教育探究学习返回首页如何构建高效的 webquest杨淑莲 华南师范大学教育技术研究所一、什么是 WebQuestWebQuest 是美国的 Bernie Dodge 和 Tom March 于 1995 年倡导开发的一种“课程计划”。它把整个课程用导言、任务、过程、资源、评价、结论六个基本模块贯串在一起，形成一个完整的教学体系。二、 WebQuest 具体的构建过程（一）选择合适的主题WebQuest 仅仅是教学方式中的一种，图1选择学习任务开展网上与网下丰富的专题讲座活动，（二）任务在设计任务时要结合以下原则确定任务：科学性、知识性：体现教学目标。趣味性：引发学习者探索的积极性。可操作性：任务要具体，一般要形成一定的产品。开放性：任务完成可以采取不同的途径，任务解决没有固定答案。伸缩性：可以把任务分为基本题目和扩展性题目，满足能力较强的学生。（三）评价WebQuest 通常采用测评表格来考察学生作品的不同方面（包括过程、结果、态度、情感等）。根据任务的差异，评价的对象可表现为书面作业、学生的作品、创作的网页或其他内容。评价对象起步阶段发展阶段完成阶段参与讨论优秀良好优秀搜集资料良好优秀良好作品创作良好良好优秀Copyright©BEING., Being Lab. All Rights Reserved版权所有 惟存教育实验室4登录/网站，使用文件上传的方式进行标记校验，并修改发现的错误。5使用CSS控制网页的表现。（1）打开article01.html文件。（2）新建样式表，保存为style.css。（3）为article01.html文件附加样式表style.css。（4）在style.css文件中添加如下样式。* 是通配选择器。设置网页上所有元素的边界（margin）为0，填充（padding）为0。* margin:0;padding:0;body 是类型选择器。设置网页主体（body）上的文字大小、字体和背景。body font: 0.75em 宋体;background: #e0e0e0 url(images/mygrd.gif);#container 是ID选择器。设置#container块的宽度和边界（margin）。当设置margin:auto时，块在其父元素中水平居中。#container width: 760px;margin: auto;p, li 是群选择器。同时设置段落（p）、列表项（li）的行高（line-height）为1.8倍。p, li line-height: 1.8;h1 是类型选择器。设置一级标题（h1）的文字大小（font-size）和文字粗细（font-weight）。h1font-size: 130%;font-weight: normal;h2 是类型选择器。设置二级标题（h2）的文字大小（font-size）和文字对齐方式（text-align）。h2 font-size: 180%;text-align: center;h3 font-size: 130%;color: #660000;p, h2, h3,h4 是群选择器。同时设置段落（p）、二级标题（h2）、三级标题（h3）、四级标题（h4）的边界（margin）上下值为0.8字体高（em），左右值为0。h4 font-size: 110%; p