《nternet与web技术》实验指导书.doc

《Internet与web技术》实验指导书 目录 《网页制作》实验大纲 实验（一）简单网页制作 实验（二）CSS 初步应用 实验（三）XHTML语言 实验（四）CSS选择器 实验（五）应用背景图像 实验（六）CSS浮动布局 实验（七）CSS定位布局 实验（八）导航条和表单 实验（九）开发环境的使用及C#语法 实验（十）构建新闻类 实验（十一）控件使用及站点配置 实验（十二）创建数据库操作类 实验（十三）新闻列表页及内容页制作 实验（十四）绑定数据并显示信息 实验（十五）使用LINQ及Ajax改进网站 实验（十六）构建统一的站点页面  实验一 简单网页制作 一、实验目的 1．熟悉软件的界面掌握建立站点链接链接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; } body { font: 0.75em 宋体; color: #000080; background-color: #e2edff; } p, h2, h3 { margin: 0.8em 0; } p, li { line-height: 1.8; } h1 { font-size: