网站建设及其网页制作.pptxVIP

第11章 网站建设与网页制作11.1 网站的创建复制与发布 11.2 HTML和XHTML 11.3 页面定位与布局方法 11.4 母版页 11.5 CSS样式设计 11.6 使用JavaScript创建网页特效 本章教学目的介绍HTML标记和XHTML标记的用法及网页制作方法。本章教学要求（1）掌握基本HTML标记和XHTML标记的用法；（2）掌握页面布局及CSS的用法；（3）掌握母版页与内容页的设计方法； （4）了解其他内容。网站开发主要分两方面: Web页面设计 设计在客户端呈现的能被浏览器解析的界面，即平时所说的网页制作，一般使用HTML(超文本标记语言)实现。 Web逻辑功能设计 指实现内部逻辑功能，早期使用脚本语言实现，如JavaScript、VBScript等，但是脚本语言功能较弱，实现复杂。 11.1 网站的创建VS2005提供了三种创建站点的位置类型:文件系统FTPHTTP三种类型中，一般使用文件系统。它可在本机任何一个位置创建网站，也可直接将创建的网站从一个文件夹移动或复制到另一个文件夹，或者直接复制到另一台机器中。11.2 HTML和XHTML 在VS2005中网页默认使用的目标架构为： XHTML 1.0 TransitionalXHTML是在HTML（超文本标记语言）基础上为适应目前流行的XML（可扩展标记语言）而发展的新一代Web标记语言。W3C在2000年1月首次提出XHTML时，目标是将Web翻译为XML。XHTML 1.0是作为一种帮助Web开发人员和创作工具制造商放弃传统HTML标记语言，迁移到一个基于XML的新的HTML-XML的混合体而开发的，因此叫做XHTML 1.0 Transitional。11.2 HTML和XHTML(续) 从使用角度说明HTML与XHTML的不同：大小写 HTML不区分大小写，元素和属性名称可以是大写、小写或大小写混合；而XHTML要求所有元素和属性名称必须是小写的，而属性值则大小写均可。标记嵌套 在HTML中使用不正确的嵌套，一样可以在很多浏览器中使用；而XHTML则要求嵌套必须完全正确。 有否结束标记 在HTML中有些标记是可以没有结束标记；而XHTML要求所有标记都必须有结束标记 。引号 HTML中的属性值可以用引号引起来，也可以不使用引号；但XHTML中要求所有属性值都必须加引号。样式 如果不使用样式表，HTML中的每一个样式都可以直接使用属性名=属性值的方法设置样式；但是在XHTML中，如果不样式表，则必须通过Style属性来设置。 11.2.1 HTML和XHTML的格式与标记基本格式： HTML文档=首部（head）+主体（body）首部：由标记head和/head之间的内容构成。用于设置HTML文件的标题、作者等信息（浏览器中不显示）。首部中可包含标题标记符 title 、样式标记符 style、脚本语言标记符 script等。主体：由标记body和/body之间的内容构成。网页中的所有内容，包括文字、图形、链接以及其他页面元素都包含在该标记符内。11.2.1 HTML和XHTML的格式与标记(续)HTML文档的一般形式为 :html head title文档标题/title /head body 这是xhtml文档的主体部分 /body/html在HTML文档中，〈标记〉和〈/标记〉都是配对使用的。11.2.1 HTML和XHTML的格式与标记(续)标记中可以包含属性，一般格式为：〈标记 属性1=值1 属性2=值2 …〉例如： img alt=smile src=smile.png / 标记之间必须使用空格隔开，属性名和属性值之间用等号隔开，等号左边是属性名称，右边是属性值。例11-4: HTML标记示例，主要代码如下:11.2.1 HTML和XHTML的格式与标记(续)body style=background-color: Silver; color: Blue;h1 style=text-align: center 一个很有意义的计算题！/h1 !--这是一个巧妙的利用英语和数学的关系展示了人生哲理的计算题-- hr / div style=text-align: left 如果令A--Z 分别等于百分之1--26，那么br / Hard work （努力工作）H+A+R+D+W+O+R+K = 8+1+18+4+23+15+18+11 = 98% br / Knowledge（知识）nbsp; nbsp; nbsp;K+N+O+W+L+E+D+G+E =11+14+15+23+12+5+4+7+5 = 96%11.2.1 HTML和XHTML的格式与标记(续)br /Love（爱情）nbsp; n