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