网页制作上机练习.docx

1、网页制作上机练习实验一 使用Dreamweaver创建简单页面一、实验目的1、掌握HTML的基本结构2、熟悉Dreamweaver的工作环境3、掌握不同的视图下的操作及面板的使用4、会使用Dreamweaver创建、管理站点二、实验内容1、在Dreamweaver中创建一个站点（1）新建一个以自己学号或姓名拼音命名的文件夹（2）在Dreamweaver中新建站点，把站点设为新建的文件夹（3）观察创建站点前后的区别2、利用所学知识创建一个个人信息页面（1）新建一个HTML页面，添加标题为“个人简介”（2）利用文字、水平线、特殊符号、背景颜色、背景图片等制作简单的个人信息页面3、制作一个中转页面（

2、1）制作一个简单页面，添加标题和简单内容（2）通过设置标记，实现10秒后自动跳转到个人信息页面实验二 超级链接与文本修饰一、实验目的1、掌握超级链接的不同创建方法2、了解锚点链接的作用，并会创建锚点链接3、熟悉文本的不同修饰方法二、实验内容1、创建“大话西游”页面（1）字体与背景颜色等自行设计，要求搭配合理（2）第一行右上角有“联系我们”，（3）第二行为标题，居中显示（4）内容要求不使用空格或换行等，居中显示如下：曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间总痛苦的事莫过于此。（5）下面有“下载”两字，创建一个下载链接2、创建“我的影院”主页面（1）字体与背景

3、颜色等自行设计，要求搭配合理（2）第一行为标题（3）第二行为影院分类，例如：欧美电影、港台电影、大陆电影、等，格式为“标题1”，要求自左向右滚动显示，鼠标移动时停止滚动，移开时继续滚动（4）以下为电影名字，每个类型电影下都有相应的电影，要求每个名字单独一行，必须超过一屏；点击第二行的电影类型会自动跳转到下面相应的地方；同时港台电影中包括“大话西游”，点击它可以转到“大话西游”详细介绍页面。（5）右下角有“返回顶部”，要求点击它能够返回到页面的最上方。 “#+命名锚记名称”实验三 综合练习（一）一、实验目的1、复习前面所学的知识点2、掌握在代码视图中使用标记及属性的相关方法3、掌握属性窗口的使用

4、方法4、掌握IIS的设置方法二、实验内容1、根据所有知识设计两个相关的页面（1）字体与背景颜色等自行设计，要求搭配合理，且必须使用的是字体或页面标记的相关属性（2）两个页面通过超级链接关联，主页面内容设置必须合理（3）页面内容不作要求，可以使任何自己感兴趣的东西（4）主页面上必须有当前系统的日期（5）使用并体会段落符号与换行符号的区别（6）使用并体会预先格式化标记的作用（7）使用并体会字幕标记的作用（8）必须使用并体会锚点链接的作用2、设置IIS（1）在控制面板的管理工具里面打开并配置IIS（2）设置完成后，同学之间通过IP地址互相访问所作页面3、检查并测试大家对知识点的掌握程度实验四 列表、

5、图像及简单页面布局一、实验目的1、掌握三种列表的创建方法2、掌握图像的插入方法及图文混排的具体操作3、会创建简单的表格4、会使用框架来布局页面5、了解层并能够正确的使用它二、实验内容1、创建一个简单的个人简历页面（1）用项目列表组织简历，项目符号为实心方形；包含三项内容：基本资料、教育背景、技能水平（2）基本资料部分用表格设计，大致如下图所示，空白部分自己填入信息姓名性别插入照片出生年月政治面貌毕业院校所学专业联系方式（3）其余两部分可用编号列表设计2、创建一个地图页面（1）使用画图工具画一个大致的中国地图，要求至少有两个地理位置，比如：湖北和自己家乡的位置等；也可用类似图片替代（2）点击不同

6、的位置能连接到相应的页面，所链接页面可只有简单文字说明（3）图片右边添加对中国的简单文字说明，要求文字与图片上方对齐3、创建一个框架页面（1）创建一个框架页面，大致如下图所示；上面的文字是保存时的文件名，最外层页面名字统一命名为index.html；框架名称用括号内的名字 Top.html（top）Left.html（left）Main.html（main）（2）框架top中添加“我的网页”，加粗居中（3）框架left中有两行文字，分别为“作者介绍”和“作品介绍”（4）框架main中添加一张图片，在图片中间添加介绍性文字（5）为“作者介绍”和“作品介绍”分别添加超级链接，链接到1、2部分所完成

7、的页面中；要求“作者介绍”是打开一个新的窗口；“作品介绍”在框架main中显示。实验五 表格的美化及页面布局一、实验目的1、会对表格的美化2、能够使用表格进行页面布局二、实验内容1、美化表格（1）对实验四中的表格进行美化（2）要求表格的边框为紫色，且线条为1个象素的单条线；表格内部颜色为前灰色2、设计一个网站首页（1）主题不限，要求颜色搭配合理（2）至少必须包含页面头部，页面主体和页面底部三部分（3）页面头部是LOGO、BANNER、导航等内容（4）页面主体内容应根据自己的网站主题细化，至少必须有每部分的标题，内容可以简化（5）页面底部是版权信息，应包含自己的学号姓名等，且居中显示。实验六 层

8、及CSS样式一、实验目的1、会制作层的动态效果2、掌握CSS样式的创建方法，并会应用3、了解外部样式表和内部样式表的区别4、特殊表格的制作二、实验内容1、制作一个艺术系的介绍页面（1）要求制作的CSS样式能够被很多页面使用，也就是外部样式表，可保存为style.css（2）通过添加CSS样式，要求没有进行任何设置前页面文字都是红色，10pt的大小（3）通过添加CSS样式，要求添加的图片都有边框（3）通过添加CSS样式，实现第一行居中显示“艺术系风采”，且蓝色，24pt大小（4）下面是对艺术系的简单介绍，必须有文字和图片2、层的简单动态效果（可参考P103）（1）添加三个层，内容分别为：学校简介

9、、系部介绍、管理部门（2）当鼠标移到“系部介绍”时显示它的下拉菜单，包含生物技术、制药工程、艺术系等；移到“管理部门”时显示它的下拉菜单，包含教务处、财务处等（3）点击“艺术系”时，链接到第一题中制作的页面（4）通过添加CSS样式，实现超级链接没有下划线，且不同状态的显示不同，要求使用的还是第一题中的style.css表3、特殊表格的制作尝试制作一个如下图所示的表格实验七 层布局设计及模板的使用一、实验目的1、会使用层及CSS样式布局页面2、掌握行为的添加方法3、了解代码片段的使用4、掌握模板的创建及套用方法二、实验内容1、使用层制作一个如下图所示的网站首页（1）结构如下图所示（2）主题不限，

10、要求颜色搭配合理（3）页面头部是LOGO、BANNER、导航等内容（4）页面主体内容应根据自己的网站主题细化，至少必须有每部分的标题，内容可以简化（5）页面底部是版权信息，应包含自己的学号姓名等，且居中显示。2、行为的使用（1）页面添加标题：“行为的使用”，可使用CSS样式（2）当打开页面时自动添加弹出消息：“欢迎您的光临！”（3）单击时打开一个400*300的窗口，内容显示的是第1部分做好的页面，此窗口有标题栏3、模板的创建（1）创建一个模板页面（2）新建一个HTML页面，套用上述模板，并进行编辑（3）修改模板页面，查看保存时发生的变化。实验八 综合练习（二）一、实验目的1、掌握模板的创建方

11、法及使用2、能灵活使用表格、层、行为等技术3、会灵活使用CSS样式4、掌握常用的页面布局方法二、实验内容1、使用模板制作一个简单网站（1）主题不限，要求颜色搭配合理（2）除模板外，页面应不少于两个（3）首页要求导航部分是固定的，不可修改的；且必须用到类似下图的的格式，可水平可垂直方向；当鼠标经过时会出现相应的下拉菜单，并可以链接到相应的页面（4）其它页面都有“返回首页”的链接；涉及到的超级链接都是没有下划线的（5）主要内容都是可以编辑、修改的2、设置IIS（1）在控制面板的管理工具里面打开并配置IIS（2）设置完成后，同学之间通过IP地址互相访问所作页面3、检查并测试大家对知识点的掌握程度实验

12、九 库技术及表单的使用一、实验目的1、掌握库的创建方法及使用2、了解表单及表单元素之间的关系，并会创建表单3、熟悉常用表单元素的功能，知道何时使用哪种表单元素4、能实现表单的跳转，并了解表单提交的两种不同方法的区别二、实验内容1、制作一个如下图所示的表单页面（1）预览时的最初效果应跟上图一致（2）用户名和密码长度为20，输入的字符控制在16个以内，若超过则不能再输入；密码以“*”或“”显示（3）性别只能选择一个（4）点击“注册”时提交到另外一个页面，显示为“注册成功！”；点击“重置”时恢复初始界面，重新输入2、库的使用（1）把表单页面的“性别”那一栏保存为库，并命名为“xb.lbi”（2）在另

13、外一个页面套用此库（3）修改“xb.lbi”文件，把“男”改为“男孩”，“女”改为“女孩”，并查看使用库页面的变化（4）在使用了库的页面进行分离库的操作实验十 简单交互技术一、实验目的1、复习表单的创建及提交方法2、会使用行为检查表单3、能够使用ASP VBScript获取表单的信息并显示4、能够区分开服务器端代码和浏览器端代码二、实验内容1、新建站点，配置IIS2、制作一个可以简单交互的表单页面（1）预览时的最初效果应跟上图一致（2）要求用户名和密码都不能为空，且密码必须为数字类型，否则提示错误信息（3）新建一个ASP VBScript页面并保存（3）点击“登录”时提交到新建的ASP VBS

14、cript页面，显示为“欢迎*登录本网站！”（*是表单页面输入的用户名）；点击“重置”时恢复初始界面，重新输入（4）在IIS中进行测试3、尝试数据库的链接与显示（1）在OFFICE中，新建一ACCESS数据库，名称为自己姓名的拼音缩写；使用设计器创建一包含字段username、password；username为主键的表，命名为user；双击打开，输入3-5条记录（2）在控制面板-管理工具-系统DSN中，创建ODBC数据源为自己创建的数据库（3）在DreamWeaver中新建站点，配置测试服务器，打开“数据库”面板（4）新建一ASP VBScript页面，使用“数据库”面板的数据源名称（DSN

15、）进行数据库连接，使用 “绑定”，显示数据库中的第一个用户名，测试数据库连接是否成功实验11 数据库基本操作一、实验目的1、掌握简单的ACCESS数据库的创建方法2、会配置数据源3、掌握使用数据库面板操作数据库的方法二、实验内容1、用户注册及登陆的实现（1）新建一个ASP VBScript页面，添加一个至少包含用户名和密码，及注册按钮的表单，命名为zc.asp（2）复制此页面，修改“注册”按钮为“登陆”，命名为dl.asp（3）新建一ACCESS数据库，创建一名为user的表，包含字段username、password；username为主键；并配置数据源为此数据库（4）回到zc.asp页面，

16、打开数据库面板，连接接数据库；实现点击注册按钮时，存输入的信息到数据库中，并在新的页面显示“注册成功”（5）打开dl.asp页面，实现点击登陆按钮时，若用户名和密码存在，则显示“登陆成功”，否则显示“登陆失败”（6）显示成功或失败的页面可用仅有文字的HTML页面来表示2、制作一个简易的新闻发布系统（1）在原来的数据库中添加一张表，可命名为news，主要存放新闻信息，包含标题、内容、发布者等字段，字段名称自己命名（2）新建一个ASP VBScript页面，保存为fb.asp，用于输入新闻信息，包含标题、内容等（3）另新建一ASP VBScript页面，保存为xs.asp，用于显示发布的所有新闻标题，可设置每页显示5条新闻标题（4）输入新闻后直接跳转到显示新闻的页面（5）尝试把第1题中登陆后的跳转页面设为fb.asp，并在原表单中添加一隐藏域，值设为登陆成功后的用户名，跟标题、内容一起存入数据库；在xs.asp中同时显示标题及发布者