电子商务网页设计与制作完整版ppt课件全套教学教程(最新).ppt

《电子商务网页设计与制作完整版ppt课件全套教学教程(最新).ppt》由会员分享，可在线阅读，更多相关《电子商务网页设计与制作完整版ppt课件全套教学教程(最新).ppt（260页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、项目一项目一 赏析电子商务网站页面赏析电子商务网站页面项目综述 通过比较和分析，掌握电子商务企业网站和典型电子商务网站的设计需求、页面组成部分、常见布局方式和配色方法，通过学习能够模仿同类网站进行设计规划。项目目标能力目标：学习完本项目后,学生应当能够依据不同的网站、网店设计需求对网站进行合理的结构规划,包括:(1)分析网站的配色方案。(2)分析网站的版式结构。(3)编写简易网站赏析报告。(4)模仿同类网站进行规划设计。知识目标：(1)网页基础知识。(2)网页的基本构成。(3)网站的构成和风格设置。(4)网页布局的常用结构。(5)网站的规划原理。Part 01任务一借鉴分析典型电商企业网站的结

2、构任务引导 本任务的目标是通过分析店庆电商企业网站的结构掌握电商网站的需求分析、布局结构分析和色彩应用分析，然后了解基本的网站需求分析方法、常见排版方式和配色方式。任务实施电商企业网站的需求分析电商企业网站的布局结构分析电商企业网站的色彩应用030201知识分析1.网站规划的市场调研 网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别对于网站前端部分而言，更为关注的是网站的栏目设计。 对于确定网站的主题和功能目标而言。就是明确该电商企业网站建立的目标是企业形象展示，还是用于与用户之间进行交互、社群营销改进服务

3、；还是单纯要实现网络营销与在线交易为主的。其次，是分析考虑企业自身的经营状况，包括企业的主营产品的情况，消费市场的认知程度以及所处行业状况。目标明确后，就是市场分析，分析网络中企业现有的同类型公司的网站情况。若是比较大的网站，那么往往还需要进行调研面对市场人群的详细情况，进行目标客户分析。最后再进行可行性分析评估。知识分析2. 竞品分析竞品分析通常包括背景分析和定位分析两方面：背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。 知识分析3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格

4、化让眼睛浏览信息更加愉悦。从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。1692年，法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。知识分析3. 基于栅格化设计原理的网页布局 （1）960栅格化系统 960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽度，通过划分具有规律的分割，来提高网页开发效率。如下图所示：将960像素的页面平均分成12分，间隔10像素。960像素12栅格分割示意图知识分析3. 基于栅格化设计原理的网页布局 （1）960栅格化系

5、统 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重要的角色。它为我们的设计提供一个坚实的坐标基础。960像素12栅格分割示意图知识分析3. 基于栅格化设计原理的网页布局 （2）栅格计算方法 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如图所示栅格化计算方法示意图W =（an）+（n-1）i由于a+i=A，可得：(An) i = W拓展练习1.版心 版心是页面中主要内容所在的区域。版面上除去周围白边，

6、剩下的以文字和图片为主要组成的部分就是版心。在对网页进行布局设计的过程中，也精彩用到版心的概念，而版心的大小通常和显示器的宽度有关。面对不同的显示器宽度常用的版心尺寸分别由：920像素、960像素、1000像素、1200像素。随着显示器的不断变宽，用户越来越喜爱宽屏所带来的视觉体验，1400像素的版心尺寸也逐渐普及。拓展练习2.网页设计常用尺寸 网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中，设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。 一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调

7、。在显示器的尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素，那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。拓展练习3网页广告常用尺寸 网页中，不同类型的广告通常会有不同的不同的尺寸，如下表所示。网页中的广告并没有绝对的尺寸大小，在实际使用中，可以根据不同的情况进行调整。序号尺寸（单位：px）用途1120*120适用于产

8、品或新闻照片展示。2.120*60主要用于做LOGO使用。3.120*90主要应用于产品演示或大型LOGO。4125*125适于表现照片效果的图像广告。5234*60适用于框架或左右形式主页的广告链接。6392*72主要用于有较多图片展示的广告条，用于页眉或页脚。7468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。888*31主要用于网页链接，或网站小型LOGO。习题1.根据所讲5种网页布局方式，为每种布局寻找一个具体的网站案例并进行分析。2.以“农业电商app”为主题，收集相关信息，并进行竞品分析。Part 02任务二借鉴赏析典型电商网站任务引导无论是作为设计师还是使用网站的客户，我们

9、都需要有一定的审美能力去辨别不同的网页。本任务的目标是通过浏览“名城房产”、“恒生电子”等中小企业的网站,来分析其页面布局、网站栏目构成、色彩搭配等,以便为同类型企业规划设计网站。TEXT HERETEXT HERETEXT HERETEXT HERESupporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.知识分析1.WWW WWW是World Wide Web的缩写,也可以简称为Web,

10、中文名字为万维网。是Internet众多服务应用中最普及、功能最丰富、最常见的一个。平时上网浏览的网页正是万维网页面,网页设计与制作也可称为Web设计与制作。 WWW是由遍布在Internet上的许多互相链接的超文本文档组成的系统,它将不同信息资源以网页的形式,由统一资源定位符(Uniform/Universal Resource Locator, URI)进行标识,通过超链接(Hyperlink)和超文本传输协议(HyperText Transfer Protocol,HTTP)有机地联系在一起,可使用Web浏览器软件进行浏览。 WWW的核心由三个标准构成:统一资源定位符(URL),这是一个

11、世界通用的负责给万维网上,如网页这样的资源定位的系统;超文本传送协议(HTTP),负责规定浏览器和服务器怎样互相交流;超文本标记语言(HTML),用于定义超文本文档的结构和格式。知识分析2.网页和网站 网页是构成网站的基本元素,是承载各种网站应用的平台。网站就是由一系列围绕同一主题的统一风格的网页组成的。网站的具体内容就是网页,访问网站就是通过网页浏览器来获取该网站的资源信息或者网络服务。 主页,也称为“Home Page”,也是一个网页,但是一个特殊的网页。一般每一个网站必须有且只有一个主页,该主页与该网站的URL绑定,当在浏览器中输入一个网站的URL时,在浏览器上将显示该网站的主页。主页相

12、当于网站的正门。当然,访问一个网站不一定通过主页进入,但是想要规范系统地了解一个屋子,还是需要通过正门进入。主页作为网站的正门,也是一个标志,体现了整个网站的制作风格和主题,主页上通常还会包含有整个网站的导航目录。知识分析2.网页和网站 网站中的网页一般包括静态网页和动态网页两种形式。 静态网页是指不和后台数据库交互的网页,是显示HTML格式的网页,内容相对固定,当需要改变其信息内容时,必须重新使用网页制作工具来对其进行修改,修改后的网页还要重新上传到服务器上覆盖原来的页面。在静态网页上,可以出现各种动态的效果,如GIF动画、flash、滚动字幕等,这些动态效果并不会改变页面本身的内容。 动态

13、网页通常由数据库交互和相应的应用程序构成,采用动态网站技术生成。动态网页文件一般以.asp、.aspx、.jsp、.php等为扩展名。并且在动态网页网址中常有一个标志性的符号-“?”,如“http:/ 网页版面布局大致可分为“同字形”、“拐角形”、“标题正文形”、“封面形”、“框架形”、“flash形”等。 “同字形”,也称为“回字形”,是国内企业类网站主页最常用的类型,即分为顶端、主体和底部。顶端常由网站logo、banner和导航条构成。主体部分是网站的主要内容,一般分为三列,左右分列一些类目,中间是主要部分,有时也分为均分的四列。“同字形”最主要的特点就是沿中轴线左右大致对称。底部是网站

14、的一些基本信息、联系方式、版权声明等。这种结构是一般企业网站的首选,这种布局能体现出稳重的风格,同时也能显现出大气。知识分析3.网页版面布局类型 “拐角形”分为“左拐角形”和“右拐角形”,国内企业网站常采用“左拐角形”,这种结构与“同字形”很接近,只是形式上的区别,主要区别在主体部分,它分为两列,“左拐角形”左侧列表为一窄列,右列则很宽,“右拐角形”反之,其余顶端和底部和“同字形”类似。因此,这种布局经常和“同字形”结合运用,很多企业网站主页采用“同字形”,二级页面采用“左拐角形”,能够很好地体现整个网站的一贯风格。知识分析3.网页版面布局类型 “标题正文形”,该类型最上面是标题或类似的一些东

15、西,然后是分割线,接着就是正文,很像平时的文章。这种类型多用于网站的新闻页面中。“封面形”,基本上出现在一些网站的首页,整个页面的绝大部分为一个动画或者精美的图像,然后通过几个简单的链接或者直接通过点击可以链接到真正的主页。这种类型主要起着美化和点题的作用,如同杂志的封面。“框架形”,就是采用框架的结构布局。常见的是“左右框架”,该结构分左右为两页,一般左面是导航链接,右面是正文。这种类型结构非常清晰,一目了然,常用于一些大型论坛中。知识分析3.网页版面布局类型 “flash形”,该结构与封面形结构类似,只是这种类型采用flash来设计制作,由于flash的强大功能,页面所表达的信息更为丰富,

16、也能直接在封面上显示交互的导航栏,主要用于服装、娱乐等更注重展示效果的网页。知识分析4.构成网页的基本元素网页是网站的基本元素,而网页本身也是由一些基本元素构成的。做好网站的规划和设计,其实就是对各个网页的基本元素进行规划和设计。构成网页的基本元素包括logo、banner、导航条、文字、图像、多媒体、动态特效、表格、框架、超链接、表单等。知识分析4.构成网页的基本元素(1)logo。 网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物

17、品等,如工行的标志、搜狐的狐狸等。(2)banner。 网站banner,也叫网站横幅,是一种常见的网络广告和企业宣传形式。一般放在网页顶部最显著的位置,用于引起访问者注意,常用动画的形式表现。知识分析4.构成网页的基本元素(3)导航条。 导航条是网页设计中的一项重要内容,为访问者提供访问所需内容的途径,利用导航条,就可以快速找到想要浏览的页面。同时导航条能清晰地展示整个网站的层次结构。一般来说,导航条在一个网站的各个页面中出现的位置是比较固定的,而且风格也是一致的。在网站中,导航条通常可分为图像导航条和文字导航条,也可分为横向导航条和纵向导航条。知识分析4.构成网页的基本元素(4)文字。 网

18、页的最基本的元素,就是网页的内容。一般企业网站的网页中的文字始终是表达信息的主体。需要注意页面中文字大小、字体、颜色对比的组合,背景颜色的衬托,以及与图像等网页元素之间的排版。知识分析4.构成网页的基本元素(5)图像。图像在网页中主要起着表达信息、展示形象、衬托主题和体现风格的作用。在网页中可以使用多种格式的图像文件,其中使用最广泛的是JPEG和GIF两种格式的图像。图像还能作为背景、按钮、导航条、标题等。需要注意页面中的图像和网站主题的关系,以及和页面内容的关系。知识分析4.构成网页的基本元素(6)多媒体。多媒体元素主要包含动画、声音、视频等,更多的起美化页面使网页效果更为丰富的作用。和图像

19、一样,多媒体元素也需要注意和网站主题的关系,以及和页面内容的关系。还需要注意多媒体的格式,多媒体的格式非常多,尽可能采用主流格式,在常见的网页浏览器中能够显示,而不需要再去下载解码器。动画主要使用GIF动画格式和更为丰富的flash动画,动画的常见格式为.swf等。声音的常见格式为.mp3、.wma、.rm、.midi、.wav等。视频的常见格式为.avi、.mpeg、.mp4、.rm等。知识分析4.构成网页的基本元素(7)动态特效。为了使网页效果更加丰富,增加与访问者的互动,在网页中也越来越多地使用各种动态特效,如飘浮广告、广告图片自动轮换、图像淡出等。动态特效主要依靠一些控件和脚本语言(如

20、JavaScript、VBScript)生成。(8)表格。表格是网页中最常见的页面布局元素。控制着其他页面元素的位置以及页面的显示效果。表格由单元格组成,表格布局完成后,各元素分别填充到表格的单元格中。知识分析4.构成网页的基本元素(9)框架。框架也是网页中常见的页面布局元素,作用就是把网页在一个浏览器窗口下分割成几个不同的区域,从而实现在一个浏览器窗口中显示多个页面。使用框架布局可以让网站的结构更加清晰,而且各个框架之间不存在干扰问题。(10)超链接。超链接可以连接不同网页或站点,各个网页链接在一起后,才能构成一个网站。超链接实质是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页

21、,也可以是相同网页上的不同位置,还可以是图像、电子邮件地址、文件,甚至是一个应用程序。而在网页中用于超链接的对象,通常是一段文字或者是一个图像文件。知识分析4.构成网页的基本元素(11)表单。表单是一种特殊的网页元素,通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收用户在浏览器端的输入信息,然后将这些信息发送到服务器端,由服务器进行处理。常见于网页登录、注册、搜索部分。知识分析5.网页设计与制作工具 进行网页设计与制作,往往通过辅助软件来完成。教程中所用的辅助软件主要是:网页编辑工具Dreamweaver;图像处理工具Photoshop;动画制作工具Flash。拓展练习1.CSS网

22、页布局方式在网页设计时，除了视觉上的几种布局方式以外，在网页实现发布到互联网上时，也有常用的布局方式，通常被称为CSS网页布局。（1）固定布局固定布局为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。因当今设备的显示的多元化，该布局方式基本已经淘汰。拓展练习1.CSS网页布局方式（2）流式布局 流式布局是为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度

23、单位，高度通常以像素为单位进行固定。流式布局的代表作栅格系统（网格系统）。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。但其自身也有一定的缺点，例如因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。拓展练习1.CSS网页布局方式（3）栅格化布局 栅格化布局是指将网页宽度人为的划分成均等的长度，然后排版布

24、局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。比如像 bootstrap，foundation 这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。拓展练习1.CSS网页布局方式（4）自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。拓展练习1.CSS网页布局方

25、式（5）响应式布局响应式布局的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。拓展练习1.CSS网页布局方式（6）弹性布局 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限

26、性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到一定程度时会造成布局严重错位。习题1.分析“淘宝网”、“阿里巴巴中国站”主页的特点。2.比较淘宝电子商务网站和行业性电子商务商城网站,分析它们的结构和特点。谢谢观看&欢迎指导！项目二项目二 运用运用HTML5HTML5制作制作招生宣传单页招生宣传单页项目综述 掌握一些HTML知识,对加深掌握网页制作,提高网页制作水平是很有帮助的。本项目将通过使用HTML5来制作一个简单的网页,从而使学生掌握基础的HTML语法规范和HTML5标签的学习。项目目标能力目标：学习完本项目后,能够依据HTML5语法规范来编写简单的网页文件,包括:（1）编写HTML

27、页面形成网页。（2）修改HTML网页代码。（3）调试HTML网页显示效果。知识目标：（1）HTML基本语法。（2）HTML常用标签及属性的用法。（3）HTML编辑工具的使用。（4）HTML5的新特性（5）HTML5新标签和新属性的用法Part 01任务一通过HTML5制作学院招生的基础文本单页任务引导 本任务的目标是通过制作一个简单的可用于移动端的招生基础文本单页来掌握用HTML手工编写一个简单页面的方法，然后通过这个页面来初步了解HTML5的基本结构以及文本用法。任务实施1.创建页面基本结构2.输入完整网页结构3.保存为网页文件4.打开网页5.增加移动端设备的基本结构6.增加HTML5结构化

28、标签7.使用标题、段落和分割水平线8.添加列表9.查看网页源代码知识分析1.HTML HTML(HyperText Markup Language),即超文本标签语言,它并不算一种真正的程序语言,而是一种描述文档结构的语言。HTML构成了网页文档的主体。 HTML可以用纯文本编辑器(如Windows的记事本、写字板等)来编辑也可以通过编辑器，将所需要表达的信息按某种规则写成HTML文件,通过浏览器来识别,并将这些HTML翻译成所见到的网页。HTML文件一般以.htm或.html为扩展名。 HTML当前最新的规范版本是HTML5，它也代表了一系列Web相关技术的总称。大部分浏览器已经具备了对HT

29、ML5的支持。对于之前HTML4.01版本，HTML5保持了新功能与原有功能的平稳过渡。知识分析2.HTML的语法 HTML是由标签、标签属性和内容注释构成的，一起用来描述网页上的各种元素。 （1）标签：用于标示描述功能的符号。通过相应的英文名称或者缩写字母嵌套在“”里构成,例如、等。标签一般分为起始标签和结束标签 。由起始标签和结束标签构成的标签，被称为双标签。也有一些标签,只有起始标签，没有结束标签,被称为单标签。这类标签并不常见,例如、等。知识分析2.HTML的语法 （2）属性：用于进一步描述该标签。属性的位置在起始标签内。一个标签可以有多个属性项,各属性项次序不影响属性产生的效果,各属

30、性之间须用空格分隔,空格数目也不影响属性的效果。带属性的起始标签的一般可标示为:。 在HTML文档中,HTML标签和属性的书写不区分大小写;HTML标签可以嵌套但不能交叉;HTML文档可以在一行上书写多个标签,也可以把一个标签包含的属性分为多行书写,但一个完整的单词不能分成两行写。 （3）内容注释：可对文档标签起注释的作用,可放在文档中的任何位置,用标签。在标签内的为注释内容, 在浏览器预览时是不显示的。知识分析 3.HTML5的新语法 HTML5的主要语法基本沿用之前的HTML语法，从而体现平稳过渡，但整体更简单，更具人性化。主要体现在以下一些方面： （1）文档声明：用于告知浏览器的解析器用

31、什么文档标准解析这个文档（标准模式）。HTML 5只有一种 声明，表示其是HTML5标准： （2）字符集：如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。之前的版本中。HTML 5中简化为：知识分析 3.HTML5的新语法 （3）标签省略：有些结构标签可以完全省略，如：html、head、body、colgroup、tbody等。有些双标签也可以省略结束符，li、dt、dd、p、option、colgroup、tbody、tr、td、th等。 （4）属性值省略引号：当属性值不包括空字符串、“”、=、单引号、双引号等字符时，属性两边的引号可以省略。 （5）布尔值：html5中增加布

32、尔值，有属性为true，没有属性为false。对于布尔类型的属性，比如：readonly、disabled，checked、selected当它们不写值的时候，就是默认是true。也就是只要写了这个属性，属性立马生效。例如之前HTML版本中：，表示这个选框被选中。在HTML5中则写为：。知识分析 4.HTML的基本结构 HTML文档以标签开始,以结束,其中可分为头部和主体两部分。所有HTML文档内容则分别嵌套入头部和主体部分的标签对之间。 知识分析 4.HTML的基本结构 提供有关页面的元信息(meta-information),也是一个单标签,在一个页面的头部中可以有多个标签。meta标签的

33、作用有搜索引擎优化，定义页面使用的语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等。常见功能如下: （1）name属性：常用于描述网页，比如网页的关键词、叙述等。和content中的内容对应，便于搜索引擎抓取。 （2）http-equiv属性：相当于http的文件头作用，可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，也和content中的内容对应，content中的内容其实就是各个参数的变量值。知识分析 5.移动设备的HTML基本结构 现阶段借助移动设备来访问页面已经成为主流，页面设计不得不考虑对于移动设备的访问支持。最

34、主要的问题就是分辨率尺寸，移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大缩小也可访问传统的网页，也这样用户体验不佳，而且也会存在实际使用问题。可在之中添加viewport元数据标签。 知识分析 6.HTML块级元素与内联元素 大多数 HTML 元素被定义为块级元素或内联元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p、h1、div等标签元素。内联元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span、a等标签元素。一般来说，常通过 和 将 HTML元素组合起来。知识分析 7.HTML5新增的结构标签 随着网页标准化

35、的推行，很多网页在布局时都是采用了Div+CSS的布局方式。在页面中只有Div来定义时，可以说整个HTML文档结构定义不清晰，语义化是不明确的。在HTML5中，为了使文档的结构更加清晰明确，专门添加了页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。知识分析 8.标题标签 HTML提供了六个级别的标题,n值越小,标题字号就越大。定义最大的标题,定义最小的标题。在这些标签中嵌套的文字元素显示黑体字体且自动插入一个空行。9.段落标签 当需要换段落另起一段时可以使用段落标签,段落的结束由来标签,一般可以将省略,因为下一个的开始就意味着上一个的结束。10.换行标签 换行标签是一个单标签,与段落标签

36、的显示效果都是另起一行,换段则新起的一行与原行之间有一空行,另外由于不属于同一段落,对齐方式可以不同。知识分析 11.水平线标签 在屏幕上显示一条水平线段,可从视觉上将页面分割成不同部分。12.无序列表标签 无序列表ul标签用来将“标签内容”以列表的方式显示，列表项目无先后顺序之分，也就是没有编号。列表内的数据项以li标签来列举，ul标签中的li标签项目数据默认会加上一个圆点符号。无序列表是一个项目的列表，此列项使用实心圆进行标记。其语法形式如下： 无序列表项1 无序列表项2 知识分析 13.HTML的特殊符号 HTML中经常会用到一些特殊符号，例如箭头，雪花，心形等等，这些符号就不用CSS样

37、式或者图片来写了，直接用html特殊符号可以实现。另外还有一些例如空格、等在HTML中具有特殊作用的标号若要能够在网页中正确显示也需要使用特殊符号。拓展练习 1.XML XML(Extensible Markup Language)即可扩展标签语言, XML和HTML是两种不同用途的标签语言。HTML的重点是数据显示,XML的重点是组织和描述信息。XML包含了一系列相关技术。2.XHTML 可扩展超文本标签语言(Extensible HyperText Markup Language,XHTML),表现方式与超文本标签语言(HTML)类似,不过语法上更加严格。从继承关系上讲,XHTML基于可扩

38、展标签语言(XML)。XHTML 1.0是W3C的推荐标准。拓展练习 3.HTML5的革新（1）语义网（Semantics）（2）离线&存储（Offline & Storage）（3）设备访问（Device Access）（4）通信（Connectivity）（5）呈现（CSS3）（6）性能和集成（Performance & Integration）（7）绘画图形和特效（3D, Graphics & Effects）（8）多媒体（Multimedia）拓展练习 4.文本格式化标签 HTML可以定义一些文本修饰效果, 供格式化输出，比如粗体和斜体字。5.定义预格式文本标签 可定义预格式化的文本,

39、被包围在标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。标签常用来表示计算机的源代码。6.有序列表标签 有序列表也是一列项目的列表,列表项目使用有序的标签进行标签。有序列表始于ol标签。每个列表项同样始于li标签。定制有序列表表中的序号通过属性type的属性值A,a,I,i,1等来决定。有序列表标签的起始值,可以通过设置ol的属性start的属性值来完成,属性值为数值。拓展练习 7.嵌套列表 当一个列表内容里还有细分的列表，就需要我们嵌套一个列表进去。一样的在li标签里放ul标签或ol标签进行层次嵌套。8.自定义列表标签 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义

40、列表以 dl标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。习题1.利用HTML创建一个简单的页面用于介绍个人的寝室或者班级。2.采用列表元素来制作一个热门排行榜。Part 02任务二HTML5制作学院招生的图文单页任务引导 本任务通过编写HTML文档来继续制作学院招生的简单页面,通过添加图片，制作表格来优化页面效果，同时进一步熟悉常用的HTML标签以及使用HTML编写网页。任务实施1. 创建网站文件夹2.打开文本工具3.分析网站顶部4.分析页面主体5.分析网站底部6.保存更新网页,完成任务二。知识分析 1.网页常用图像格式 网页中使用的图像格式需要能够被每一个

41、操作平台所接受，现阶段最为常用的图像格式是Gif、JPEG和PNG。2.图像标签语法 图像标签img作用为在页面上插入并显示图像,它也是一个单标签，在HTML文件中没有终止标签，常在起始标签右括号前加上一个右斜线“/”作结束。与其配合的是使用源属性src。属性src用于设置图像源,属性值就是图像源的URL地址。其基本语法是: 在该语法中，src的参数用来设置图像文件所在的路径，这一路径可以是绝对路径，也可以是相对路径。知识分析 3.设置图像属性 （1）图像的幅面大小（width属性和height属性） （2）图像的备用说明（alt属性） （3） 图片的说明（title元素）知识分析4.表格标签

42、 表格的作用是组织信息，也可以作为页面布局的方式。HTML表格就像是电子表格，由行和列构成，每个表格单元格处于行和列的交汇处。 单元格内的文字 单元格内的文字 （1）表格中的空单元格（2）单元格边框（3）颜色和背景属性（4）表格间距和填充属性（5）表格对齐属性知识分析5.跨多行、多列的单元格 在实际表格运用过程中,大多表格都需要进行单元格的行列合并,即所说的跨行或跨列。跨多列的单元格,用属性colspan设置。跨多行的单元格,用属性rowspan设置。栏目结构1标题2标题3标题ABC栏目结构1标题A2标题B3标题C拓展练习1.表格练习 2.表格表头、主体和页脚标签（1）表格表头thead标签用

43、来显示表格的表头，为table的子元素，该标签内容中可包含tr标签以及子标签。（2）表格页脚tfoot标签用来显示表格的页脚，为table的子元素，该标签内容中可包含tr标签以及子标签。、。（3）表格主体Tbody标签用来指定表格主体（表格的数据），为table的子元素，该标签内容中可包含tr标签以及子标签。拓展练习3.嵌套表格的作用 在网页中使用表格布局时,经常需要运用嵌套表格。因为嵌套表格可以使页面布局更为合理,方便页面布局,填充网页元素。利用表格中单元格的跨行跨列合并拆分并不能满足很多常见的页面布局需求。4.HTML5视频 HTML5 提供了在Web上展示视频的标准。HTML5 规定了一

44、种通过 video 标签来包含视频的标准方法。其语法可如： 你的浏览器不支持该视频元素。拓展练习5.HTML5音频 HTML5 提供了在Web上播放音频的标准。之前大多数页面音频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。而HTML5 规定了一种通过 audio标签来包含音频的标准方法。其语法可如： 你的浏览器不支持该音频元素.习题1.通过HTML创建一个简易的图文混排班级介绍网页。2.给页面加入视频、背景音乐等多媒体元素。Part 03任务三 HTML5制作学院招生的详细咨询页任务引导 本任务通过编写HTML文档来继续制作学院招生的详细咨询页,通过添加对前一

45、任务添加超级链接跳转到具体咨询页面，通过表单控件来实现交互页，同时进一步熟悉常用的HTML标签以及掌握HTML5的表单新标签。任务实施1. 创建咨询页面2. 添加超级链接3.编写咨询页面结构4.添加表单标签5.添加放置表单控件的表格6.在单元格中设置文案和表单控件7.添加背景图片8.保存更新网页,完成任务三知识分析1.超链接 超链接（hyperlink），或者简称为链接（link）。超链接就是从一个网页跳转到另一个网页的途径，是网站中使用比较频繁的HTML元素。超链接的标签是a，a标签作用为可定义锚(anchor)。主要通过设置href属性,创建指向另外一个文档的超链接。基本语法如下:2.设置

46、超链接的窗口打开方式 默认情况下，超链接打开新页面的方式是在原页面打开，也就是原页面会被替代。可以通过设置a标签的target属性来制订超链接打开目标页面的方式。其语法形式如下：链接内容 知识分析3.表单标签 HTML 表单用于搜集不同类型的用户输入。表单标签form定义 HTML 表单。在HTML中，标签用来创建一个表单，即定义表单的开始位置和结束位置。在标记中，可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。4.使用input标签创建表单控件 input元素可以定义大多数类型的表单控件，控件的类型取决于type的属性值，不同的值对应不同的表单控件，默认值为text文本字段。知

47、识分析4.使用input标签创建表单控件（1）文本字段（2）单选按钮（3）复选框（4）普通按钮知识分析4.使用input标签创建表单控件（5）提交按钮（6）重置按钮（7）数字字段（8）电话字段知识分析4.使用input标签创建表单控件（9）邮箱字段 （10）日期字段 5.使用select标签创建表单控件 输入类型的控件一般以input标签开始，说明该控件需要用户的输入，而菜单类则以select标签开始，表示用户需要选择。可按是否支持多选分为下拉菜单和列表项。知识分析5.使用select标签创建表单控件 （1）下拉菜单 选项显示内容 选项显示内容 （2）列表项 选项显示内容 选项显示内容 知识分

48、析6.创建文本域 除了以上的两大类表单控件外，还有一种特殊定义的文本样式，称为文字域或文本域，它与文字字段的区别在于可以添加多行的文字，从而输入更多的文本内容。其语法形式如下：7.背景设置 HTML中的背景设置可以增加页面效果，有两类属性设置，颜色或者图像。背景图像设置可以综合在一起，语法：background: background: 图像路径（background-image） 平铺（background-repeat） 位置（background-position） 颜色（background-color） 背景相对位置（background-attachment）拓展练习1.定义超链接

49、的提示信息 有时超链接的文字不足以描述所要链接的内容，使用属性title可以很方便地指明该链接的信息，当鼠标指针指向该链接时，才会出现一个提示框显示该链接的说明，这样不会影响页面排版的整洁。其语法形式如下：链接文字2.其他input标签的表单控件类型（1）密码域 拓展练习（2）图像域（3）文件域3.HTML5 新增的输入类型（1）color（2）number（3）email（4）url拓展练习（5）search（6）tel（7）rangeinput type=range（8）date（9）time（10）datetime（11）datetime-local拓展练习4.正侧表达式 正则表达式是对

50、字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑，也就是匹配。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。习题1. 通过HTML创建一个个人简历的表单页面。2. 列举HTML5自带的两种表单验证方式，加以简要说明。谢谢观看&欢迎指导！项目三项目三 搭建电子商务网店页面搭建电子商务网店页面项目综述 各类电子商务平台提供的最基本店铺则是由平台生成,用户只需添加对应的店招图片、商品图片、文字分类