《网页制作》实验指导书.doc

《网页制作》实验指导书

目录
《网页制作》实验大纲
实验（一）简单网页制作
实验（二）CSS 初步应用
实验（三）XHTML语言
实验（四）CSS选择器
实验（五）应用背景图像
实验（六）CSS浮动布局
实验（七）CSS定位布局
实验（八）导航条和表单
实验（九）开发环境的使用及C#语法
实验（十）构建新闻类
实验（十一）控件使用及站点配置
实验（十二）创建数据库操作类
实验（十三）新闻列表页及内容页制作
实验（十四）绑定数据并显示信息
实验（十五）使用LINQ及Ajax改进网站
实验（十六）构建统一的站点页面

《网页制作》实验教学大纲
课程名称：
互联网与网站建设
英文名称：
Internet and Website Development
设置形式：
非独立设课
课程模块：
专业核心课
实验课性质：
专业实验
课程编号：
502110
课程负责人：
王丽萍
大纲主撰人：
王丽萍
大纲审核人：
李焕勤

一、学时、学分
课程总学时：
64
实验学时：
32
课程学分：
4
二、适用专业及年级
数字媒体艺术专业 本科二年级
三、课程目标与基本要求
课程的目标：
课程全面介绍网站设计与开发的相关知识，包括网页制作工具的使用方法、XHTML语言、CSS语言、ASP.net程序设计等，目标是使学生具备网站开发的基本技能，并能够独立完成中、小型网站的制作。
基本要求：
1．熟练使用网页制作工具Dreamweaver，能够在网页中插入标题、段落、列表、特殊字符、图像、表格、表单、超链接等基本元素；
2．掌握XHTML的语法结构及各种标记、属性；
3．掌握CSS网页样式控制方法，能灵活利用CSS选择器及其属性设置文本、标题、列表、图像、表格、表单、超链接等元素的样式；能灵活利用浮动、定位等多种方法实现网页两列、三列、多列及混合布局。
4．掌握ASP.net程序设计方法，并能够开发简单服务器端程序。
5．掌握网站管理及发布方法。
四、主要仪器设备
计算机。
五、实验项目及教学安排
序号
实验项目名称
实验基本方法和内容
项目 学时
项目
类型
每组
人数
教学 要求
1
简单网页制作
建立站点；新建并保存网页；在网页中插入段落、标题、列表、特殊字符、图像、超链接、表格、表单等基本元素。
2
基础
1
必修
2
CSS 初步应用
在网页中应用CSS的三种方法。
2
基础
1
必修
3
XHTML语言
设置网页的XHTML 标记及属性，并进行语法校验。
2
基础
1
必修
4
CSS选择器
利用CSS选择器及其属性设置网页元素样式。
2
基础
1
必修
5
应用背景图像
用背景图像制作圆角框；用背景图像替换文本。
2
基础　
1
必修
6
CSS浮动布局
利用浮动的方法制作两列、三列布局网页。
2
综合
1
必修
7
CSS定位布局
利用定位的方法制作两列、多列布局网页。
2
综合
1
必修
8
导航条和表单
制作垂直导航条；制作水平导航条；对表单应用样式。
2
基础
1
必修
9
开发环境的使用及C#语法
开发环境的使用及C#语法
2
基础
1
必修
10
构建新闻类
构建新闻类
2

基础
1
必修
11
控件使用及站点配置
控件使用及站点配置
2
基础
1
必修
12
创建数据库操作类
创建数据库操作类
2
基础
1
必修
13
新闻列表页及内容页制作
新闻列表页及内容页制作
2
基础
1
必修
14
绑定数据并显示信息
绑定数据并显示信息
2
基础
1
必修
15
使用LINQ及Ajax改进网站
使用LINQ及Ajax改进网站
2
综合
1
必修
16
构建统一的站点页面
构建统一的站点页面
2
综合
1
必修
17
网站制作综合训练
自命主题网站制作。
8
设计
综合
1
选修
六、考核方式及成绩评定
考核方式：
1．实验：根据实验考勤和实验报告评定成绩，满分为100分。
2．作业：根据作品评定成绩，满分为100分。
3．实验考试：上机考试，满分为100分。
成绩评定：
实验成绩占本课程成绩的30%。
实验成绩＝实验平时成绩×20%＋作业成绩×30%＋实验考试成绩×50%。
七、实验教科书、参考书
1．实验教科书
《互联网与网站建设实验指导书》，王丽萍，于连民，2009
2．实验参考书
《精通CSS--高级Web标准解决方案》，[英]Andy Budd等，人民邮电出版社，2006年11月
《ASP.NET第一步》，朱晔，清华大学出版社，2007年7月
实验一 简单网页制作
一、实验目的
1．熟悉Dreamweaver软件的操作界面。
2．掌握建立本地站点的方法。
3．掌握简单网页制作方法。
4．掌握超链接的建立方法。
二、实验内容
1．创建“潜水俱乐部”站点。
2．制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。
三、操作步骤
1．创建“潜水俱乐部”站点
（1）在D盘新建文件夹，命名为myweb；
（2）将images文件夹和gallery文件夹复制到中myweb中；
（3）启动Dreamweaver，使用“站点｜新建站点”命令创建站点。
2．制作“俱乐部首页”。
（1）新建网页。
（2）使用“文件｜保存”命令保存网页，命名为index.html。
（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。

（4）从“文本.txt”中将首页的相关文字粘贴到网页中。
（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。
（6）插入图像。
（7）在Copyright后插入版权符号©。
（8）在电话号码之间插入半角空格。
（9）在电子邮箱地址上建立超链接，mailto: vip@BubbleU。
（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。

（11）保存网页，按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区域中的原有内容，然后粘贴俱乐部近期活动文字。
（4）设置二级标题。
（5）插入表格。

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

（7）保存网页，按F12，预览网页。

6．制作“在线预约”网页。

（1）在文件面板上复制index.html网页，重新命名为reserve.html。
（2）在文件面板上双击打开reserve.html。
（3）删除mainContent区域中的原有内容，然后粘贴在线预约文字。
（4）设置二级标题。
（5）插入“表单”。

（6）光标置于表单内，插入“菜单”表单元素。

（7）选中“菜单”在属性面板上单击“列表值”按钮，设置选项。

（8）在表单内插入其它表单元素。
（9）保存网页，按F12，预览网页。
7．建立网站内各页面之间的超链接。
实验二 CSS初步应用
一、实验目的
初步掌握为网页添加CSS样式表的方法。
二、实验内容
为“潜水俱乐部”网站中的5个网页添加CSS样式表。
三、操作步骤
1．创建“潜水俱乐部”站点
（1）将“实验二”文件夹中的myweb文件夹复制D盘；
（2）启动Dreamweaver，使用“站点｜新建站点”命令新建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。
2．打开“index.html”文件。
3．新建CSS样式表文件，保存在myweb文件夹中，命名为style.css。

（注意：此时文档窗口中有两个文件，一个网页文件，一个样式表文件。）
4．为“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; }

5．为“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; }
6．为“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-bgjpg，该背景图像水平重复，位于底部。
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;
}
7．为“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;
}
8．为“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;　}

9．保存网页，预览网页，效果如下。

实验三 XHTML语言
一、实验目的
1．掌握XHTML 语法。
2．掌握XHTML标记及属性。
3．掌握XHTML 标记校验的方法。
二、实验内容
制作“唯存教育－－探究学习”栏目中的“article01.html”网页。

三、操作步骤
1．创建“唯存教育”站点
（1）在D盘新建文件夹，命名为myweb；
（2）将“实验三”文件夹中的images文件夹复制到中myweb中；
（3）启动Dreamweaver，使用“站点｜新建站点”命令创建站点。
2．制作“article01.html”网页。
（1）新建网页。
（2）使用“文件｜保存”命令保存网页，命名为article01.html。
（3）在文档工具栏上设置网页标题“唯存教育－－探究学习”。
4）切换到代码视图，从“文本.txt”中将文字粘贴到HTML文档之间。
3．根据网页语义添加XHTML标记和属性。
标题标记：ner、header、content、footer几个部分。结果如下：

于 1995 年倡导开发的一种“课程计划”。它把整个课程用导言、任务、过程、资源、评价、结论六个基本模块贯串在一起，形成一个完整的教学体系。在设计任务时要结合以下原则确定任务：作的网页或其他内容。r>

（1）启动Dreamweaver，创建being站点，并将myweb文件夹指定为站点文件夹。
（2）打开article01.html文件。
（3）新建样式表，保存为style.css。
（4）为article01.html文件附加样式表style.css。
（5）在style.css文件中添加如下样式。
* 是通配选择器。
设置网页上所有元素的边界（margin）为0，填充（padding）为0。
* {
margin:0;
padding:0;
body 是类型选择器。
设置网页主体（body）上的文字大小、字体和背景。
}
body {
font: 075em "宋体";
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）。
h1{
font-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, h2, h3, h4 {
margin: 0.8em 0;
a 是类型选择器。
设置超链接（a）的文字颜色为黑色，文字装饰（text-decoration）为无装饰（none）。
}
a {
color: #000000;
a:hover 是伪类选择器。
设置超链接（a）鼠标经过（hover）时，文字颜色为红色。
text-decoration: none;
}
a:hover {
table 是类型选择器。
设置表格（table）的边界margin）为自动（auto），边框合并（border-collapse）为合并（collapse）。
当设置margin:auto时，块在其父元素中水平居中。
color: #ff0000;
}
table {
margin: auto;
border-collapse:collapse;
}
td, th 是群选择器。
同时设置标题单元格（th）和普通单元格（td）的填充、边框和文字对齐方式。
td,th {
padding: 5px 15px;
border: 1px solid #000000;
.center 是类选择器。
设置class=center的元素文字对齐方式（text-align）为居中（center）。
text-align: center;
}
.center {
#header 是ID选择器。
设置#header块的下边框（border-bottom）、
填充（padding）、溢出方式（overflow）和宽度（width）。
当设置overflow:auto时，可以迫使父元素包含其浮动的子元素。
对于IE6，设置宽度（width）可以迫使父元素包含其浮动的子元素。750+5+5=760
text-align: center;
}
#header {
border-bottom: 5px solid #666666;
padding: 30px 5px 2px 5px;
overflow: auto;
width: 750px;
#header h1 是后代选择器。
设置#header块中h1向左浮动。
}
#header h1 {
float: left;
}
#header p.goback 是后代选择器。
设置#header块中class=goback的段落向右浮动，文字大小为130%，边界为0，行高为1.3倍。
#header p.goback {
float: right;
font-size: 130%;
margin: 0;
line-height: 1.3;
#content 是ID选择器。
设置#content块的填充（padding）上、右、下、左值都是30px。
}
#content {
padding: 30px;
#content p 是后代选择器。
设置#content块中段落的首行文字缩进（text-indent）值为2em。
}
#content p {
text-indent: 2em;
}
#content p.center 是后代选择器。
设置#content块中class=center的段落的首行文字缩进（text-indent）值为0。
content p.center {
text-indent: 0;
}
#content ul 是后代选择器。
设置#content块中项目列表（ul）的左边界（margin-left）值为3em。
#content ul {
margin-left:3em;
}
#footer 是后代选择器。
设置#footer块的文字对齐方式和上边框。
#footer {
text-align: center;
border-top: 1px solid #666666; }
实验四 CSS选择器
一、实验目的
1．掌握在网页上应用CSS的方法。
2．掌握CSS的基本语法规则。
3．掌握CSS的常用选择器。
二、实验内容
定义“泡泡潜水俱乐部”网站首页的样式。
三、操作步骤
1．创建“潜水俱乐部”站点
（1）将“实验四”文件夹中的myweb文件夹复制D盘；
（2）启动Dreamweaver，使用“站点｜新建站点”命令新建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。
2．打开“index.html”文件。
3．新建CSS样式表文件，保存在myweb文件夹中，命名为style.css。
4．为“index.html”文件附加样式表，并添加样式。
* 是通配选择器。
关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2025 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：