《静态网站制作综合实训》实训任务书.doc

1 静态网站制作综合实训静态网站制作综合实训 实训任务书实训任务书 一 一 实训目的与要求实训目的与要求 网页设计综合实训 主要目的是让学生通过这门实践课程的学习了解和掌握网页设 计的基本方法 通过不断上机实习训练达到解决实际的问题 因此 在本学期特设置此课 程设计 集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面 的知识 按照网站制作的流程 完成一个相对具体 综合的网站 全面巩固学生的知识 培养学生解决实际问题的能力 从而达到学以致用的目的 二 二 实训内容实训内容 1 实例实训 以一个个人网站设计的实例指导学生如何独立完成个人静态站点的设计和制作 让学生在机房实际操作 按照给定的实例完成实例中站点的创建和设计制作 2 自建站点实训 让学生自行选择站点的主题 从规划站点到上传文件一步一步完成整个站点的创 建 调试和上传工作 3 总结 对学生的全部作品进行考核 并选择典型的案例对实训的结果进行考核 三 三 参考课时参考课时 标题标题实训内容实训内容实训课时实训课时 预备实训动员 1 实训一基本知识回顾 2 实训二实训作品的站点规划 6 实训三整体布局设计 6 实训四搜集和创建资源 6 实训五页面素材设计 6 实训六样式设计 6 实训七首页模板设计 6 实训八二级页面模板设计 12 实训九各页面的细化 测试和上传作品 6 实训十总结 3 总计 60 2 四 四 实训材料准备实训材料准备 1 软件准备 Dreamweaver cs4 中文版 PhotoShop7 0 以上版本 Flash 中文版 本实训对 FLASH 技术不做要求 2 硬件准备 网络条件 与因特网连接的局域网 教师用机 WindowsXP 及以上版本 学生用机 WindowsXP 及以上版本 五 综合实训考核办法 五 综合实训考核办法 1 系统文档 20 分 2 编写代码 30 分 3 程序调试 10 分 4 实训出勤 20 分 5 技术含量 10 分 6 美工设计 10 分 3 目目 录录 实训一 基本知识回顾 1 实训二 实例一讲解 2 实训三 实例一操作 2 实训四 实训作品的站点规划 3 实训五 整体布局设计 4 实训六 搜集和创建资源 5 实训七 页面素材设计 6 实训八 样式设计 6 实训九 首页模板设计 7 实训十 二级页面模板设计 7 实训十一 各页面的细化 测试和上传作品 8 实训十二 总结 9 附录一 网站规划书书写格式 9 1 实训一实训一 基本知识回顾基本知识回顾 一 一 实训目的和要求实训目的和要求 温习网页制作的课程重点难点 使学生对 Dreamweaver cs4 各方面的操作知识系统 的由 片 的认识转向 面 的认识 二 二 实训内容实训内容 Dreamweaver cs4 的基本操作 站点 表格 图像 链接 框架等 三 三 实训准备实训准备 Dreamweaver cs4 中文版 四 四 实训步骤实训步骤 各实训指导教师按照所代学生的情况不同选择性地按下列步骤温习 Dreamweaver cs4 的重点难点知识 一 站点创建和规划 1 本地站点的创建管理 2 站点视图的使用方法 二 链接的处理方式 1 相对路径 2 链接到命名锚 3 管理链接 三 图像的处理方法 1 插入图像的相关操作 2 使用导航条 3 客户端图像映象 四 布局视图 表格和层的应用 1 使用布局视图的相关操作 2 自动伸展类型的版面宽度 3 草稿图的使用 4 关于插入表格的相关操作 5 创建分层 使用分层时的操作 6 使用分层面板 7 利用分层排版时的注意事项 五 框架 1 框架和框架集的一些标识性概念 2 创建框架 3 框架文件的存储 4 框架和框架集属性的设置 5 在框架中使用链接 六 CSS 样式 1 创建三种类型的 CSS 样式 2 创建外部链接的 CSS 样式单 五 五 实训方法实训方法 使用投影进行讲解演示 并抽样进行检查 六 六 考核办法考核办法 此部分实训内容采用抽样考察的方法 考核以操作的熟练程度和正确性为评分标 准 以 A 优秀 B 良好 C 及格 D 不及格 为成绩标准 2 七 七 思考和练习思考和练习 1 创建一个表格 预览效果为各边框格式是虚线 颜色是红色 各边框的宽度为 1 像素 px 2 在制作站点时 会遇到 CSS 样式的处理 而 CSS 样式有两种处理方法 一是应 用于单一文档的 CSS 样式 二是外部连接的 CSS 样式单 请问建立站点时如何 选择为最优 3 怎样解决因为浏览分辨率的不同所造成的网页布局错位的现象 4 怎样利用层 Layer 来制作下拉式菜单 实训二实训二 实例一讲解实例一讲解 一 一 实训目的和要求实训目的和要求 通过对一个具体的静态个人网站的解析 使学生了解制作个人网站静态站点的步 骤 让同学们对静态个人网站的粗略和宏观认识得到细化 使其懂得如何独立面对静 态个人网站的设计 由实训指导教师自行选择站点作为实例 实例要求如下 1 站点系个人网站相关站点 2 站点模块功能清晰 虽然是静态站点 但也能反映各模块的基本功能 3 为了便于教学 站点应该具有布局 表格 布局视图 层 框架 图像 链接 CSS 样式等网页设计制作中常用的知识点和操作 二 二 实训内容实训内容 讲解和演示整个站点的制作过程和设计方法 三 三 实训准备实训准备 Dreamweaver cs4 中文版 四 四 实训步骤实训步骤 1 由实训指导教师详细讲解静态个人网站站点的设计方法和组成模块 2 由实训指导教师详细演示首页和一个以上的二级页面的整个制作过程 从站 点创建开始 3 抽样检查学生的听课效果 在时间允许的条件下 让学生上教师机独立完成 页面制作 4 对学生的抽样检查进行分析 重点讲解其失误或错误的地方 五 五 实训方法实训方法 使用投影讲解演示 并抽样进行检查 六 六 考核办法考核办法 此部分实训内容采用抽样考察的方法 考核以操作的熟练程度和正确性为评分标 准 以 A 优秀 B 良好 C 及格 D 不及格 为成绩标准 七 七 思考和练习思考和练习 1 1 静态个人网站站点的创建应该遵循那些基本要素 实训三实训三 实例一操作实例一操作 一 一 实训目的和要求实训目的和要求 将实训二的内容在机房进行操作 让学生切实地对静态个人网站站点的设计进行 操作 二 二 实训内容实训内容 对给定的实例站点进行分析 并进行制作 最后由实训指导教师为每一位学生的 3 制作成品进行考核 三 三 实训准备实训准备 Dreamweaver cs4 中文版 PhotoShop 7 0 以上版本 制作站点时不能在机房完成的 或以学生能力不能制作的素材 四 四 实训步骤实训步骤 1 准备工作 1 站点的创建和规划 2 设计素材和内容素材的准备 3 CSS 样式的准备 2 设计工作 1 草稿图的制作 2 映射草稿图 按照草稿图的设计利用布局视图进行版面布局 3 布局完毕后 进行内容素材和设计素材等相关素材对象的插入工作 3 细化工作 1 对内容 表格 链接 图片等进行 CSS 样式的应用 2 细化整个版面 4 测试整个站点并交由实训指导教师进行考核 五 五 实训方法实训方法 在机房进行实训 由实训指导教师亲临指导 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 考核以操作的熟练程度和正确性为评分标 准 以 A 优秀 B 良好 C 及格 D 不及格 为成绩标准 七 七 思考和练习思考和练习 通过此部分实训 你是否熟练掌握建立静态个人网站站点所需要各知识点的操作 技能 由那些需要进一步的由教师在今后的课堂中进行讲解和演示 实训四实训四 实训作品的站点规划实训作品的站点规划 一 一 实训目的和要求实训目的和要求 使学生在创建站点之前对站点有总体的规划 让学生对自己即将设计和制作的站 点进行规划并完成站点规划书的撰写 实训作品的选题范围 1 班级网站 2 个人网站 3 个人网站消费网站 为一种消费品制作个人网站站点 4 个人网站公司网站 为某个企业制作个人网站站点 因为是建立静态的个人网站站点 所以在讲解和分析站点规划书时应该着重 于站点的设计 而不是其他方面 静态的个人网站站点没有交互式的访问模式和 系统 所以只能是发布信息的工具 这点请实训指导教师在授课和指导时予以关 切 正式站点规划书见附录 二 二 实训内容实训内容 让学生在因特网上申请免费的个人主页空间 向学生讲解站点规划的重要性以及 站点规划书的撰写方法 并由学生自行思考并完成实训指导书的撰写 三 三 实训准备实训准备 4 Dreamweaver cs4 中文版 WORD2003 以上版本 四 四 实训步骤实训步骤 1 进行实训作品的选题并申请个人主页空间 2 站点规划书的书写格式和方法的讲解 3 详细讲解静态个人网站站点创建和制作的步骤 并分析制作站点规划书的重 要性和必要性 使学生规范网站设计的流程 4 学生思考并撰写自行创建站点的站点规划书 五 五 实训方法实训方法 首先由实训指导教师在机房讲解站点规划书的书写方法和基本格式 其次由学生 针对所选的主题进行站点规划 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 考核以站点规划书的完整性 实用性和创 造性为评分标准 以 A 优秀 B 良好 C 及格 D 不及格 为成绩标准 七 七 思考和练习思考和练习 作为个人网站专业 你觉得在撰写个人网站站点规划书应该着重突出哪几个方面 为什么 实训五实训五 整体布局设计整体布局设计 一 一 实训目的和要求实训目的和要求 在站点规划完成的基础上 按照站点规划书进行网站整体的布局 设计 要求 1 设计作品中的各种文件夹和文件名均使用英文名 小写 2 设计作品首页文件名为 index htm default htm 等 3 设计作品中中文字体设定为简体字 4 网页应有较好的浏览兼容性 同时应考虑显示分辨率 以 800 600 为显示标 准 浏览器为 IE 7 0 以上 5 主题鲜明 具有实用性 清晰表达设计意图 6 结构清楚合理 便于浏览查找 7 色彩搭配协调 页面美观 具有艺术品位 8 注意下载速度 语言代码 导航效果 实用性 时效性 二 二 实训内容实训内容 1 站点的创建 2 绘制草稿图 3 利用草稿图对网站各页面进行布局设计 三 三 实训准备实训准备 Dreamweaver cs4 中文版 英文版 PhotoShop7 0 以上版本 四 四 实训步骤实训步骤 1 指导学生完成站点的创建 要求如下 1 站点文件夹以自己的班级和自己的学号的组合命名 2 在站点文件夹中建立相关页面 以确保连接和图像处理操作中路径的正确 性 3 所有的资源都保存在 assets 资源文件夹中 assets 文件夹可以细分为 pic animation sound 等子文件夹 4 如果需要 CSS 样式单文件 则 CSS 样式单文件单独放置于 css 文件夹中 5 2 指导学生完成草稿图的绘制 包括首页和二级页面 要求如下 1 为了便于布局视图的绘制 草稿图的宽度统一为 777 像素 高度根据站点 内容进行设置 2 草稿图统一用 photoshop 进行绘制 3 草稿图上必须表明每板块的内容名称 3 指导学生利用草稿图进行网页各个页面的布局设计 使用布局视图 方法简 述如下 1 进入布局视图 2 载入草稿图 3 绘制一个布局表格覆盖整个草稿图 即绘制一个宽度为 777 的表格 保证 在分辨率变化的情况下 网页不会出现异常现象 4 分别对个板块绘制布局表格 5 进行保存 五 五 实训方法实训方法 机房操作 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 以百分制为满分 具体评分标准如下 1 站点创建的规范性和熟练程度 25 分 2 草稿图的绘制 20 分 3 草稿图的载入 5 分 布局视图的相关操作 50 分 七 七 思考和练习思考和练习 布局视图和表格视图在版面布局中各有优势和劣势 对怎样的版面布局应该用布 局视图 又对怎样的版面布局应该用表格视图 实训六实训六 搜集和创建资源搜集和创建资源 一 一 实训目的和要求实训目的和要求 1 按照实训四所完成的站点规划书的要求完成站点设计和制作中资源的搜集和 创建工作 要求如下 a 为了维护机房秩序 与因特网互联期间 由老师监督 不可利用实训时 间进行任何与实训无关的活动 b 实训指导教师推荐资源站点供学生参考 c 实训指导教师严格把关 保证资源创建和搜集的完整性 二 二 实训内容实训内容 在因特网上搜索资源或在本机上创建所需资源 三 三 实训准备实训准备 Dreamweaver cs4 中文版 WORD2003 以上版本 Photoshop7 0 以上版本 与因 特网连接的局域网 四 四 实训步骤实训步骤 根据网站规划书的内容和网站建设的需要 在因特网上搜索素材 素材包括网 页的信息内容和网页的主题设计内容 五 五 实训方法实训方法 机房上网并利用本机软件完成 6 六 六 考核办法考核办法 此部分是学生在因特网和本机上进行资源的搜集和创建 故无需进行考核 但需 要指导学生按照站点规划书的要求完成站点资源的搜集和创建工作 七 七 思考与练习思考与练习 此部分是学生在因特网和本机上进行资源的搜集和创建 故无练习 实训七实训七 页面素材设计页面素材设计 一 一 实训目的和要求实训目的和要求 按照实训四所完成的站点规划书的要求完成站点设计和制作中的页面素材的设计 工作 要求如下 1 严格按照站点规划书的内容进行页面素材设计 2 实训指导教师给予页面主题的相关指导 二 二 实训内容实训内容 在本机上进行页面素材设计 三 三 实训准备实训准备 Dreamweaver cs4 中文版 WORD2003 以上版本 Photoshop7 0 以上版本 与因 特网连接的局域网 四 四 实训步骤实训步骤 1 公共页面素材的设计 2 首页独有页面素材的设计 3 各二级页面独有页面素材的设计 4 将设计好的素材文件存放在资源文件夹中 五 五 实训方法实训方法 机房利用本机软件完成 六 六 考核办法考核办法 此部分是学生在本机上进行页面素材的搜集和创建 故无需进行考核 但需要指 导学生按照站点规划书的要求完成页面素材的创建工作 七 七 思考与练习思考与练习 此部分是学生在本机上进行页面素材的创建 故无练习 实训八实训八 样式设计样式设计 一 一 实训目的和要求实训目的和要求 按照实训四所完成的站点规划书的要求完成站点设计和制作中的 HTML 样式和 CSS 样式的创建 二 实训内容实训内容 1 HTML 样式的创建 1 创建字符型的 HTML 样式 2 创建段落型的 HTML 样式 2 CSS 样式的创建 1 创建自定义的 CSS 样式 2 创建 HTML 标记的的 CSS 样式 3 创建 CSS 选择器的 CSS 样式 用于创建伪锚名 三 三 实训准备实训准备 7 Dreamweaver cs4 中文版 四 四 实训步骤实训步骤 1 HTML 样式的创建 2 CSS 样式的创建 1 内部 CSS 样式创建 2 外部链接 CSS 样式单文件的创建 五 五 实训方法实训方法 机房利用本机软件完成 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 以百分制为满分 具体评分标准如下 1 HTML CSS 样式 内部 外部 创建的熟练程度 30 分 2 HTML CSS 样式 内部 外部 创建的操作正确性 40 分 HTML CSS 样式 内部 外部 创建的结果正确性 30 分 七 七 思考与练习思考与练习 1 导入外部链接的 CSS 样式单文件和链接外部的 CSS 样式单文件有什么区别 2 2 CSS 样式中自定义的 CSS 样式 HTML 标记的 CSS 样式和 CSS 选择器样式 各有什么独特的作用 实训九实训九 首页模板设计首页模板设计 一 一 实训目的和要求实训目的和要求 按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局 设计完成首页模板的整体设计和填充 二 实训内容实训内容 首页模板的制作和内容的填充 三 三 实训准备实训准备 Dreamweaver cs4 中文版 四 四 实训步骤实训步骤 1 根据 实训五 整体布局设计 中的首页布局设计制作首页模板 2 在模板中插入实训六 七 八所设计好的资源和素材进行模板内容的填充 形成站点的首页 五 五 实训方法实训方法 机房利用本机软件完成 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 以百分制为满分 具体评分标准如下 1 关于模板操作的熟练程度 50 分 2 关于模板操作的正确性 50 分 七 七 思考与练习思考与练习 无 实训十实训十 二级页面模板设计二级页面模板设计 一 一 实训目的和要求实训目的和要求 按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局 设计完成二级模板的整体设计和填充 二 实训内容实训内容 二级页面模板的设计和填充 8 三 三 实训准备实训准备 Dreamweaver cs4 中文版 四 四 实训步骤实训步骤 1 根据 实训五 整体布局设计 中的各二级页面布局设计制作二级页面模板 2 在模板中插入实训六 七 八所设计好的资源和素材进行模板内容的填充 形成站点的各个二级页面 五 五 实训方法实训方法 机房利用本机软件完成 六 六 考核办法考核办法 此部分实训内容采用全体考察的方法 以百分制为满分 具体评分标准如下 1 关于模板操作的熟练程度 50 分 2 关于模板操作的正确性 50 分 七 七 思考与练习思考与练习 无 实训十一实训十一 各页面的细化 测试和上传作品各页面的细化 测试和上传作品 一 一 实训目的和要求实训目的和要求 按照实训四所完成的站点规划书的要求细化页面 使其达到最优的效果并进行测 试和上传作品 二 实训内容实训内容 1 CSS 样式的应用和调整 2 页面布局的调整 3 页面文本 图片以及媒体内容的进一步细化 4 链接的测试 5 作品的上传 三 三 实训准备实训准备 Dreamweaver cs4 中文版 PhotoShop7 0 以上中文版本 连接因特网的局域网 四 四 实训步骤实训步骤 1 按照站点规划书的内容要求对各个页面进行 CSS 样式的应用 2 细化各个页面 对各个页面的图像 表格 链接进行适当的调整 使站点更 加美观 3 测试所有链接 4 在本地站点中测试整个站点的运作情况 并进行相应的调整 5 利用 CuteFtp 工具进行作品上传 五 五 实训方法实训方法 机房利用本机软件完成 六 六