Html5+CSS3+JavaScript项目化教程-PPT课件（全）.pptx

HTML5+CSS3+JavaScript网页设计项目教程作者:李红梅 杨林根 主编 周 霞 石灵心 副主编I S B N ：978-7-121-24335-6 出版者: 电子工业出版社版权所有 侵权必究【知识目标】了解网页设计常用技术了解网页设计师应具备的技能掌握网页设计基本流程【技能目标】网站项目需求分析?一、网页设计概述 网页设计是一个网页创作的过程，是根据客户的需求从无到有的过程。网页设计是一种建立在Internet之上的新型设计。它具有很强的视觉效果、互动性、互操作性等其他媒体所不具有的特点。一个成功的网页设计，首先在观念上要确立动态的思维方式，其次要有效地将图形引入网页设计中，提高人们浏览网页的兴趣。在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。1、网页设计类型从形式上，可以将网页设计站点分为以下三类： 第一类是资讯类站点，像新浪、网易、搜狐等门户网站。第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。第三类则是形象类网站，比如一些中小型的公司或单位。2、网页设计常用技术HTML、css、JavaScript三项技术是静态网页设计、制作的核心。PHP、JSP、ASP.NET是目前三大主流动态网页制作技术。3、网页设计基本流程一个页面的完整设计过程分为以下几个个步骤：1）内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。2）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。3）方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。4）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高可读性。5）布局设计：使用HTML和CSS对页面进行布局。6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。7）交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。4、网页设计师应具备的技能网页设计师必需掌握以下一些技能： 1）网页HTML语言2）CSS样式3）平面设计 4）JQUERY 5）SEO搜索引擎优化 6）网站空间、服务器管理。7）项目管理。 二、典型项目“绿骑士”简介 “绿骑士” 网站是一个骑行旅行类的兴趣社交网站，主要面向所有的骑行爱好者，向他们提供骑行新闻、骑行知识、骑行装备、骑行路线、自行车赛事、自行车旅行、山地自行车、骑行攻略、骑行安全等为主的互动交流平台， 同时又是一个提倡“绿色出行”的宣传平台。我们倡议大家提高低碳意识、树立低碳理念、倡导低碳生活，宣传健康、环保的出行方式，让我们的生活多一些绿色、多一点文明、多一份健康。1、网站栏目结构主要栏目：首页、新闻资讯、绿色出行、两型生活、骑行世界、车友天地、线路推荐、绿色服务。2、网站目录结构根据网站栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。3、准备素材根据网站的栏目、内容设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材。4、网站主页设计开发与任务分解根据网页设计基本流程，以“绿骑士”网站主页设计与开发为主线，将网页设计与开发分解为以下几个任务：任务1：网站主页规划与设计任务2：网站主页html结构设计任务3：构建网站层叠样式表任务4：网站主页div布局任务5: 设置网站主页文本与图片样式任务6：主页导航栏的设计与制作任务7：制作网站登录与注册表单任务8：设计及制作网站Logo及Banner任务9：实现主页新闻图片轮显及翻滚特效任务10：网页设计与开发综合范例任务1 网站主页规划与设计【知识目标】了解常见的网页结构框架掌握页面的信息布局设计【技能目标】网页规划与设计1.1任务描述网站首页是企业网上的虚拟门面，网站的页面就好比是“无纸的印刷品”。精良和专业网站的设计，如同制作精美的印刷品，会大大刺激消费者（访问者）的购买欲望，反之，公司所提供的产品或服务将不会给消费者（访问者）留下较好的印象。本任务将完成“绿骑士” 网站主页的方案设计。1.2核心知识1.2.1 网页的结构框架 众所周知，框架设计是网站设计的基础部分。形象一点：把页面当作一张白纸，在上面划分出大小区域，并把信息安排到格子中去，划分区域的方式就是框架设计的重点。框架设计不是鼓励的思考，而是与导航设计、标题按钮、网站色彩等方面结合起来进行的。框架的形式是多边的，它应根据网站的信息内容划分，有重点的突出和排列信息。 参考现有网络上能呈现的设计条件，页面框架结构可归为3类：分