Ch01-网站前台设计回顾

第1部分起步篇：JavaWeb开发准备工作第1章网站前台设计回顾第2章JSP技术概述第3章集成开发工具Eclipse第4章初步构建“易物网”项目第1章网站前台设计回顾2020/1/26ABC职业学院信息工程系主讲教师吴鹏3本章主要内容HTML和XHTML的基础知识常用CSS标签属性和Div+CSS页面布局技术常用HTML标记XML技术应用JavaScript和正则表达式的基本应用单元实训和课外拓展41.1页面元素之HTML和XHTML什么是HTML和XHTMLHTML文档剖析HTML标记：单标记和成对标记XHTML标记规范5HTML（HyperTextMarkupLanguage），即超文本标记语言。XHTML本质上就是严谨而准确的HTML，“X”代表可扩展的，是单词extensible的缩写。如果说HTML是汉语，那么XHTML就是标准普通话。什么是HTML和XHTML？1.1页面元素之HTML和XHTML6HTML文档剖析1.1页面元素之HTML和XHTML7标记对象/标记，如：h1这是标题1/h1标记属性-1=参数-1属性-2=参数-2……对象/标记标记[属性-1=参数-1属性-2=参数-2……]/，如：br/、hr/HTML标记：单标记和成对标记，基本形式：1.1页面元素之HTML和XHTML8必须要有一个相应的结束标记所有标签的元素和属性的名字都必须使用小写所有的XML标记都必须合理嵌套所有的属性必须用引号括起来把所有和&等特殊符号用编码表示给所有属性赋一个值，没有值的就重复本身不要在注释内容中使用“--”（连续两个减号）XHTML标记规范：1.1页面元素之HTML和XHTML91.2页面布局之CSSDiv+CSS概述Case：易物网样式表10Div+CSS是网站标准（或称“Web标准”）常用术语之一。在XHTML网站设计标准中，不再使用表格定位技术，而是采用Div+CSS的方式实现各种定位和页面的整体布局。CSS（CascadingStyleSheets），称为层叠样式单、层叠样式表。在标准网页设计中，CSS负责网页内容和数据（XHTML和XML）的表现。打个比方来说：时装模特换衣服。模特好比数据，衣服则是表现形式，模特和衣服是分离的，模特可以随意换衣服。1.2.1Div+CSS概述11页面内嵌法（EmbeddingaStyleBlock）：即将样式表直接写在页面代码的头元素部分（head区域）外部链接法（LinkingtoaStyleSheet），如：linkhref=resource/style.cssrel=stylesheettype=text/css/外部导入法（ImportaStyleSheet）：@importurl(../resource/form.css);内联定义法（InlineStyles），如：pstyle=margin-left:0.5in;margin-right:0.5in这一行被增加了左右的外补丁/p可以用以下四种方式将CSS样式加载到网页：1.2.1Div+CSS概述12传统的三栏的页面整体布局：页眉、主体和页脚主体部分三列的页面布局主体部分两列的页面布局主体部分超链接样式列表样式自定义列表样式1.2.2Case：易物网样式表131.3常用HTML标记应用实例应用表格呈现数据应用表单创建会员登录页面应用嵌入式框架构造管理功能区14Case：应用表格呈现数据1.3常用HTML标记应用实例15Case：应用表单创建会员登录页面1.3常用HTML标记应用实例16Case：应用嵌入式框架构造管理功能区1.3常用HTML标记应用实例171.4树形结构的XML数据文件初步了解XML省份城市和高校数据文件*XML知识拓展18XML是被设计用来描述数据的，焦点是数据的内容，重点是：数据是什么，如何存放数据。HTML是被设计用来显示数据的，焦点是数据的外观，重点是：显示数据以及如何更好地显示数据。XML和HTML的异同：简言之，HTML旨在显示信息，而XML旨在传输信息。1.4.1初步了解XML数据文件19文档的第1行：XML声明。文档的第2行是根元素的开始，最后一行是根元素的结束。子元素：根元素的开始和结束之间的部分XML文档的基本结构：1.4.1初步了解XML数据文件20省份的XML文件regions.xml各省市内的地市XML文件各省市内的高校XML文件1.4.2Case：省份城市和高校数据文件21良构的XML文档和有效的XML文档XMLSchema与XMLDTDXML与关系数据库XML编辑器*1.4.3XML知识拓展221.5让静态页面动起来的JavaScript使第一个文本框自动获得焦点验证客户端数据的有效性操纵XML数据构造级联菜实现后台管理导航菜单的CSS样式231.6单元实训和课外拓展课堂讨论上机练习课外拓展训练241.向其他同学讲述：什么是HTML？XHTML中的X表示什么？HTML文档的基本结构包括哪几部分？HTML标签及其属性有哪些基本形式？XHTML标签规范要求严谨，主要表现在哪几个方面？2.课堂讨论：应用Div+CSS页面布局有哪些优势？在页面中嵌入CSS有哪几种方式？3.向其他同学讲解：表单及各个表单元素的基本功能和应用场景。4.课堂讨论：框架式网页和嵌入式框架有何异同？5.课堂思考和讨论：XML数据文件的基本结构是怎样的？应用XML文件有哪些优势？XML文件中节点元素和属性有何异同？6.向其他同学讲解：在页面中嵌入JavaScript有哪几种方式？7.课堂思考和讨论：在JavaScript中如何应用正则表达式？使用正则表达式有哪些优势？1.6.1课堂讨论251.综合HTML和CSS，独立完成1.3节的实例，复习巩固常用CSS样式以及表格、表单和表单元素和嵌入式框架等常用的HTML标记。2.独立编写完成本章使用的异物区、省份区域、各省城市和高校的XML文件。3.独立完成1.5节的4个实例，复习巩固JavaScript和正则表达式的基本应用。1.6.2上机练习261.拓展实训：借助《CSS2.0中文手册》，通过实训复习巩固margin、padding、list、borderbackground、table等常用CSS标签及其基本属性。2.课外拓展：借助《XML指南》等帮助文档，熟练掌握XML文件的编写和访问。3.课外拓展：借助JavaScript和Jscript帮助文档，熟练掌握JavaScript和正则表达式的基本应用。4.拓展实训：安装XMLSpy，检验XML文件的良构性和有效性；了解XMLSchema与XMLDTD的异同。5.课外拓展：熟悉SQLServer2005等高级关系数据库中XML数据类型及其方法。6.课外拓展与实训：访问，自主学习“IBMdeveloperWorks中国”站点上的“JavaXML技术专题”。7.拓展实训：安装MozillaFirefox浏览器及其插件Firebug，浏览并分析“人人网”（）的CSS页面布局和JavaScript的应用。1.6.3课外拓展训练27本章小结本章首先介绍了HTML和XHTML的概念，通过一个实例说明了HTML文档结构，并简要介绍了HTML标签的形式以及XHTML的严谨的标签规范。在此基础上，简要介绍了Div+CSS页面布局方式，并展示了本书综合实例“易物网”的关键CSS样式；综合HTML和CSS，通过实例介绍了表格、表单和表单元素和嵌入式框架等常用的HTML标记；然后简要介绍了XML数据文档的基本结构，并给出了省份城市和高校XML的数据片段；最后通过4个实例，介绍了JavaScript和正则表达式的基本应用。本章属于复习性质，旨在从页面前台设计的角度，引导读者复习巩固与JavaWeb编程紧密相关的HTML、CSS、XML和JavaScript的基本应用，希望读者能够温故而知新，熟练掌握它们。对于这些复习内容，本章不再列出习题。