HTML5+CSS3-Web前端设计基础教程(第1章)

Web前端设计基础教程主编吴丰工业和信息化“十三五”高职高专人才培养规划教材HTML5+CSS301Web前端职业前景与重要理念【本章导读】本章将从职业发展前景出发，立足职位需求，向读者介绍有关Web前端所涉及的入门知识。1.1了解Web前端工程师表1-1主流招聘网站职位需求量对比招聘网站“Web前端工程师”职位需求数量“Java工程师”职位需求数量“PHP工程师”职位需求数量智联招聘（）27170个35196个6441个前程无忧（）3226个17857个4541个备注：数据参考时间点2016年9月10日，地域范围：北京、上海、广州、深圳1.1了解Web前端工程师1．前景（1）支持HTML5的设备快速增长（2）大面积使用HTML5（3）知名企业关注HTML51.1.1HTML5前端开发的前景与必要认知1.1了解Web前端工程师2．认知（1）认知HTML超文本标记语言（HyperTextMarkupLanguage，简称为HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。1.1了解Web前端工程师图1-1百度网站首页的源代码1.1了解Web前端工程师（2）认知HTML简单来说，HTML5是对HTML标准的第五次修订，其主要的目标是将互联网语义化。图1-3围住神经猫（html5小游戏）图1-4传奇世界之仗剑天涯（html5大型游戏）1.1了解Web前端工程师狭义的HTML5HTML5草案的前身名为WebApplications1.0，该规范定义了第五次重大版本，在这个版本中新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。广义的HTML5广义的HTML5包括HTML、CSS和JavaScript在内的一套技术组合，其目标是减少浏览器对于插件的依赖。1.1了解Web前端工程师1.1.2认识网页的构成元素1．网页2．网站3．首页4．静态网页和动态网页:.html和.htm,.asp,.aspx,.php,.jsp5．网页的构成元素1.1了解Web前端工程师图1-5网页构成元素图像文本链接图像链接借助JavaScript实现的图像滚动效果表单5．网页的构成元素（1）文本（2）图像（3）超链接（4）表单（5）动画（6）音频和视频1.1了解Web前端工程师1.1.3了解专业术语1．是环球信息网的缩写，英文全称为“WorldWideWeb”，中文名字为“万维网”。2．InternetInternet（互联网）是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。3．W3CW3C英文全称为WorldWideWebConsortium（万维网联盟），它是Web技术领域最具权威和影响力的国际中立性技术标准机构。4．HTTPHTTP是HypertextTransferProtocol的缩写，即超文本传输协议。1.1了解Web前端工程师5．URL统一资源标识符（UniformResourceLocator，URL），这是一个世界通用的负责给万维网上每个“资源”定位的系统。6．DNSDNS（DomainNameSystem，域名系统）。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析。7．JavaScriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，它的解释器被称为JavaScript引擎。8．CSSCSS（CascadingStyleSheets，层叠样式表）是一种用来表现网页样式的语言，能够对网页中的对象的位置排版进行精确控制。1.2重要理念——表现和结构相分离1．什么是“表现和结构相分离”内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。结构：盛装内容的框架。样式：用来改变内容外观的东西，称为外在表现。行为：行为就是对内容的交互操作。1.2.1体验“表现和结构相分离”图1-6MIDCENTURYMODERN样式主题图1-7AROBOTNAMEDJIMMY样式主题1.2重要理念——表现和结构相分离2．体验“表现和结构相分离”1.2重要理念——表现和结构相分离图1-8Web标准示意图1.2.2认识WEB标准1.2重要理念——表现和结构相分离1．结构标准结构标准其实指的就是编写网页的语言标准，即超文本标识语言（HyperTextMarkupLanguage，缩写为：HTML）。2．表现标准CSS（CascadingStyleSheets，层叠样式表）它是一种用来表现HTML等文件样式的计算机语言，它的主要优点是提供了便利的更新功能。3．行为标准（1）DOMDOM（DocumentObjectModel，文档对象模型）是一种与浏览器、平台、语言的接口，使得用户可以访问页面其他的标准组件。1.2重要理念——表现和结构相分离（2）ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation，欧洲电脑厂商协会）制定的一种基于NetscapeJavaScript的标准脚本语言。4．如何验证访问W3C的验证地址（）进行验证。图1-9在线验证服务图1-10通过验证后显示的图标1.3Web前端开发基本流程1.3.1开发流程1．人员配置2．基本流程（1）需求分析与调查阶段。（2）设计（3）整理素材，制定规范。（4）选择服务器解决方案确定开发意向需求分析调研产品原型设计根据调研结果撰写项目整体策划草案，并确定服务器解决方案审阅签订正式合同代码编写前端框架搭建后台业务流程前端内侧嵌套程序内侧验收审查产品发布维护与更新图1-11网站建设的基本流程图1.3Web前端开发基本流程1.3Web前端开发基本流程（5）代码编写（6）内部测试与后续优化（7）后台程序开发（8）项目整体测试（9）维护与更新1.3.2常用开发软件介绍1．WebStorm2．记事本3．Dreamweaver4．Photoshop5．GoogleChrome1.3Web前端开发基本流程1.3Web前端开发基本流程图1-12Google浏览器的调试模式1.4使用“记事本”创建HTML5页面图1-13在“记事本”中输入HTML5代码图1-14预览效果1.4使用“记事本”创建HTML5页面谢谢观看！