1.2 任务2：楼宇照明管理页面的设计_Web前端应用开发技术-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.2 任务2：楼宇照明管理页面的设计

本任务重点学习HTML链接的使用方法，帮助读者理解文件绝对路径与相对路径的使用区别，掌握HTML头部信息可包含的内容、HTML列表样式的编写，以及Frame框架的基本用法，通过项目实践掌握如何使用HTML框架实现系统功能的显示与切换。

1.2.1 开发场景

通过楼宇照明管理页面可查看楼宇中照明设备的实时状态，并进行智能化的设备管理。楼宇照明管理页面如图1.16所示。

图1.16 楼宇照明管理页面

1.2.2 任务目标

（1）知识目标：HTML链接、HTML文件路径、HTML头部信息、HTML列表、HTML框架。

（2）技能目标：掌握HTML链接的使用方法、HTML绝对与相对路径、HTML头部信息选项、HTML三种列表，以及HTML框架的使用方法。

（3）任务目标：实现基于HTML框架设计制作楼宇照明管理页面。

1.2.3 原理学习

1.2.3.1 HTML链接和文件路径

1）HTML链接

几乎所有的页面中都存在HTML链接，单击相应的链接能够从一个页面跳转到另一个页面，实现代码如下所示。HTML链接如图1.17所示。

图1.17 HTML链接

HTML使用<a>标签来设置超文本链接。超文本链接既可以是一个字符、一个词或者一段文本，还可以是一张图片。单击HTML链接能够跳转到新文件或者当前文件中的其他部分。<a>标签中使用href属性来描述链接地址。

HTML链接的用法如下：

href属性描述了链接地址（链接目标），例如：

HTML 链接使用 target 属性来定义被链接文件在何处显示。例如，下面的代码在新窗口打开文件：

target属性值如表1.7所示。

表1.7 target属性值

HTML链接中的id属性用于创建一个HTML文件的书签。在HTML文件中不显示书签，对用户来说书签是隐藏的。

下面的代码在HTML文件中插入了id属性：

下面的代码在HTML文件中创建了一个链接到“有用的提示部分”（id="＃tips"）：

下面的代码在一个页面创建了一个链接到“有用的提示部分”（id="＃tips"）：

下面的代码将一张图片作为一个链接，图片链接的效果如图1.18所示。

图1.18 图片链接的效果

单击图1.18中的图片后，页面将自动跳转到百度页面，如图1.19所示。

图1.19 跳转后的效果

2）文件路径

HTML 的初学者经常会遇到这样一个问题，即如何引用一个文件，例如在页面中引用其他页面，或者插入一张图片。如果引用文件时，使用了错误的文件路径，就会导致引用失败。文件路径有相对路径和绝对路径两种形式。

（1）相对路径（Relative Path）。通过相对路径可以引用上级目录、同级目录或下级目录中的文件。

建立一个源文件test.html，假设需要在源文件test.html中引用index.html，如果源文件和被引用的文件在同一目录中，则可以直接写入被引用文件名。例如，源文件 test.html 路径是“C：\web\test\test.html”，被引用文件 index.html 的路径是“C：\web\test\index.html”，则下面的代码可以在test.html中引用index.html。

“../”表示源文件所在当前目录的上一级目录，“../../”表示源文件所在目录的上两级目录，依次类推。假设 test.html 的路径是“C：\web\test1\test2\test.html”，index.html 的路径是“C：\web\test1\index.html”，则下面的代码可以在test.html中引用index.html。

假设test.html的路径是“C：\web\test1\test2\test3\test.html”，index.html的路径是“C：\web\test1\index.html”，则下面的代码可以在test.html中引用index.html。

假设 test.html 的路径是“C：\web\test1\test2\test.html”，index.html 的路径是“C：\web\test1\test3\index.html”，则下面的代码可以在test.html中引用index.html。

在引用下级目录的文件时，直接写下级目录文件的路径即可。假设 test.html 的路径是“C：\web\test1\test2\test.html”，index.html 的路径是“C：\web\test1\test2\test3\index.html”，则下面的代码可以在test.html中引用index.html。

假设test.html的路径是“C：\web\test1\test.html”，index.html的路径是“C：\web\test1\test2\test3\index.html”，则下面的代码可以在test.html中引用index.html。

（2）绝对路径（Absolute Path）。绝对路径是指带域名的完整路径。假设注册了域名www.test.com，并申请了虚拟主机，虚拟主机提供商会给一个目录，如 www，这个 www 就是网站的根目录。假设在www根目录下放了一个文件index.html，这个文件的绝对路径就是“http：//www.test.com/index.html”；假设在 www 根目录下建了一个目录 src，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是“http：//www.test.com/src/index.html”。

1.2.3.2 HTML头部信息

HTML 头部信息中包含了所在页面的信息。头部信息中的内容主要是供浏览器使用的，不会显示在页面中。常用的HTML头部信息包括标题（title）、链接（link）、样式（style）和信息（meta）。

（1）标题。标题不显示在页面正文里，显示在浏览器窗口的标题栏里，如图1.20所示。

图1.20 标题的显示效果

示例代码如下：

（2）链接。用于建立页面和外部文件的链接，如CSS外部样式表的链接，示例代码如下：

（3）样式。用于设置页面的内部样式表。示例代码如下：

（4）信息。<meta>标签可提供有关页面的元信息（Meta-Information），如针对搜索引擎和更新频度的描述与关键词。<meta>标签位于文件的头部，不包含任何内容。<meta>标签的属性定义了与文件相关联的名称/值对。示例代码如下：

利用信息中的Refresh可以实现页面的自动跳转，示例代码如下：

1.2.3.3 HTML列表

HTML有三种列表形式：排序列表、不排序列表和定义列表。三种列表的显示效果如图1.21所示。

图1.21 三种列表的显示效果

（1）排序列表是按照字母或数字等顺序排列的列表项目，带有前后顺序之分的编号，如果插入和删除某个列表项，则会自动调整编号。排序列表由<ol>标签开始，每个列表项由<li>标签开始。

（2）不排序列表。不排序列表适合成员之间无级别顺序关系的情况，不用数字标记每个列表项，而采用一个符号来标记每个列表项，如粗体圆点。不排序列表由<ul>标签开始，每个列表项由<li>标签开始。示例代码如下：

（3）自定义列表。自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表通常用于术语的定义。自定义列表由<dl>标签开始，术语由<dt>标签开始，术语的解释说明由<dd>标签开始，<dd></dd>里的文本缩进显示。示例代码如下：

HTML列表标签如表1.8所示。

表1.8 HTML列表标签

1.2.3.4 HTML框架

通过使用 HTML 框架（Frame），可以在一个浏览器的窗口内同时显示多个页面，每个HTML框架都设定了一个页面，不同HTML框架中的页面是相互独立的。

（1）<frameset>标签。<frameset>标签用于定义一个框架集，该框架集用来组织多个窗口，每个窗口都是一个独立的 HTML 页面。<frameset>标签有 cols 属性和 rows 属性。使用 cols属性，可以按列分布HTML框架；使用rows属性，可以按行分布HTML框架。<frameset>标签和</frameset>标签中只能使用一种属性，要么是rows属性，要么是cols属性，不能同时定义这两种属性。

（2）<frame>标签。<frame>标签用于设置页面，该标签有src属性，src属性值就是页面的路径和文件名。例如：

上述代码将<frameset>标签分成2列，第1列为25%，表示第1列的宽度是窗口宽度的25%；第2列为75%，表示第2列的宽度是窗口宽度的75%。第1列显示Frame_a.html，第2列显示Frame_b.html。

（3）Iframe。Iframe是Inline Frame的意思，通过<iframe>标签和</iframe>标签可以将HTML框架置于一个HTML文件内。

（4）列分Frame。下面的代码可在浏览器同时显示3个页面，3个页面按列分布。

3个页面按列分布的显示效果如图1.22所示。

图1.22 3个页面按列分布的显示效果

（5）行分Frame。下面的代码可在浏览器中同时显示3个页面，3个页面按行分布。

3个页面按行分布的显示效果如图1.23所示。

图1.23 3个页面按行分布的显示效果

（6）混合Frame。下面的代码通过<frameset>标签的cols属性和rows属性，对Frame进行灵活分布。混合Frame的显示效果如图1.24所示。

图1.24 混合Frame的显示效果

（7）<frameset>标签的noresize属性。noresize属性用于设置不能被用户重置大小的框架，如果不使用 noresize 属性，就可以通过鼠标来移动框架的边界，从而改变框架的大小；如果使用了noresize属性，就无法移动框架的边界了。示例代码如下：

（8）用于导航的框架。用于导航的框架代码如下所示：

用于导航的框架通常包含一个HTML文件，HTML文件包含一个页面列表。单击页面列表中的任何一项，就会在第2个框架中显示被单击的页面。framelist.html的内容如下：

（9）Iframe 的使用方法。下面的代码在一个 HTML文件中用<iframe>标签嵌入了一个页面。

1.2.4 开发实践

1.2.4.1 开发设计

楼宇信息照明页面是基于HTML框架来设计的，上部是系统标题，下部的左边是导航页面，下部的右边是主内容显示页面。开发设计的步骤是：创建HTML文件→设计页面的HTML框架→设计上部的系统标题→设计下部左边的导航页面→设计下部右边的主内容显示页面（包括照明状态页面和系统设置页面）。

楼宇照明管理页面的结构如图1.25所示。

图1.25 楼宇照明管理页面的结构

1.2.4.2 功能实现

楼宇信息照明页面的主HTML框架代码如下所示：

上面的代码通过<frameset>标签将框架分成两行，第一行占框架的15%，<frame>标签中的 src 属性用于指示 frameB.html 页面的路径和文件名；第二行占框架的 85%，嵌套了<frameset>标签，该标签将页面分成两列，第一列占框架的25%，用于引入frameA.html页面，第二列占框架的75%，用于引入f_show.html页面。

frameB.html页面上显示标题，代码如下：

frameA.html页面左方为导航框架，通过在<ul>标签中嵌套<li>标签，并在<li>标签中嵌套<a>标签，可以使每个导航项成为可以单击的链接。例如，在下面的代码中，第一个导航项链接到了f_show.html页面；第二个导航项链接到了f_set.html页面；第三个导航项中的“＃”表示空链接，页面不跳转。