《网页制作》实验指导书

《网页制作》实验指导书目录《网页制作》实验大纲实验（一）简单网页制作实验（二）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必修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标准解决方案》，[英]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:[e-mail]。（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;}body{font:0.75em宋体;color:#000080;background-color:#e2edff;}p,h2,h3{margin:0.8em0;}p,li{line-height:1.8;}h1{font-size:180%;color:#FFFFFF;}h2{font-size:150%;color:#FF6633;}h3{font-size:100%;color:#FF6633;font-weight:normal;background:url(images/dot.gif)no-repeatlefttop;padding-left:15px;}*是通配选择器。设置网页上所有元素的边界（margin）为0，填充（padding）为0。body是类型选择器。设置网页主体（body）上的文字（font）大小为0.75字体高（em），字体为“宋体”，文字颜色（color）为#000080，网页的背景颜色（background-color）为#e2edff。p,h2,h3是群选择器。同时设置段落（p）、二级标题（h2）、三级标题（h3）的边界（margin）上下值为0.8字体高（em），左右值为0。p,li是群选择器。同时设置段落（p）、列表项（li）的行高（line-height）为1.8倍。h1是类型选择器。设置一级标题（h1）的文字大小（font-size）为基础字号的180%，文字颜色（color）为白色。h2是类型选择器。设置二级标题（h2）的文字大小和文字颜色。h3是类型选择器。设置h3的文字大小和文字颜色。文字粗细（font-weight）为正常（normal）。背景图像（background）为dot.gif，该背景图像不重复（no-repeat），位于h3的左上角（lefttop）。左填充（padding-left）为15像素。ol{margin-left:2em;}a{color:#000080;font-weight:bold;}a:hover{text-decoration:none;color:#FFFFFF;background-color:#000080;}#header{background:#000080url(images/header-bg.jpg)no-repeatrightbottom;padding:40px05px20px;border-bottom:3pxsolid#7da5d8;}#navigation{width:180px;float:left;background:#98b6e8url(images/nav-bg.jpg)no-repeatleftbottom;min-height:150px;padding-bottom:330px;_height:150px;}#mainContent{margin-left:180px;padding:020px30px20px;}ol是类型选择器。设置编号列表（ol）的左边界（margin-left）为２字体高（em）。a是类型选择器。设置超链接（a）的文字颜色为#000080，文字粗细（font-weight）为粗体（bold）。a:hover是伪类选择器。设置超链接（a）鼠标经过（hover）时，文本装饰（text-decoration）为无装饰（none），文字颜色为白色，背景颜色为#000080。#header是ID选择器。设置#header块的背景颜色为#000080，背景图像为header-bg.jpg，该背景图像不重复，位于#header块的右下角。填充（padding