《网页设计与制作》课程实验实训指导书

网页设计与制作 课程实验实训指导书 课程编码 课程名称 网页设计与制作 课程学分 4计划课时 68 理论 26 实践 42 课程类别 理论课 理论实践一体 实 践 适用专业 计算机网络技术 计算机应用 技术 信息管理 动漫设计与制作 先修课程 网页动画设计与制作 图形图像处理 后继课程 程序设计 制 订 人 负 责 人 审核人 批准人 1 7 7 网页设计与制作网页设计与制作 课程实验实训指导书课程实验实训指导书 一 课程基本信息一 课程基本信息 课程编码 课程名称 网页设计与制作 课程学分 4计划课时 68 理论 26 实践 42 课程类别 理论课 理论实践一体 实践 适用专业 计算机网络技术 计算机应用技术 信息管理 动漫设计与制作 先修课程 网页动画设计与制作 图形图像处理 后继课程 程序设计 制 订 人 负 责 人 审核人 批准人 二 课程任务和目的二 课程任务和目的 该课程是计算机网络技术 计算机应用技术专业的核心课程 也是动漫设 计 信息管理专业的必修课程 它的目标是从职业技术教育的特点出发 培养 学生实际动手制作网页与管理网站的能力 使学生具备网页设计与制作 网站 规划与维护的实践技能 以便形成良好的计算机网页制作与网站管理职业素养 学生毕业后可胜任网站管理员 网页设计师 网页美工师等工作岗位 并可不 断提升岗位工作能力 它要以计算机基础 网页动画设计与制作 图形图像处 理课程的学习为基础 也是进一步学习程序设计课程的基础 三 实验实训项目内容与学时分配三 实验实训项目内容与学时分配 表格可根据内容调整宽度和增加行数 序序 号号 项目项目 名称名称 实验 实训 实验 实训 名称名称 实验 实训 内容实验 实训 内容 学学 时时 实验实验 类型类型 实验实验 要求要求 实训一 认识与 策划个人网站 1 确定网站主题 2 确定网站风格 3 规划网站内容 2 设计 型 必修 实训二 创建站 点并制作网页 1 建立文件夹 2 建设站点 3 制作子页 4 制作首页 5 制作网页图片素材 4 综合 型 必修 1 项目 一个 人网 站的 设计 与制 作实训三 创建网 站相册 创建 超链接 1 创建网站相册 2 创建首页中的文字链接 3 创建电子邮件链接 2 综合 型 必修 2 项目 二 实训一 认识与 策划电子商务 策划电子商务类网站 1 设计 型 必修 2 类网站 实训二 首页的 布局设计 1 创建站点 2 绘制布局单元格 3 使用表格进行布局的细化 1 综合 型 必修 实训三 制作网 站 Logo 与页面 图片 1 制作网站 Logo 2 制作顶部导航图片 3 制作菜单导航图片 4 制作顶部广告图片 5 制作左边小图标 6 制作书籍图片 4 综合 型 必修 实训四 制作首 页 制作首页 2 综合 型 必修 电子 商务 网站 设计 与制 作 实训五 添加 CSS 样式表 添加 CSS 样式表 2 综合 型 必修 实训一 认识与 策划学校类网 站 1 确定网站风格特色 2 划分网站所要包含的项目 3 绘制网站的结构图 4 绘制首页布局草图 2 设计 型 必修 实训二 建立站 点与布局首页 1 创建站点 2 首页整体布局 3 设置网页的页眉和导航栏 4 设置网页的连接区 5 设置网页的主内容区 6 设置网页的页脚 7 设置网页的 CSS 样式 4 综合 型 必修 实训三 使用库 元素创建网页 1 库元素的创建 2 库元素的使用 3 库元素的编辑 2 综合 型 必修 实训四 制作导 航栏所连接的 网页 1 创建 本系介绍 网页 2 创建其他导航栏所要链接的网 页 3 编辑库元素在导航栏部分的超 链接 2 综合 型 必修 3 项目 三学 校类 网站 设计 与制 作 实训五 使用模 板创建网页 1 模板的创建 2 设置可编辑区域 3 应用模板 4 更新模板内容 2 综合 型 必修 实训一 认识与 策划企业网站 策划企业网站 1 实训二 切割页 面效果图 1 创建站点 2 页面布局 3 添加首页的部分元素 14 项目 四 企 业类 网站 设计 与制 作 实训三 制作网 页 Banner 1 利用 Flash 制作网页 Banner 2 在页面中插入 Banner 2 3 实训四 制作留 言板 1 调整留言板页面 2 利用表单制作留言板 3 利用表单制作首页部分内容 2 实训五 使用内 嵌框架 1 制作新闻文本页面 2 制作新闻页面 2 实训六 使用网 页特效 1 将新闻制作成滚动字幕 2 以跟随滚动条滚动的对联广告 形式显示联系方式 3 状态栏显示滚动欢迎词 2 实训七 网站的 测试与发布 1 申请域名 2 上传网站 3 维护网站 4 添加网页搜索关键字和说明信 息 5 推广网站 2 合计学时 42 注 1 实验设置要注意内容更新 体系设计科学合理 实验项目名称要准确规范 2 实验要求为 必修 选修 3 实验类型为 验证 综合 设计型 4 学时分配合计数要与实验总学时相同或大于实验总学时数 其中超出的学时数可为 选开实验 若适应两个以上专业的可在表格下分别注明 例如序号 1 2 3 适应 专业 序号 1 3 5 适应 专业等 项目项目 1 1 个人网站的设计与制作个人网站的设计与制作 实训一 认识与策划个人网站 一 实训目的一 实训目的 1 掌握个人网站的特点 2 掌握制作个人网站的注意事项 二 实训内容二 实训内容 1 确定网站主题 2 确定网站风格 3 规划网站内容 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 网络畅通 4 四 实四 实训训步骤步骤 1 确定网站主题 在本项目中 建设一个名为 竹轩 的个人网站 以竹和绿色做网站的风 格 主题为 建设网站的基本技巧 同时用 美文 为副主题 用竹子的图片 以做点缀 体现网站的风格 来构成网站 2 确定网站风格 竹轩 个人网站的风格是主要利用了一些漂亮的以竹子为主题的图片 进行适当的修改 依赖绿色和以竹子为素材的图片来体现绿色有生机的风格 3 规划网站内容 在本项目的个人网站中 要包含的内容有 网页制作知识 美文 图片三 类 为了主题清楚分了三个栏目 这样内容就不会杂乱 利于浏览者的访问 可以绘制一个网站结构图来表现网站的组织结构 一般用一棵倒置的树来实现 网站的结构图 如图所示 站点首页index htm 图片美文知识 图 网站结构图 五 实五 实训训报告要求报告要求 写出本项目报告的摘要和前言部分 六 实六 实训训注意事项注意事项 熟悉了 Dreamweaver CS3 软件及基本操作后 多根据教师提供的网址上网 欣赏优秀网站 研究其特点 布局等 七 思考题七 思考题 个人网站都有哪些特点 实训二 创建站点并制作网页 一 实训目的一 实训目的 1 掌握个人网站建设的基本流程和基本方法 2 掌握表格布局的知识 5 3 掌握图片素材的制作方法和处理方法 二 实训内容二 实训内容 1 建立文件夹 2 建设站点 3 制作子页 4 制作首页 5 制作网页图片素材 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 建立文件夹 2 建设站点 6 3 制作子页 1 新建网页 在文件面板中 右击 zhishi 文件夹 选择 新建文件 如图 新建了一 个名为 untitled html 的空白网页 右击此文件名 选择 编辑 重命 名 将网页命名为 wangzhan html 注意 网页和网页中使用的图片的命名必须为拼音 英文或者数字 不可 使用中文 2 设置页面属性 7 打开新建的网页 wangzhan html 利用属性面板上的 页面属性 按钮 打开 页面属性 对话框指定布局和格式设置属性 设置字体的大小为 12 像素 上边距为 0 像素 3 简单布局 鼠标插入点放到网页 wangzhan html 的空白区域 点击 常用 工具栏 的插入表格的按钮 插入一个四行一列的宽度为 760 像素的表格 并将表格利 用属性面板中的 居中对齐 按钮设置其居中对齐 通过设置表格 单元格背景颜色以美化网页 选中整张表格 在属性面板中可以利用 背景颜色 按钮设置整张表格 的背景颜色 将插入点放在某一个单元格中 就可以利用 背景颜色 按钮设置单元 格的背景颜色 如图所示 图 单元格属性面板 在本例中 将第 1 4 行的单元格背景颜色设置为 第 2 3 行的单元 格背景颜色设置为 CEFFDD 4 添加文字 设置文字格式 标题文本 将鼠标位于第一行单元格中 输入 网站规划规范 选中此文字 在属性 面板中设置字体为 华文新魏 文字大小为 24 像素 字体颜色为 FFFFFF 并利用按钮 设置文字居中对齐 单元格的高度为 43 像素 如图所示 8 图 文字属性对话框 正文文本 将鼠标位于第三行单元格中 输入正文 设置正文格式 字体为宋体 大 小为 14 像素 利用属性面板的 文本缩进 按钮将文本进行缩进 如图所示 图 控制文字缩进或凸出 注意 要使文本每段开头空两个字符 需要将输入法设置为 全角 模式 再利用空格键输入 或者利用 Ctrl Shift 空格键输入空格 版权信息 在本例中 在第四行单元格中输入版权信息 字体大小为 12 像素 颜色为 FFFFFF 假设为 版权所有 2008 竹轩 鲁 ICP 备 001 号 其中 是特 殊符号 可以通过插入栏的 文本 类别来进行操作 在本例中 所要插入的 符号就要展开 文本 类别中的 字符 按钮 来选择 版权 按钮 将 输入 如图所示 9 图 字符 按钮 5 添加图片 通常网站的子页都要有返回首页的链接 在这个网页中将利用素材中的图 片 fanhui gif 放置在网页中 作为返回首页的超链接 位置在表格的第二 行 并且使之向右对齐 6 添加背景音乐 将代码插入到网页 的之间 当浏览者打开网站时即可听到背景音乐 当网页最小化 之后 音乐会消失 代码 中 src image Bamboo Dance wma 表示音频文件 loop 1 表示当网页最 小化之后 音乐会消失 如果 loop 3 指音乐播放三次 4 制作首页 1 首页布局 在本例中首页的布局采用了 匡 字形的布局 首先插入了一个三行一列 的宽度为 760 像素的表格 作为整个网页的大框架 第一行设置高度为 160 像 素 用来放置页眉 第二行作为主内容区 第三行作为页脚 2 页眉的美化 单元格背景的使用 flash 动画的插入 10 3 页脚的设置 将第三行单元格的高度设置为 30 像素 背景颜色和页眉颜色相匹配设置为 2B4216 输入版权信息 假设为 版权所有 2008 竹轩 鲁 ICP 备 001 号 将文字设置为白色 居中对齐 4 编辑主内容区的内容 编辑主内容区的布局 编辑导航栏 个人档 编辑主内容区 11 5 制作网页图片素材 1 页眉处用到的图片 banner jpg 2 导航处使用的图片 1 jpg 3 分栏边框的制作 左侧分栏边框的制作 右侧主内容区边框 12 五 实五 实训训报告要求报告要求 参照模板 按照要求 写出本项目报告正文中的 创建站点并制作网页 部分 六 实六 实训训注意事项注意事项 使用 Fireworks 软件制作网页图片前 一定要确定好大小 不要到 Dreamweaver 中缩放 七 思考题七 思考题 本网站还可以怎样布局 实训三 创建网站相册 创建超链接 一 实训目的一 实训目的 1 掌握网站相册的创建方法 2 掌握超链接的类型和各类型的创建方法 二 实训内容二 实训内容 1 创建网站相册 2 创建首页中的文字链接 3 创建电子邮件链接 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 13 1 创建网站相册 1 在 Dreamweaver CS3 中 选择 命令 菜单中的 创建网站相册 命令 跳出如图所示的 创建网站相册 对话框 图 创建网站相册对话框 2 在 相册标题 文本域中 输入标题 该标题将显示在包含缩略图 的页面顶部的灰色矩形中 3 点击 源图象文件夹 文本域旁边的 浏览 按钮 选择包含有源 图象的文件夹 然后点击 目的文件夹 文本域旁边的 浏览 按钮 选择 或创建 一个放置导出图象和 HTML 文件的目的文件夹 4 为缩略图图象指定显示选项 5 从 缩略图格式 弹出式菜单中选择一种缩略图图象格式 6 从 相片格式 弹出式菜单中选择大尺寸图象的格式 会为每一幅 原始图象创建一幅指定格式的大尺寸图象 可以为大尺寸图象指定不同于缩略 图的格式 注意 创建网站相册 命令不允许你使用原始的图象文件作为大尺寸文 件 这是因为非 GIF 和 JPEG 格式的原始文件可能不能在所有浏览器中正确显示 注意 如果原始文件是 JPEG 文件 则产生的大尺寸图象与原始图象相比 可能 有较大的文件尺寸或较低的质量 7 为大尺寸图象选择 缩放 百分数 8 选择 为每张相片建立导览页面 为每个源文件创建一个单独的网 14 页页面 其中包含 返回 首页 和 下一页 的导航链接 9 点击 确定 按钮 为网页相册创建 HTML 和图象文件 10 当出现 相册已经键立 的对话框时 点击 确定 按钮 可能需 要等几秒钟 才会出现相册页面 缩略图按文件的字母顺序显示 效果如图所 示 图 网站相册效果图 注意 当处理过程开始后 点击 Dreamweaver CS3 对话框中的 取消 按 钮不会停止创建相册的过程 而只是不让 Dreamweaver CS3 显示相册的首页面 创建完网站相册后 站点文件夹中会自动添加上创建相册时用到的图片和 网页 如图所示 15 图 网站相册文件夹 2 创建首页中的文字链接 依次选中首页中每个文件的标题 在 属性 面板的 链接 项输入链 接地址 在本项目中 可以设置连接属性为 parent 或者 self 保存网页后浏览 会发现制作了链接的文字加了下划线 并且字体的颜色也有了改变 可以通过 调节页属性来进行修改 如图 选择页面属性中的 链接 将 链接颜色 已访问链接 的颜色均设置为黑色 下划线样式 为仅在变换图像时显 示下划线 点击 确定 按钮 保存网页 浏览会发现 仅当鼠标移动到链接 的文字上时才显示下划线 16 图 设置链接字体的颜色 3 创建电子邮件链接 选中首页中的 XXX XXX XXX 执行 插入 菜单中的 电子邮件链接 命 令 或单击插入栏 常用 类别中的按钮 在弹出的 电子邮件链接 对 话框中进行设置 如图所示 图 电子邮件链接 对话框 五 实五 实训训报告要求报告要求 参照模板 按照要求 写出本项目报告正文中的 创建网站相册 创建超 链接 部分 六 实六 实训训注意事项注意事项 创建网站相册时 所有的相册图片的格式应该一致 并且不能用中文命名 七 思考题七 思考题 有的同学创建的网站相册中的图片不显示 为什么 项目项目 2 2 电子商务网站设计与制作电子商务网站设计与制作 实训一 认识与策划电子商务类网站 一 实训目的一 实训目的 1 掌握电子商务网站的特点 17 2 能策划电子商务网站 二 实训内容二 实训内容 策划电子商务类网站 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 网络畅通 四 实四 实训训步骤步骤 策划电子商务类网站 五 实五 实训训报告要求报告要求 写出本项目报告的摘要和前言部分 六 实六 实训训注意事项注意事项 根据教师提供的网址 多上网欣赏优秀电子商务网站 研究其特点 设计 出具有独特风格的电子商务网站 七 思考题七 思考题 电子商务网站有哪几种风格 18 实训二 首页的布局设计 一 实训目的一 实训目的 1 掌握布局表格和单元格的使用和注意事项 2 掌握使用表格进行布局的细化方法 二 实训内容二 实训内容 1 创建站点 2 绘制布局表格和单元格 3 使用表格进行布局的细化 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 创建站点 2 绘制布局表格和单元格 1 使用布局视图 绘制布局表格 19 绘制布局单元格 使用标准视图 20 3 使用表格进行布局的细化 21 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 首页的布局设计 部分 六 实六 实训训注意事项注意事项 有时候 表格和布局表格一起使用 一定要掌握这两种方式之间的切换和 联系 七 思考题七 思考题 怎样设定布局单元格的宽度 实训三 制作网站 Logo 与页面图片 一 实训目的一 实训目的 1 掌握利用 Photoshop 处理图像的一般流程 2 掌握利用 Photoshop 处理图像的方法 22 二 实训内容二 实训内容 1 制作网站 Logo 2 制作顶部导航图片 3 制作菜单导航图片 4 制作顶部广告图片 5 制作左边小图标 6 制作书籍图片 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 制作网站 Logo 2 制作顶部导航图片 3 制作菜单导航图片 23 4 制作顶部广告图片 5 制作左边小图标 6 制作书籍图片 24 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 制作网站 Logo 与页面图片 部分 六 实六 实训训注意事项注意事项 注意图片的色彩 样式要跟网站页面的色彩 布局一致 七 思考题七 思考题 常见的 Logo 有哪些尺寸和样式 实训四 制作首页 一 实训目的一 实训目的 1 掌握网页中插入图片的方法 2 掌握插入 图像占位符 的方法 3 掌握插入 鼠标经过图像 的方法 4 掌握插入导航条的方法 二 实训内容二 实训内容 制作首页 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 25 制作首页 1 插入处理好的图片 2 设置单元格的背景图片 26 3 设置表格的背景色等 4 输入文本 5 添加特效 欢迎来到 书城在线 这里有丰富的图书资源 敬请选购 这段文本就会从右向左滚动 在放置宣传图片的表格中插入如下代码 var NowFrame 1 var MaxFrame 3 var bStart 0 function fnToggle var next NowFrame 1 if next MaxFrame 1 NowFrame MaxFrame next 1 if bStart 0 bStart 1 setTimeout fnToggle 3000 return else oTransContainer filters 0 Apply document images oDIV next style display document images oDIV NowFrame style display none oTransContainer filters 0 Play duration 2 if NowFrame MaxFrame 28 NowFrame 1 else NowFrame setTimeout fnToggle 2000 fnToggle 其中的 images g1 gif 为图片的链接地址 效果为 g1 gif g2 gif g2 gif 三幅图片交替出现 如图所示 像用 Flash 制作 出来的一样 6 插入表单 7 最终效果 29 五 实五 实训训报告要求报告要求 写出本项目报告正文中测试影片部分 30 六 实六 实训训注意事项注意事项 测试后出现问题查找原因 及时修改 实训五 添加 CSS 样式表 一 实训目的一 实训目的 掌握添加 CSS 样式表的方法 二 实训内容二 实训内容 添加 CSS 样式表 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 添加 CSS 样式表 31 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 添加 CSS 样式表 部分 六 实六 实训训注意事项注意事项 预览后出现问题查找原因 及时修改 项目项目 3 3 学校类网站设计与制作学校类网站设计与制作 实训一 认识与策划学校类网站 一 实训目的一 实训目的 1 了解学校类网站的特点 2 能规划学校类网站 32 二 实训内容二 实训内容 1 确定网站风格特色 2 划分网站所要包含的项目 3 绘制网站的结构图 4 绘制首页布局草图 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 确定网站风格特色 在本项目是高校的系部网站 就决定了它的风格是严谨又不失活泼 所以 用蓝色作为主色调 因为蓝色是冷色调 可以突出严谨的氛围 适当点缀橘色 红色等亮色来增加活泼的特点 使得整个页面活泼起来 2 划分网站所要包含的项目 根据本项目网站的分析 网站应包含的项目有 系部介绍 师资队伍 党团工作 精品课程 资源课堂 心理咨询 系留言板 校内链接 新闻动 态 教学工作 学生工作 招生就业 这么多的项目应该有条理的放置到首 页 所以可以作进一步的分类 3 绘制网站的结构图 首 页 导 航 栏连 接 区主内容区 师 资 队 伍 党 团 工 作 校 内 连 接 新 闻 动 态 教 学 工 作 学 生 工 作 招 生 就 业 精 品 课 程 资 源 课 堂 心 理 咨 询 系 留 言 板 领 导 邮 箱 系 部 介 绍 4 绘制首页布局草图 33 站头 logo 首 页系部介绍师资队伍党团工作精品课程资源课堂心理咨询系留言板 系领导邮箱 新闻动态 校内连接 教学工作 学院图片 学生工作 招生就业 版权信息部分 五 实五 实训训报告要求报告要求 写出本项目报告的摘要和前言部分 六 实六 实训训注意事项注意事项 多欣赏优秀网站 分析 总结后设计出具有独特风格的网站布局 七 思考题七 思考题 学校类网站有哪些风格 实训二 建立站点与布局首页 一 实训目的一 实训目的 1 掌握利用表格布局网页的方法和技巧 2 掌握嵌套表格的使用方法 二 实训内容二 实训内容 1 创建站点 2 首页整体布局 3 设置网页的页眉和导航栏 4 设置网页的连接区 5 设置网页的主内容区 6 设置网页的页脚 7 设置网页的 CSS 样式 34 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 创建站点 在站点中除了 image 文件夹以外 再创建五个文件夹分别为 html jiaoxue jiuyezhaosheng xuesheng news 分别用来存放导航栏 所连接的网页 例如教学工作 就业招生 学生工作和新闻动态栏目中的网页 这样网站文件夹便于管理 2 首页整体布局 3 设置网页的页眉和导航栏 4 设置网页的连接区 35 5 设置网页的主内容区 主内容区的最终效果 新闻动态 区域 教学工作 学生工作 招生就业 区域 36 多彩校园 区域 function on mou i eval pic i src images but00 i gif function out mou i eval pic i src images but0 i gif function on mou i eval pic i src images but00 i gif function out mou i eval pic i src images but0 i gif var bannerAD new Array var bannerADlink new Array var adNum 0 bannerAD 0 images t 5 jpg bannerADlink 0 37 bannerAD 1 images t 2 jpg bannerADlink 1 bannerAD 2 images t 3 jpg bannerADlink 2 var preloadedimages new Array for i 1 i 5 i preloadedimages i new Image preloadedimages i src bannerAD i function setTransition if document all bannerADrotator filters revealTrans Transition Math floor Math random 23 bannerADrotator filters revealTrans apply function playTransition if document all bannerADrotator filters revealTrans play function nextAd if adNum bannerAD length 1 adNum else adNum 0 setTransition document images bannerADrotator src bannerAD adNum playTransition theTimer setTimeout nextAd 6000 38 function jump2url jumpUrl bannerADlink adNum jumpTarget blank if jumpUrl if jumpTarget window open jumpUrl jumpTarget else location href jumpUrl function displayStatusMsg status bannerADlink adNum document returnValue true 6 设置网页的页脚 整个页面布局的低端的那个一行一列的表格 III 将背景颜色设置为 307EC3 输入相应的版权信息 并设置文字居中显示 文字为白色字体 7 设置网页的 CSS 样式 39 五 实五 实训训报告要求报告要求 40 写出本项目报告中正文的 建立站点并布局首页 部分 六 实六 实训训注意事项注意事项 使用嵌套表格时 最外层表格宽度用像素来表示 内层表格宽度用 百分比 来表示 七 思考题七 思考题 高校网站还可以怎样布局 实训三 使用库元素创建网页 一 实训目的一 实训目的 1 理解库元素的概念 2 掌握创建库元素的方法 二 实训内容二 实训内容 1 库元素的创建 2 库元素的使用 3 库元素的编辑 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 库元素的创建 41 2 库元素的使用 1 新建一个网页文档 2 打开 库 面板 执行 窗口 菜单中的 资源 命令 以打开 资 源 面板 并在左侧的按钮中单击 库 按钮切换到 库 面板 3 在 库 资源面板中选中欲插入的库元素 wangyetou 然后单击左 下角的 插入 按钮 此时就在页面中出现了一个刚插入的 库元素 内容 注意 注意 插入到新网页中的库可能与原定义库元素的网页有所不同 如文字 变大了 色彩没有了等 这主要是由于原网页中定义了 CSS 样式所至 此时只 须打开 CSS 样式 面板 并链接外部样式表文件 然后重新设置即可 3 库元素的编辑 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 使用库元素创建网页 部分 六 实六 实训训注意事项注意事项 库元素一旦进行了修改 一定要更新使用该元素的网页 七 思考题七 思考题 库元素有哪些 实训四 制作导航栏所连接的网页 一 实训目的一 实训目的 掌握多个页面导航栏链接的方法与技巧 二 实训内容二 实训内容 42 1 创建 本系介绍 网页 2 创建其他导航栏所要链接的网页 3 编辑库元素在导航栏部分的超链接 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 创建 本系介绍 网页 2 创建其他导航栏所要链接的网页 除 本系介绍 网页以外的其他导航栏所链接的网页 与 本系介绍 网 页格式基本相同 只是在主内容区的文字不同 所以可以将 本系介绍 网页 即 bxjs htm 中的主内容删除替换上 师资队伍 党团工作 精品课程 资源课堂 心理咨询 系留言板 相应的内容 并将网页依次另存为 szdw html dtgz html jpkc html zykt html xlzx html xlyb html 这些页面都保存在网站文件夹的 html 文件夹中 43 3 编辑库元素在导航栏部分的超链接 1 在库面板中选中库元素 wangyetou 双击打开 2 依次选中导航图片 but1 gif but2 gif but3 gif but4 gif but5 gif but6 gif but7 gif but8 gif 分别设置 超链接的网页为 index htm bxjs htm szdw html dtgz html jpkc html zykt html xlzx html xlyb html 3 保存库元素 wangyetou 在提示更新的对话框中选择确定 以便更 新使用库元素 wangyetou 的网页 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 制作导航栏所链接的网页 部分 六 实六 实训训注意事项注意事项 将导航栏做成库元素 如果进行了修改 一定要更新相关元素 七 思考题七 思考题 导航栏链接还可以怎样做 实训五 使用模板创建网页 一 实训目的一 实训目的 掌握模板的创建 使用和更新 二 实训内容二 实训内容 1 模板的创建 2 设置可编辑区域 3 应用模板 4 更新模板内容 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 模板的创建 1 打开 bxjs htm 删除主内容区的标题和文字所在的表格 插入一个 四行一列 宽度为 100 的表格 如图所示 44 图 删除主内容的 bxjs htm 2 执行 文件 菜单中的 另存为模板 命令 打开 另存为模块 对 话框 如图所示 图 另存为模块 对话框 3 输入名称 即在 另存为 文本框中 为 xinwen 单击 保存 按钮 弹出一个提示对话框 提示是否更新链接 单击 是 按钮 将文档 另存为模板 4 操作成功后 文档编辑窗口标题栏中的名称由原来的 bxjs htm 变 成了 xinwen dwt 如图所示 图 模板编辑窗口 2 设置可编辑区域 45 3 应用模板 4 更新模板内容 1 首先应打开 资源 面板 执行 窗口 菜单中的 资源 命令 然 后单击 模板 按钮以切换到 模板 面板 如图所示 图 模板 资源面板 2 双击模板名 index 将会在文档编辑窗口打开该模板 此时即可修改模 板中的内容 46 3 根据需要内容 更改模块内容后 按 Ctrl S 以保存模块文件 此时 将打开 更新模板文件 对话框 其中显示的是包含正在应用的模板对象的网 页文件 如图所示 图 更新模板文件 对话框 4 单击 更新 按钮 系统自动更新这些文档 并显示更新结果 如图所 示 此时单击 关闭 按钮 以完成编辑模板 图 更新结果 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 使用模板创建网页 部分 六 实六 实训训注意事项注意事项 模板创建好后再使用 七 思考题七 思考题 使用模板有哪些好处 项目项目 4 4 企业类网站设计与制作企业类网站设计与制作 实训一 认识与策划企业网站 47 一 实训目的一 实训目的 1 了解企业网站的基本特点 2 掌握企业网站制作规范 3 能策划企业网站 二 实训内容二 实训内容 策划企业网站 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 网络畅通 四 实四 实训训步骤步骤 策划企业网站 网站首页 简 介 产 品 荣 誉 资 质 机 构 工艺设备 文 化 网络营销 留 言 网站结构图 48 页面效果图 五 实五 实训训报告要求报告要求 写出本项目报告的摘要和前言部分 六 实六 实训训注意事项注意事项 一定要根据企业需求进行规划 多跟企业沟通 免得做无用功 49 实训二 切割页面效果图 一 实训目的一 实训目的 1 掌握 Fireworks CS3 网页切片功能 2 掌握 Dreamweaver 中插入 Fireworks HTML 的方法 3 能解决用 Fireworks 切片生成的垃圾代码的方法 二 实训内容二 实训内容 1 创建站点 2 页面布局 3 添加首页的部分元素 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 创建站点 2 页面布局 制作首页布局图片 50 切割首页布局图片 51 导出图片和页面 52 站点效果图 53 布局页面 生成的 css css 文件内容如下 3 font size 12px line height 3px margin 1px padding 1px height 8px width 80px border 1px solid unnamed1 font size 12px 54 line height 26px text decoration none unnamed2 font size 12px line height 0px color FF3300 4 font size 12px line height 5px 3 添加首页的部分元素 1 本站导航 55 2 润生新闻 3 产品区域 4 论坛新贴 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 使用 Fireworks 软件切割页面效果图 部分 六 实六 实训训注意事项注意事项 在制作效果图的时候 由于要使用大量的素材 并制作很多的效果 所以 一定要使用图层组对所有图层进行统一规划 同时要为每个图层 图层组定义 一个有意义的名称 以便于修改和制作 并注意图层中隐藏 显示 合并等操 作 以简化图层的复杂性 在制作页面的时候 要注意页面的统一和协调 尽 量避免使用过多的字体和颜色 也不要使用种类过多的特效和样式 七 思考题七 思考题 56 哪些软件还能切割图片 实训三 制作网页 Banner 一 实训目的一 实训目的 1 掌握网页 Banner 设计原则 2 掌握动态 Banner 制作基本知识 3 掌握 Flash CS3 基本操作 二 实训内容二 实训内容 1 利用 Flash 制作网页 Banner 2 在页面中插入 Banner 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 利用 Flash 制作网页 Banner 2 在页面中插入 Banner 打开 Dreamweaver CS3 再打开前面创建的站点 企业网站 然后打 开 index htm 文件 删除导航栏下面的图片 n1 r4 c1 单击 插入 工具栏上的 媒体 Flash 按钮 找到文件 index swf 将该动画插入 57 按 F12 键预览 分别打开页面文件 gongyiwenhua htm jianjie htm jigou htm liuyan htm product htm ro ngyu htm wangluoyingxiao htm wenhua htm 和 zizhi htm 均做以下操作 删除导航栏下面的图像 单击 常用 工具栏上的 媒体 Flash 按钮 找到文件 index swf 将该动画插入 在属性面板上 将该动画文件的高设为 222 按 F12 键预览 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 使用 Flash 制作网页 Banner 部分 六 实六 实训训注意事项注意事项 在 Dreamweaver 中插入 Flash Banner 时 一定要将其背景设置为透明 七 思考题七 思考题 网页 Banner 还有哪些风格 实训四 制作留言板 一 实训目的一 实训目的 1 掌握表单的概念 2 掌握创建表单的方法 3 掌握插入表单对象的方法 二 实训内容二 实训内容 1 调整留言板页面 2 利用表单制作留言板 3 利用表单制作首页部分内容 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 调整留言板页面 1 在 Dreamweaver 中打开站点 企业网站 再打开页面文件 58 liuyan htm 选中主内容区的图像 gongyiwenhua r6 c2 gif 将其删除 设置 第一 三单元格中的图像 gongyiwenhua r6 c1 gif 和 gongyiwenhua r6 c12 gif 的高度均为 550px 2 调整三个单元格的大小 选中第二个单元格 在 属性 面板上设置 垂直对齐方式为顶端对齐 选中第三个单元格 设置水平对齐方式为右对齐 2 利用表单制作留言板 3 利用表单制作首页部分内容 1 打开首页页面文件 index htm 选中 邮箱登陆 区域的图像 n1 r9 c3 jpg 将其删除 选中该图像所在单元格 将其背景图像设为 pic 5 jpg 2 将光标定位在该单元格中 单击 表单 面板上的 表单 按钮 插 入表单 3 在该表单中插入一个 2 行 4 列的表格 宽度为 95 填充 边框为 0 间距为 2 居中对齐 4 在第 1 列的两个单元格中分别输入文本 用户名 和 密码 在第 2 列的两个单元格中分别插入表单元素文本字段 分别选中这两个文本字段 59 在 属性 面板上设置其字符宽度为 10 5 在表格的第 2 行第 4 列单元格中 插入表单元素按钮 在 属性 面 板上设置其值为 登陆 调整表格的行高和列宽 同样的方法制作首页中 论坛登陆 区域的内容 五 实五 实训训报告要求报告要求 写出本项目报告中正文的 制作留言板 部分 六 实六 实训训注意事项注意事项 添加表单元素之前先添加表单 七 思考题七 思考题 怎样利用表单实现交互 请搜集 实训五 使用内嵌框架 一 实训目的一 实训目的 1 掌握 Iframe 基本语法 2 掌握 Iframe 属性设置 3 掌握插入 Iframe 的方法 4 掌握 Iframe 链接 5 掌握 Iframe 透明设置 二 实训内容二 实训内容 1 制作新闻文本页面 2 制作新闻页面 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 制作新闻文本页面 1 在 企业网站 站点中新建页面 保存到站点文件夹 xinwen 下 文 件名为 1 htm 打开 页面属性 对话框 设置大小为 12 左边距 右边距 下边距为 0 上边距为 10 2 插入一个 1 行 1 列的表格 宽度为 95 填充 间距 边框均为 0 居中对齐 在单元格中编辑文本 60 同样的方法制作页面 2htm 3 htm 4 htm 5 htm 6 htm 7 htm 2 制作新闻页面 1 打开 企业网站 站点 再打开页面 gongyiwenhua htm 将其另存 到站点中文件夹 xinwen 下 文件名为 xinwen htm 此时 弹出如图所示的提示框 单击 是 按钮 图 提示框 2 将该页面的标题设为 润生新闻 找到图像 product r7 c1 jpg 将其设为所在单元格的背景图像 再找到图像 product r7 c6 jpg 将其设为 所在单元格的背景图像 3 在第二个单元格中输入文字 您当前所在位置 首页 润生新闻 对文本 首页 设置超链接 链接到首页文件 index htm 4 找到内容区的图像 gongyiwenhua r6 c2 gif 将其设为所在单元格 的背景图像 将该单元格的宽度设为 600 高度设为 600 5 将左侧单元格的背景图像设为 gongyiwenhua r6 c2 gif 删除该单 元格中的图像 gongyiwenhua r6 c1 gif 选中该单元格 在 属性 面板上设 置垂直对齐方式为顶端对齐 6 在该单元格中插入一个 1 行 2 列的表格 在第 1 列中插入图像 gongyiwenhua r6 c1 gif 高度为 600 在第 2 列中插入表格 制作新闻导航 如图所示 61 图 新闻导航 7 选中第二个单元格 打开代码视图 在对应位置输入代码 如图所示 图 内嵌框架代码 8 打开 标签检查器 面板 设置其属性如图所示 图 内嵌框架属性 9 将第三个单元格中的图像 gongyiwenhua r6 c12 gif 的高度设为 600 10 选中新闻导航中的文本 2008 年新玉米上市压力渐显 玉米价格弱 势 在 属性 面板上设置链接为 1 html 目标为 i 如图所示 62 图 链接 同样的方法设置新闻导航中的其他链接 11 预览网页 按 F12 键预览 五 实五 实训训报告要求报告要求 写出本项目中正文的 内嵌框架 部分 六 实六 实训训注意事项注意事项 如果预览时在内嵌框架中看不到链接到的页面 那么在 xinwen htm 文件的 代码窗口中删除前两行代码 即可 七 思考题七 思考题 插入内嵌框架还有其他方法吗 实训六 使用网页特效 一 实训目的一 实训目的 1 掌握 marquee 的基本语法 2 掌握 marquee 的参数设置 3 掌握添加跟随滚动条滚动的对联广告的方法 4 掌握状态栏特效的制作方法 二 实训内容二 实训内容 1 将新闻制作成滚动字幕 2 以跟随滚动条滚动的对联广告形式显示联系方式 3 状态栏显示滚动欢迎词 三 实三 实训训仪器 设备仪器 设备 装有 Dreamweaver CS3 软件的电脑 四 实四 实训训步骤步骤 1 将新闻制作成滚动字幕 63 1 打开主页 index htm 选中新闻文本所在的表格 2 打开代码视图 找到表格的开始标签 在前面添加如 下代码 3 找到该表格的结束标签 在其后添加即可 4 在设计视图中给新闻文本添加相应链接 即链接到 xinwen xinwen htm 目标为 blank 5 按 F12 键预览 2 以跟随滚动条滚动的对联广告形式显示联系方式 1 在 Fireworks 中将联系方式制作成图片 如图所示 图 联系方式 2 打开主页 index htm 再打开代码视图 将如下代码添加到中 function initEcAd document all AdLayer1 style posTop 200 document all AdLayer1 style visibility visible document all AdLayer2 style posTop 200 document all AdLayer2 style visibility visible MoveLeftLayer AdLayer1 64 MoveRightLayer AdLayer2 function MoveLeftLayer layerName var x 5 var y 100 左侧广告距离页首高度 var diff document documentElem