前端网页设计杜黎强第18次课幻灯片.ppt

PPT研究院 POWERPOINT ACADEMY * * 尚辅网 / 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 分发本次课所用文件 教学导入 教学实施 项目一展示小结 真实工作岗位-项目案例参考 上网查找项目二“企业网站”基本资料：（深圳市惠尔瑞生物科技有限公司） 公司简介、基本产品、公司最新资讯 项目二实施进程说明 介绍公司简介 说明网站设计要求 完成企业网站框架结构图制作 第18次课教学内容及实施环节 项目实施：项目2 企业网站开发 任务1 规划网站-子任务1 制作企业网站框架结构图 分发文件 完成本次课 项目2-任务1-子任务1任务实施记录总结页.doc 项目2-任务1-子任务2任务实施准备页.doc 项目一展示总结 优点 资料完整、准备充分 项目设计体会具体深刻 (每个同学或多或少地对自己在项目设计过程中出现的各种问题进行了总结：从“不太了解”-可以“设计操作”- 可以“熟练完成”，从而使大家对“静态页面布局设计的技巧和技能”方面操作的熟练程度都有了很大提高) 闪光点 页面布局符合Web标准，即CSS+DIV的结构 源文件添加注释语句 建议 网站页面布局设计必须把结构、框架、布局搭好，才能开始细节设计 CSS样式文件中id选择符用于布局，class选择符用于呈现效果，这样便于快速地找到错误 注意标记的嵌套，坚持用最少的代码，实现更多的效果功能 本专业实际工作岗位  ——工作流程记录 网页美工-前端页面设计-后台程序开发-网络营销/推广 岗位名称：前端设计师 项目案例 上网查找项目二“企业网站”基本资料：（深圳市惠尔瑞生物科技有限公司） 公司简介、产品信息、公司最新资讯 以合适的方式保存（文字/图像），总结在任务实施记录总结页 / 项目二实施进程框图 项目实施：项目2 “企业”网站开发 任务1 网站规划 任务2 制作首页 任务3 制作次页 任务4 搭建网站及项目展示评价 框 架 结 构 图 网 站 文 件 目 录 首页 布局 及内 容设 计 次页 布局 及内 容设 计 搭 建 网 站 项 目 展 示 评 价 (第9周-第14周) 1周 1周 1周 3周 任务说明——公司简介 1. 蕙尔瑞的诞生 ??? 深圳市蕙尔瑞生物科技有限公司创建于2005年，是一家专注于医学美容和科技美容的化妆品企业。公司依托法国丹妮丝国际有限公司提供全面的技术支持，以及独特的经营模式，在中国专业护肤领域上取得了不俗的成就。 ? 2. 九年的时间，造就专业的品牌！ ???? 专业护肤，解决问题是关键！蕙尔瑞公司着力打造的“Sumskm（赛因诗婷）”品牌，在解决斑、痘、皱、敏、红血丝等各种问题肌肤上具有强大显著的功效。而后，凭籍对肌肤护理的透彻理解及自身强大的技术优势，又隆重推出了以抗衰老为核心的高端护肤品牌“Ranees（莱娜丝）”。尊贵的护理体验和短时间回复青春的惊喜功效，极大地满足女性对完美肌肤的奢华渴望。专业的产品，专业的服务，造就专业的品牌！? 任务说明——电子商务“企业”网站设计要求 任务说明——网站规划/网站类型 1.网站规划：网站规划包含的内容很多，如下所列 网站主题 网站结构 网站风格 网站栏目 颜色搭配 版面布局 文字图片运用 符合电子商务型网站设计要求 网站页面设计：风格一致、色彩搭配、版面布局的技巧 风格的一致性：包括网站布局、文字排版、装饰性元素出 现的位置、导航的统一、图片的位置等； 色彩一致性：运用相同色系色彩 、运用对比色或互补色 、使用过渡色； 导航统一性：将标志的形态寓于导航之中，或将导航设计在整个网站布局之中等 图像统一性：根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成 页面的连续性； 背景统一性：将公司的标志、象征性的简单图片作为背景，并将其淡化， 使浏览者在阅读网站内容的同时不经意记下公司的标志。 版 面 布局：主要考虑导航、必要信息与正文之间的布局关系。 公司名称、标志、广告条以及导航条，或将导航条放在左侧 而右侧是正文等等，这样的布局结构清晰、易于使用。 任务说明——网站规划/网站类型 2.常见网站类型 举例说明下列常见网站类型的设计特点 (1)内容型 以内容为主，用内容吸引人。公司、单位网站，站点设计以简洁大方为主。如项目一：班级网站。 (2)电子商务型 以电子商务为主