《网页设计与制作》-实训指导书

目目 录录 实训 1 站点创建 实训 2 搜集素材 实训 3 用表格设计主页布局 实训 4 在主页制作中插入文本操作 实训 5 在主页制作中插入图像操作 实训 6 在主页制作中超级链接的设置 实训 7 制作动感网页 实训 8 表单制作 实训 9 CSS 样式表的使用 实训 10 JavaScript 技术 实训 11 应用行为 实训 12 利用框架制作 公司简介 网页 实训 13 利用布局表格制作 新书推介 网页 实训 14 模板和库的使用 实训 15 利用层的布局制作 技术支持 网页 实训 16 网页设计与网站管理 实训 17 网站开发综合实训 实训实训 1 1 站点创建站点创建 实训目的实训目的 为了让学生能熟练掌握创建站点的方法 掌握设置网页的页面属性 掌握 创建网站目录结构 栏目文件夹 网页文件的基本操作方法 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 实训课时实训课时 2 学时 实训内容实训内容 创建站点 创建网站目录结构 创建栏目文件夹 创建网页文件 掌握设置网页的页面属性 实训要求实训要求 要求学生能掌握如何创建站点 正确创建网站目录结构及栏目文件夹 创 建主页文件 index htm 并正确命名 掌握设置网页的页面属性的方法 实训步骤实训步骤 1 在 E 盘中新建本地根文件夹 命名为 bookman 并在该文件夹中新建 image 文件夹以存放网站中所要用到的图片 2 定义站点 设置 站点名称 命名为 博客人 设置本地根文件夹 指定为 E 盘下的 bookman 文件夹 设置 HTTP 地址 为 localhost 3 创建网站目录结构及栏目文件夹 如下图 4 E 盘下的 bookman 文件夹创建主页文件 index htm 5 设置网页的页面属性 bookman css Html images media MYbusiness Visitor company Example Product album cover danghang Image map photo qiege image manger zhangdan ahuce 实训过程注意事项实训过程注意事项 1 在创建站点的过程中注意建立本地文件夹 文件夹命名最好为英文 网站中所有的文件最好取名为英文 注意文件的路径 2 所有的图片文件单独放在 image 文件夹内 3 主页文件命名 index htm 实训思考实训思考 网站中所有的文件最好取名为英文 为什么 书写实训报告要求书写实训报告要求 写出本次实训的心得与体会 实训实训 2 2 搜集素材搜集素材 实训目的实训目的 为了让学生能熟练掌素材的搜集和制作方法 并学会把搜集到或制作好的 素材正确命名 分门别类地存放在相应的文件夹中 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Fireworks MX Flash MX 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图片素材 实训课时实训课时 2 学时 实训内容实训内容 1 利用 Fireworks MX 制作网站标志 圆角矩形及个性化的图形 2 利用 Fireworks MX 编辑制作有特殊效果的图 3 利用 Flash MX 制作主页广告条 实训要求实训要求 要求学生熟练掌握利用 Fireworks MX 和 Flash MX 来制作个性化的图形图 像素材的方法及技巧 实训步骤实训步骤 1 启动 Fireworks MX 选择 文件 新建 设置好新建文档的属 性 2 制作网站标志并正确命名 保存到相应的文件夹 3 绘制圆角矩形及个性化的图形 保存到相应的文件夹 4 选择 文件 导入 导入相应图像 编辑设计特殊效果的图像 保存到相应的文件夹 5 启动 Flash MX 制作主页广告条 并保存到相应的文件夹 实训过程注意事项实训过程注意事项 1 在制作过程中注意素材的命名要用英文名字 2 图形图像及动画的保存格式在适合网页要求 3 保存路径要正确 实训思考实训思考 最适合网页的图形图像及动画的格式分别是什么 书写实训报告要求书写实训报告要求 写出图形图像及动画实训的心得与体会 实训实训 3 3 用表格设计主页布局用表格设计主页布局 实训目的实训目的 为了让学生熟练掌握在 Dreamweaver mx 中插入表格 学会设置表格的各 项属性 并掌握如何在表格中插入文本 插入图像的操作方法和步骤 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 插入表格 并选择表格和单元格 2 设置单元格属性 3 调整表格结构 大小 4 格式化表格 5 表格中插入文本 表格中插入图像 实训要求实训要求 要求学生掌握在 Dreamweaver mx 中如何插入表格 设置表格和单元格的 格式 如何调整表格的结构大小 掌握表格中如何插入文字及图像等操作 实训步骤实训步骤 1 新建一个页面 在页面中插入一个 6 行 7 列的表格 并在其中输入相 应的文字 2 选择表格利用 格式化表格 命令来对表格格式进行修改 使其更美 观 3 根据要求对部分单元格进行拆分或合并操作 4 设置文字的对齐方式 通过对边框 填充和间距进行设置 5 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入表格时要注意 单元格的边距和单元格的间距值的设置 2 表格边框线精细为 0 像素的特殊用途 3 插入的图像必须放在站点文件夹下的 image 文件夹内 实训思考实训思考 1 如何拆分和合并单元格 2 如何设置表格的背景 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 4 4 在主页制作中插入文本操作在主页制作中插入文本操作 实训目的实训目的 为了让学生能熟练掌握在 Dreamweaver mx 中如何输入文本 调整设置文 本的格式 如何插入特殊字符 文本列表 水平线 时间 注释的方法 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 输入文本 2 调整文本 3 插入特殊字符 4 插入文本列表 5 插入水平线 6 插入时间 7 插入注释 8 设置文本格式 实训要求实训要求 要求学生掌握在 Dreamweaver mx 中输入文本 设置文本格式 插入特殊 字符 项目符号等操作 实训步骤实训步骤 1 打开上次实训所做的主页面文件 2 输入文本 调整文本的间距 设置文本的格式 通过 属性 面板中 的 格式 和 颜色 等参数 将文字设为标题格式 并改变其颜色 3 输入一段不带格式的文字 选择 常用 工具栏上的 文本 单选项 目 利用换行按钮对文本进行换行处理 实现分段的效果 4 插入特殊字符 项目符号 水平线 时间 注释等内容 实训过程注意事项实训过程注意事项 1 在 编辑字体列表 对话框中选择要添加的字体要一个个地添加进去 不能全部选取再添加 2 当输入文本时要插入多个连续的空格 必须要 编辑 菜单下的 首 选参数 中设置 3 换行的几种方式 自行换行 按 ENTER 强行换行 按 SHIFT ENTER 换 行操作 实训思考实训思考 1 如何插入版权符号 2 如何插入特殊字符 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 5 5 在主页制作中插入图像操作在主页制作中插入图像操作 实训目的实训目的 为了让学生熟练掌握在 Dreamweaver mx 中插入图像 学会设置图像属性 如何插入鼠标经过图像 插入图像占位符的方法 掌握图文混排的技巧等操作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 插入图像 2 设置图像属性 3 插入鼠标经过图像 4 插入图像占位符 5 图文混排操作 实训要求实训要求 要求学生掌握在 Dreamweaver mx 中如何插入图像 设置图像的格式 如 何插入鼠标经过图像 图像占位符 掌握图文混排等操作 实训步骤实训步骤 1 打开上次实训所做的主页面文件 2 插入图像 在属性面板对图像的格式进行设置 3 插入鼠标经过图像 图像占位符 4 将图片和文字进行混合排版 5 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的图像必须放在站点文件夹下的 image 文件夹内 2 设置图片的热点区域可选任意的工具 实训思考实训思考 1 如何设置图片超链接 链接到指定的页面文件 2 如何设置图片的热点区域 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 6 6 在主页制作中超级链接在主页制作中超级链接的设置的设置 实训目的实训目的 为了让学生掌握如何利用超级链接来制作页面 掌握链接各种方式的制作 方法与步骤 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 插入横向导航条 2 设置文本链接 3 插入左置导航栏 4 创建外部超级链接 5 创建内部超级链接 6 创建 E MAIL 链接 7 创建锚点链接 8 创建下载文件的链接 9 创建空链接 10 创建脚本链接 实训要求实训要求 要求学生能利用链接来制作网页 掌握链接几种设置的方法和步骤 实训步骤实训步骤 1 打开上次实训所做的主页面文件 2 选择导航栏的相应文字 3 在属性对话框链接栏中设置要链接的网页 4 在 main 页面中 分别以 3 段文本段落标题作为锚点 在页面上部设置 锚记链接 5 在左下部设置 友谊链接 到相关的网站 设置 联系我们 的 E MAIL 链接 创建 下载 到下载文件的链接 6 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 导航栏要注意分类 避免重复出现 锚点的名称要注意不能重名 实训思考实训思考 1 锚点在同一个文件中是否可以重名 2 如何设置链接到指定的网站 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 7 7 制作动感网页制作动感网页 实训目的实训目的 为了让学生掌握在网页中如何插入 FLASH 动画 按钮 文本 视频 音频 JAVA APPLET 及 ActiveX 控件等内容 以便实现动感网页的制作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 动画素材 实训课时实训课时 2 学时 实训内容实训内容 1 插入 FLASH 动画 2 插入 FLASH 按钮 3 插入 FLASH 文本 4 插入 FLASH 视频 5 插入音频 视频 6 插入 Java Applet 7 插入 ActiveX 控件 实训要求实训要求 要求学生掌握在网页中插入动画 按钮 文本 视频 音频 Java Applet 及 ActiveX 控件等内容 实现网页的动画效果 实训步骤实训步骤 1 打开主页 在页面的顶端部分和中间部分分别插入 FLASH 选择要插入 的 FLASH 动画 网页编辑窗口中会显示一个 FLASH 电影图标 2 在左侧添加一个图层 在层中插入如图 10 所示的图片和文字 在下面 插入一个 FLASH 按钮 在对话框中选择需要的样式 输入所要显示的文字 指 定按钮的链接地址 将背景颜色设置与主页中的背景色相同 3 将插入的按钮复制并粘贴多个 分别更改其显示的文本和链接的网页 组成导航条 4 插入 FLASH 文本及 Java Applet 及 ActiveX 控件设置文本的各项属性 值 5 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的 FLASH 文件必须将其复制到站点文件夹内 2 插入的按钮必须要更改各个按钮的存储名称 否则网页中显示的将是 同一个按钮 实训思考实训思考 1 如何设置按钮的背景色与网页中的背景色一致 2 在 Fireworks 中制作的图形要在网页中引用应如何操作 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 8 8 表单表单制作制作 实训目的实训目的 为了让学生掌握如何创建表单网页 了解各个表单对象属性的设置 熟练 掌握各个表单对象不同的使用范围 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 插入表单 2 插入表单对象 文本框 复选框 单选按钮 按钮 复框框 图像域 密码域 列表和菜单 实训要求实训要求 要求学生能利用表单来创建网页 掌握设定表单的内容和表单对象 掌握 设置各个表单对象的属性值等内容 实训步骤实训步骤 1 打开主页页面 按图 11 所示 分别合并前两行单元格和中间两列单元 格 在合并后的单元格内插入一个表单 为插入的表单命名为 login 2 在表单中插入文字内容及对应的表单对象 文本框 复选框 单选按 钮 按钮 复框框 图像域 密码域 列表和菜单 3 设置各个表单对象的属性值 将客户姓名 E MAIL 具体地址的文本域 依次命名为 name email address 字符宽度和最多字符数分别为 12 12 24 24 30 和 30 类型都为单行文本域 4 最后一个文本域输入框命名为 jianyi 类型为多行文本域 字符宽度 和行数依次为 50 8 文本域载入时显示值为 请在此输入你的建议 5 设置表单中的客户姓名为必填项 E MAIL 为必填项且必为邮件地址 6 设置表单以邮件发送的方式发送到邮箱 zzyan 7 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 在一个网页中只能插入一个表单 但在一个网页中可以有多个表单对 象 2 各个表单对象注意在属性面板中定义其名称 实训思考实训思考 1 表单对象中的插入两个单选按钮 如何命名 2 如何设置密码域 3 文本字段与文本区域如何转换 4 如何设置检查表单的行为 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 9 9 CSSCSS 样式表的使用样式表的使用 实训目的实训目的 为了让学生了解使用 CSS 样式来美化网页的方法 掌握创建 CSS 样式的方 法和步骤 以及利用 CSS 滤镜来制作文字特效等操作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 动画素材 实训课时实训课时 2 学时 实训内容实训内容 1 CSS 样式的新建 2 CSS 样式的编辑与修改 3 CSS 样式的应用 4 利用 CSS 滤镜来特效文字效果 5 制作光晕字 阴影字 遮罩字 动感字 实训要求实训要求 要求学生掌握 CSS 样式的制作方法 掌握 CSS 样式的应用与修改操作 了 解利用 CSS 样式来制作文字特效等操作 实训步骤实训步骤 1 打开主页页面 在此页面中创建 CSS 样式 以 css 01 为名保存 设置 字体为隶书 字号为 16 点数 颜色为 CC66FF 带下划线 2 对页面中左 右两部分文字分别设置空链接 使用 CSS 样式 对左边 的链接文字套用此样式 3 修改 CSS 样式 对表格的框线 背景图片 链接样式等进行设置 并 重新应用到所指定的部分 4 运用 CSS 滤镜来制作文字特效 光晕字 阴影字 遮罩字 动感字的 制作 5 保存页面 预览效果图 实训过程注意事项实训过程注意事项 1 CSS 样式应保存到网站站点目录下 2 CSS 样式的名称应注意不能同名 实训思考实训思考 1 如何利用 CSS 样式来创建链接文本不显示下划线 2 如何将 CSS 样式应用到另外的网站的网页中 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1010 JavaScriptJavaScript 技术技术 实训目的实训目的 为了让学生掌握在网页中插入 JavaScript 脚本语言的方法 以制作各种 具有动态效果的网页 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 动画素材 实 实训课时实训课时 2 学时 实训内容实训内容 1 在网页中加入跑马灯特效 2 制作实现网页中自由飞翔的图像效果 3 制作图片滑过效果 4 显示时间特效 实训要求实训要求 要求学生掌握在网页代码视图中插入 JavaScript 脚本语言的方法和步骤 利用不同的 JavaScript 脚本语言来制作网页特效等操作 实训步骤实训步骤 1 在主页中加入跑马灯特效 跑马灯可以活跃主页气氛 向浏览者介绍 此网页的特色或者注意事项 例如 2 3 欢迎访问博客人信息技术有限公司 4 通过在之间放入这段代码 就会在网页中产生一个 跑马灯的效果 5 制作实现网页中自由飞翔的图像效果 它主要是由函数 function start 来实现的 其作用是每隔一段时间在不同的位置将图片显示一次 因 为位置的改变是连续均匀的 所以在视觉上产生移动的效果 6 制作图片滑过效果 浏览器载入网页时 当鼠标移动图片时显示不同 的图片 鼠标移开时显示原图片 按本例中 onmouseover 和 onmouseout 语句 分别来指定鼠标移入和移出此图片区域时显示的不同的图像文件 而用 src 指 定页面下载后初始的图像文件 另外 cursor hand 指定鼠标光标移到图片区 域时的形状为手形 7 显示时间特效效果 调用 JavaScript 脚本语言来显示当前的日期和星 期 并实现根据当前的时间显示不同的问候语 8 保存页面 预览效果图 实训过程注意事项实训过程注意事项 1 网页特效制作中准备所需的图片和链接页面必须保存到站点文件夹内 以便调用 2 在 JavaScript 脚本语言中对变量名称的定义要区分大小写 实训思考实训思考 1 如何设置状态栏中的跑马灯效果 2 如何设置文字在状态栏中以打字效果出现 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1111 应用行为应用行为 实训目的实训目的 为了让学生了解在 Dreamweaver 中使用行为来制作网页的方法和技巧 利 用行为来制作不需代码来实现的网页特效 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 动画素材 实训课时实训课时 2 个课时 实训内容实训内容 1 交换图像 2 弹出信息 3 恢复交换图像 4 播放声音 5 调用 JavaScript 6 弹出式菜单 实训要求实训要求 要求学生掌握在 Dreamweaver 中利用行为来制作网页特效的方法和步骤 了解行为的使用与技巧 实训步骤实训步骤 1 打开主页页面 在页面中插入一张图片 打开行为面板 选择这张图 片 添加一个行为 交换图像 打开一个对话框 在对话框中设置一张原始图 片 确定 这样就添加了一个交换图片的行为 事件为 onmouseover 2 添加一个 弹出信息 的窗口 在对话框中输入我们所要的文字 欢 迎光临我的班级网站 事件为 onload 3 添加一个 恢复交换图像 的行为 设置原始图片 事件为 onmouseover 4 添加一个行为 播放声音 浏览找到声音文件 事件为 onmouseover 5 插入一个一行一列的表格 输入文字 我的班级 选择此文字 添加 一个弹出式菜单 在对话框中输入菜单的内容及外观 实训过程注意事项实训过程注意事项 1 设置交换图像时首先得插入图片 图片必须保存在站点的 image 文件 夹内 2 播放声音行为注意文件的格式及路径 实训思考实训思考 1 要使播放声音要点击某个文字进行 应如何设置行为的事件 2 如何获取更多的事件 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1212 利用框架制作利用框架制作 公司简介公司简介 网页网页 实训目的实训目的 为了让学生掌握如何创建框架 设定框架的内容和样式 学会制作浮动的 框架等操作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 创建框架 2 设定框架内容和样式 保存框架 3 设置无框架内容 4 制作浮动框架 实训要求实训要求 要求学生能利用框架来进行布局网页 设定框架内容和样式 设置框架的 内容 制作可以浮动的框架 实训步骤实训步骤 1 在新建文档对话框的 框架集 类型中 选择左侧固定上方嵌套的框 架模式 创建一个新的框架页 2 插入图片和按钮 以及相关的文字内容 3 在属性面板中设置文字和图片的格式属性 4 在左侧列出导航链接 制作链接对应的子页面 最终实现点击左侧框 架的链接 右面的框架会跳转到相应的子页面 5 保存文件 一定要分别保存框架的各个部分 每一部分为一个 HTML 文 件 总的框架是一个 HTML 文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的图像必须放在站点文件夹下的 image 文件夹内 2 框架的保存分几个部分 实训思考实训思考 1 框架的保存应注意有几个文件要保存 2 如何设置框架中的链接 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1313 利用布局表格利用布局表格制作制作 新书推介新书推介 网页网页 实训目的实训目的 为了让学生熟练掌握在 Dreamweaver 中绘制布局表格和单元格 学会设置 布局表格的属性 学会调整布局表格和布局单元格 掌握在布局表格中插入文 本和图像的方法 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 绘制布局表格和单元格 清除布局单元格高度 2 设置布局表格宽度 3 调整布局表格和布局单元格 4 布局表格中插入文本和图像 实训要求实训要求 要求学生掌握在 Dreamweaver 中绘制布局表格和单元格 了解设置布局表 格的操作 学会在布局表格中插入文本和图像的技巧等操作 实训步骤实训步骤 1 新建一个页面 切换至布局模式下 使用布局表格和绘制布局单元格 来创建表格 制作一个国字型页面版式 2 回到标准模式下 观察表格 为每个表格添加背景颜色 3 在表格中添加文字 完成整个页面的制作 4 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的图像必须放在站点文件夹下的 image 文件夹内 2 表格布局和布局表格的区别 实训思考实训思考 1 如何拆分和合并单元格 2 如何设置表格的背景 3 表格布局和布局表格异同点 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1414 模板和库模板和库的使用的使用 实训目的实训目的 为了让学生掌握如何利用模板和库来制作网页 掌握模板的创建与编辑 掌握创建可编辑区域 可选区域 重复区域 掌握模板的保存与应用操作 了 解如何创建库项目及插入库项目等操作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 创建模板 2 定义可编辑区域 3 定义可选区域 4 定义重复区域 5 设置可编辑标签属性 6 应用模板 7 调整模板 8 创建库 9 插入库 10 调整库 实训要求实训要求 要求学生能利用模板和库来制作网页 设置模板的可编辑区域 可选区域 和重复区域 掌握库的应用与编辑修改等操作 实训步骤实训步骤 1 新建一个模板页面 编辑模板页面 2 在模板中插入可编辑区域并保存 3 新建一个基于模板的页面 修改模板文件 所有基于此模板的页面都 会被修改 4 新建一个空白页 套用上一实例中的模板 5 打开上一实例基于模板的页面 选择插入菜单中的模板对象 选择创 建嵌套模板 制作新的嵌套模板 加入第 2 个可编辑区域并保存 最终生成嵌 套模板 6 制作一个包含图像的网页 选中图像并拖动到库中 7 新建一个空白文档 从库中将图像拖到空白页面中 8 打开库项目 对其添加链接 保存库文件 提示更新相关页面 打开 包含被修改库项目的页面文档 完成更新 9 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的图像必须放在站点文件夹下的 image 文件夹内 2 模板的保存注意扩展名 实训思考实训思考 1 如何套用模板到页面 2 如何在模板中添加重复区域 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1515 利用层的布局利用层的布局制作制作 技术支持技术支持 网页网页 实训目的实训目的 为了让学生掌握如何利用层来布局网页 掌握层的插入 设置层的各项属 性 利用层与行为的应用来创建层动画等操作 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 实训课时实训课时 2 学时 实训内容实训内容 1 使用层排版 2 设置层文本 3 显示隐藏层 4 拖动层 5 调整层的大小 6 层的对齐 实训要求实训要求 要求学生能利用层来进行布局网页 了解层的属性的设置 掌握在层中插 入相关的图片或文字 并掌握层与行为的综合使用 实训步骤实训步骤 1 新建一个页面 在页面中插入三个不同的层 2 在各个层中分别插入不同的图片 并设置 Layer1 显示属性为可见 Layer2 Layer3 显示属性为隐藏性 3 利用层与行为来制作显示与隐藏层动画 选择 Layer1 添加一个 显 示 隐藏层 行为 设置 Layer1 隐藏 Layer2 Layer3 显示 事件改为 onmouseover 利用同样的道理 设置当事件为 onmouseout 时显示 Layer2 隐藏 Layer1 Layer3 的行为 4 利用层与行为来制作拖动层动画 新建一个层 在层中插入一张图片 并调整图片与层的大小 选择层 添加一个 拖动层 行为 设置层移动的目 标处 事件为 onmouseover 5 调整页面中所有层的大小 选择对齐层命令来调整页面中层的对齐方 式 6 保存文件 预览文件效果 实训过程注意事项实训过程注意事项 1 插入的图像必须放在站点文件夹下的 image 文件夹内 2 利用层与行为制作动画首先应选中对应层 实训思考实训思考 1 行为由哪两部分组成 2 如何设置行为中的事件更多 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1616 网页设计与网站管理网页设计与网站管理 实训目的实训目的 为了让学生了解网站进行优化处理操作的原理 了解网站的创意和布局 对网页元素进行优化的过程和步骤 掌握网站域名申请的过程 了解网站发布 的过程等内容 实训环境实训环境 硬件环境 考核用机为奔腾以上兼容机 内存不少于 32M 最好 64M 或 128M 硬盘不小于 500M VGA 彩显 带鼠标器 操作系统 Windows95 98 me 2000 XP 软件环境 Dreamweaver MX 2004 特殊要求 必须将 IIS 配置好 能正常进行 WEB 浏览 素材准备素材准备 准备制作网页所需的文字素材 图像素材 音乐素材 动画素材 实训课时实训课时 2 学时 实训内容实训内容 1 网页布局设计 2 网页中的文字设计 3 网页中的图像应用 4 图文排版 5 网页导航条设计 6 网页广告设计 7 域名的设计与申请 8 网站的发布 实训要求实训要求 要求学生掌握整个网站的优化过程 了解网站各种版面的布局形式 掌握 网页色彩搭配的原则 了解网站发布的整个流程等操作 实训步骤实训步骤 1 打开前面已做好网站的主页面 根据网页设计原则 对网页不同元素 布局 文字 图像 图文排版 导航 广告等方面进行优化设计 调整网页效 果 2 推广主页的方法和思路 注册各个搜索引擎 互换广告 到 BBS 或网 上论坛去发布自己网站的消息 友情链接登录等方法可以推广你网站的主页 提高访问量 3 域名的设计与申请 选择申请主页的网站去申请免费的空间 申请虚 拟域名 注册搜索引擎 4 网站的发布与上传 5 登录网站 预览效果图 实训过程注意事项实训过程注意事项 1 申请的虚拟域名原则上是容易识记 代表一定的含义 2 在选择站点的时候要注意主页空间的大小 速度 支持哪些网页技术 是否支持 FTP 上传或下载 实训思考实训思考 1 导航设计的原则是什么 2 网页中广告是越多越好吗 书写实训报告要求书写实训报告要求 1 根据调试结果 写出调试分析报告 2 写出本次实训的心得与体会 实训实训 1717 网站开发综合实训网站开发综合实训 17 117 1 实训意义实训意义 网页设计与制作综合实训是教学过程中重要的实践性教学环节 它是根据 专业教学计划的要求 在教师指导下对学生进行的网页制作专业技能的训练 培养学生综合运用理论知识分析和解决实际问题的能力 实现由理论知识向操 作技能的转化 是对理论与实践教学效果的检验 也是对学生综合分析能力与 独立工作能力的培养过程 因此 加强实践教学环节 搞好实训教学 对实现 本专业的培养目标 提高学生的综合素有着重要的作用 17 217 2 实训目的实训目的 1 通过综合实训进一步巩固 深化和扩展学生的理论知识与专业技能 1 掌握规划网站的内容结构 目录结构 链接结构的方法 2 熟练掌握网页制作软件 Dreamweaver MX 的基本操作和使用技能 3 掌握页面的整体控制和头部内容设置的方法 4 熟练掌握网页页面布局的各种方法 5 熟练掌握在网页中输入 设置标题和正文文字的方法 6 熟练掌握在网页中插入图像 flash 动画 背景音乐的方法 7 掌握建立各种形式超级链接的方法 8 掌握表单网页制作方法 9 掌握网页特效的制作方法 10 掌握网站测试的方法 2 训练和培养学生获取信息和处理信息的能力 充分培养和提高学生的动手能 力 学会通过网站 书籍 素材光盘等方式收集所需的文字资料 图像资料 flash 动画和网页特效等 3 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题 的能力及其基本工作素质 4 培养学生理论联系实际的工作作风 严肃认真的科学态度以及独立工作的能 力