网站规划与网页设计方案.ppt

《网站规划与网页设计方案.ppt》由会员分享，可在线阅读，更多相关《网站规划与网页设计方案.ppt（55页珍藏版）》请在三一办公上搜索。

1、网站规划与网页设计,4.1 XHTML简介4.2 XHTML文档的基本结构4.3 网页文件的创建过程4.4 段落标记4.5 文字标记4.6 超链接4.7 图像4.8 表格4.9 框架（多窗口页面）4.10 表单,第4章 XHTML 基础,4.1.1 XHTML的产生 HTML语言依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上的应用需求。2000年，W3C组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。

2、,4.1 XHTML简介,4.1.2 XHTML的优点 XHTML 内容既符合XML，并且如果依照一些简单的指导方针，也能被HTML 4.0用户代理程序识别。1XHTML文档遵从XML标准 用标准的XML工具很容易查看、编辑和检验它们.在现有的HTML 4.0代理用户程序中使用，也可以在新的XHTML用户代理程序中使用，在后者中使用可以达到与前者同样或更好的效果。2在XHTML文档中可使用更多的应用程序 XHTML文档中使用的应用程序（如Script和Applet）可以是HTML的文档对象模型DOM，也可以是XML的DOM。,4.1 XHTML简介,4.1.3 XHTML代码规范 1所有的标记

3、都必须有一个相应的结束标记单独不成对的标签，则在标签最后加一个“/”来关闭它 一定写对应的 2所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。,4.1 XHTML简介,4.1.3 XHTML代码规范 3所有的标记都必须合理嵌套 错误 按照XHTML要求必须修改为：/p 4所有的属性必须用引号括起来在HTML中可写为：而按照XHTML要求必须修改为：,4.1 XHTML简介,4.1.3 XHTML代码规范 5特殊符号“”和“&”用编码表示 小于（）号，不是标签一部分的，必须被编码为>；（&）号，不是实体的一部分的，

4、必须被编码为&。6每个属性必须赋值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：按照XHTML要求必须修改为：7不要在注释内容中使用“-”“-”只能出现在XHTML注释的开头和结束位置。,4.1 XHTML简介,1.标记 XHTML文档由标记和被标记的内容组成。格式为：受标记影响的内容 我的第一个网页 需要注意:每个标记都要用“”（大于号）括起来，如，以表示这是XHTML代码而非普通文本。“”与标记名之间不能留有空格或其他字符。在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如。标记也有不用结尾的，称之为单标记。,4.2 XHTML文档的基本结构4.2.

5、1 标记及其属性,2.标记的属性 标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：受影响的内容 欢迎！,4.2 XHTML文档的基本结构4.2.1 标记及其属性,XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：网页的标题 网页的内容【例4-1】,4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构,【说明】DOCTYPE必须为大写。DTD叫做文档类型定义，里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记，并显示出来。要建立符合标准的网页，DOCTYPE声明是

6、必不可少的关键组成部分。DOCTYPE声明必须放在每一个XHTML文档的最顶部，在所有代码和标记之前。,4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构,【说明】“xmlns”是XHTML namespace的缩写，称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标记，所以它的名字空间都相同，就是http:/www.w3.org/1999/xhtml。第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2

7、312（简体中文）。,4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构,用最简单的“记事本”来编辑网页。打开记事本。单击Windows的“开始”按钮，在“程序”菜单中的“附件”子菜单中单击“记事本”。创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言，输入的内容。保存网页。打开“记事本”的“文件”菜单，选择“保存”。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径；在“文件名”文本框输入以.html或.htm为后缀的文件名，如welcome.html；在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮，将记事本中的内

8、容保存在磁盘中。如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。,4.3 网页文件的创建过程 4.3.1 编辑和保存网页,1.用浏览器打开 2.在“Windows资源管理器”或“我的电脑”中打开 在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件，这时将直接在默认的浏览器中打开该.html文件。,4.3 网页文件的创建过程 4.3.2 预览网页,2 强制换行和不换行标记、.放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强

9、制文本换行。强制换行标记的格式为：文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：文字,4.4 段落标记 1 注释标记,段落标记放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。段落标记的格式为：文字 一个段落标记可以看作是两个标记，即。,4.4 段落标记 3 段落标记.,设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用标记。定位标记的格式为：文本、图像或表格 缺省时默认为left。,4.4 段落标记 4 定位标记,当浏览器解释到HTML文档中的标记时，会在此处换行

10、，并加入一条水平线段。水平线标记的格式为：size设定线条粗细，以像素为单位，默认为2。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。,4.4 段落标记 5 水平线标记,【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。,4.4 段落标记 6段落标记综合实例,图4-4 段落标记综合实例,【例4-2】,标题文字#用来指定标题文字的大小，#取16的整数值，取1时文字最大，6时文字最小。属性align设置标题在页面中

11、的对齐方式：left、center或right。缺省时默认为left。标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。与用定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,4.5 文字标记 1 标题文字标记,【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。,4.5 文字标记 2文字标记实例,图4-5 文字标记综合实例,【例4-3】,超链接从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。通过超链接还可以获得不同形态的服务，如文件

12、传输、资料查询、电子邮件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。超文本链接使用锚点标记来定义。,4.6 超链接,锚点（anchor）标记由定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。标记的格式为：热点 href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即 热点。,4.6 超链接 1 锚点标记.,targe

13、t属性,target设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。_blank:空白视窗，保留原来的窗口，新开启一个窗口浏览所链接的文件内容；_parent:上一层页框视窗，若网页使用框架，则所链接的网页回到上一层的框架所在窗口；_self:本身视窗，默认链接显示方式，所链接的内容取代原来窗口的内容；_top:全视窗，以全窗口的方式出现所链接的网页，取代所有窗口内容。,(1)链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为：热点文本(2)链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为：热点文本(3)链接到上

14、一级目录中的网页文件 链接到上一级目录中网页文件的格式为：热点文本 其中“./表示退到上一级目录中。(4)链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为：热点文本,4.6 超链接 2 指向其他页面的链接,要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：热点文本 书签就是用标记对该文本作一个记号。格式为：目标文本附近的字符串,4.6 超链接 3 指向本页中的链接,建立指向其他页面某处的文本,格式为：热点文本 要在跳转到的位置处加上链接标记：文字串 如果链接指向其他文件的某一部分，格式为：热点文本,如果链接到的文件不是HTML文件，

15、则该文件将作为下载文件，其格式为：热点文本 5 指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写邮件地址。指向电子邮件链接的格式为：热点文本,4.6 超链接 4 指向下载文件的链接,【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。,4.6 超链接 6超链接综合实例,图4-6 超链接综合实例,【例4-4】,（1）设置背景色“色彩值”可以为色彩的英文名或相应十六进制值。（2）用图片作为背景 background取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可

16、为GIF格式或JPEG格式的文件。在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。,4.7 图像 1 网页的背景,如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数，也可取百分数。,4.7 图片 2 图片标记,图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：例如，下面代码：,4.7 图片用图片作为热点,【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。,4.7 图片 4图像应用综合实例,图4-7 图像应用综合实例,【

17、例4-5】,表格的标记为，行的标记为，表项的标记为。格式为：表头1 表头2 表头n 表项1 表项2 表项n 表项1 表项2 表项n,4.8 表格 1 简单表格,在缺省下，表项居于单元格的左端。(1)水平对齐 表项数据的水平对齐用标记、和的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。(2)垂直对齐 valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。,4.8 表格 2 表格内文字的对齐方式,表格在浏览

18、器窗口中的位置有三种：居左、居中和居右。使用标记的align属性。格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面。,4.8 表格 3 表格在页面中的对齐方式,在、标记中，属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。bgcolor=色彩或色彩值 设置背景色彩 background=图片文件名“设置背景图片 bordercolor=色彩 设置表格边框的色彩 bordercolorlight=色彩 设置表格边框亮部的色彩 rules=row,cols或none 设置表内线

19、的显示方法，none为无内线,4.8 表格 4 表格的色彩和图片背景,【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。,4.8 表格 5表格应用综合实例,图4-8 表格应用综合实例,【例4-6】,框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构，每个区域显示一个XHTML文件。1 建立框架 框架的建立使用、两个标记。用来划分窗格，标记用来声明其中框架页面的内容。框架的基本结构为：.,4.9 框架（多窗口页面）,(1)标记 标记用来定义一个框架组的属性，格式为：其中属性：row 设定横向分割的框架数目 c

20、ols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有无边框 framespacing 设置各窗格间的空白,4.9 框架（多窗口页面）,框架有横向和纵向之分。对一个框架来说，其大小是很重要的。的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为：,4.9 框架（多窗口页面）,(2)标记 标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，格式为：标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对

21、框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。,4.9 框架（多窗口页面）,【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。框架的嵌套,4.9 框架（多窗口页面）,图4-9 纵向排列多个窗格,【例4-7】,在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。使用的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在有target指定

22、的框架内。target属性的值可以为框架名，使用格式为：热点文本,4.9 框架（多窗口页面）2 框架间的链接,另外，“框架名”有4个特殊的值，分别实现4类特殊的操作：target=_blank：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。target=_self：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。target=_top：链接的目标文件被显示在整个浏览器窗口（取消了框架）。target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。,4.9 框架（多窗口页面）2

23、 框架间的链接,4.9 框架（多窗口页面）3框架应用综合实例,【例4-9】,【例4-9】制作一个框架集，包含上、下框架，下框架又分为左、右两部分，并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。,图4-11 框架应用综合实例,网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为：name属性:表单的名字，在一个网页中用于惟一识别一个表单 action属性:表单处理的方式，往往是E-mail地址或网址 method属性:表单数据的传送方向，是获得（GET）表单还是送出（POST）表单,4.10 表单 1 表单的标记

24、.,type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。,4.10 表单 2 文字和密码的输入,如果浏览者想清除输入到表单中的全部内容，可以使用标记中的type属性所设的重置（reset）按钮，当浏览者完成表单的填写，想要发送时，可使用标记的属性type所设的提交（submit）按钮，将表单内容送给action中的网址或函件信箱。格式为：当缺省value的设置值时，重置和提交的按钮分别显示为“重置”和“提交查询内容”。,4.10 表单 3 重置和提交

25、,选择钮可以是复选框（checkbox）或单选钮（radio）。用标记的type属性可设置选择钮的类型属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。用checked表示是否为缺省选中项。name属性是控制名，同一组的选择钮的控制名是一样的。,4.10 表单 4 复选框和单选钮,当浏览者选择的项目较多时，如果用选择钮来选择，占页面的区域就会较多。可以用标记和标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。标记的格式为：,4.10 表单 5 选择栏,其中：size:取数字，表示在带滚动条的选择栏中一次可见的列表项数 name:控制操作名 multiple:不带值，加上本

26、项表示可选多个选项，否则只能单选 标记的格式为：其中：select 不带值，加上本项表示该项是预置的 value 指定控制操作的初始值，缺省时初值为option中的内容表示选项值,4.10 表单 5 选择栏,标记可以设置允许成段文字的输入。格式为：多行文本 其中的行数和列数是指不用滚动条就可看到的部分。,4.10 表单 6 多行文字的输入textarea.,【例4-10】制作一个“职员调查表”，收集职员的个人资料。为了显得整洁，在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。,4.10 表单 7表单应用综合实例,图4-12 表单应用综合实例,【例4-

27、10】,1制作如图4-13所示的网页，要求章标题的级别为标题h2，居中，黑体，红色；节标题的级别为标题h3，居左，楷体，绿色；正文为宋体，蓝色。整个网页背景色为乳白色。2制作如图4-14所示的网页，单击软件名称，则下载该软件。3分别制作如图4-15（a）、（b）所示的网页，单击小图像，将显示放大的图像。4练习表格在页面中的应用，分别制作如图4-16（a）、（b）所示的网页。在图4-16（a）中单击“详细”超文本则打开新的浏览器窗口，显示详细内容，如图4-16（b）所示。5制作一个“网友推荐”表单，如图4-17所示。6制作如图4-18所示的框架网页。在左框架中单击项目，在右框架中显示相应的内容。,习题4,