1、网页制作实验指导书网页制作实验指导书目录网页制作实验大纲实验（一）简单网页制作实验（二）CSS 初步应用实验（三）XHTML语言实验（四）CSS选择器实验（五）应用背景图像实验（六）CSS浮动布局实验（七）CSS定位布局实验（八）导航条和表单实验（九）开发环境的使用及C#语法实验（十）构建新闻类实验（十一）控件使用及站点配置实验（十二）创建数据库操作类实验（十三）新闻列表页及内容页制作实验（十四）绑定数据并显示信息实验（十五）使用LINQ及Ajax改进网站实验（十六）构建统一的站点页面网页制作实验教学大纲课程名称：互联网与网站建设英文名称：Internet and Website Develo
2、pment设置形式：非独立设课课程模块：专业核心课实验课性质：专业实验课程编号：502110课程负责人：王丽萍大纲主撰人：王丽萍大纲审核人：李焕勤一、学时、学分 课程总学时：64实验学时：32课程学分：4二、适用专业及年级 数字媒体艺术专业 本科二年级三、课程目标与基本要求课程的目标：课程全面介绍网站设计与开发的相关知识，包括网页制作工具的使用方法、XHTML语言、CSS语言、ASP.net程序设计等，目标是使学生具备网站开发的基本技能，并能够独立完成中、小型网站的制作。基本要求：1熟练使用网页制作工具Dreamweaver，能够在网页中插入标题、段落、列表、特殊字符、图像、表格、表单、超链接
3、等基本元素；2掌握XHTML的语法结构及各种标记、属性；3掌握CSS网页样式控制方法，能灵活利用CSS选择器及其属性设置文本、标题、列表、图像、表格、表单、超链接等元素的样式；能灵活利用浮动、定位等多种方法实现网页两列、三列、多列及混合布局。4掌握ASP.net程序设计方法，并能够开发简单服务器端程序。5掌握网站管理及发布方法。四、主要仪器设备 计算机。五、实验项目及教学安排序号实验项目名称实验基本方法和内容项目 学时项目类型每组人数教学 要求1简单网页制作建立站点；新建并保存网页；在网页中插入段落、标题、列表、特殊字符、图像、超链接、表格、表单等基本元素。2基础1必修2CSS 初步应用在网页
4、中应用CSS的三种方法。2基础1必修3XHTML语言设置网页的XHTML 标记及属性，并进行语法校验。2基础1必修4CSS选择器利用CSS选择器及其属性设置网页元素样式。2基础1必修5应用背景图像用背景图像制作圆角框；用背景图像替换文本。2基础1必修6CSS浮动布局利用浮动的方法制作两列、三列布局网页。2综合1必修7CSS定位布局利用定位的方法制作两列、多列布局网页。2综合1必修8导航条和表单制作垂直导航条；制作水平导航条；对表单应用样式。2基础1必修9开发环境的使用及C#语法开发环境的使用及C#语法2基础1必修10构建新闻类构建新闻类2基础1必修11控件使用及站点配置控件使用及站点配置2基础
5、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%实验
6、考试成绩50%。七、实验教科书、参考书1实验教科书互联网与网站建设实验指导书，王丽萍，于连民，20092实验参考书精通CSS-高级Web标准解决方案，英Andy Budd等，人民邮电出版社，2006年11月 ASP.NET第一步，朱晔，清华大学出版社，2007年7月实验一 简单网页制作一、实验目的1熟悉Dreamweaver软件的操作界面。2掌握建立本地站点的方法。3掌握简单网页制作方法。4掌握超链接的建立方法。二、实验内容1创建“潜水俱乐部”站点。2制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。三、操作步骤1创建“潜水俱乐部”站
7、点（1）在D盘新建文件夹，命名为myweb；（2）将images文件夹和gallery文件夹复制到中myweb中；（3）启动Dreamweaver，使用“站点新建站点”命令创建站点。2制作“俱乐部首页”。（1）新建网页。（2）使用“文件保存”命令保存网页，命名为index.html。（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。（4）从“文本.txt”中将首页的相关文字粘贴到网页中。（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。（6）插入图像。（7）在Copyright后插入版权符号。（8）在电话号码之间插入半角空格。（9）在电子邮箱地址上建立超链接，mailto:
8、vipBubbleU。（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，预览网页
9、。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张图
10、片，为每张图片设置替换文本。（6）选中图片及其下面的段落，然后单击“插入Div标签”按钮，将图片及其说明文字分别装入5个Div中。（7）保存网页，按F12，预览网页。6制作“在线预约”网页。（1）在文件面板上复制index.html网页，重新命名为reserve.html。（2）在文件面板上双击打开reserve.html。（3）删除mainContent区域中的原有内容，然后粘贴在线预约文字。（4）设置二级标题。（5）插入“表单”。（6）光标置于表单内，插入“菜单”表单元素。（7）选中“菜单”，在属性面板上单击“列表值”按钮，设置选项。（8）在表单内插入其它表单元素。（9）保存网页，按F12
11、，预览网页。7建立网站内各页面之间的超链接。实验二 CSS初步应用一、实验目的初步掌握为网页添加CSS样式表的方法。二、实验内容为“潜水俱乐部”网站中的5个网页添加CSS样式表。三、操作步骤1创建“潜水俱乐部”站点（1）将“实验二”文件夹中的myweb文件夹复制D盘；（2）启动Dreamweaver，使用“站点新建站点”命令新建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。2打开“index.html”文件。3新建CSS样式表文件，保存在myweb文件夹中，命名为style.css。（注意：此时文档窗口中有两个文件，一个网页文件，一个样式表文件。）4为“inde
12、x.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。bo
13、dy 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）为白色。h
14、1 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; back
15、ground: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。 fo
16、nt-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块的下边
17、框（border-bottom）宽度为3px，边框样式为实线（solid），边框颜色为#7da5d8。 padding: 40px 0 5px 20px; border-bottom: 1px solid #7da5d8;#navigation 是ID选择器。设置#navigation块的宽度（width）为180px，向左浮动（float）。背景颜色#98b6e8，背景图像nav-bg.jpg，该背景图像不重复（no-repeat），位于左下角（left bottom）。#navigation width: 180px; float: left;设置#navigation块的最小高度（min
18、-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块
19、的填充（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: 1px solid #7da5d8; padding: 20px 0; background-color: #bed8f3;#header p 是后代选择器。设置#header块中段落（p）的文
20、字颜色和下边界。#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
21、）为居中（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的元素文
22、字大小为基础字号的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
23、）。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 ur
24、l(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）为粗体（bo
25、ld）。下填充（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
26、 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块中段
27、落（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; padd
28、ing: 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）将“实验三”文
