第2章 Web设计基础

第2章Web设计基础2.12.22.32.4Web简介XHTML语言CSS初步XML基础2.1Web简介2.1.1Web的概念1．网页网页一般用HTML/XHTML语言写成，在网页中可以嵌入文本、图形、音频和视频信息，是一种多媒体作品。2．主页（或首页）主页可以认为是一组网页中最主要的网页，是进入其他网页的起始网页，主页通过超链接链接到其他网页。3．超链接Web上的信息是由彼此关联的文档组成的，而使其连接在一起的是超链接。4．网站若干个网页按一定方式连接起来形成一个整体，用来描述一组完整的信息。2.1.2浏览器和服务器用超文本传输协议（HTTP协议）来传输Web文档，通过统一资源定位符URL标识文档在网络上服务器的位置及服务器中的路径2.2XHTML语言2.2.1XHTML文档基本构成一个XHTML文档由DOCTYPE、head和body三个主要的部分构成，基本的文档结构如下：2.2.1XHTML文档基本构成下面是一个简单的（最小化的）XHTML文档：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN文档基本构成1．文档类型声明（1）Strict（严格类型）在此情况下，需要干净的标记，避免表现上的混乱，与层叠样式表（CSS）配合使用。上面这个最小化的XHTML文档用的就是Strict类型：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN（2）Transitional（过渡类型）当需要利用HTML在表现上的特性，为那些不支持CSS的浏览器编写XHTML时使用Transitional类型，格式如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN文档基本构成（3）Frameset（框架类型）当需要使用HTML框架将浏览器窗口分割为两部分或更多框架时使用Frameset类型，格式如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN文档基本构成2．文档头文档头部分处于head与/head标记之间，在文档头部分一般可以使用以下几种标记。title和/title：指定网页的标题。例如，“title主页/title”表示该网页的标题为“主页”，在浏览器标题栏中显示的文本即为“主页”，通常Web搜索工具用它作为索引。style和/style：指定文档内容的样式表，如字体大小、格式等。在文档头部分定义了样式表后，就可以在文档主体部分引用样式表。!--和--：用于注释内容，其之间的内容为XHTML的注释部分。meta：描述标记，用于描述网页文档的属性参数。script和/script：在这两个标记之间可以插入脚本语言程序。2.2.1XHTML文档基本构成3．文档主体body和/body是文档正文标记，文档的主体部分就处于这两个标记之间。body标记中还可以定义文档主体的一些内容，格式如下：body属性=值…事件=执行的程序……/bodybody标记常用的属性如下。background：文档背景图片的URL地址。例如：bodybackground＝back-ground.gifbgcolor：文档的背景颜色。例如：bodybgcolor＝red2.2.1XHTML文档基本构成表示文档的背景颜色为红色。系统的许多标记都会用到颜色值，颜色值一般用颜色名称或十六进制数值来表示，表2.1列出了16种标准颜色的名称及其十六进制数值。颜色名称十六进制数值颜色名称十六进制数值淡蓝aqua(cyan)#00FFFF海蓝navy#000080黑black#000000橄榄色olive#808000蓝blue#0000FF紫purple#800080紫红fuchsia(magenta)#FF00FF红red#FF0000灰gray#808080银色silver#C0绿green#008000淡青teal#008080浅绿lime#00FF00白white#FFFFFF褐红maroon#800000黄yellow#FFFF002.2.1XHTML文档基本构成text：文档中文本的颜色。例如：bodytext=bluelink：文档中链接的颜色。vlink：文档中已被访问过的链接的颜色。alink：文档中正在被选中的链接的颜色。2.2.1XHTML文档基本构成4．示例【例2.1】使用XHTML设计一个以南京师范大学校门为背景的网页。（1）准备在桌面上新建一个XHTML文件夹，到南京师范大学校园网下载一幅仙林新校区大门的照片，以文件名njnu.jpg保存于XHTML文件夹下。2.2.1XHTML文档基本构成（2）编辑XHTML文档打开Windows记事本，输入下列内容：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN南京师范大学校门/titlescriptlanguage=JavaScriptfunctionmyp(){alert(欢迎访问!);}/script/headbodybackground=njnu.jpgonload=myp()divalign=centerfontcolor=#8888FFsize=7南京师范大学仙林新校区/font/div/body/html2.2.1XHTML文档基本构成（3）运行双击打开刚刚编辑的文档，将显示如图2.2所示的页面。2.2.1XHTML文档基本构成从上例的代码中可以很清楚地看出XHTML与HTML有以下几点最主要的不同之处：①元素必须被正确地嵌套；②XHTML元素必须被关闭；③标签名必须用小写字母；④XHTML文档必须拥有一个根元素。2.2.2XHTML格式标记1．分段标记分段标记的格式如下：p属性=值……/p2．换行标记换行标记为br/，该标记将强行中断当前行，使后续内容在下一行显示。3．标题标记标题标记的格式如下：hn属性=值…/hn4．对中标记对中标记的格式如下：center…/center5．块标记块标记的格式如下：div属性=值……/div2.2.2XHTML格式标记【例2.2】应用前面提到的各种标记。新建example2-2.html文件，输入以下代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN标记应用/title/headbodypalign=center分段标记/p换行标记br/center对中标记/centerbr/br/divalign=center下面使用了div标记h1标题标记1/h1h2标题标记2/h2h3align=left标题标记3/h3/div/body/html2.2.2XHTML格式标记运行结果如图2.3所示。2.2.2XHTML格式标记实际上，div标记在更多情况下用于布局，例如：divid=topdivid=logo…/divdivid=ad…/divdivid=set…/div/divdivid=centerdivid=left…/divdivid=right…/div/divdivid=bottom/div2.2.2XHTML格式标记如此设置样式，布局效果如图2.4所示。2.2.2XHTML格式标记6．水平线标记水平线标记用于在文档中添加一条水平线，分隔文档，格式如下：hr属性=值…/7．字体标记字体标记用于设置文本的字符格式，主要包括字体、字号和颜色等，格式如下：font属性=值……/font8．固定字体标记固定字体标记的格式如下：b粗体/bi斜体/ibig大字体/bigsmall小字体/smalltt固定宽度字体/tt2.2.2XHTML格式标记9．标线标记标线标记的格式如下：sup上标/supsub下标/subu下画线/us删除线/s10．特殊标记表2.2列出了一些常用的特殊符号和它们的实体名称及数字表示。2.2.2XHTML格式标记11．列表标记（1）有序列表标记有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记ol和列表项标记li来创建，格式如下：ol属性=值…li列表项1/lili列表项2/li…li列表项n/li/ol（2）无序列表标记无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记ul和列表项标记li来创建，格式如下：ul属性=值…li列表项1/lili列表项2/li…li列表项n/li/ul2.2.2XHTML格式标记（3）描述性列表标记描述性列表标记dl和dd，本身并不具备作为列表显示的意义。例如，很多使用dl和dd布局的网站的典型结构代码如下：divid=sidebardldt栏目标题1/dtddulli新闻标题1/li…li新闻标题n/li/ul/dd…dt栏目标题n/dtddulli新闻标题1/li…li新闻标题n/li/ul/dd/dl/div2.2.2XHTML格式标记【例2.3】创建一个有序列表，要求列表描述项的字体为黑体，斜体，颜色为红色，字号为4，列表项序列从B开始。新建example2-3.html文件，输入以下代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN有序列表/title/headbodyfontface=黑体color=redsize=4i计算机课程/i/fontoltype=Astart=2li计算机导论/lili操作系统/lili计算机原理/lili数据结构/li/ol/body/html2.2.2XHTML格式标记运行结果如图2.5所示。2.2.3XHTML多媒体标记1．图像标记利用图像标记可以向网页中插入图像，或者在网页中播放视频文件，格式如下：img属性=值…/图像标记的属性如下。src：图像文件的URL地址，图像可以是jpeg、gif或png文件。a