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