任务1-网页设计与策划-动画版.pptx

1、网页设计与制作课程组任务1:网页策划起步网页设计与制作(HTML+CSS+Javascript)目标TARGET知识目标 了解网页设计的概念与术语；掌握网页、网站相关概念；掌握网页设计的流程；了解HTML5的发展历史与优势；掌握HTML5的编码方式。1 任务描述 2 网页设计的概念与术语 3 网页设计的流程 4 HTML5的概述 5 编写第一个HTML5页面 6 综合实例 7 任务实施 8 任务拓展1任务描述Part网站主页的策划与设计 软件技术专业实习生小王刚进公司，就跟随UI项目组李经理来完成新的任务，策划一个信息类职业技术学院的校园网网站门户页面。通过任务分析，客户的具体需求如下：能体现

2、信息类学校的特色，网站界面简洁、大气。网站主页的核心内容包括学校概况、组织机构、招生就业、科学研究、招聘信息等。主页上要能展现学校的整体风貌、能发布相关招标信息等。所以，本任务就是依据学校办学特色，完成“校门户网站主页面”的策划与设计。任务描述：网站主页的策划与设计2网页设计的概念与术语Part网页与网站的相关概念网页设计相关的程序设计语言 网页与网站的相关概念 网页（Web Page）是网站中的一个页面，是Internet“展示信息的一种形式”。网 页 网站是万维网上相关网页的集合。网 站依据表现形式，可以分为静态网页和动态网页 网页与网站的相关概念 主页：用户进入网站时看到的第一个页面就是

3、主页（homepage）。依据网页的位置，可以分为主页和内页 静态网页：是指使用HTML语言编写的网页，其制作简单易学，但缺乏灵活性，在浏览网页时浏览者和服务器不发生交互。内页：通过主页中的超级链接，打开的网页就是内页。动态网页：是指使用ASP、PHP、JSP、ASP.NET等程序生成的网页，可以与浏览者进行交互，也称为交互式网页。LOGO图标导航条内容模块Banner广告条Banner广告条分类导航条内容模块内容模块版尾模块 网页设计相关的程序设计语言HTML、CSS、Script脚本是网页设计最核心也是最基础的技术。结构HTML的主要功能是定义网页的基本结构外观CSS主要功能是定义网页的外

4、观行为JavaScript脚本的主要功能是定义网页的行为。网页设计相关的程序设计语言HTMLHTML(Hyper Text Markup Language，超文本标记语言）HTML是由W3C（World Wide Web Consortium，万维网联盟）所提出，主要的用途是制作网页。HTML文件是由“标签”（tag）和“属性”（attribute）所组成，统称为“元素”（element），浏览器只要看到HTML源代码，就能解析成网页。目前，最新的HTML文件是HTML5。网页设计相关的程序设计语言CSSCSS（Cascading Style Sheets，层叠样式表）CSS也是由W3C所提出

5、，主要用途是控制网页的外观，也就是定义网页的编排、显示、格式化及特殊效果。W3C鼓励网页设计人员使用HTML来定义网页的结构，而使用CSS来控制网页的外观，将两者的功能明确，语义更加清晰。目前，最新的CSS版本是CSS3。浏览器端script浏览器端script的主要功能是定义网页的行为。常用的有VBscript和JavaScript，其中JavaScript为主流脚本。网页设计相关的程序设计语言 经常使用JavaScript脚本来嵌入动态文本、对浏览器事件做出响应、读写HTML元素、在数据被提交到服务器之前验证数据，以及检测访客的浏览器信息等。3网页设计的流程Part前期策划组织网页的制作网

6、页的测试4HTML5的概述PartHTML5的发展历史使用HTML5的五大原因浏览器以及浏览器内核01前期策划组织02网页制作03网页测试前期策划组织1 首先要根据项目需求准确的定位，明确目标。同时要设定网站需要包含的模块，确定网页的主题和风格，规划好网站栏目并进而确定网站的色彩、网页版面布局。1.明确目标，规划网站栏目 网页的配色要跟据项目的主题去确定色彩，要使用好颜色就要掌握颜色的感情和含义的。红色橙色黄色绿色蓝色紫色褐色黑色白色灰色2.网页配色前期策划组织1 常用的几个网页的配色的方法。（1）需要考虑整体色系例如：用暖色系的配色方案，可以让网页呈现出温暖的感觉用冷色系的方案，就会让网页呈

7、现出清凉、平静的感觉。2.网页配色前期策划组织1（2）底色与图形要协调使用图形作为页面的主要元素，加强底色与图形之间必须有明显的对比，这样可以突出页面内容，将图形的美感快速传递给访问者。2.网页配色前期策划组织1（3）善用色彩的调和使用近似色，让页面出现阶梯渐变的效果，这就是色彩的调和。这可以使网页避免色彩杂乱，达到页面和谐统一的效果。2.网页配色前期策划组织1（4）善用色彩的对比色彩对比是突出重点，产生强烈的视觉效果的一种常用方法。在进行色彩配色时，通过合理进行对比色的搭配使用，就可以轻易突出重点。2.网页配色前期策划组织1根据视觉流程,常见版式：水平分割、垂直分割、水平-垂直交叉分割等。3

8、.网页的版式前期策划组织1网页的制作21.草图绘制参考页面网页的制作2例如：依据参考页面来绘制的网页的框架结构图网页的制作22.草图转化为网页将刚刚规划的网页，使用常用的网页编辑软件制作成网页。常用的网页编辑软件主要分为两个类型：纯文本编辑工具，例如记事本、Notepade+、HBuilder、eclipse等。所见即所得的网页编辑软件，例如Dreamweaver，同时要结合Photoshop图像处理软件来制作网页的背景、标题图片、按钮、动画等。网页的测试3 据浏览器的种类、客户端的要求以及网站的大小进行站点测试，通常是将站点移到一个模拟调试服务器上进行测试或编辑。检查链接功能是否可用。为了使

9、页面对不支持的标签、样式、插件等在浏览器中能兼容且显示正常，需要进行浏览器兼容性的检查。HTML5的发展历史HTML1时间(年)1993199519972014HTML2HTML3HTML4HTML5?版本12345HTML5的发展历史1HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布。2HTML 2.01995年11月作为RFC（Request For Comments，请求评议）1866发布。3HTML 3.21997年1月14日，W3C推荐标准。4HTML 4.01997年12月18日，W3C推荐标准。5HTML 52014年10月28日，W3C推荐标准。I

10、EFireFoxChromeOperaSafari 最终2014年10月29日，万维网联盟宣布，HTML5标准规范制定完成，并公开发布，从而，HTML5取代HTML4.01、XHTML1.0标准，实现了桌面系统和移动平台完美衔接。使用HTML5的五大原因兼容性1 在HTML5之前，几大主流浏览器厂商为了争夺市场占有率，在各自的浏览器中增加各种各样的功能，没有统一的标准，从而使得使用不同的浏览器时，常常会看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需要简单地添加JavaScript代码就可以使用新的元素标签。使用HTML

11、5的五大原因新增了多个新特性2 新增加了内容元素，比如header、nav、section、article、footer。新增加了表单控件，比如calendar、date、time、email、url、search。新增加了用于绘画的canvas元素。新增加了用于媒体播放的video和audio元素。支持地理位置、拖曳、摄像头等API。更好的支持了本地离线储存。使用HTML5的五大原因安全机制的设计3 为保证安全性，在HTML5的规范中引入了一种新的基于来源的安全模型，该模型简单易用，同时对不同的API（Application Programming Interface，应用程序编程接口）都可

12、通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。使用HTML5的五大原因内容和表现分离4 在清晰分离内容与表现方面，HTML5迈出了很大一步。为了避免可访问性差、代码高杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了内容和表现。实际上，HTML5规范已经不支持老版本的HTML的大部分表现功能的属性。使用HTML5的五大原因简化的优势5 HTML5要的就是简单，避免不必要的复杂性。为此，简化了DOCTYPE、简化了字符声明，提供了简单而强大的HTML5 API，使用浏览器原生能力替代复杂的JavaScript代码。01浏览器浏览器就是一种把再互联网上的文本

13、文档和其他文件翻译成网页的软件，通过浏览器可以快捷地阅读Internet上的内容。IEFireFoxChromeOperaSafari02浏览器内核浏览器最核心的部分是“浏览器内核”。浏览器内核负责对网页语法的解释并渲染网页。（1）Trident内核 Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗、Avant、腾讯TT、Sleipni、GreenBrowser等等。02浏览器内核（2）Webkit内核 WebKit是苹果公司自己的内核，W

14、ebKit内核代表作品Safari、Chromewebkit是一个开源项目，包含了来自KDE（K Desktop Environment，K桌面环境）项目和苹果公司的一些组件，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。02浏览器内核（3）Gecko内核 Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。使用它的最著名浏览器有Firefox、Netscap

15、e6至9。02浏览器内核（4）Presto内核 Presto内核代表作品Opera Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。主要有Opera浏览器使用这个内核。5编写第一个HTML5页面PartHTML5文件的编写工具HTML5文档的基本格式使用HTML5编写简单的Web页面HTML5文件的编写工具 HTML5文件实质就是一个纯文本文件，只是扩展名为.htm或者.html，能够用来输入文本的编

16、辑工具都可以用来编写HTML5，常用的工具有NotePad+、HTML-Kit、UltralEdit、HBuilder等等，也可以使用所见即所得的Dreamweaver工具。演示演示HTML5文档的基本格式新建HTML5默认文档时，会自带一些源代码定义文档类型html标签head标签body标签HTML5文档的基本格式1.标签标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，HTML5文档中的DOCTYPE声明非常简单，体现了HTML5的简介性。DOCTYPE 是DOCument TYPE,语义是定义文档类型。只有开头处使用声明，浏览器才能将该页面作为有效的HTML文档，

17、并按指定的文档类型进行解析。只有使用HTML5的DOCTYPE声明，才会触发浏览器以标准兼容模式来显示页面信息。HTML5文档的基本格式2.标签标签位于标签之后，也被称为根标签，用于告知浏览器其自身是一个HTML文档，文档标志这HTML文档的开始，标签标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。HTML5文档的基本格式3.标签标签用于定义HTML文档的头部信息，也被称为头部标签，紧跟在标签之后，主要用来封装其他位于文档头部的标签。标签中charset=UTF-8指定了代码的字符集为“UTF-8”。标签可以显示网页的标题信息。一个HTML文档只能含有一对标签，绝大多数文档头部包

18、含的数据都不会真正作为内容显示在页面中。HTML5文档的基本格式4.标签标签用于定义HTML文档所要显示的内容，也成为主体标签。浏览器中显示的所有文本、图像、表单与多媒体元素等信息都必须位于标签内，标签中的信息才是最终展示给用户看的。一个HTML文档只能含有一对标签，且标签必须在标签内，位于头部标签之后，与标签是并列关系。注意：使用HTML5编写简单的Web页面【实例1-1】编写第一HTMl5文件第一个HTML5页面开启HTML5学习之旅!演示注意1HTML5不区分字母大小写，同时允许设置属性时不加引号。即以下3行代码是等效的。注意2在主体中，可以省略主体标签。直接编写内容代码：第一个HTML

19、5页面开启HTML5学习之旅!结论 考虑到代码的可维护性，在编码时，应该考虑整体的语义，所以，最好能按照编码习惯与规范，尽量统一代码的大小写，尽量编写、标签，从而最大限度的实现页面代码的简洁与完整。6综合实例Part体验HTML5的页面特征体验HTML5的页面特征【演示】HTMl+CSS实现演示体验HTML5的页面特征页面首部导航信息左边栏主体内容版尾模块传统HTMl+CSS实现页面首部导航信息左边栏主体内容版尾模块使用HTMl5+CSS实现借助HTMl5使语义结构更加清晰演示7任务实施Part网站主页的策划与设计实现步骤 1 资料收集 2 页面规划 3 绘制页面草图任务实施网站主页的策划与设

20、计1 资料收集要成为一名优秀的网页前端工程师，需要多积累、多思考、多实践。网站素材，招聘,设计师招聘,设计人才,设计公司招聘,设计师找工作网站名称：http:/ Web 技术教程。网站名称：http:/ 页面规划本任务的目标就是制作富有特色、简洁大气信息类网站。网站栏目包括：学校概况、组织机构、招生就业、科学研究、招聘信息等。要能在主页上展现学校的整体风貌、能公示或发布招标信息等。从色彩的选择上，结合本案特色主要使用能体现科技感的蓝色为主色调，采用科技蓝的近似色和灰色为辅色。从布局角度本案特色主体采用水平分割的方式，在内容布局上可以采用垂直布局。任务实施网站主页的策划与设计3 绘制页面草图8任

21、务拓展Part认识DreamweaverCCHBuilder的快速开发技巧认识DreamweaverCCDreamweaver CC的工作界面演示快捷键功能快捷键功能Ctrl+R运行Ctrl+Shift+A选择相同词，方便批量修改Alt+/激活代码助手Ctrl+右箭头后一词Ctrl+D删除当前行Alt+左箭头后退到历史文件Ctrl+Backspace删除前一词Alt+转到匹配的括号Ctrl+Shift+T删除当前标签Ctrl+Alt+-全部折叠Ctrl+Shift+F整理代码格式Ctrl+Alt+全部打开Ctrl+下箭头向下移行Ctrl+Shift+L激活快捷键视图Ctrl+/开启关闭注释正行

22、Ctrl+F搜索条Ctrl+Shift+Y全部小写Ctrl+H搜索框HBuilder常用的快捷键HBuilder的快速开发技巧HBuilder的工作界面演示8项目实训Part智慧校园登录与教师应用门户策划智慧校园登录与教师应用门户策划【实训目的】1.掌握网站界面收集与归类的方法。2.掌握规划与网站草图的绘制方法。【实训内容】在策划“某某职业技术学院”校园网网站门户的基础上，继续策划“智慧校园登录界面”与“智慧校园教师应用门户”，绘制页面草图。实训任务1：智慧校园登录界面设计1.校园校园登录页面要提醒“当前在线用户数，累计访问人次”的统计。2.要包括最新的“通知公告”，即使教师没有登录系统也可以浏览学校的公告。3.登录信息：用户名、密码，如果密码错误，出现验证码。智慧校园登录与教师应用门户策划实训任务2：智慧校园教师应用门户1.导航要清晰，用户能方便的找到所需的栏目与内容，。2.每个教师登录系统后，要能够浏览到与自己相关的信息，例如：一卡通信息、图书馆借书信息、待办事务等等。3.包括校内新闻与公告通知模块，实施推送学校相关的信息。4.包括应用系统模块，包括：办公OA、教务系统、学工系统、科研系统、人事系统、后勤系统等等。5.包括办事大厅模块，充分体现为教师服务的理念，例如：个人日程、一卡通余额、图书借书信息、会场申请、起草文件等等。谢谢多一点努力,多一点实践,多一点点就能创造奇迹!