《网页制作》实验指导书.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必修2CSS 初步应用在网页中应用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基础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实验教科书互联网与网站建设实验指导书，王丽萍，于连民，20092实验参考书精通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: 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，预览网页。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-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;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标记和属性。标题标记： 段落标记：超链接标记：图像标记：换行标记：项目列表及列表项标记： 表格、表格行、标题单元格、普通单元格标记： 4使用标记定义网页的逻辑结构，包括container、header、content、footer几个部分。结果如下：惟存教育探究学习返回首页如何构建高效的 webquest杨淑莲 华南师范大学教育技术研究所一、什么是 WebQuestWebQuest 是美国的 Bernie Dodge 和 Tom March 于 1995 年倡导开发的一种“课程计划”。它把整个课程用导言、任务、过程、资源、评价、结论六个基本模块贯串在一起，形成一个完整的教学体系。二、 WebQuest 具体的构建过程（一）选择合适的主题WebQuest 仅仅是教学方式中的一种，图1选择学习任务开展网上与网下丰富的专题讲座活动，（二）任务在设计任务时要结合以下原则确定任务：科学性、知识性：体现教学目标。趣味性：引发学习者探索的积极性。可操作性：任务要具体，一般要形成一定的产品。开放性：任务完成可以采取不同的途径，任务解决没有固定答案。伸缩性：可以把任务分为基本题目和扩展性题目，满足能力较强的学生。（三）评价WebQuest 通常采用测评表格来考察学生作品的不同方面（包括过程、结果、态度、情感等）。根据任务的差异，评价的对象可表现为书面作业、学生的作品、创作的网页或其他内容。评价对象起步阶段发展阶段完成阶段参与讨论优秀良好优秀搜集资料良好优秀良好作品创作良好良好优秀Copyright©BEING, Being Lab. All Rights Reserved版权所有 惟存教育实验室5登录http:/validator.w3.org/网站，使用文件上传的方式进行标记校验，并修改发现的错误。6使用CSS控制网页的表现。（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: 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, 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=760text-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”文件附加样式表，并添加样式。* 是通配选择器。