前端网页设计(高职高专)课件

1、书名：前端网页设计ISBN： 978-7-111-44372-8作者：杜黎强出版社：机械工业出版社本书配有电子课件第1次课教学回顾教学导入教学实施任务实施准备页检查知识点讲解任务实施请大家完成本次课课中页：任务2-实施过程.doc第2次课教学内容及实施环节项目准备：任务2 应用web2.0标准区分HTML与XHTML文档分发本次课所用文件项目准备-任务2(任务实施过程).doc项目准备-任务2(任务实施总结).doc项目准备-任务3子任务1-任务实施准备.doc知识点：(一)概念(2个)(1)W3C组织:(World Wide Web Consortium, 万维网联盟)是一个专门负责网络标准

2、制定的非赢利组织,诸如HTML、XHTML、CSS、XML等标准都是W3C制定的。2. W3C会员包括生产技术产品及服务的厂商、内容供应商、 团体拥护、研究实验室、标准制定机构和政府部门，会员一起协同工作，致力在万维网发展方向上达成共识。(2)Web标准是由W3C和其他标准化组织制定的一套规范集合;目的是创建一个统一的用于Web表现层的技术标准;通过不同浏览器或终端设备向最终用户展示信息内容。知识点：(二)Web标准由3大部分组成对应的标准语言也分三方面：结构化标准语言(HTML、XHTML和XML)表现标准语言(CSS)行为标准(对象模型:W3CDOM、ECMAScript)结构(Struc

3、ture)：对网页中用到的信息进行分类与整理表现(Presentation)：对信息进行版式、颜色、大小等形式控制行为(Behavior)：文档内部的模型定义及交互行为的编写Document Object Model文档对象模型:浏览器与网页内容结构之间的接口，使用户可以访问页面上的标准组件脚本语言，用于实现具体界面上对象的交互操作欧洲电脑厂商协会(European Computer Manufacturers Association)提问1、结构标准语言在网页中主要对网页信息起到组织和分类的作用：(1) XHTML (The Extensible HyperText Markup Langu

4、age，可扩展超文本标记语言)。W3C于2000年1月20日推出XHTML1.0版本。(2) XML (The Extensible Markup Language，可扩展标记语言)，W3C于1998年2月10日发布XML1.0，于2000年10月6日发布XML1.0(SE)第2版。是一种能定义其他语言的语言，最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，逐渐用于网络数据交换标准的格式2、表现标准语言在网页中主要对网页信息的显示进行控制，即如何修饰网页信息的显示样式CSS (Cascading Style Sheets，层叠式样式表)，W3C于1998年5月12日发

5、布的CSS2，创建的目的就是使用CSS取代HTML中结构与表现混淆的弊端，使站点访问与维护更加容易3、行为标准语言在网页中主要对网页信息的结构和显示进行逻辑控制，即动态控制网页信息的结构和显示，实现网页的交互。(1) DOM (Document Object Model，文档对象模型)。是一种让浏览器与网页内容沟通的语言，使得用户可以访问页面元素和组件。给Web设计师和设计者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象(2) ECMAScript，由ECMA指定的标准脚本语言欧洲电脑厂商协会知识点：(三)Web标准布局的使用国内第一个使用Web标准布局的网站：闪客帝国()， 20

6、04年10月开始使用Web标准对网站进行改版重构，于2005年完成全部CSS布局。Web标准在国内应用逐渐普及，它不是某一个标准，而是一系列标准的集合。提问知识点：(四)Web标准布局与传统表格布局的对比看下面实例：三行三列表格布局网页Web标准布局与传统表格布局的对比标准布局(源文件)表格布局(源文件)知识点：(五)XHTML页面结构XHTML与HTML文档页面没有太大区别，但增加了XML语言的基本规范和要求：参看下列标准XHTML网页文档结构：XHTML提供 DTD文档类型过渡型(Transitional):表示要求非常宽松的DTD文档，允许使用HTML元素，但要符合XHTML的语法要求，

7、此格式完整代码如下： 三种几种 ？严格型(Strict)：表示要求严格的DTD文档，需要干净的标记，标记中不能使用任何描述性的元素和属性，避免表现上的混乱，与层叠样式表配合使用。完整代码如下：框架型(Frameset)：针对框架页面设计使用的DTD文档，如果是框架网页或网页中包含框架，则采用这种DTD。完整代码如下：知识点：(六)XHTML常用元素简介通用块状元素，在标准网页布局中最常用的结构化元素。表示文档结构块，可以把文档分割为多个区域。如下面网页实例中使用了3个div元素将页面分割成三大块区域，分别属于页眉、主体、页脚，在页眉和主体区域中又用几个div元素再分割几个更小区域：(1) di

8、v (division,分隔)网页实例页眉主体页脚实例代码： (2) span (行内)通用内联元素，作为文本或内联元素的容器。一般使用span元素为部分文本或内联元素定义特殊样式、排版、修饰特定内容或局部区域。如下面实例代码： 红色显示 加粗显示 .斜体显示 . .(3) h1h6 (header,标题)定义网页标题：一级标题到六级标题。此类元素为块状元素。一般搜索引擎可以对标题元素进行检索，因此用户要使用标题元素定义网页标题。用法如下： 标题 . . (4) p (paragraph，段落)设置段落，为块状元素。用法如下： . . (5) li、ol、ul、dl、dt、dd(项目列表)li

9、: item in a list缩写，表示列表中的项目ol: order list缩写，表示有顺序的列表ul: unordered list缩写，表示无顺序列表dl: definition list缩写，表示定义列表dt: definition term缩写，表示定义列表标题dd: definition in a definition list缩写，表 示定义列表中的定义，即对标题的解释列表元素全部是块状元素，全部配对使用：ol与li合用定义有序列表；ul与li合用则定义无序列表；dl、dt、dd合用可以实现定义列表列表序号属性：type1、a、A、i、I列表序号属性：typedisc、cir

10、cle、square列表元素用法： 列表项 列表项 . 列表项 列表项 . 标题列表项 标题说明 标题列表项 标题说明 .任务实施：使用列表设计导航菜单操作要求：请根据下列网页布局样图，完成.html格式的网页效果；使用CSS+DIV布局；文件命名：list_navigation .htm课后作业完成本次课任务2实施总结和第3次课任务3-子任务1实施准备上传: FTP:/up/ 第1周作业注意：作业文件夹一定要按命名规则命名教学导入教学实施知识点讲解任务实施请大家完成本次课课中页：任务3-子任务1实施过程.doc第3次课教学内容及实施环节第2次课教学回顾项目准备：任务3 使用CSS样式表修饰H

11、TML网页子任务1 网页对象布局分发本次课所用文件项目准备-任务3 子任务1-任务实施过程.doc项目准备-任务3 子任务1-任务实施总结.doc项目准备-任务3 子任务2-任务实施准备.doc定义：CSS就是(Cascading Style Sheets)“层叠样式表”，简称样式表，它是一种定义网页页面排版样式的工具特点：1、CSS精确地控制网页面里各元素的格式，通过修改一个 文件就可以改变大量网页的外观和格式； 2、CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持；3、编码更少，下载速度更快；知识点： （一）CSS基础提问：

12、属于网页设计 哪种标准语言？将样式表文件嵌入HTML或XHTML文档的方法 (1)一般是嵌入到文档头即:标记中(2)将样式表加入到代码行中(3)将外部CSS文件链接到HTML或XHTML文档(4)将外部CSS文件导入到HTML或XHTML文档链接外部样式表导入外部样式表内嵌样式表提问内部样式表知识点： （二）语法结构1. CSS基本语法结构 CSS的语法结构由三部分组成： 选择符(selector) 属性(properties) 属性值(value) 书写格式如下： selector property: value 选择符 属性:值提问练习：请大家快速完成一个CSS命令语句的编辑，内容自定义2

13、、选择符的类型 3种 HTML或XHTML标记选择符：HTML或XHTML标记 如 body、p、table等，属性和值要用冒号隔开： 例如 body margin: 50px 40px 20px 10px; id选择符：#选择符 （id属性） 定义一个元素的独特样式，每个id属性的值是唯一的，必须 以字母开头并且仅包含字母、数字或连字符(字母:AZ、az) 例如：#mbgcolor:#00ffff;width:260px;height:160px; 欢迎使用CSS层叠式样式表 类选择符：.选择符（class属性） 类的名称可以是任意英文单词或以英文开头与数字的组合， 一般以其功能和效果简要命

14、名。 例如： .tcolor:#0000ff;font-family:”隶书” 欢迎使用CSS层叠式样式表提问知识点： （三）CSS元素分类1、块级元素 (display:block)每个块级元素都从新行开始，其后元 素也要另起一行开始，如div2、内联元素 (display:inline)不需要在新行内显示，其后元素也不 必另起一行，如span3、列表项 (display:list-item)和列表类似块状元素与内联元素区别块状元素内联元素最大区别：块状元素可以定义大小，即设置宽度、高度属性知识点：(四)盒模型 (边距、填充距)left内容宽度、边距、填充据、边框之间的关系，如下图所示：知识点：(四)盒模型 (边距、填充距)整个区域宽度？ =20+10+40+200+40+10+20=340px边框默认样式为0(即不显示)；填充距padding不可以 为负；如果