网页制作实验指导书.pdf

网网网网 页页页页 制制制制 作作作作 实验指导书实验指导书实验指导书实验指导书 计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院 陈治伯陈治伯陈治伯陈治伯 2 目目目目 录录录录 实验一 站点与文档的创建 3 实验二 文本及其格式化 3 实验三 图像 4 实验四 超级链接 5 实验五 表格和页面布局 7 实验六 框架 8 实验七 层 9 实验八 模板与库 12 实验九 表单 13 实验十 行为 15 实验十一 多媒体组件 20 实验十二 动态网站制作 23 3 实验一实验一实验一实验一 站点与文档的创建站点与文档的创建站点与文档的创建站点与文档的创建 实验目的 熟悉 DreamweaveMX 环境 掌握站点的创建 学会制作页面的一般制作方法 实验内容 1 Dreamweaver MX 2004 简介 启动 界面认识 2 创建一个站点 3 创建和打开一个文档 4 网页的新建 保存 预览 关闭 打开 5 字体 标题级 颜色 效果设定 实验步骤 1 在 Dreamweaver 中 创建站点 2 新建网页 3 设置文档的属性 实验要求 按实验内容完成操作 完成实验报告 在实验报告中要求记录设计网页的全过程 所有实验环节均由每位学生独立完成 严禁抄袭他人实验结果 实验实验实验实验二二二二 文本文本文本文本及其格式化及其格式化及其格式化及其格式化 实验目的 通过本例要求掌握网页的一些基本常识 例如 文档的创建 打开与保存 标尺与网格 的使用 捕捉与辅助设计图片的应用等 掌握设置文本格式的方法 如文本的断行与缩进 文本列表及格式化文本的方法 要求掌握 CSS 样式面板的使用 插入样式表的方式 样式 表的优先顺序 CSS 的基本语法与功能 能够为 HTML 设置样式 熟悉 CSS 样式定义对话 框的各项功能 并熟练使用 CSS 滤镜进行各种样式的设置 实验内容 1 文档及其格式化 练习文本的输入及属性的设置 2 创建文本列表 3 利用 HTML 格式化文本 4 层叠样式表 熟悉 CSS 样式面板 设置各种类型的 CSS 样式 熟悉 CSS 样式定义 对话框中各项的含义 CSS 基本样式设置 5 文本格式化 文本录入与编辑 6 网页的预览 实例参考 1 制作如图所示的列表网页 要求一级标题有序列表 二级标题无序列表 样式如下图所 示 4 实验实验实验实验三三三三 图像图像图像图像 实验目的 1 通过本例要求掌握常见的图像格式及图像的插入方法 2 能够修改图像属性 利用外部图像处理软件编辑图像 3 创建图像映射 建立 WEB 相册 实验内容 1 图像创建实例与应用技巧 2 设置图像的属性 3 使用图像地图 4 创建鼠标经过图像 5 创建 WEB 相册 实例参考 1 制作一个 图片热点 效果网页 要求在自选图片上创建三个热点 分别连接到自拟的 文字段中 并要求当鼠标悬停在相应热点上时 显示该区提示信息 5 实验实验实验实验四四四四 超级超级超级超级链接链接链接链接 实验目的 1 掌握设置文本超级连接的方法 2 掌握设置图片超级连接的方法 3 掌握设置图片热点超级连接的方法 实验内容 1 超链接的基本概念和种类 2 创建超链接 3 文本和图片超链接的实现 4 锚点超链接的实现 5 邮件超链接 6 创建跳转菜单和导航条 7 管理超级链接 8 设置超级链接的属性 实例参考 1 新建一个网页 在此网页中 创建到电子邮件地址 yzsysl 的超级链接 2 创建一个网页 在此网页中插入一幅图片 当鼠标移动到不同部位 至少两个部位 时 显示不同的提示信息 并且超级链接到不同网页中去 6 3 制作一个如图所示的锚点 4 要求网页中所示具有超级链接属性的文字起初不具有下划线 当鼠标悬念在上面时 字 体变成红色 且具有下划线 5 整合以前做的各种网页 创建一个主页 default asp 将上述各网页链接起来 并且要求在 此主页写上自己的真实班级 学号和姓名 7 实验实验实验实验五五五五 表格表格表格表格和和和和页面布局页面布局页面布局页面布局 实验目的 1 掌握表格的创建 结构调整与美化方法 2 熟悉表格与单元格的主要属性及其设置方法 3 掌握通过表格来进行网页页面的布局方法 实验内容 1 表格创建及属性设置练习 2 插入表格 对表格进行各种操作 3 外部数据的导入 4 表格美化 5 创建复杂表格 6 绘制布局单元格和布局表格 实例参考 1 制作一个如图所示的表格 要求样式如下 并将各自单元格分别设置成不同颜色 颜色 自拟 2 创建一个如图所示 图文并茂 的效果 文字内容及图片自拟 8 实验实验实验实验六六六六 框框框框 架架架架 实验目的 1 掌握框架网页在创建 选择 设置 存储与应用方面的特点 2 掌握框架结构网页的制作方法 3 掌握 iframe 标记以及各个属性 实验内容 1 框架的基本操作练习 创建框架和框架集 2 设置框架和框架集的各种属性 3 框架布局练习 4 框架中的链接练习 实验步骤 9 1 设计制作演示中的框架网页 文件 新建 框架网页 2 设置边距 选项 滚动条 拆分框架在定义目标框架替换之前 给目标框架命名 链接到目标框 3 进一步完善自己的网页 制作图 文 声并茂的页面 完成个人站点信息的制作 与测试 实验要求 通过网络空间网站的设计 熟练掌握利用框架来组织布局网页内容 灵活运用目标框架 来设计超级链接网页的目标位置 实例参考 整合以前做的各种网页 要求创建一个框架主界面 样式如下图所示 要求主框架文件 名为 default asp 网页标题为网页标题为网页标题为网页标题为 网页制作考试网页网页制作考试网页网页制作考试网页网页制作考试网页 其余网页文件名自定 框架结构为上 左 右样式 并分别设置成不同背景颜色 颜色自拟 顶层网页写上自己的真实班级顶层网页写上自己的真实班级顶层网页写上自己的真实班级顶层网页写上自己的真实班级 学学学学 号和姓名号和姓名号和姓名号和姓名 在左边框架文件中点击相应目录项 在右侧框架中显示相应的内容 实验实验实验实验七七七七 层层层层 实验目的 通过本章的学习 应掌握层的基本操作方法如层的创建方法 层的各种编辑 层的相关 属性设置及层与表格间的转换方式等 掌握移动 删除层的方法 初步将层与行为进行简单 结合 10 实验内容 1 创建并进行层的编辑 2 层的相关属性设置练习 3 层的基本操作和管理 4 层与表格间的相互转换练习 5 尝试层与行为的初步结合 6 在页面布局中使用层和表格 实例参考 1 创建如下的效果网页 当鼠标分别悬停在 我的童年 我的少年 我的青年 三个 文本时 在图中央分别显示三种不同的图片 当鼠标移走时 相应图片消失 2 制作如下图所示的效果 要求当鼠标分别悬停在 春露 夏荷 秋叶 冬雪 四 个文本时 在图中央分别显示四种不同的图片 当鼠标移走时 相应图片消失 11 3 制作一个下拉式菜单 界面如图所示 12 实验实验实验实验八八八八 模板与库模板与库模板与库模板与库 实验目的 通过本例要求掌握库与模板的基础知识和应用 如何创建和设置库部件 为网页添加和 编辑库部件 并掌握创建模板 设置模板的各项属性等内容 了解模板的固定区域与可编辑 区域的区别和用途 了解更改模板或库元素对使用选定的模板或包含选定库元素的网页的影 响 学会通过模板和库元素创建网页的方法 实验内容 1 熟悉资源面板 2 创建 设置库部件 练习为网页添加库部件 3 创建 设置 修改模板 4 套用模板创建文档 利用库部件更新网站 实例参考 设计一个如下图所示的模板 并将此模板应用于以前制作的一些网页 最后再设计一个 主页 default asp 将上述所有的网页连接起来 13 实验实验实验实验九九九九 表表表表 单单单单 实验目的 学会使用 Dreamweaver 中应用表单设计网页的方法 全面掌握表单的创建 编辑 处 理方法 以及各表单对象的功能 特点和用途 包括 复选框 下拉列表框 按钮 的特点 与使用方法 实验内容 1 练习表单及表单对象在网页中的插入 2 表单对象的编辑练习 3 表单元素正确性的验证 4 创建脚本 表单的处理 5 建立动态交互式表单示例 6 验证表单 7 创建 ASP 文件 实例参考 1 创建一个如下图所示的客户留言表单 表单提交方式为 GET 提交后交给 abc asp 程序 去处理 14 2 制作如下图所示的表单 并进行验证录入数据的正确性 要求姓名为任意字符 长度为 4 个汉字 E mail 符合电子邮件的格式 年龄在 18 88 之间 3 设置一个如图所示的网页 内容包括两组单选框 四组下拉列表框和一个命令按钮 15 实验十实验十实验十实验十 行行行行 为为为为 实验目的 了解行为 事件与动作的概念 学会利用行为面板设置控制对象的行为 会利用系统提 供的主要行为 设置网页对象的行为从而实现交互式网页的设计 能够下载 安装并使用第 三方行为 实验内容 1 熟悉行为面板 2 各种 Dreamweaver 内置行为练习 行为和事件的类型 4 弹出欢迎信息 跳转页面 播放声音 导航条的制作 5 基本行为制作的实例 6 应用行为技巧实例 翻滚图 动态图片说明 利用行为命令制作页面 页面播放声 音 背景音乐 7 掌握时间轴的使用 实例参考 1 创建一个 交互图像 要求当鼠标悬念在图像上时变换成另一幅图像 当鼠标单击时打 开第三幅图像 16 2 制作如下图所示的跳转菜单 要求列表项至少有 3 项 并分别链接到不同的网页上去 17 3 制作一个网页 设置一个按钮 当鼠标点击它时 弹出一个消息框 如下图所示 4 作一个如下图所示的播放器 网页上要求具有 播放 停止 返回 按钮 18 5 制作如图所示的一个 九宫图 游戏 6 创建如图所示的导航条 19 7 制作一个自动跳转网页 test htm 当打开这个网页时 此网页自动打开另一个网页 index htm 20 8 利用层和时间轴制作一个如图所示的动画 实验十实验十实验十实验十一一一一 多媒体组件的插入多媒体组件的插入多媒体组件的插入多媒体组件的插入 使用代码设计网页与站点管理使用代码设计网页与站点管理使用代码设计网页与站点管理使用代码设计网页与站点管理 实验目的 掌握如何在 Dreamweaver 中插入 Flash 动画 Flash 按钮 Flash 文本 视频 声音以及 插件 要求掌握通过站点管理器发布站点的方法与上传 下载与同步更新站点内容的方法 熟悉站点管理器的用途 学会利用站点地图查看 管理各网页之间的超链接关系 实验内容 1 理解 Dreamweaver 与 fireworks 协同工作 2 理解 Dreamweaver 与 flash 协同工作 3 使用 flash 对象 为页面添加 Flash 动画 Shockwave 动画 添加 Flash 文字 添加 Flash 按钮 4 查看代码 编写代码 利用代码设计页面 5 管理站点 6 站点地图 7 建立远程站点 8 使用存回和取出系统 9 远程站点文件的上传和获取 测试站点 实例参考 1 插入如图所示的 flash 按钮 并链接到其它网页中去 21 2 制作一个如下图所示的 flash 文本和 flash 按钮 3 制作一个主页 此主页能够超级链接到各种网页中去 导出这个站点的站点地图 文件 名为 myweb bmp 22 4 创建一个水平滚动条 5 制作一个垂直滚动的文本 6 新创建一个网页 将此网页的标题和关键字都设置为 来鹤台 个人网站 扬州职业大学 23 实验十实验十实验十实验十二二二二 动态网站制作动态网站制作动态网站制作动态网站制作 实验目的 学会配置 web 服务器 定义一个动态站点 创建一个 Access 数据库 并进行配置 能够 创建动态网页 并对其进行正确的运行 操纵数据库中的数据 实验内容 1 配置 web 服务器 配置 IIS 定义动态站点 2 创建并配置一个 Access 数据库 3 创建动态网页 4 在动态网页上创建记录集 添加记录 显示记录 实例参考 1 用 Access 创建一个数据库 在其中再创建一个数据库表 在此表中再输入一些记录 现 要求制作如下图所示的通讯录系统 要求能显示数据库中的记录信息 在此 Web 页面中要 求包括 记录集导航状态 和 记录集导航条 2 制作如下一个通讯录 要求能动态的查询记录和添加记录 24 3 制作一个用户登录动态表单 login asp 1 该表单的学号 用户名 密码分别如下所示 25 2 登录界面 login asp 如下图所示 3 如登录成功 进入如下 success asp 网页 4 如登录不成功 则进入如下页面 fail asp 26 4 制作一个修改数据库中记录的一个动态表单 record asp 该数据库中的学号 用户名 密码分别如下所示 1 显示数据库中的所有记录信息 record asp 要求包括记录集导航状态和记录集导航 状态条 界面如下图所示 2 制作上题中的插入信息的动态表单 insert asp 27 3 制作上题中的更新数据库表中信息的动态网页 update asp 4 制作上题中的删除信息的动态网页 28 补充 拓展拓展拓展拓展 ASP 与与与与 SQL Server 数据库相连数据库相连数据库相连数据库相连 实验目的 利用 SQL Server 的数据库和 ASP 技术相连 实验内容 已知 SQL Server 2000 数据库中有一个用户数据库 Pubs 其中有一个表 authors 字段名为 au id 和 au lname 要求用 ASP 技术显示其中的所有记录 实验步骤 一 编制 ASP 程序 法一 用 DSN 连接数据库法 1 设置 DSN 步骤是 1 控制面板