《网页制作》实验指导书.docx
《《网页制作》实验指导书.docx》由会员分享，可在线阅读，更多相关《《网页制作》实验指导书.docx（129页珍藏版）》请在冰点文库上搜索。
《网页制作》实验指导书
《网页制作》实验指导书
目录
《网页制作》实验大纲
实验
（一）简单网页制作
实验
（二）CSS初步应用
实验（三）XHTML语言
实验（四）CSS选择器
实验（五）应用背景图像
实验（六）CSS浮动布局
实验（七）CSS定位布局
实验（八）导航条和表单
实验（九）开发环境的使用及C#语法
实验（十）构建新闻类
实验（十一）控件使用及站点配置
实验（十二）创建数据库操作类
实验（十三）新闻列表页及内容页制作
实验（十四）绑定数据并显示信息
实验（十五）使用LINQ及Ajax改进网站
实验（十六）构建统一的站点页面
《网页制作》实验教学大纲
课程名称：
互联网与网站建设
英文名称：
InternetandWebsiteDevelopment
设置形式：
非独立设课
课程模块：
专业核心课
实验课性质：
专业实验
课程编号：
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标准解决方案》，[英]AndyBudd等，人民邮电出版社，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.8em0;
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的左上角（lefttop）。
左填充（padding-left）为15像素。
color:
#FF6633;
}
h3{
font-size:
100%;
color:
#FF6633;
font-weight:
normal;
background:
url（images/dot.gif）no-repeatlefttop;
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:
#000080url（images/header-bg.jpg）no-repeatrightbottom;
设置#header块的下边框（border-bottom）宽度为3px，边框样式为实线（solid），边框颜色为#7da5d8。
padding:
40px05px20px;
border-bottom:
1pxsolid#7da5d8;
#navigation是ID选择器。
设置#navigation块的宽度（width）为180px，向左浮动（float）。
背景颜色#98b6e8，背景图像nav-bg.jpg，该背景图像不重复（no-repeat），位于左下角（leftbottom）。
}
#navigation{
width:
180px;
float:
left;
设置#navigation块的最小高度（min-height）为150px，底部填充330px。
150+330=480
由于IE6浏览器不识别min-height属性，所以使用“下划线属性过滤器”专门为IE6浏览器设置高度（height）为150px。
background:
#98b6e8url（images/nav-bg.jpg）no-repeatleftbottom;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:
020px30px20px;
}
#footer是ID选择器。
设置#footer块清除（clear）两边（both）的浮动对象。
设置#footer块的上边框、填充和背景颜色。
#footer{
clear:
both;
border-top:
1pxsolid#7da5d8;
padding:
20px0;
background-color:
#bed8f3;
}
#headerp是后代选择器。
设置#header块中段落（p）的文字颜色和下边界。
#headerp{
color:
#ffffff;
margin-bottom:
0;
#navigationul是后代选择器。
设置#navigation块中项目列表（ul）的文字大小为基础字号的120%。
项目符号的样式（list-style）为无符号（none）。
边界（margin）上、右、下、左值分别是15px、0、0、20px。
}
#navigationul{
font-size:
120%;
list-style:
none;
margin:
15px0020px;
}
#footerp是后代选择器。
设置#footer块中段落（p）的文字对齐方式（text-align）为居中（center），边界（margin）值为0。
#footerp{
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.eventsth,table.eventstd是群选择器。
同时设置class=events的表格中标题单元格（th）和普通单元格（td）的边框和填充。
}
table.eventsth,table.eventstd{
border:
1pxsolid#000066;
table.eventsth是后代选择器。
设置class=events的表格中标题单元格（th）的背景和文字颜色。
padding:
8px20px;
}
table.eventsth{
background:
#241374url（images/th-bg.jpg）;
table.eventstd是后代选择器。
设置class=events的表格中普通单元格（td）的背景颜色为#e2edff，背景图像为td-bg.jpg，该背景图像水平重复，位于底部。
color:
#ffffff;
}
table.eventstd{
background:
#e2edffurl（images/td-bg.jpg）repeat-xbottom;
}
table.eventscaption是后代选择器。
设置class=events的表格中标题（caption）的文字大小为基础字号的120%，文字粗细（font-weight）为粗体（bold）。
下填充（padding-bottom）值为0.5em。
table.eventscaption{
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:
1pxsolid#000080;
margin-bottom:
20px; }
div.galleryphotoimg是后代选择器。
设置class=galleryphoto的div块中图像（img）的边框。
div.galleryphotoimg{
border:
15pxsolid#FFFFFF;
}
div.galleryphotop是后代选择器。
设置class=galleryphoto的div块中段落（p）的宽度。
div.galleryphotop{
width:
430px;
}
div.galleryphotopspan是后代选择器。
设置class=galleryphoto的div块中段落（p）中行内块（span）的文字颜色。
div.galleryphotopspan{
color:
#808080;
}
8．为“reserve.html”文件附加样式表，并添加样式。
（1）打开reserve.html文件。
（2）附加样式表style.css。
（3）将文档窗口切换至style.css文件，添加如下样式。
form.contactfieldset是后代选择器。
设置class=contact的表单（form）中字段集（fieldset）的宽度、边框和填充。
form.contactfieldset{
width:
40em;
border:
1pxsolid#000080;
padding:
0010px10px;
}
form.contactlegend是后代选择器。
设置class=contact的表单（form）中说明文字（legend）的文字粗细和文字颜色。
form.contactlegend{
font-weight:
bold;
color:
#000080;
}
form.contactlabel.fixedwidth是后代选择器。
设置class=contact的表单（form）中class=fixedwidth的标签（label）显示方式（display）为块（block），宽度为6em，向左浮动。
form.contactlabel.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）将“实验三”文
升级会员 