ch01-前台设计回顾.ppt

《ch01-前台设计回顾.ppt》由会员分享，可在线阅读，更多相关《ch01-前台设计回顾.ppt（27页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Ch01-网站前台设计回顾第第1 1章章 网站前台设计回顾网站前台设计回顾2022-7-10ABCABC职业学院信息工程系职业学院信息工程系主讲教师主讲教师 吴鹏3本章主要内容本章主要内容v HTML和XHTML的基础知识v 常用CSS标签属性和Div + CSS页面布局技术v 常用HTML标记v XML技术应用v JavaScript和正则表达式的基本应用v 单元实训和课外拓展41.1 页面元素之页面元素之HTML和和XHTMLl 什么是HTML和XHTMLl HTML文档剖析l HTML标记：单标记和成对标记l XHTML标记规范5HTML（Hyper Text Markup Langua

2、ge），即超文本标），即超文本标记语言记语言。XHTML本质上就是严谨而准确的本质上就是严谨而准确的HTML，“X”代表可代表可扩展的，是单词扩展的，是单词extensible的缩写。的缩写。如果说如果说HTML是汉语，那么是汉语，那么XHTML就是标准普通话。就是标准普通话。什么是什么是HTML和和XHTML？1.1 页面元素之页面元素之HTML和和XHTML6HTML文档剖析文档剖析1.1 页面元素之页面元素之HTML和和XHTML7 对象对象，如：，如：这是标题这是标题1 对象对象 ，如：，如： 、 HTML标记：单标记和成对标记标记：单标记和成对标记，基本形式：，基本形式：1.1 页面

3、元素之页面元素之HTML和和XHTML8 必须要有一个相应的结束标记必须要有一个相应的结束标记 所有标签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写 所有的所有的XML标记都必须合理嵌套标记都必须合理嵌套 所有的属性必须用引号括起来所有的属性必须用引号括起来 把所有把所有和和&等特殊符号用编码表示等特殊符号用编码表示 给所有属性赋一个值给所有属性赋一个值 ，没有值的就重复本身，没有值的就重复本身 不要在注释内容中使用不要在注释内容中使用“-”（连续两个减号）（连续两个减号） XHTML标记规范标记规范：1.1 页面元素之页面元素之HTML和和XHTML91.2 页面

4、布局之页面布局之CSSl Div + CSS概述l Case：易物网样式表10Div + CSS是网站标准（或称是网站标准（或称“Web标准标准”）常用术语之一）常用术语之一。在在XHTML网站设计标准中，不再使用表格定位技术，而网站设计标准中，不再使用表格定位技术，而是采用是采用Div + CSS的方式实现各种定位和页面的整体布局。的方式实现各种定位和页面的整体布局。CSS（Cascading Style Sheets），称为层叠样式单、层叠样），称为层叠样式单、层叠样式表。式表。在标准网页设计中，在标准网页设计中，CSS负责网页内容和数据（负责网页内容和数据（XHTML和和XML）的表现。

5、）的表现。打个比方来说：时装模特换衣服。模特好打个比方来说：时装模特换衣服。模特好比数据，衣服则是表现形式，模特和衣服是分离的，模特可比数据，衣服则是表现形式，模特和衣服是分离的，模特可以随意换衣服。以随意换衣服。 1.2.1 Div + CSS概述概述11 页面内嵌法页面内嵌法（Embedding a Style Block）：即将样式表直接写在）：即将样式表直接写在页面代码的头元素部分（页面代码的头元素部分（head区域）区域） 外部链接法外部链接法（Linking to a Style Sheet），如：），如： 外部导入法外部导入法（Import a Style Sheet）：）： i

6、mport url(./resource/form.css); 内联定义法内联定义法（Inline Styles） ，如：，如：这一行被增加了这一行被增加了左右的外补丁左右的外补丁 可以用以下四种方式将CSS样式加载到网页 ：1.2.1 Div + CSS概述概述12 传统的三栏的页面整体布局：页眉、主体和页脚传统的三栏的页面整体布局：页眉、主体和页脚 主体部分三列的页面布局主体部分三列的页面布局 主体部分两列的页面布局主体部分两列的页面布局 主体部分超链接样式主体部分超链接样式 列表样式列表样式 自定义列表样式自定义列表样式 1.2.2 Case：易物网样式表：易物网样式表131.3 常用常

7、用HTML标记应用实例标记应用实例l 应用表格呈现数据l 应用表单创建会员登录页面l 应用嵌入式框架构造管理功能区14Case：应用表格呈现数据1.3 常用常用HTML标记应用实例标记应用实例15Case：应用表单创建会员登录页面1.3 常用常用HTML标记应用实例标记应用实例16Case：应用嵌入式框架构造管理功能区1.3 常用常用HTML标记应用实例标记应用实例171.4 树形结构的树形结构的XML数据文件数据文件l 初步了解XMLl 省份城市和高校数据文件l *XML知识拓展18 XML是被设计用来描述数据的，焦点是数据的内容是被设计用来描述数据的，焦点是数据的内容，重点是：数据是什么，

8、如何存放数据。，重点是：数据是什么，如何存放数据。 HTML是被设计用来显示数据的，焦点是数据的外是被设计用来显示数据的，焦点是数据的外观，重点是：显示数据以及如何更好地显示数据。观，重点是：显示数据以及如何更好地显示数据。 XML和HTML的异同： 简言之，简言之，HTML旨在显示信息，而旨在显示信息，而XML旨在传输信息。旨在传输信息。1.4.1 初步初步了解了解XML数据文件数据文件19 文档的第文档的第1行：行：XML声明声明。 文档的第文档的第2行是根元素的开始行是根元素的开始，最后一行是根元素的结束。，最后一行是根元素的结束。 子元素子元素：根元素的开始和结束根元素的开始和结束之间

9、的部分之间的部分XML文档的基本结构：1.4.1 初步初步了解了解XML数据文件数据文件20 省份的省份的XML文件文件regions.xml 各省市内的地市各省市内的地市XML文件文件 各省市内的高校各省市内的高校XML文件文件1.4.2 Case：省份城市和高校数据文件：省份城市和高校数据文件21 良构的良构的XML文档和有效的文档和有效的XML文档文档 XML Schema与与XML DTD XML与关系数据库与关系数据库 XML编辑器编辑器 *1.4.3 XML知识拓展知识拓展221.5 让静态页面动起来的让静态页面动起来的JavaScriptl 使第一个文本框自动获得焦点l 验证客户

10、端数据的有效性l 操纵XML数据构造级联菜l 实现后台管理导航菜单的CSS样式231.6 单元实训和课外拓展单元实训和课外拓展l 课堂讨论l 上机练习l 课外拓展训练241. 向其他同学讲述：什么是向其他同学讲述：什么是HTML？XHTML中的中的X表示什么？表示什么？HTML文档文档的基本结构包括哪几部分？的基本结构包括哪几部分？HTML标签及其属性有哪些基本形式？标签及其属性有哪些基本形式？XHTML标签规范要求严谨，主要表现在哪几个方面？标签规范要求严谨，主要表现在哪几个方面？2. 课堂讨论：应用课堂讨论：应用Div + CSS页面布局有哪些优势？在页面中嵌入页面布局有哪些优势？在页面中

11、嵌入CSS有哪有哪几种方式？几种方式？3. 向其他同学讲解：表单及各个表单元素的基本功能和应用场景。向其他同学讲解：表单及各个表单元素的基本功能和应用场景。4. 课堂讨论：框架式网页和嵌入式框架有何异同？课堂讨论：框架式网页和嵌入式框架有何异同？5. 课堂思考和讨论：课堂思考和讨论：XML数据文件的基本结构是怎样的？应用数据文件的基本结构是怎样的？应用XML文件有文件有哪些优势？哪些优势？XML文件中节点元素和属性有何异同？文件中节点元素和属性有何异同？6. 向其他同学讲解：在页面中嵌入向其他同学讲解：在页面中嵌入JavaScript有哪几种方式？有哪几种方式？7. 课堂思考和讨论：在课堂思考

12、和讨论：在JavaScript中如何应用正则表达式？使用正则表达式中如何应用正则表达式？使用正则表达式有哪些优势？有哪些优势？1.6.1 课堂讨论课堂讨论251. 综合综合HTML和和CSS，独立完成，独立完成1.3节的实例，复习巩固节的实例，复习巩固常用常用CSS样式以及表格、表单和表单元素和嵌入式框架样式以及表格、表单和表单元素和嵌入式框架等常用的等常用的HTML标记。标记。2. 独立编写完成本章使用的异物区、省份区域、各省城独立编写完成本章使用的异物区、省份区域、各省城市和高校的市和高校的XML文件。文件。3. 独立完成独立完成1.5节的节的4个实例，复习巩固个实例，复习巩固JavaSc

13、ript和正则和正则表达式的基本应用。表达式的基本应用。1.6.2 上机练习上机练习261. 拓展实训：借助拓展实训：借助CSS 2.0中文手册中文手册，通过实训复习巩固，通过实训复习巩固margin、padding、list、border background、table等常用等常用CSS标签及其基本属性。标签及其基本属性。2. 课外拓展：借助课外拓展：借助XML指南指南等帮助文档，熟练掌握等帮助文档，熟练掌握XML文件的编写和访问。文件的编写和访问。3. 课外拓展：借助课外拓展：借助JavaScript和和Jscript帮助文档，熟练掌握帮助文档，熟练掌握JavaScript和正则表达式的

14、基本和正则表达式的基本应用。应用。4. 拓展实训：安装拓展实训：安装XMLSpy，检验，检验XML文件的良构性和有效性；了解文件的良构性和有效性；了解XML Schema与与XML DTD的异同。的异同。5. 课外拓展：熟悉课外拓展：熟悉SQL Server 2005等高级关系数据库中等高级关系数据库中XML数据类型及其方法。数据类型及其方法。6. 课外拓展与实训：访问课外拓展与实训：访问http:/ developerWorks 中国中国”站点上的站点上的“Java XML 技术专题技术专题”。7. 拓展实训：安装拓展实训：安装Mozilla Firefox浏览器及其插件浏览器及其插件Fir

15、ebug，浏览并分析，浏览并分析“人人网人人网”（http:/ 课外拓展训练课外拓展训练27本章小结本章小结本章首先介绍了本章首先介绍了HTML和和XHTML的概念，通过一个实例说明了的概念，通过一个实例说明了HTML文档结构，并简要介绍了文档结构，并简要介绍了HTML标签的形式以及标签的形式以及XHTML的严的严谨的标签规范。在此基础上，简要介绍了谨的标签规范。在此基础上，简要介绍了Div + CSS页面布局方式，并页面布局方式，并展示了本书综合实例展示了本书综合实例“易物网易物网”的关键的关键CSS样式；综合样式；综合HTML和和CSS，通过实例介绍了表格、表单和表单元素和嵌入式框架等常用

16、的，通过实例介绍了表格、表单和表单元素和嵌入式框架等常用的HTML标记；然后简要介绍了标记；然后简要介绍了XML数据文档的基本结构，并给出了省数据文档的基本结构，并给出了省份城市和高校份城市和高校XML的数据片段；最后通过的数据片段；最后通过4个实例，介绍了个实例，介绍了JavaScript和正则表达式的基本应用。和正则表达式的基本应用。本章属于复习性质，旨在从页面前台设计的角度，引导读者复习本章属于复习性质，旨在从页面前台设计的角度，引导读者复习巩固与巩固与Java Web编程紧密相关的编程紧密相关的HTML、CSS、XML和和JavaScript的的基本应用，希望读者能够温故而知新，熟练掌握它们。对于这些复习基本应用，希望读者能够温故而知新，熟练掌握它们。对于这些复习内容，本章不再列出习题。内容，本章不再列出习题。