网站规划与网页设计.ppt
《网站规划与网页设计.ppt》由会员分享,可在线阅读,更多相关《网站规划与网页设计.ppt(55页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网站规划与网页设计 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望4.1 XHTML4.1 XHTML简介简介简介简介4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.3 4.3 网页文件的创建过程网页文件的创建过程网页文件的创建过程网页文件的创建过程4.4 4.4 段落标记段落标记段落标记段落标记4.5 4.5 文字标记文字标记文字标记文字标记4.6 4.6 超链接超链接超链接超链接4.7 4.7 图像图像图像图像4
2、.8 4.8 表格表格表格表格4.9 4.9 框架(多窗口页面)框架(多窗口页面)框架(多窗口页面)框架(多窗口页面)4.10 4.10 表单表单表单表单 第第4章章 XHTML 基础基础4.1.1 XHTML4.1.1 XHTML4.1.1 XHTML4.1.1 XHTML的产生的产生的产生的产生 l l HTML HTML语言依然有缺陷和不足,人们仍在不断的改进它,语言依然有缺陷和不足,人们仍在不断的改进它,语言依然有缺陷和不足,人们仍在不断的改进它,语言依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上的应用需求。使它更加便于控制和有弹性,以适应网络上的应用需
3、求。使它更加便于控制和有弹性,以适应网络上的应用需求。使它更加便于控制和有弹性,以适应网络上的应用需求。l l 2000 2000年,年,年,年,W3CW3C组织公布发行了组织公布发行了组织公布发行了组织公布发行了XHTML 1.0XHTML 1.0版本。版本。版本。版本。l l XHTML 1.0 XHTML 1.0是一种在是一种在是一种在是一种在HTML 4.0HTML 4.0基础上优化和改进的新语基础上优化和改进的新语基础上优化和改进的新语基础上优化和改进的新语言,目的是基于言,目的是基于言,目的是基于言,目的是基于XMLXML应用。应用。应用。应用。l l XHTML XHTML是一种
4、增强了的是一种增强了的是一种增强了的是一种增强了的HTMLHTML,它的可扩展性和灵活性,它的可扩展性和灵活性,它的可扩展性和灵活性,它的可扩展性和灵活性将适应未来网络应用更多的需求。将适应未来网络应用更多的需求。将适应未来网络应用更多的需求。将适应未来网络应用更多的需求。4.1 XHTML4.1 XHTML简介简介简介简介4.1.2 XHTML4.1.2 XHTML4.1.2 XHTML4.1.2 XHTML的优点的优点的优点的优点 XHTML XHTML 内容既符合内容既符合内容既符合内容既符合XMLXML,并且如果依照一些简单的指,并且如果依照一些简单的指,并且如果依照一些简单的指,并且
5、如果依照一些简单的指导方针,也能被导方针,也能被导方针,也能被导方针,也能被HTML 4.0HTML 4.0用户代理程序识别。用户代理程序识别。用户代理程序识别。用户代理程序识别。1 1XHTMLXHTML文档遵从文档遵从文档遵从文档遵从XMLXML标准标准标准标准 用标准的用标准的用标准的用标准的XMLXML工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们工具很容易查看、编辑和检验它们.在现有的在现有的在现有的在现有的HTML 4.0HTML 4.0代理用户程序中使用,也可以在新的代理用户程序中使用,也可以在新的代理用户程序中使用,也可以在新的代理用
6、户程序中使用,也可以在新的XHTMLXHTML用户用户用户用户代理程序中使用,在后者中使用可以达到与前者同样或更好代理程序中使用,在后者中使用可以达到与前者同样或更好代理程序中使用,在后者中使用可以达到与前者同样或更好代理程序中使用,在后者中使用可以达到与前者同样或更好的效果。的效果。的效果。的效果。2 2在在在在XHTMLXHTML文档中可使用更多的应用程序文档中可使用更多的应用程序文档中可使用更多的应用程序文档中可使用更多的应用程序 XHTML XHTML文档中使用的应用程序(如文档中使用的应用程序(如文档中使用的应用程序(如文档中使用的应用程序(如ScriptScript和和和和Appl
7、etApplet)可以是可以是可以是可以是HTMLHTML的文档对象模型的文档对象模型的文档对象模型的文档对象模型DOMDOM,也可以是,也可以是,也可以是,也可以是XMLXML的的的的DOMDOM。4.1 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 1 1所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记所有的标记都必须有一个相应的结束标记单独不成对的标签,则在标签最后加一个单独不成对的标签,则在标签最后加一个单独不成对的标签,则在标签最后加一个单独不成对的
8、标签,则在标签最后加一个“/”“/”来关闭它来关闭它来关闭它来关闭它 一定写对应的一定写对应的一定写对应的一定写对应的 img/2 2所有标签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写所有标签的元素和属性的名字都必须使用小写 XHTML XHTML对大小写是敏感的。对大小写是敏感的。对大小写是敏感的。对大小写是敏感的。XHTMLXHTML要求所有的标签和要求所有的标签和要求所有的标签和要求所有的标签和属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。属性的名字都必须使用小写字母。4.1
9、 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 3 3所有的标记都必须合理嵌套所有的标记都必须合理嵌套所有的标记都必须合理嵌套所有的标记都必须合理嵌套 错误错误错误错误 按照按照按照按照XHTMLXHTML要求必须修改为:要求必须修改为:要求必须修改为:要求必须修改为:/p/p 4 4所有的属性必须用引号括起来所有的属性必须用引号括起来所有的属性必须用引号括起来所有的属性必须用引号括起来在在在在HTMLHTML中可写为:中可写为:中可写为:中可写为:而按照而按照而按照而按照XHTMLXHTML要求必须修改为:要求必须修
10、改为:要求必须修改为:要求必须修改为:4.1 XHTML4.1 XHTML简介简介简介简介4.1.3 XHTML4.1.3 XHTML代码规范代码规范代码规范代码规范 5 5特殊符号特殊符号特殊符号特殊符号“”“”“”和和和和“&”“&”用编码表示用编码表示用编码表示用编码表示 小于(小于(小于(小于()号,不是标签一部分的,必须被编码为)号,不是标签一部分的,必须被编码为)号,不是标签一部分的,必须被编码为)号,不是标签一部分的,必须被编码为>>;(&)号,不是实体的一部分的,必须被编码为)号,不是实体的一部分的,必须被编码为)号,不是实体的一部分的,必须被编码为)号,不是实体的一部
11、分的,必须被编码为&&。6 6每个属性必须赋值每个属性必须赋值每个属性必须赋值每个属性必须赋值 XHTMLXHTML规定所有属性都必须有一个值,没有值的就重复规定所有属性都必须有一个值,没有值的就重复规定所有属性都必须有一个值,没有值的就重复规定所有属性都必须有一个值,没有值的就重复本身。例如:本身。例如:本身。例如:本身。例如:td 按照按照按照按照XHTMLXHTML要求必须修改为:要求必须修改为:要求必须修改为:要求必须修改为:td nowrap=nowrap input type=checkbox name=shirt value=medium checked=checke
12、d/7 7不要在注释内容中使用不要在注释内容中使用不要在注释内容中使用不要在注释内容中使用“-”“-”“-”“-”只能出现在只能出现在只能出现在只能出现在XHTMLXHTML注释的开头和结束位置。注释的开头和结束位置。注释的开头和结束位置。注释的开头和结束位置。4.1 XHTML4.1 XHTML简介简介简介简介 1.1.标记标记标记标记 XHTML XHTML文档由标记和被标记的内容组成。格式为:文档由标记和被标记的内容组成。格式为:文档由标记和被标记的内容组成。格式为:文档由标记和被标记的内容组成。格式为:受标记影响的内容受标记影响的内容受标记影响的内容受标记影响的内容/我的第一个网页我的
13、第一个网页我的第一个网页我的第一个网页 需要注意需要注意需要注意需要注意:每个标记都要用每个标记都要用每个标记都要用每个标记都要用“”“”“”(大于号)(大于号)(大于号)(大于号)括起来,如括起来,如括起来,如括起来,如,以表示这是,以表示这是,以表示这是,以表示这是XHTMLXHTML代码而非代码而非代码而非代码而非普通文本。普通文本。普通文本。普通文本。“”“”“”与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他与标记名之间不能留有空格或其他字符。字符。字符。字符。在标记名前加上符号在标记名前加上符号在标记名前加上符号在标记名前加上符号“/”“/
14、”便是其结束标记,表示该便是其结束标记,表示该便是其结束标记,表示该便是其结束标记,表示该标记内容的结束,如标记内容的结束,如标记内容的结束,如标记内容的结束,如。标记也有不用。标记也有不用。标记也有不用。标记也有不用/结尾结尾结尾结尾的,称之为单标记。的,称之为单标记。的,称之为单标记。的,称之为单标记。4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.2.1 4.2.1 标记及其属性标记及其属性标记及其属性标记及其属性2.2.标记的属性标记的属性 标记只是规定这是什么信息,或是文本,标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制
15、这些信息,就或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每需要在标记后面加上相关的属性来表示,每个标记有一系列的属性。格式为:个标记有一系列的属性。格式为:2 受影响的内容受影响的内容/欢迎!欢迎!欢迎!欢迎!4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构4.2.1 4.2.1 标记及其属性标记及其属性标记及其属性标记及其属性 XHTMLXHTML文档是一种纯文本格式的文件,文档是一种纯文本格式的文件,文档是一种纯文本格式的文件,文档是一种纯文本格式的文件,XHTMLXHTML文文文文档的基本结构为:档的基本结构为:档
16、的基本结构为:档的基本结构为:!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 xhtml1/DTD/xhtml1-transitional.dtdxhtml1/DTD/xhtml1-transitional.dtdxhtml1/DTD/xhtml1-transitional.dtd meta http-equiv=Content-Type content=text/html;meta http-equiv=C
17、ontent-Type content=text/html;meta http-equiv=Content-Type content=text/html;charset=gb2312/charset=gb2312/charset=gb2312/网页的标题网页的标题网页的标题网页的标题 网页的内容网页的内容网页的内容网页的内容 【例【例【例【例4-14-1】4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 【说明】【说明】【说明】【说明】DOCTYPEDOCTYPE必
18、须为大写。必须为大写。必须为大写。必须为大写。DTD DTD叫做文档类型定义,里面包含了文档的规则。浏叫做文档类型定义,里面包含了文档的规则。浏叫做文档类型定义,里面包含了文档的规则。浏叫做文档类型定义,里面包含了文档的规则。浏览器根据定义的览器根据定义的览器根据定义的览器根据定义的DTDDTD来解释页面的标记,并显示出来。要建来解释页面的标记,并显示出来。要建来解释页面的标记,并显示出来。要建来解释页面的标记,并显示出来。要建立符合标准的网页,立符合标准的网页,立符合标准的网页,立符合标准的网页,DOCTYPEDOCTYPE声明是必不可少的关键组成声明是必不可少的关键组成声明是必不可少的关键
19、组成声明是必不可少的关键组成部分。部分。部分。部分。DOCTYPEDOCTYPE声明必须放在每一个声明必须放在每一个声明必须放在每一个声明必须放在每一个XHTMLXHTML文档的最顶文档的最顶文档的最顶文档的最顶部,在所有代码和标记之前。部,在所有代码和标记之前。部,在所有代码和标记之前。部,在所有代码和标记之前。4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 【说明】【说明】【说明】【说明】“xmlns”“xmlns”是是是是XHTML namespaceXHT
20、ML namespace的缩写,称为的缩写,称为的缩写,称为的缩写,称为“名名名名字空间字空间字空间字空间”。由于。由于。由于。由于XHTMLXHTML是是是是HTMLHTML向向向向XMLXML过渡的标记语言,过渡的标记语言,过渡的标记语言,过渡的标记语言,它需要符合它需要符合它需要符合它需要符合XMLXML文档规则,因此也需要定义名字空间。又因文档规则,因此也需要定义名字空间。又因文档规则,因此也需要定义名字空间。又因文档规则,因此也需要定义名字空间。又因为为为为XHTML1.0XHTML1.0不能自定义标记,所以它的名字空间都相同,不能自定义标记,所以它的名字空间都相同,不能自定义标记,
21、所以它的名字空间都相同,不能自定义标记,所以它的名字空间都相同,就是就是就是就是http:/www.w3.org/1999/xhtmlhttp:/www.w3.org/1999/xhtml。第第第第5 5行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过行定义语言编码。为了被浏览器正确解释和通过W3CW3C代码校验,所有的代码校验,所有的代码校验,所有的代码校验,所有的XHTMLXHTML文档都必须声明它们所使用文档都必须声明它们所使用文档都必须声明它们所使用文档都必须声明它们所使用的编码语言。一般使用的编码语言。一般
22、使用的编码语言。一般使用的编码语言。一般使用gb2312gb2312(简体中文)。(简体中文)。(简体中文)。(简体中文)。4.2 XHTML4.2 XHTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 4.2.2 XHTML4.2.2 XHTML的基本结构的基本结构的基本结构的基本结构 用最简单的用最简单的用最简单的用最简单的“记事本记事本记事本记事本”来编辑网页。来编辑网页。来编辑网页。来编辑网页。打开记事本。单击打开记事本。单击打开记事本。单击打开记事本。单击WindowsWindows的的的的“开始开始开始开始”按钮,在按钮,在按钮,在按钮,在“程序程序程序程序”菜单中的
23、菜单中的菜单中的菜单中的“附件附件附件附件”子菜单中单击子菜单中单击子菜单中单击子菜单中单击“记事本记事本记事本记事本”。创建新文件,并按创建新文件,并按创建新文件,并按创建新文件,并按HTMLHTML语言规则编辑。在语言规则编辑。在语言规则编辑。在语言规则编辑。在“记事本记事本记事本记事本”窗口中输入窗口中输入窗口中输入窗口中输入HTMLHTML语言,输入的内容。语言,输入的内容。语言,输入的内容。语言,输入的内容。保存网页。打开保存网页。打开保存网页。打开保存网页。打开“记事本记事本记事本记事本”的的的的“文件文件文件文件”菜单,选择菜单,选择菜单,选择菜单,选择“保存保存保存保存”。此时
24、将出现。此时将出现。此时将出现。此时将出现“另存为另存为另存为另存为”对话框,在对话框,在对话框,在对话框,在“保存在保存在保存在保存在”下下下下拉列表框中选择文件要存放的路径;在拉列表框中选择文件要存放的路径;在拉列表框中选择文件要存放的路径;在拉列表框中选择文件要存放的路径;在“文件名文件名文件名文件名”文本框输文本框输文本框输文本框输入以入以入以入以.html.html或或或或.htm.htm为后缀的文件名,如为后缀的文件名,如为后缀的文件名,如为后缀的文件名,如welcome.htmlwelcome.html;在;在;在;在“保存类型保存类型保存类型保存类型”下拉列表框中选择下拉列表框
25、中选择下拉列表框中选择下拉列表框中选择“文本文档文本文档文本文档文本文档”。最后单击。最后单击。最后单击。最后单击“保存保存保存保存”按钮,将记事本中的内容保存在磁盘中。按钮,将记事本中的内容保存在磁盘中。按钮,将记事本中的内容保存在磁盘中。按钮,将记事本中的内容保存在磁盘中。如果希望这一页是网站的首页(主页),想让浏览者输如果希望这一页是网站的首页(主页),想让浏览者输如果希望这一页是网站的首页(主页),想让浏览者输如果希望这一页是网站的首页(主页),想让浏览者输入网址后,就显示这一页的内容,可以把这个文件设为默认入网址后,就显示这一页的内容,可以把这个文件设为默认入网址后,就显示这一页的内
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 规划 网页 设计
限制150内