网页制作上机练习.docx
《网页制作上机练习.docx》由会员分享，可在线阅读，更多相关《网页制作上机练习.docx（10页珍藏版）》请在冰豆网上搜索。
网页制作上机练习
实验一使用Dreamweaver创建简单页面
一、实验目的
1、掌握HTML的基本结构
2、熟悉Dreamweaver的工作环境
3、掌握不同的视图下的操作及面板的使用
4、会使用Dreamweaver创建、管理站点
二、实验内容
1、在Dreamweaver中创建一个站点
（1）新建一个以自己学号或姓名拼音命名的文件夹
（2）在Dreamweaver中新建站点,把站点设为新建的文件夹
（3）观察创建站点前后的区别
2、利用所学知识创建一个个人信息页面
（1）新建一个HTML页面,添加标题为“个人简介”
（2）利用文字、水平线、特殊符号、背景颜色、背景图片等制作简单的个人信息页面
3、制作一个中转页面
（1）制作一个简单页面,添加标题与简单内容
（2）通过设置标记,实现10秒后自动跳转到个人信息页面
实验二超级链接与文本修饰
一、实验目的
1、掌握超级链接的不同创建方法
2、了解锚点链接的作用,并会创建锚点链接
3、熟悉文本的不同修饰方法
二、实验内容
1、创建“大话西游”页面
（1）字体与背景颜色等自行设计,要求搭配合理
（2）第一行右上角有“联系我们”,点击链接到dahuaxiyou@163、com
（3）第二行为标题,居中显示
（4）内容要求不使用空格或换行等,居中显示如下:
曾经
有一份真诚的爱情放在我面前,
我没有珍惜,
等我失去的时候我才后悔莫及,
人世间总痛苦的事莫过于此。
……
（5）下面有“下载”两字,创建一个下载链接
2、创建“我的影院”主页面
（1）字体与背景颜色等自行设计,要求搭配合理
（2）第一行为标题
（3）第二行为影院分类,例如:
欧美电影、港台电影、大陆电影、……等,格式为“标题1”,要求自左向右滚动显示,鼠标移动时停止滚动,移开时继续滚动
（4）以下为电影名字,每个类型电影下都有相应的电影,要求每个名字单独一行,必须超过一屏;点击第二行的电影类型会自动跳转到下面相应的地方;同时港台电影中包括“大话西游”,点击它可以转到“大话西游”详细介绍页面。
（5）右下角有“返回顶部”,要求点击它能够返回到页面的最上方。
“#+命名锚记名称”
实验三综合练习
（一）
一、实验目的
1、复习前面所学的知识点
2、掌握在代码视图中使用标记及属性的相关方法
3、掌握属性窗口的使用方法
4、掌握IIS的设置方法
二、实验内容
1、根据所有知识设计两个相关的页面
（1）字体与背景颜色等自行设计,要求搭配合理,且必须使用的就是字体或页面标记的相关属性
（2）两个页面通过超级链接关联,主页面内容设置必须合理
（3）页面内容不作要求,可以使任何自己感兴趣的东西
（4）主页面上必须有当前系统的日期
（5）使用并体会段落符号与换行符号的区别
（6）使用并体会预先格式化标记
的作用（7）使用并体会字幕标记
（8）必须使用并体会锚点链接的作用
2、设置IIS
（1）在控制面板的管理工具里面打开并配置IIS
（2）设置完成后,同学之间通过IP地址互相访问所作页面
3、检查并测试大家对知识点的掌握程度
实验四列表、图像及简单页面布局
一、实验目的
1、掌握三种列表的创建方法
2、掌握图像的插入方法及图文混排的具体操作
3、会创建简单的表格
4、会使用框架来布局页面
5、了解层并能够正确的使用它
二、实验内容
1、创建一个简单的个人简历页面
（1）用项目列表组织简历,项目符号为实心方形;包含三项内容:
基本资料、教育背景、技能水平
（2）基本资料部分用表格设计,大致如下图所示,空白部分自己填入信息
姓名
性别
插入照片
出生年月
政治面貌
毕业院校
所学专业
联系方式
（3）其余两部分可用编号列表设计
2、创建一个地图页面
（1）使用画图工具画一个大致的中国地图,要求至少有两个地理位置,比如:
湖北与自己家乡的位置等;也可用类似图片替代
（2）点击不同的位置能连接到相应的页面,所链接页面可只有简单文字说明
（3）图片右边添加对中国的简单文字说明,要求文字与图片上方对齐
3、创建一个框架页面
（1）创建一个框架页面,大致如下图所示;上面的文字就是保存时的文件名,最外层页面名字统一命名为index、html;框架名称用括号内的名字
Top、html（top）
Left、html（left）
Main、html（main）
（2）框架top中添加“我的网页”,加粗居中
（3）框架left中有两行文字,分别为“作者介绍”与“作品介绍”
（4）框架main中添加一张图片,在图片中间添加介绍性文字
（5）为“作者介绍”与“作品介绍”分别添加超级链接,链接到1、2部分所完成的页面中;要求“作者介绍”就是打开一个新的窗口;“作品介绍”在框架main中显示。
实验五表格的美化及页面布局
一、实验目的
1、会对表格的美化
2、能够使用表格进行页面布局
二、实验内容
1、美化表格
（1）对实验四中的表格进行美化
（2）要求表格的边框为紫色,且线条为1个象素的单条线;表格内部颜色为前灰色
2、设计一个网站首页
（1）主题不限,要求颜色搭配合理
（2）至少必须包含页面头部,页面主体与页面底部三部分
（3）页面头部就是LOGO、BANNER、导航等内容
（4）页面主体内容应根据自己的网站主题细化,至少必须有每部分的标题,内容可以简化
（5）页面底部就是版权信息,应包含自己的学号姓名等,且居中显示。
实验六层及CSS样式
一、实验目的
1、会制作层的动态效果
2、掌握CSS样式的创建方法,并会应用
3、了解外部样式表与内部样式表的区别
4、特殊表格的制作
二、实验内容
1、制作一个艺术系的介绍页面
（1）要求制作的CSS样式能够被很多页面使用,也就就是外部样式表,可保存为style、css
（2）通过添加CSS样式,要求没有进行任何设置前页面文字都就是红色,10pt的大小
（3）通过添加CSS样式,要求添加的图片都有边框
（3）通过添加CSS样式,实现第一行居中显示“艺术系风采”,且蓝色,24pt大小
（4）下面就是对艺术系的简单介绍,必须有文字与图片
2、层的简单动态效果（可参考P103）
（1）添加三个层,内容分别为:
学校简介、系部介绍、管理部门
（2）当鼠标移到“系部介绍”时显示它的下拉菜单,包含生物技术、制药工程、艺术系等;移到“管理部门”时显示它的下拉菜单,包含教务处、财务处等
（3）点击“艺术系”时,链接到第一题中制作的页面
（4）通过添加CSS样式,实现超级链接没有下划线,且不同状态的显示不同,要求使用的还就是第一题中的style、css表
3、特殊表格的制作
尝试制作一个如下图所示的表格
实验七层布局设计及模板的使用
一、实验目的
1、会使用层及CSS样式布局页面
2、掌握行为的添加方法
3、了解代码片段的使用
4、掌握模板的创建及套用方法
二、实验内容
1、使用层制作一个如下图所示的网站首页
（1）结构如下图所示
（2）主题不限,要求颜色搭配合理
（3）页面头部就是LOGO、BANNER、导航等内容
（4）页面主体内容应根据自己的网站主题细化,至少必须有每部分的标题,内容可以简化
（5）页面底部就是版权信息,应包含自己的学号姓名等,且居中显示。
2、行为的使用
（1）页面添加标题:
“行为的使用”,可使用CSS样式
（2）当打开页面时自动添加弹出消息:
“欢迎您的光临！
”
（3）单击时打开一个400*300的窗口,内容显示的就是第1部分做好的页面,此窗口有标题栏
3、模板的创建
（1）创建一个模板页面
（2）新建一个HTML页面,套用上述模板,并进行编辑
（3）修改模板页面,查瞧保存时发生的变化。
实验八综合练习
（二）
一、实验目的
1、掌握模板的创建方法及使用
2、能灵活使用表格、层、行为等技术
3、会灵活使用CSS样式
4、掌握常用的页面布局方法
二、实验内容
1、使用模板制作一个简单网站
（1）主题不限,要求颜色搭配合理
（2）除模板外,页面应不少于两个
（3）首页要求导航部分就是固定的,不可修改的;且必须用到类似下图的的格式,可水平可垂直方向;当鼠标经过时会出现相应的下拉菜单,并可以链接到相应的页面
（4）其它页面都有“返回首页”的链接;涉及到的超级链接都就是没有下划线的
（5）主要内容都就是可以编辑、修改的
2、设置IIS
（1）在控制面板的管理工具里面打开并配置IIS
（2）设置完成后,同学之间通过IP地址互相访问所作页面
3、检查并测试大家对知识点的掌握程度
实验九库技术及表单的使用
一、实验目的
1、掌握库的创建方法及使用
2、了解表单及表单元素之间的关系,并会创建表单
3、熟悉常用表单元素的功能,知道何时使用哪种表单元素
4、能实现表单的跳转,并了解表单提交的两种不同方法的区别
二、实验内容
1、制作一个如下图所示的表单页面
（1）预览时的最初效果应跟上图一致
（2）用户名与密码长度为20,输入的字符控制在16个以内,若超过则不能再输入;密码以“*”或“●”显示
（3）性别只能选择一个
（4）点击“注册”时提交到另外一个页面,显示为“注册成功！
”;点击“重置”时恢复初始界面,重新输入
2、库的使用
（1）把表单页面的“性别”那一栏保存为库,并命名为“xb、lbi”
（2）在另外一个页面套用此库
（3）修改“xb、lbi”文件,把“男”改为“男孩”,“女”改为“女孩”,并查瞧使用库页面的变化
（4）在使用了库的页面进行分离库的操作
实验十简单交互技术
一、实验目的
1、复习表单的创建及提交方法
2、会使用行为检查表单
3、能够使用ASPVBScript获取表单的信息并显示
4、能够区分开服务器端代码与浏览器端代码
二、实验内容
1、新建站点,配置IIS
2、制作一个可以简单交互的表单页面
（1）预览时的最初效果应跟上图一致
（2）要求用户名与密码都不能为空,且密码必须为数字类型,否则提示错误信息
（3）新建一个ASPVBScript页面并保存
（3）点击“登录”时提交到新建的ASPVBScript页面,显示为“欢迎***登录本网站！
”（***就是表单页面输入的用户名）;点击“重置”时恢复初始界面,重新输入
（4）在IIS中进行测试
3、尝试数据库的链接与显示
（1）在OFFICE中,新建一ACCESS数据库,名称为自己姓名的拼音缩写;使用设计器创建一包含字段username、password;username为主键的表,命名为user;双击打开,输入3-5条记录
（2）在控制面板---管理工具---系统DSN中,创建ODBC数据源为自己创建的数据库
（3）在DreamWeaver中新建站点,配置测试服务器,打开“数据库”面板
（4）新建一ASPVBScript页面,使用“数据库”面板的数据源名称（DSN）进行数据库连接,使用“绑定”,显示数据库中的第一个用户名,测试数据库连接就是否成功
实验11数据库基本操作
一、实验目的
1、掌握简单的ACCESS数据库的创建方法
2、会配置数据源
3、掌握使用数据库面板操作数据库的方法
二、实验内容
1、用户注册及登陆的实现
（1）新建一个ASPVBScript页面,添加一个至少包含用户名与密码,及注册按钮的表单,命名为zc、asp
（2）复制此页面,修改“注册”按钮为“登陆”,命名为dl、asp
（3）新建一ACCESS数据库,创建一名为user的表,包含字段username、password;username为主键;并配置数据源为此数据库
（4）回到zc、asp页面,打开数据库面板,连接接数据库;实现点击注册按钮时,存输入的信息到数据库中,并在新的页面显示“注册成功”
（5）打开dl、asp页面,实现点击登陆按钮时,若用户名与密码存在,则显示“登陆成功”,否则显示“登陆失败”
（6）显示成功或失败的页面可用仅有文字的HTML页面来表示
2、制作一个简易的新闻发布系统
（1）在原来的数据库中添加一张表,可命名为news,主要存放新闻信息,包含标题、内容、发布者等字段,字段名称自己命名
（2）新建一个ASPVBScript页面,保存为fb、asp,用于输入新闻信息,包含标题、内容等
（3）另新建一ASPVBScript页面,保存为xs、asp,用于显示发布的所有新闻标题,可设置每页显示5条新闻标题
（4）输入新闻后直接跳转到显示新闻的页面
（5）尝试把第1题中登陆后的跳转页面设为fb、asp,并在原表单中添加一隐藏域,值设为登陆成功后的用户名,跟标题、内容一起存入数据库;在xs、asp中同时显示标题及发布者
升级会员 