前端网页设计教学课件作者杜黎强编著第7次课课件幻灯片.pptVIP

前三周教学内容回顾 教学实施 教学导入 各组任务实施准备页检查 任务实施1 知识点讲解 任务实施2 完成本次课堂记录文件：项目1-任务1实施记录页.doc 第7次课教学内容及实施环节 项目实施：项目1 班级网站开发 任务1 网站规划-子任务1 制作班级网站框架结构图 分发本次课所用文件 项目1-任务1(1)实施记录页 项目1-任务1(1)实施总结页 项目1-任务1(2)实施准备页 前三周教学内容回顾 任务1 任务3 任务4 项目准备 知识点：(HTML/XHTML标记分类、文档结构及语法规则) 任务实施：使用HTML标记创建网页对象 (本任务为项目一“留言板”页面和项目二“留言反馈”及“会员中心”页面做准备) 知识点：(W3C组织制定、网页设计三方面及所对应的三种标准语言) 任务实施：应用web2.0标准区分HTML与XHTML文档 (本任务为项目一和项目二各个页面上的导航菜单设计做准备) 知识点：CSS (语法结构、选择符类型、嵌入网页的四种方法及常用属性) 任务实施：使用CSS样式表修饰HTML网页 (本任务为项目一和项目二各个页面设计能使用CSS样式文件快速更新及维护做准备) 知识点： (CSS+DIV布局网页表现/结构分离及常见的布局方式) 任务实施：使用CSS+DIV标准布局网页 (本任务为项目一和项目二实现CSS+DIV网页布局设计标准做准备) 任务2 项目一班级网站开发实施进程框图 项目实施：项目一 “班级”网站开发 任务1 网站规划 任务2 制作首页 任务3 制作次页 任务4 搭建网站及项目展示 框 架 结 构 图 网 站 文 件 目 录 首页 布局 及内 容设 计 次页 布局 及内 容设 计 搭 建 网 站 项 目 展 示 (第4周-第8周) 1周 1周 1周 2周 任务实施： 步骤1——查找常见的网页版面布局类型 请大家到网上搜索常见的网页版面布局有哪些？ 请将搜索完成的答案总结在“项目1-任务1实施记录页.doc”上 任务实施： 步骤2——总结网站类型设计特点 请大家到网上搜索符合所列类型的网站实例， 并罗列出每种类型网站的设计特点： 展示型 内容型 电子商务型 信息发布型(门户型) 请将搜索完成的答案总结在“项目1-任务1实施记录页.doc”上 任务1： “班级”网站规划 知识点： 1、网站规划内容，如下所列 网站主题 网站主题：定位小内容要精；网站名称：要易记而有特色 网站结构 两个方面：超链接设计和导航设计(使浏览者在浏览中不致迷路) 网站风格 logo设计、色彩搭配、标准字体(标志、标题、主菜单等) 版面布局 “T”型、 “口”型、 “三”型、 “对称对比”型、“宣传海报”型 页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局。 页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。 页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点 页面布局象一张宣传海报，以一张精美图片作为页面的设计中心 T”型、 “口”型、 “三”型、 “对称对比”型、“宣传海报”型 实例页面 知识点：2、最佳配色方案欣赏(1) 知识点：2、最佳配色方案欣赏(2) 知识点：2、最佳配色方案欣赏(3) 知识点：2、最佳配色方案欣赏(4) 知识点：2、最佳配色方案欣赏(5) 知识点：3、了解网站类型(主题内容) (1)展示型 主要以展示形象为主，艺术设计成分比较高，内容不多，多见于从事美术设计方面的工作室或家居设计公司。 (2)内容型 主要以内容为主，用内容吸引人。多见于普通的公司、单位网站，用于公司动态或服务信息等，站点设计以简洁大方为主。(班级网站) (3)电子商务型 主要以从事电子商务为主，要求安全性、稳定性高。设计简洁大方，又具有热闹有人气的感觉。颜色多用蓝，以表示信任感。 (4)信息发布型(门户型) 类似内容型，比内容型综合，除表现更为丰富的内容外，更注重网站与用户之间的交流。 知识点：4、了解网站目录，实例网站演示 实例网站：班级网站页面演示 网站目录 网站首页 (一级页面) 新闻中心