21、列出一个页面在设计阶段会列出的所有不同元素，并将它们按相关分组或类别归在一起。例如，对于搜索框，你可以列出以下内容：标题、导航、主要新闻文章。
# 标题
## 导航
- 本地新闻
- 国家新闻
- 世界新闻
- 政治
- 科学
- 技术
- 旅游
- 商业
- 教育
- 娱乐
## 主要文章
### 标题
主要文章标题
### 文本
这是主要文章的文本内容。
### 图片
### 阅读更多链接
[阅读更多](主要文章链接)
## 第二篇文章
### 标题
第二篇文章标题
### 文本
这是第二篇文章的文本内容。
### 图片
### 阅读更多链接
[阅读更多](第二篇文章链接)
## 第三篇文章
### 标题
第三篇文章标题
### 文本
这是第三篇文章的文本内容。
### 图片
### 阅读更多链接
[阅读更多](第三篇文章链接)
## 解释
这是固定宽度布局示例的文本。
22、使用 CSS 创建一个固定宽度页面，从以下示例代码开始完成该页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed width page design</title>
<link rel="stylesheet" type="text/css" href="exercise.css">
</head>
<body>
<div>
<div>
<h1>The London News</h1>
</div>
<div>
<a class="nav1" href="">Local News</a>
<a class="nav2" href="">National News</a>
<a class="nav3" href="">World News</a>
<a class="nav4" href="">Politics</a>
<a class="nav5" href="">Science</a>
<a class="nav6" href="">Technology</a>
<a class="nav7" href="">Travel</a>
<a class="nav8" href="">Business</a>
<a class="nav9" href="">Education</a>
<a class="nav10" href="">Entertainment</a>
</div>
<div>
<div>
<img src="images/london.jpg">
23、创建一个新页面，该页面具有链接，链接到菜单示例中的每道菜（假设菜单示例文件名为 menu.html，包含的菜分类有开胃菜、主菜、甜点，对应的页面内锚点 id 分别为 starters、mains、desserts）。然后添加一个指向 Wrox Press 主网站（www.wrox.com）的链接。
你的代码应该如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Links to menu</title>
</head>
<body>
<h1>Links to the Wrox Cafe Menu</h1>
<div>
<a href="menu.html#starters">Starters</a> |
<a href="menu.html#mains">Main courses</a> |
<a href="menu.html#desserts">Desserts</a>
</div>
<p>Wrox Cafe is a fictional cafe brought to you from
<a href="http://www.wrox.com">Wrox Press</a>
</p>
</body>
</html>
为了使其成为严格的 XHTML 1.0 文档，构成菜单的链接被放置在一个
<div>
元素中（因为所有内联元素都应该由块级元素包含），并且每个链接在文件名后使用井号（
#
），后跟
id
属性的值，以指示链接应指向页面的哪一部分。同时，指向 Wrox 网站的链接使用你会在浏览器窗口中输入的完整 URL 作为
href
属性的值。
24、重新创建一个框架集文档，当点击水果时，会在主窗口加载一个新页面，页面加载时将显示相应水果的详细信息。
该示例需要五个文件：一个框架集文档、一个导航文档、苹果页面、橙子页面、香蕉页面。
框架集文档（example1.html）代码如下：
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Fruit example</title>
</head>
<frameset cols="200, 450, *">
<frame src="frames/fruitNav.html">
导航窗格（fruitNav.html）代码如下：
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation</title>
<style type="text/css">
img {
border-style: none;
border-width: 0px;
}
</style>
</head>
<body>
<h1>Navigation</h1>
<p>Click on the fruit to find out more about it.</p>
<a href="../frames/apple.html" target="main_frame">
<img src="../images/
25、创建一个新页面，该页面具有链接，链接到其他页面中每道菜的部分。假设其他页面名为 menu.html ，其中包含 id 为 starters、mains、desserts 的部分，分别代表开胃菜、主菜和甜点。然后添加一个指向 Wrox Press 主网站（www.wrox.com）的链接。
你的代码应该如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Links to menu</title>
</head>
<body>
<h1>Links to the Wrox Cafe Menu</h1>
<div>
<a href="menu.html#starters">Starters</a> |
<a href="menu.html#mains">Main courses</a> |
<a href="menu.html#desserts">Desserts</a>
</div>
<p>Wrox Cafe is a fictional cafe brought to you from
<a href="http://www.wrox.com">Wrox Press</a>
</p>
</body>
</html>
为了使其成为严格的 XHTML 1.0 文档，构成菜单的链接被放在一个 `<div>` 元素中（因为所有内联元素都应该包含在块级元素中），并且每个链接在文件名后使用井号（`#`），后跟 id 属性的值，以指示链接应指向的页面部分。同时，指向 Wrox 网站的链接使用你会在浏览器窗口中输入的完整 URL 作为 `href` 属性的值。
26、判断四张图片将它们保存为JPEG格式还是GIF格式更有可能获得较小的文件大小。
一般来说，如果图片有大面积纯色区域、颜色种类少（少于16种颜色时4 - bit GIF文件更小），GIF格式可能文件更小；如果是摄影类图片，JPEG格式可能更适合获得较小文件大小。
27、重新创建一个框架集文档，当点击水果时，会在主窗口加载一个新页面。页面加载时，将显示相应水果的详细信息。
# 文件需求说明
需要五个文件：
- 一个框架集文档
- 一个导航文档
- 苹果页面
- 橙子页面
- 香蕉页面
## 框架集文档（example1.html）
```html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Fruit example</title>
</head>
<frameset cols="200, 450, *">
<frame src="frames/fruitNav.html">
导航窗格（fruitNav.html）
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigation</title>
<style type="text/css">
img {
border-style: none;
border-width: 0px;
}
</style>
</head>
<body>
<h1>Navigation</h1>
<p>Click on the fruit to find out more about it.</p>
<a href="../frames/apple.html" target="main_frame">
<img src="../images/
```
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
