Presentation is loading. Please wait.

Presentation is loading. Please wait.

网站规划与网页设计.

Similar presentations


Presentation on theme: "网站规划与网页设计."— Presentation transcript:

1 网站规划与网页设计

2 第4章 XHTML 基础 4.1 XHTML简介 4.2 XHTML文档的基本结构 4.3 网页文件的创建过程 4.4 段落标记
4.3 网页文件的创建过程 4.4 段落标记 4.5 文字标记 4.6 超链接 4.7 图像 4.8 表格 4.9 框架(多窗口页面) 表单

3 4.1 XHTML简介 XHTML的产生 HTML语言依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上的应用需求。 2000年,W3C组织公布发行了XHTML 1.0版本。 XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言,目的是基于XML应用。 XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。

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

5 4.1 XHTML简介 4.1.3 XHTML代码规范 1.所有的标记都必须有一个相应的结束标记
单独不成对的标签,则在标签最后加一个“/”来关闭它 <p>一定写对应的</p> <br /> <img height="80" alt="网页设计师" src="../images/logo_w3cn.gif" width="200" /> 2.所有标签的元素和属性的名字都必须使用小写 XHTML对大小写是敏感的。XHTML要求所有的标签和属性的名字都必须使用小写字母。

6 4.1 XHTML简介 4.1.3 XHTML代码规范 3.所有的标记都必须合理嵌套 按照XHTML要求必须修改为:
<p><b></p></b>错误 按照XHTML要求必须修改为: <p><b></b>/p> 4.所有的属性必须用引号括起来 在HTML中可写为: <input name=guitar type=checkbox value=guitar> 而按照XHTML要求必须修改为: <input name="guitar" type="checkbox" value="guitar" />

7 4.1 XHTML简介 4.1.3 XHTML代码规范 5.特殊符号“<”、“>”和“&”用编码表示
 小于(<)号,不是标签一部分的,必须被编码为&lt; 大于(>)号,不是标签一部分的,必须被编码为&gt;  (&)号,不是实体的一部分的,必须被编码为&amp。 6.每个属性必须赋值 XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如: <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 按照XHTML要求必须修改为: <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked" /> </td> 7.不要在注释内容中使用“--” “--”只能出现在XHTML注释的开头和结束位置。

8 4.2 XHTML文档的基本结构 4.2.1 标记及其属性 XHTML文档由标记和被标记的内容组成。格式为:
标记及其属性 1.标记 XHTML文档由标记和被标记的内容组成。格式为: <标记> 受标记影响的内容 </标记> <title> 我的第一个网页 </title> 需要注意: ① 每个标记都要用“<”(小于号)和“>”(大于号)括起来,如<p>,<table>,以表示这是XHTML代码而非普通文本。 “<”、“>”与标记名之间不能留有空格或其他字符。 ② 在标记名前加上符号“/”便是其结束标记,表示该标记内容的结束,如</h1>。标记也有不用</标记>结尾的,称之为单标记。

9 4.2 XHTML文档的基本结构 标记及其属性 2. 标记的属性 标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性。格式为: <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内容 </标记> <h1 align="left"> 欢迎!</h1>

10 4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 XHTML文档是一种纯文本格式的文件,XHTML文档的基本结构为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html> 【例4-1】

11 4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】 ①DOCTYPE必须为大写。
DTD叫做文档类型定义,里面包含了文档的规则。浏览器根据定义的DTD来解释页面的标记,并显示出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。 DOCTYPE声明必须放在每一个XHTML文档的最顶部,在所有代码和标记之前。

12 4.2 XHTML文档的基本结构 4.2.2 XHTML的基本结构 【说明】
② “xmlns”是XHTML namespace的缩写,称为“名字空间”。由于XHTML是HTML向XML过渡的标记语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标记,所以它的名字空间都相同,就是 ③ 第5行定义语言编码。为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言。一般使用gb2312(简体中文)。

13 4.3 网页文件的创建过程 4.3.1 编辑和保存网页 用最简单的“记事本”来编辑网页。
4.3 网页文件的创建过程 编辑和保存网页 用最简单的“记事本”来编辑网页。 ① 打开记事本。单击Windows的“开始”按钮,在“程序”菜单中的“附件”子菜单中单击“记事本”。 ② 创建新文件,并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言,输入的内容。 ③ 保存网页。打开“记事本”的“文件”菜单,选择“保存”。此时将出现“另存为”对话框,在“保存在”下拉列表框中选择文件要存放的路径;在“文件名”文本框输入以.html或.htm为后缀的文件名,如welcome.html;在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮,将记事本中的内容保存在磁盘中。 如果希望这一页是网站的首页(主页),想让浏览者输入网址后,就显示这一页的内容,可以把这个文件设为默认文档,文件名为index.html或index.htm。

14 4.3 网页文件的创建过程 4.3.2 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开
4.3 网页文件的创建过程 预览网页 1. 用浏览器打开 2. 在“Windows资源管理器”或“我的电脑”中打开 在“Windows资源管理器”或“我的电脑”中双击要打开的.html文件,这时将直接在默认的浏览器中打开该.html文件。

15 4.4 段落标记 1 注释标记<!--...--> <!-- 注释内容 -->
4.4 段落标记 1 注释标记<! > <!-- 注释内容 --> 2 强制换行和不换行标记<br />、<nobr>...</nobr> <br>放在一行的末尾,可以使后面的文字、图片、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。强制换行标记的格式为: 文字 <br /> 不换行标记可令文字不能因太长使浏览器无法显示而换行,它对住址、数学公式、一行数字等尤其有用。其格式为: <nobr> 文字 </nobr>

16 4.4 段落标记 3 段落标记<p>...</p>
4.4 段落标记 3 段落标记<p>...</p> 段落标记放在一个段落的头尾,用于定义一个段落。<p>...</p>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行。段落标记的格式为: <p align="left|center|right"> 文字 </p> 一个段落标记<p>可以看作是两个<br />标记,即<br /><br />。

17 4.4 段落标记 4 定位标记<div>…</div>
4.4 段落标记 4 定位标记<div>…</div> 设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时,常使用<div>…</div>标记。定位标记的格式为: <div align="left|center|right"> 文本、图像或表格 </div> 缺省时默认为left。

18 4.4 段落标记 5 水平线标记<hr />
4.4 段落标记 5 水平线标记<hr /> 当浏览器解释到HTML文档中的<hr/>标记时,会在此处换行,并加入一条水平线段。 水平线标记的格式为: <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade=“ noshade” /> size设定线条粗细,以像素为单位,默认为2。 width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。 color设定线条色彩,默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。

19 4.4 段落标记 6.段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 【例4-2】
4.4 段落标记 6.段落标记综合实例 【例4-2】本例文件ex4-2.htm在浏览器中的显示效果如图4-4所示。 图4-4 段落标记综合实例 【例4-2】

20 4.5 文字标记 1 标题文字标记<h#>…</h#>
4.5 文字标记 1 标题文字标记<h#>…</h#> <h# align="left|center|right"> 标题文字 </h#> #用来指定标题文字的大小,#取1~6的整数值,取1时文字最大,6时文字最小。 属性align设置标题在页面中的对齐方式:left、center或right。缺省时默认为left。 <h#>…</h#>标记缺省显示宋体,在一个标题行中无法使用不同大小的字体。 与用<title>…</title>定义的网页标题不同,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中。

21 4.5 文字标记 2.文字标记实例 【例4-3】 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。
4.5 文字标记 2.文字标记实例 【例4-3】设置文字的标题。本例文件ex4-3.htm在浏览器中的显示效果如图4-5所示。 【例4-3】 图4-5 文字标记综合实例

22 4.6 超链接 超链接从当前网页定义的位置跳转到其他位置,包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件,甚至跳转到声音、图片等多媒体文件。 通过超链接还可以获得不同形态的服务,如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时,网页中的外观形式为彩色(一般为蓝色)且带下划线的文字或图片。单击这些文本或图片,可跳转到相应位置。 超文本链接使用锚点标记<a>来定义。

23 4.6 超链接 1 锚点标记<a>...</a>
4.6 超链接 1 锚点标记<a>...</a> 锚点(anchor)标记由<a>定义,它在网页上建立超文本链接。 通过单击一个词、句或图片,可从此处转到另一个链接资源(目标资源),这个目标资源有惟一的URL。具有以上特点的词、句或图片就称为热点。 <a>标记的格式为: <a href="URL" target="打开窗口方式"> 热点 </a> href属性为超文本引用,它的值为一个URL,是目标资源的有效地址。 如果要创建一个不链接到其他位置的空超链接,可用“#”代替URL,即<a href="#"> 热点 </a>。

24 target属性 target设定链接被单击后结果所要开始窗口的方式。可选值为:_blank,_parent,_self,_top。

25 4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为:
4.6 超链接 2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为: <a href="目标文件名.html"> 热点文本 </a> (2) 链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为: <a href="子目录名/目标文件名.html"> 热点文本 </a> (3) 链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为: <a href="../目标文件名.html"> 热点文本 </a> 其中“. . /表示退到上一级目录中。 (4) 链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为: <a href="../子目录名/目标文件名.html"> 热点文本 </a>

26 4.6 超链接 3 指向本页中的链接 <a href="#记号名"> 热点文本 </a>
4.6 超链接 3 指向本页中的链接 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标记,另一个为书签标记。超链接标记的格式为: <a href="#记号名"> 热点文本 </a> 书签就是用<a>标记对该文本作一个记号。格式为: <a name="记号名"> 目标文本附近的字符串 </a>

27 建立指向其他页面某处的文本 格式为: <a href="URL#记号名"> 热点文本 </a>
要在跳转到的位置处加上链接标记: <a name="记号名"> 文字串 </a> 如果链接指向其他文件的某一部分,格式为: <a href="目标文件路径/文件名#记号名"> 热点文本 </a>

28 4.6 超链接 4 指向下载文件的链接 <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接
4.6 超链接 4 指向下载文件的链接 如果链接到的文件不是HTML文件,则该文件将作为下载文件,其格式为: <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 单击指向电子邮件的链接,将打开缺省的电子邮件程序,如FoxMail、Outlook Express,并自动填写邮件地址。指向电子邮件链接的格式为: <a href="mailto: 地址"> 热点文本 </a>

29 4.6 超链接 6.超链接综合实例 【例4-4】超链接综合实例。在浏览器中的显示效果如图4-6所示。 【例4-4】 图4-6 超链接综合实例

30 4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值">
4.7 图像 1 网页的背景 (1) 设置背景色 <body bgcolor="色彩值"> “色彩值”可以为色彩的英文名或相应十六进制值。 (2) 用图片作为背景 <body background="图片文件名"> background取值为一个图片文件名,并且要指出文件存放的路径,可以是相对路径,也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。 在浏览器中,作为背景的图片将按原来的大小复制,重复铺满整个网页。

31 4.7 图片 2 图片标记<img> <img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ /> 如果不设定图片的尺寸,图片将按照其本身的大小显示。可使用<img>标记的width和height属性来设置图片的大小。width和height属性的属性值可取像素数,也可取百分数。

32 4.7 图片 用图片作为热点 <a href="URL"> <img src="图片文件名"> </a>
4.7 图片 用图片作为热点 图片也可作为热点,单击图片则跳转到被链接的文本或其他文件。格式为: <a href="URL"> <img src="图片文件名"> </a> 例如,下面代码: <a href="vb_book.html"> <img src="vb.jpg" alt="VB封面" width="140" height="190" hspace="10" vspace="5“ /> </a>

33 4.7 图片 4.图像应用综合实例 【例4-5】图像应用综合实例。本例文件ex4-5.htm在浏览器中的显示效果如图4-7所示。 图4-7 图像应用综合实例 【例4-5】

34 4.8 表格 1 简单表格 表格的标记为<table>,行的标记为<tr>,表项的标记为<td>。格式为: <table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> </table>

35 4.8 表格 2 表格内文字的对齐方式 在缺省下,表项居于单元格的左端。 (1) 水平对齐 表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为:center(表项数据的居中)、left(左对齐)、right(右对齐)或justify(左右调整)。 (2) 垂直对齐 valign的属性值分别为:top(靠单元格顶)、bottom(靠单元格底)、middle(靠单元格中)或baseline(同行单元数据项位置一致)。

36 4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。
4.8 表格 3 表格在页面中的对齐方式 表格在浏览器窗口中的位置有三种:居左、居中和居右。 使用<table>标记的align属性。格式为: <table align="left|center|right"> 当表格位于页面的左侧或右侧时,文本填充在另一侧。 当表格居中时,表格两边没有文本。 当align属性缺省时,文本在表格的下面。

37 4.8 表格 4 表格的色彩和图片背景 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片
4.8 表格 4 表格的色彩和图片背景 在<table>、<th>、<tr>、<td>标记中,属性可以改变表格的背景和边框的色彩、添加背景图片,也可以为行和单元格改变色彩、添加背景图片。 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名“ 设置背景图片 bordercolor="色彩" 设置表格边框的色彩 bordercolorlight="色彩" 设置表格边框亮部的色彩 rules="row,cols或none" 设置表内线的显示方法,none为无内线

38 4.8 表格 5.表格应用综合实例 【例4-6】表格应用综合实例。本例文件ex4-6.htm在浏览器中的显示效果如图4-8所示。 【例4-6】 图4-8 表格应用综合实例

39 4.9 框架(多窗口页面) 框架(Frames)也称多窗口页面或帧,是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构,每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。<frameset>用来划分窗格,<frame>标记用来声明其中框架页面的内容。框架的基本结构为: <html> <head>... </head> <frameset> <!-- 划分窗格 --> <frame src="url"> <!-- 定义第1个窗格 --> <frame src="url"> <!-- 定义第2个窗格 --> </frameset> </html>

40 4.9 框架(多窗口页面) (1) <frameset>标记
4.9 框架(多窗口页面) (1) <frameset>标记 <frameset>标记用来定义一个框架组的属性,格式为: <frameset row="横向框架数" cols="纵向框架数" border="像素值" bordercolor="色彩值" frameborder="yes|no" framespacing="像素值“ > … </frameset> 其中属性: row 设定横向分割的框架数目 cols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有∕无边框 framespacing 设置各窗格间的空白

41 4.9 框架(多窗口页面) 框架有横向和纵向之分。对一个框架来说,其大小是很重要的。<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如,要建立有三个横向框架的页面,可写为: <frameset row="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*">

42 4.9 框架(多窗口页面) (2) <frame>标记
4.9 框架(多窗口页面) (2) <frame>标记 <frame>标记用于给各个框架指定页面的内容,也就是,它将各个框架和包含其内容的那个文件联系在一起。<frame>是一个单标记,格式为: <frame src="源文件名.html" name="框架名" border="像素值" bordercolor="色彩值" frameborder="yes|no" marginwidth="像素值" marginheight="像素值" scrolling="yes|no|auto" noresize/> <frame>标记的个数应等于在<frameset>标记中所定义的框架数,并按在文件中出现的次序按先行后列对框架进行初始化。如果<frame>标记数目少于<frameset>中定义的框架数量,则多余的框架为空。

43 4.9 框架(多窗口页面) 【例4-7】纵向排列多个窗格。本例中用到的其他HTM文件是在前面例题中建立的文件。本例文件ex4-7.htm在浏览器中显示的效果如图4-9所示。 框架的嵌套 图4-9 纵向排列多个窗格 【例4-7】

44 4.9 框架(多窗口页面) 2 框架间的链接 在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容。这些目录是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架。 使用<a>的target属性就可以控制目标文件在那个框架内显示。当单击热点文本时,目标文件就会出现在有target指定的框架内。target属性的值可以为框架名,使用格式为: <a href="目标文件名.html" target="框架名"> 热点文本 </a>

45 4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作:
4.9 框架(多窗口页面) 2 框架间的链接 另外,“框架名”有4个特殊的值,分别实现4类特殊的操作: target="_blank":链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target="_self":链接的目标文件被显示在当前框架窗口中,代替正在显示的热点文本所在的那个文件,是省略target属性的默认值。 target="_top":链接的目标文件被显示在整个浏览器窗口(取消了框架)。 target=“_parent”:当框架嵌套时,链接的目标文件被显示在父框架中;否则,被显示在整个浏览器窗口中。

46 4.9 框架(多窗口页面) 3.框架应用综合实例 【例4-9】制作一个框架集,包含上、下框架,下框架又分为左、右两部分,并实现框架间的链接。本例文件ex4-9.htm在浏览器中显示的效果如图4-11所示。 图4-11 框架应用综合实例 【例4-9】

47 4.10 表单 1 表单的标记<form>...</form>
4.10 表单 1 表单的标记<form>...</form> 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中,通过表单交流和反馈信息。格式为: <form name="表单名" action="URL" method="get|post"> <input type="表项类型" name="表项名" value="缺省值" size="x" maxlength="y“ /> </form> name属性 :表单的名字,在一个网页中用于惟一识别一个表单 action属性 :表单处理的方式,往往是 地址或网址 method属性:表单数据的传送方向,是获得(GET)表单还是送出(POST)表单

48 4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示;
4.10 表单 2 文字和密码的输入 type属性值为text,则输入的文本以标准的字符显示; type属性值为password,则输入的文本显示为“*”。 在表项前应加入表项的名称,如“您的姓名”等,以告诉浏览者在随后的表项中输入的内容。

49 4.10 表单 3 重置和提交 <input type="reset" value="按钮名“ />
4.10 表单 3 重置和提交 如果浏览者想清除输入到表单中的全部内容,可以使用<input>标记中的type属性所设的重置(reset)按钮,当浏览者完成表单的填写,想要发送时,可使用<input>标记的属性type所设的提交(submit)按钮,将表单内容送给action中的网址或函件信箱。格式为: <input type="reset" value="按钮名“ /> <input type="submit" value="按钮名“ /> 当缺省value的设置值时,重置和提交的按钮分别显示为“重置”和“提交查询内容”。

50 4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。
4.10 表单 4 复选框和单选钮 选择钮可以是复选框(checkbox)或单选钮(radio)。 用<input>标记的type属性可设置选择钮的类型 属性value可设置该选择钮的控制初值,用以告诉表单制作者选择结果。 用checked表示是否为缺省选中项。 name属性是控制名,同一组的选择钮的控制名是一样的。

51 4.10 表单 5 选择栏<select> 当浏览者选择的项目较多时,如果用选择钮来选择,占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种,即弹出式和字段式。<select>标记的格式为: <select size="x" name="控制操作名" multiple> <option value=“”> </select>

52 4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数
4.10 表单 5 选择栏<select> 其中: size:取数字,表示在带滚动条的选择栏中一次可见的列表项数 name: 控制操作名 multiple:不带值,加上本项表示可选多个选项,否则只能单选 <option>标记的格式为: <option select value="可选择的内容"> select 不带值,加上本项表示该项是预置的 value 指定控制操作的初始值,缺省时初值为option中的内容表示选项值

53 4.10 表单 6 多行文字的输入textarea>...</textarea>
4.10 表单 6 多行文字的输入textarea>...</textarea> <TEXTAREA>标记可以设置允许成段文字的输入。格式为: <textarea name="控制操作名" rows="行数" cols="列数"> 多行文本 </textarea> 其中的行数和列数是指不用滚动条就可看到的部分。

54 4.10 表单 7.表单应用综合实例 【例4-10】制作一个“职员调查表”,收集职员的个人资料。为了显得整洁,在表单中使用了无边框表格。本例文件ex4-10.htm在浏览器中显示的效果如图4-12所示。 【例4-10】 图4-12 表单应用综合实例

55 习题4 2.制作如图4-14所示的网页,单击软件名称,则下载该软件。
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所示的框架网页。在左框架中单击项目,在右框架中显示相应的内容。


Download ppt "网站规划与网页设计."

Similar presentations


Ads by Google