46、网页设计与开发全攻略

Stone

于 2025-11-24 10:33:31 发布

阅读量24

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握网页设计核心文章标签：网页设计网页开发 HTML

本文链接：https://blog.youkuaiyun.com/Stone/article/details/155209554

掌握网页设计核心专栏收录该内容

47 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页设计与开发全攻略

1. 起步指南

在网页设计与开发的起始阶段，有几个关键概念需要了解。W3C（万维网联盟）在引导Web相关技术的发展中起着重要作用。前端设计主要关注网站在浏览器中呈现或与之相关的方面，而后端开发则涉及服务器上实现网站功能所需的编程。

在工具选择上，网页创作工具提供了创建整个网页的可视化界面，包括必要的 (X)HTML、CSS 和脚本；而 HTML 编辑器仅提供手动编写 (X)HTML 文档的快捷方式。

2. 网页工作原理

虽然文档中未详细阐述网页工作原理的具体细节，但我们可以简单了解到，网页的展示涉及浏览器、服务器等多个环节的交互。浏览器向服务器请求网页资源，服务器返回相应的 HTML、CSS、图片等文件，浏览器再对这些文件进行解析和渲染，最终呈现给用户。

3. 网页设计的本质

3.1 跨浏览器兼容性

不同浏览器对网页的显示和功能实现可能存在差异。为了确保在现代标准兼容的浏览器上有相似的体验，应遵循标准进行开发。同时，要保证内容对所有用户都是可访问的。

3.2 平台影响

网页在不同平台上的显示效果会受到多种因素的影响，如页面和表单元素的渲染方式、文本大小、字体和插件的可用性以及颜色的亮度等。例如，为 Windows 开发的某些技术在 Mac 或 Unix 平台上可能支持不佳。

3.3 用户设置

用户的浏览器设置会覆盖样式表中的默认设置。用户可以轻松更改字体、背景颜色和文本大小，还可以选择关闭 Java、JavaScript 和图像显示等功能。

3.4 屏幕尺寸和下载速度

由于浏览器窗口可以调整大小，无法确定网页的屏幕显示区域大小。此外，仍有相当比例（约 30%）的互联网用户使用拨号连接，因此需要优化图像、音频/视频甚至 (X)HTML 文档，以实现最快的下载速度。

4. 创建简单页面（HTML 概述）

4.1 标签和元素

标签是用于界定元素的标记的一部分，元素由内容及其标记组成。一个基本的 (X)HTML 文档的最小标记结构如下：

<html>
<head>
  <title>Title</title>
</head>
<body>
</body>
</html>

4.2 文件名规则

网页文件名有一定的规则，例如必须以 .html 或 .htm 结尾，不能包含空格、斜杠、百分号等特殊字符。以下是一些示例：
| 文件名 | 是否符合规则 |
| ---- | ---- |
| Sunflower.html | 是 |
| index.doc | 否 |
| cooking home page.html | 否 |
| Song_Lyrics.html | 是 |
| games/rubix.html | 否 |
| %whatever.html | 否 |

4.3 标记错误修正

在编写 HTML 标记时，常见的错误及修正方法如下：
- 缺少 src 属性： <img src="birthday.jpg">
- 结束标签缺少斜杠： <i>Congratulations!</i>
- 结束标签不应有属性： <a href="file.html">linked text</a>
- 斜杠应为正斜杠： <p>This is a new paragraph</p>
- 作为注释： 

4.4 示例代码

以下是一个简单的网页示例：

<html>
<head>
<title>Black Goose Bistro</title>
<style type="text/css">
body { background-color: #C2A7F2;
     font-family: sans-serif;}
h1 { color: #2A1959;
     border-bottom: 2px solid #2A1959;}
h2 { color: #474B94;
     font-size: 1.2em;}
h2, p { margin-left: 120px;} 
</style>
</head>
<body>
<h1><img src="blackgoose.gif" alt="black goose logo">Black Goose Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to 
highlight the freshest ingredients.</p>
<h2>Catering</h2>
<p>You have fun... <em>we'll handle the cooking.</em> Black Goose Catering can handle events from snacks for bridge 
club to elegant corporate fundraisers.</p>
<h2>Location and Hours</h2> 
<p>Seekonk, Massachusetts; 
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>

5. 文本标记

5.1 常用元素

Deprecated ：表示某个元素或属性正在逐步淘汰，不建议使用。
blockquote ：用于长引用或包含其他块元素的引用材料。
q ：用于短引用，不会导致换行。
ul ：无序列表，默认显示为项目符号。
ol ：有序列表，浏览器会自动插入编号。
dl ：定义列表， dt 用于标识列表中的一个术语。

5.2 属性

id ：用于标识文档中的唯一元素，其值在文档中只能出现一次。
class ：用于将多个元素分类到概念组中。

5.3 实体字符

一些常用的实体字符及其对应的符号如下：
| 实体字符 | 符号 |
| ---- | ---- |
| — | em 破折号 — |
| & | 与号 & |
| | 不换行空格 |
| © | 版权符号 © |
| • | 项目符号 • |
| ™ | 商标符号 ™ |

5.4 示例代码

以下是一个食谱页面的示例：

<html>
<head><title>Tapenade Recipe</title></head>
<body>
<h1>Tapenade (Olive Spread)</h1>
<p>This is a really simple dish to prepare and it's always a big hit at parties. My father recommends:</p>
<blockquote><p>"Make this the night before so that the flavors have time to blend. Just bring it up to room 
temperature before you serve it. In the winter, try serving it warm."</p></blockquote>
<h2>Ingredients</h2>
<ul>
  <li>1 8oz. jar sundried tomatoes</li>
  <li>2 large garlic cloves</li>
  <li>2/3 c. kalamata olives</li>
  <li>1 t. capers</li>
</ul>
<h2>Instructions</h2>
<ol>
  <li>Combine tomatoes and garlic in a food processor. Blend until as smooth as possible.</li>
  <li>Add capers and olives. Pulse the motor a few times until they are incorporated, but still retain some 
texture.</li>
  <li>Serve on thin toast rounds with goat cheese and fresh basil garnish (optional).</li>
</ol>
</body>
</html>

6. 添加链接

在网页中添加链接可以使用 <a> 标签，其基本语法为 <a href="目标地址">链接文本</a> 。以下是一些链接示例：

<a href="tutorial.html">...</a>
<a href="examples/instructions.html">...</a>
<a href="examples/french/family.html">...</a>
<a href="/examples/german/numbers.html">...</a>
<a href="../index.html">...</a>
<a href="http://www.learningwebdesign.com">...</a>
<a href="../instructions.html">...</a>
<a href="../../index.html">...</a>

以下是一些添加链接的练习示例：

<li><a href="http://www.epicurious.com">Epicurious</a></li>
<p><a href="index.html">Back to the home page</a></p>
<li><a href="recipes/tapenade.html">Tapenade (Olive Spread)</a></li>

7. 添加图像

7.1 必要属性

在 HTML 中添加图像时， src 和 alt 属性是必需的，以确保文档的有效性。 src 属性指定图像的源文件地址， alt 属性提供图像的替代文本，当图像不可用或无法查看时，该文本可以提高可访问性。例如： <img src="furry.jpg" alt="" />

7.2 图像缺失原因

图像缺失可能由以下三个原因导致：
1. URL 错误，浏览器可能在错误的位置查找或查找错误的文件名（文件名区分大小写）。
2. 图像文件格式不可接受。
3. 图像文件名没有使用正确的后缀（如 .gif、.jpg 或 .png）。

7.3 示例代码

以下是一个包含图像链接的网页示例：

<h2>Pozzarello</h2>
<p><a href="window.html"><img src="thumbnails/window_100.jpg" alt="view from the bedroom window" width="75" 
height="100"></a></p>
<p>The house we stayed in was called Pozzarello and it was built around the year 1200 as the home of the 
gardner who tended the grounds of the adjacent castle. The thick walls kept us nice and cool inside, despite 
the blistering mid-day heat. This is the view from our bedroom window.</p>

8. 基本表格标记

8.1 表格元素

一个完整的表格通常包含以下元素：
- table ：表格本身。
- tr ：表格行。
- th ：表头单元格。
- td ：数据单元格。
- caption （可选）：表格标题。

8.2 表格布局

专业设计师现在不再使用表格进行页面布局，因为表格在语义上不正确，可能会变得过于复杂，成为可访问性的障碍，而样式表现在已经有了更好的替代方案。

8.3 标题和摘要

caption 用于短标题，会在浏览器中显示； summary 用于较长的描述，不会显示，但可能会被屏幕阅读器朗读。

8.4 表格错误修正

以下是一些常见的表格标记错误及修正方法：
1. 标题应是表格元素内的第一个元素。
2. 表格元素内不能直接包含文本，必须放在 th 或 td 中。
3. th 元素必须放在 tr 元素内。
4. 没有 colspan 元素，应使用 td 并设置 colspan 属性。
5. 第二个 tr 元素缺少结束标签。

8.5 示例代码

以下是几个表格示例：

<table>
   <tr>
      <th>Album</th>
      <th>Year</th>
   </tr>
   <tr>
      <td>Rubber Soul</td>
      <td>1965</td>
   </tr>
   <tr>
      <td>Revolver</td>
      <td>1966</td>
   </tr>
   <tr>
      <td>Sgt. Pepper's</td>
      <td>1967</td>
   </tr>
   <tr>
      <td>The White Album</td>
      <td>1968</td>
   </tr>
   <tr>
      <td>Abbey Road</td>
      <td>1969</td>
   </tr>
</table>

<table>
   <tr>
      <td colspan="3">The Sunday Night Movie</td>
   </tr>
   <tr>
      <td>Perry Mason</td>
      <td>Candid Camera</td>
      <td>What’s My Line?</td>
   </tr>
   <tr>
      <td>Bonanza</td>
      <td colspan="2">The Wackiest Ship in the Army</td>
   </tr>
</table>

9. 表单

9.1 表单提交方法

不同类型的表单应根据具体需求选择合适的提交方法：
- 在线银行账户访问表单：使用 POST 方法，因为涉及安全问题。
- 发送 T 恤设计图到打印机的表单：使用 POST 方法，因为使用了文件选择输入类型。
- 搜索存档文章的表单：使用 GET 方法，方便书签搜索结果。
- 收集文章参赛作品的表单：使用 POST 方法，可能包含长文本输入。

9.2 表单控件元素

不同的任务适合使用不同的表单控件元素：
| 任务 | 适合的表单控件元素 |
| ---- | ---- |
| 从 12 个星座中选择星座 | 下拉菜单 ( <select> ) |
| 表明是否有心脏病史（是或否） | 单选按钮 ( <input type="radio"> ) |
| 撰写书评 | 文本区域 ( <textarea> ) |
| 从 8 种口味的冰淇淋中选择喜欢的口味 | 8 个复选框或下拉菜单 |
| 从 25 种口味的冰淇淋中选择喜欢的口味 | 滚动菜单 ( <select multiple="multiple"> ) |

9.3 表单标记错误

以下是一些常见的表单标记错误及修正方法：
- <input name="gender" value="Male" /> ：缺少 type 属性。
- <checkbox name="color" value="teal" /> ： checkbox 不是元素名称，应使用 <input type="checkbox"> 。
- <select name="popsicle"> <option value="orange" /> <option value="grape: /> <option value="cherry" /> </select> ： option 元素不是空元素，应包含每个选项的值，如 <option>Orange</option> 。
- <input type="password" /> ：缺少必需的 name 属性。
- <textarea name="essay" height="6" width="100">Your story.</textarea> ：文本区域的宽度和高度应使用 cols 和 rows 属性指定。

9.4 示例代码

以下是一个竞赛参赛表单的示例：

<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Contest Entry Form</title>
<style type="text/css">
  ol, ul { list-style-type: none;}
</style>
</head>
<body>
<h1>"Pimp My Shoes" Contest Entry Form</h1>
<p>Want to trade in your old sneakers for a custom pair of Forcefields? Make a case for why your shoes have 
got to go and you may be one of ten lucky winners.</p>
<form action="http://www.learningwebdesign.com/contest.php" method="post">
<fieldset>
<legend>Contest Entry Information</legend>
<ol>
<li><label for="name">Name:</label> <input type="text" name="name" id="name" /></li>
<li><label for="city">City:</label> <input type="text" name="city" id="city" /></li>
<li><label for="state">State:</label> <input type="text" name="state" id="state" /></li>
<li><label for="story">My shoes are SO old...</label><br />
<textarea name="story" rows="4" cols="60" maxlength="300" id="story">(Your entry must be no more than 300 
characters long.)</textarea></li>
</ol>
</fieldset>
<h2>Design your custom Forcefields:</h2>
<fieldset>
<legend>Custom shoe design</legend>
<fieldset>
<legend>Color</legend>
<ul>
  <li><label><input type="radio" name="color" value="red" /> Red</label></li>
  <li><label><input type="radio" name="color" value="blue" /> Blue</label></li>
  <li><label><input type="radio" name="color" value="black" /> Black</label></li>
  <li><label><input type="radio" name="color" value="silver" /> Silver</label></li>
</ul>
</fieldset>
<fieldset>
<legend>Features <em>(Choose as many as you want)</em></legend>
<ul>
  <li><label><input type="checkbox" name="features" value="laces" /> Sparkley laces</label></li>
  <li><label><input type="checkbox" name="features" value="logo" /> Metallic logo</label></li>
  <li><label><input type="checkbox" name="features" value="heels" /> Light-up heels</label></li>
  <li><label><input type="checkbox" name="features" value="mp3" /> MP3-enabled</label></li>
</ul>
</fieldset>
<fieldset>
<legend>Size</legend>
<label for="size">(sizes reflect standard men's sizes):</label> 
   <select name="size" id="size">
       <option>5</option>
       <option>6</option>
       <option>7</option>
       <option>8</option>
       <option>9</option>
       <option>10</option>
       <option>11</option>
       <option>12</option>
       <option>13</option>
   </select>
</fieldset>
</fieldset>
<p><input type="submit" value="Pimp my shoes!" />  <input type="reset" /></p>
</form>
</body>
</html>

10. 理解标准

10.1 浏览器战争

Netscape Navigator 和 Microsoft Internet Explorer 是浏览器战争中的主要参与者。

10.2 HTML 和 XHTML 版本

HTML 4.01 Transitional 包含已从严格版本中移除的弃用的表示元素和属性。
HTML 4.01 Strict 和 XHTML 1.0 Strict 在三个 DTD 版本中列出的元素和属性相同，但 XHTML 是一种 XML 语言，具有更严格的语法要求。

10.3 XHTML 语法要求

XHTML 的主要语法要求如下：
- 元素和属性名称必须为小写。
- 所有元素必须关闭（终止），包括空元素。
- 属性值必须用引号括起来。
- 所有属性必须有明确的属性值。
- 元素必须正确嵌套。
- 特殊字符必须使用字符实体。
- 使用 id 而不是 name 作为标识符。
- 脚本必须包含在 CDATA 部分。

10.4 区分 HTML 和 XHTML

通过一些标记示例可以判断是 HTML 还是 XHTML：
| 标记示例 | 类型 |
| ---- | ---- |
| <IMG SRC="panda.jpg" ALT="panda eating leaves"> | HTML |
| <img src="orchid.jpg" alt="orchid" width=100 height=150 > | HTML |
| <img src="flipflop.gif" alt="closeup of foot in sandal" /> | XHTML |

10.5 XHTML 的优势

XHTML 具有 XML 的优点，包括可以与其他 XML 语言结合使用、可以被任何 XML 解析软件解析和使用、可以将 XML 应用程序的信息转换为网页等。它还符合未来的 Web 技术，要求更好的编码实践，对可访问性和手持设备的使用更友好。

10.6 字符编码

ISO 8859 - 1 是西文语言中常用的 256 个字符的字符编码。

10.7 示例代码

以下是一个将 HTML 转换为 XHTML 的示例：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Popcorn &amp; Butter</title>
</head>
<body>
<h1>Hot Buttered Popcorn</h1>
<p><img src="popcorn.jpg" alt="bowl of popcorn" width="250" height="125" /></p>
<h2>Ingredients</h2>
<ul>
  <li>popcorn</li>
  <li>butter</li>
  <li>salt</li>
</ul>
<h2>Instructions</h2>
<p>Pop the popcorn. Meanwhile, melt the butter. Transfer the popped popcorn into a bowl, drizzle with melted 
butter, and sprinkle salt to taste.</p>
</body>
</html>

11. CSS 入门

11.1 选择器、属性和值

在 CSS 中，选择器用于选择要应用样式的元素，属性定义要设置的样式，值则是属性的具体设置。例如：

selector: blockquote, property: line-height, value: 1.5, declaration: line-height: 1.5

11.2 样式冲突解决

当存在权重相同的冲突规则时，样式表中最后列出的规则将被使用。

11.3 常见错误及修正

以下是一些常见的 CSS 错误及修正方法：
- p {font-face: sans-serif; font-size: 1em; line-height: 1.2em;} ：缺少分号。
- blockquote { font-size: 1em; line-height: 150%; color: gray; } ：每个声明周围不应该有花括号，应该只在整个声明块周围有花括号。
- body {background-color: black; color: #666; margin-left: 12em; margin-right: 12em;} ：正确的写法。
- p, blockquote, li {color: white;} ：可以使用分组元素类型选择器来处理。
- <strong style="color: red">Act now!</strong> ：内联样式缺少属性名。

11.4 示例代码

以下是一个简单的 CSS 样式示例：

div#intro { color: red; }

12. 文本格式化

12.1 选择器应用

可以使用不同的选择器来格式化文本，例如：
| 选择需求 | CSS 代码 |
| ---- | ---- |
| 文档中的所有文本元素 | body {color: red;} |
| h2 元素 | h2 {color: red;} |
| h1 元素和所有段落 | h1, p {color: red;} |
| 属于 “special” 类的元素 | .special {color: red;} |
| “intro” 部分的所有元素 | #intro {color: red;} |
| “main” 部分的 strong 元素 | #main strong {color: red;} |
| “main” 部分之后的段落（在 Internet Explorer 6 中可能不适用） | h2 + p {color: red;} |

12.2 文本样式设置

以下是一些常见的文本样式设置及其示例：
| 样式设置 | CSS 代码 |
| ---- | ---- |
| 字体大小为 1.5em | {font-size: 1.5em;} |
| 文本首字母大写 | {text-transform: capitalize;} |
| 文本右对齐 | {text-align: right;} |
| 字体为 Verdana，大小为 1.5em | {font-family: Verdana; font-size: 1.5em;} |
| 字母间距为 3px | {letter-spacing: 3px;} |
| 字体为粗体斜体，大小为 1.2em，Verdana 字体 | {font: bold italic 1.2em Verdana;} |
| 文本全部大写 | {text-transform: uppercase;} |
| 文本缩进 2em | {text-indent: 2em;} |
| 字体变体为小型大写字母 | {font-variant: small-caps;} |

12.3 示例代码

以下是一个综合的文本格式化样式示例：

<style type="text/css">
body { font-family: Georgia, serif; 
  font-size: small;
  line-height: 175%; }
h1 { font-size: 1.5em; 
   color: purple;}
dt { font-weight: bold; }
strong { font-style: italic; }
h2 { font: bold 1em Georgia, serif; 
  text-transform: uppercase; 
  letter-spacing: 8px;
  color: purple;}
dt strong { color: maroon; }
#header p { 
  font-style: italic; 
  color: gray;}
#header, h2, #appetizers p, #appetizers p { text-align: center; }
#appetizers p, #appetizers p { font-style: italic; }
.price {
  font-style: italic;
  font-family: Georgia, serif; }
.label {
  font-weight: bold;
  font-variant: small-caps;
  font-style: normal; }
p.warning, sup { 
  font-size: x-small;
  color: red;}
</style>

13. 颜色和背景

13.1 颜色表示

文档中提到了一些颜色相关的内容，如 rgb(FF, FF, FF) 这样的颜色表示方式，但正确的应该是 rgb(255, 255, 255) 表示白色。

13.2 颜色对应关系

存在一些颜色相关的对应关系，例如：
| 选项 | 对应关系 |
| ---- | ---- |
| a | –5 |
| b | –1 |
| c | –4 |
| d | –6 |
| e | –2 |
| f | –3 |

13.3 示例代码

以下是一个设置颜色和背景的 CSS 样式示例：

<style type="text/css">
   body {margin-left: 10%; margin-right: 10%; background-color: #BBE09F;}
   div#titlepage { padding: 1em; background-color: #D4F8B9;}
   div#titlepage p {text-align: center; font-variant: small-caps;}
   p {text-align: justify;}
   h1,h2,h3,h4,h5,h6 {text-transform: uppercase; text-align: center;}
   h1 { color:#C30;}
   h2 { color:#630;}
   a:link {color:#030;}
   a:visited {color:#363;}
   a:hover {color:#030; background-color:#87B862; text-decoration:none;}
   a:active {color:#C30;}
</style>

14. 盒模型思考

14.1 盒模型属性

盒模型的一些常见属性设置如下：
- border: double black medium; ：设置边框为双实线，黑色，中等宽度。
- overflow: scroll; ：设置溢出内容时显示滚动条。
- padding: 2em; ：设置内边距为 2em。
- padding: 2em; border: 4px solid red; ：设置内边距为 2em，边框为 4px 红色实线。
- margin: 2em; border: 4px solid red; ：设置外边距为 2em，边框为 4px 红色实线。
- padding: 1em 1em 1em 6em; border: 4px dashed; margin: 1em 6em; 或 padding: 1em; padding-left: 6em; border: 4px dashed; margin: 1em 6em; ：设置内边距和外边距，并设置虚线边框。
- padding: 1em 50px; border: 2px solid teal; margin: 0 auto; ：设置内边距、边框，并使元素水平居中。

14.2 示例代码

以下是一个综合的盒模型样式示例：

<style type="text/css">
body {
  margin-left: 12%;
  margin-right: 12%;
  font: 76% Verdana, sans-serif;
  background: #FCF191 url(images/top-background.gif) repeat-x; }
/* styles for the intro section */
#intro {
  margin: 3em 0;
  text-align: center; }
#intro h1 {
  font-size: 1.5em;
  color: #F26521; }
#intro img {
  vertical-align: middle; }
#intro p {
  font-size: 1.2em; }
/* styles for the testimonials box */
#testimonials {
  width: 500px;
  margin: 2em auto;
  border: 1px dashed #F26521;
  padding: 1em;
  padding-left: 60px;
  background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top;
  line-height: 1.2em; }
#testimonials h2 {
  font-size: 1em;
  text-transform: uppercase;
  color: #F26521;
  letter-spacing: 3px; }
/* styles for the products section */
#products {
  border: double #FFBC53;
  padding: 2em;
  background-color: #FFF;
  line-height: 2em;}
#products h2 {
  margin-top: 3em;
  border-left: 3px solid;
  border-top: 1px solid;
  padding-left: 1em;
  font-size: 1.2em;
  color: #921A66;}
#products h2.first { margin-top: 0; }
/* link styles */
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  border-bottom: 1px dotted;
  padding-bottom: .25em;}
a:link, a:active {
  color: #CC0000;}
a:visited {
  color: #921A66; }
a:hover {
  background-color: #FCF191;
  color: #921A66; }
/* miscellaneous styles */
em { color: #F26521; }
p#copyright {
  color:#663333; 
  font-size: 10px;
  text-align: center; }
</style>

15. 浮动和定位

15.1 浮动规则

浮动元素相对于包含元素的内容区域定位（而不是内边距边缘）。
浮动元素不使用偏移属性，因此没有必要包含 right 。

15.2 清除浮动

可以使用 clear 属性来清除浮动，例如 div#footer { clear: both; } 可以使页脚 div 从浮动侧边栏下方开始。

15.3 定位类型

不同的元素可以使用不同的定位类型，如绝对定位、固定定位、相对定位、静态定位等。例如：
| 选项 | 定位类型 |
| ---- | ---- |
| A | 绝对定位 |
| B | 绝对定位，固定定位 |
| C | 固定定位 |
| D | 相对定位，绝对定位，固定定位 |
| E | 静态定位 |
| F | 相对定位 |
| G | 绝对定位，固定定位 |
| H | 相对定位，绝对定位，固定定位 |
| I | 相对定位 |

15.4 宽度计算

侧边栏 div 的外边缘到外边缘宽度为 292 像素（对于 IE - Win 5 和 5.5，宽度应设置为 242px）。

16. 使用 CSS 进行页面布局

16.1 布局类型

页面布局可以分为固定布局、弹性布局和流式布局，不同的布局类型适用于不同的场景：
| 布局类型 | 对应选项 |
| ---- | ---- |
| 固定布局 | c |
| 流式布局 | a |
| 弹性布局 | b |

16.2 布局选择

在不同的需求下，可以选择不同的布局方式：
- 全宽页脚：使用浮动布局。
- 不改变源顺序：使用定位布局。
- 无需担心重叠问题：使用浮动布局。

17. CSS 技术

17.1 显示属性

display 属性用于指定元素框在布局中的处理方式，例如作为块元素从新行开始，或作为内联元素留在文本流中。

17.2 隐藏元素

display: none ：元素完全从正常流中移除，其占用的空间会被关闭。
visibility: hidden ：元素不可见，但在正常流中占用的空间仍然存在。

17.3 列表项处理

可以使用 display 属性将列表项转换为内联元素，或使用浮动将它们排列在一侧。

17.4 伪类选择器

:hover 伪类选择器用于指定鼠标悬停在元素（通常是链接）上时的样式。

17.5 示例代码

以下是几个不同设计的 CSS 样式示例：

设计 A

<style type="text/css">
body {margin: 100px;}
table { 
  font-family: verdana, sans-serif; 
  font-size: 76%; 
  border-collapse: separate;
  border-spacing: 4px;
  width: 550px;}
th { text-align: left;
  color: white;
  background: olive;
  vertical-align: bottom;
  padding: 3px 12px 3px 3px; }
td { padding: 6px 12px 6px 3px;
  vertical-align: top;
  border: 1px olive solid; }
.filename { font-style: italic; }
tr.odd { background-color: #F3F3A6;}
tr.even { background-color: #D4D4A2;}
</style>

设计 B

<style type="text/css">
body {margin: 100px;}
table { 
  font-family: verdana, sans-serif; 
  font-size: 76%; 
  width: 550px;
  border-collapse: collapse; }
td { padding: 6px 12px 6px 3px;
  vertical-align: top;
  border-bottom: 1px olive solid; }
th { text-align: left;
  color: white;
  background: olive;
  vertical-align: bottom;
  padding: 3px 12px 3px 3px;}
tr.odd { background-color: #F3F3A6;}
tr.even { background-color: #D4D4A2;}
</style>

设计 A（另一个示例）

<style type="text/css">
body {font-family: Verdana, sans-serif;
  margin: 0;}
h1#ds {
  text-indent: -5000px;
  background: url(images/designerrific_trans.gif) no-repeat;
  width: 360px;
  height: 70px;
  margin: 0;
  position: absolute;
  top: 25px;
  left: 25px;}
ul#nav {
  list-style-type: none;
  margin: 0;
  position: absolute;
  top: 65px;
  right: 25px;}
ul#nav li { display: inline;}
ul#nav li a {
  background-color: #0A6D73;
  border: 1px solid #FFF;
  color: white;
  font-size: 76%;
  text-decoration: none;
  text-align: center; 
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 20px;
  margin: 0px 2px;}
ul#nav li a:hover {
  background-color: #F8409C;
  border: 1px solid #600; }
#header {
  position: relative;
  background: #9cd8cd;
  border-bottom: 3px double #600;
  height: 100px;}
</style>

设计 B（另一个示例）

<style type="text/css">
body {font-family: Verdana, sans-serif;
  margin: 0;}
h1#ds {
  text-indent: -5000px;
  background: url(images/designerrific_trans.gif) no-repeat;
  width: 360px;
  height: 70px;
  margin: 0;
  position: absolute;
  top: 25px;
  left: 25px; }
ul#nav {
  list-style-type: none;
  margin: 0;
  position: absolute;
  top: 65px;
  right: 25px; }
ul#nav li {
  display: inline; }
ul#nav li a {
  color: #1A7E7B;
  font-size: 76%;
  text-decoration: none;
  text-align: center; 
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 20px;
  margin: 0px 2px;
  background: url(images/star-white.gif) left center no-repeat; }
ul#nav li a:hover {
  background: url(images/star-pink.gif) left center no-repeat; }
#header {
  position: relative;
  background: #9cd8cd;
  border-bottom: 3px double #600;
  height: 100px; }
</style>

18. 网页图形基础

18.1 图像授权

可以通过授权获得图像的独家使用权，以防止竞争对手在其网站上使用相同的照片。

18.2 分辨率

ppi 表示 “每英寸像素数”，是衡量分辨率的指标。例如，7 英寸、72ppi 的图像宽度仅为 504 像素，适合网页显示；而 4 英寸、300ppi 的图像宽度为 1200 像素，对于大多数网页来说太宽了。

18.3 颜色模式

索引颜色是一种存储图像颜色信息的模式，将每个像素颜色存储在颜色表中。GIF 和 8 位 PNG 格式是索引颜色图像。
8 位图形有 256 种颜色，5 位图形有 32 种颜色。

18.4 图像格式特点

GIF 可以包含动画和透明度，而 JPEG 不能。
JPEG 使用有损压缩，每次保存图像时都会丢失图像数据，因此要保留高质量的原始图像，并根据需要保存 JPEG 副本。
PNG 可以存储 8 位索引颜色、RGB 颜色（24 位和 48 位）和 16 位灰度图像。
二进制透明度中，像素要么完全透明，要么完全不透明；Alpha 透明度允许有多达 256 级的透明度。

18.5 图像格式选择

根据图像的特点选择合适的格式：
| 图像特点 | 合适的格式 |
| ---- | ---- |
| 文本、纯色和硬边 | GIF 或 PNG - 8 |
| 照片 | JPEG |
| 有部分照片区域，但大部分是纯色和硬边 | GIF 或 PNG - 8 |
| 平面图形图像 | GIF 或 PNG - 8 |
| 照片 | JPEG |

19. 精简网页图形

19.1 图形文件大小

较小的图形文件意味着更短的下载和显示时间，这对于提升用户对网站的体验至关重要。

19.2 GIF 优化

抖动会引入斑点图案，干扰相同像素的连续排列，导致 GIF 压缩方案对有抖动的区域压缩效率不如纯色区域。
图像中的像素颜色越少，生成的 GIF 文件越小，因为图像可以以较低的位深度存储，并且有更多相似颜色的区域可供 GIF 压缩。

19.3 JPEG 优化

压缩设置是控制 JPEG 文件大小最有效的工具。JPEG 压缩在平滑或模糊区域效果较好，因此引入轻微模糊可以使 JPEG 压缩更有效，从而减小文件大小。

19.4 PNG 优化

对于 PNG - 8，可以通过设计纯色、减少颜色数量和避免抖动来进行优化。而 PNG - 24 是为无损压缩存储图像设计的，没有特定的优化策略。

20. 网页开发流程

20.1 网站规划

网站示意图有助于规划和可视化网站上信息的组织方式，应在设计过程的早期完成，一旦确定了网站的内容和功能，它就成为整个生产团队的重要参考。
外观和感觉研究是为网站提出图形样式的草图或一系列草图，重点关注网站的外观而非功能。

20.2 生产前准备

在开始生产之前，需要确定许多事项，包括确定网站的创意和策略、了解目标受众信息、生成内容、组织网站内容、创建反映组织的网站示意图、创建线框示意图以展示页面布局和功能，以及开发图形外观和感觉。

20.3 测试和发布

测试阶段，至少要确保所有内容都存在且可访问，没有错别字或错误，所有链接都正常工作，图像可见，脚本和应用程序正常运行。此外，还需要在各种浏览环境和条件下测试网站的外观和性能。
网站的 beta 版本结合了初始 alpha 原型的更改，接近网站的工作版本。至少会邀请客户进行审查，有些网站还会向更广泛的受众提供 beta 版本。

21. 将页面发布到网络

21.1 准备工作

将网页发布到网络需要完成以下准备工作：
| 步骤 | 描述 |
| ---- | ---- |
| 1 | 连接到互联网 |
| 2 | 查看域名是否可用 |
| 3 | 注册域名 |
| 4 | 获取 Web 服务器空间 |

21.2 访问方式

可以通过数字 IP 地址和域名访问网页。

21.3 本地和远程文件

可以打开存储在本地硬盘上的文件，而存储在外部计算机或服务器上的页面称为远程页面。

21.4 FTP 上传

使用 FTP 上传文件时，需要知道服务器名称、登录名和密码，可能还需要知道根目录名称和 FTP 传输类型。上传图形和音频文件时应选择 “二进制” 或 “原始数据” 模式，HTML 文件应选择 “文本” 或 “ASCII” 模式。在 FTP 客户端中选择要上传的目录。

21.5 免费发布的限制

免费发布网页可能需要接受页面上的广告，对发布的内容类型可能有限制，对页面布局和导航的控制有限，通常无法获得自己的域名。

22. CSS2.1 选择器

22.1 选择器类型

CSS2.1 中有多种选择器类型，以下是一些常见的选择器及其描述：
| 选择器 | 选择器类型 | 描述 |
| ---- | ---- | ---- |
| * | 通用选择器 | 匹配任何元素 |
| A | 元素类型选择器 | 匹配元素名称 |
| A, B | 分组选择器 | 匹配元素 A 和 B |
| A B | 后代选择器 | 仅当元素 B 是元素 A 的后代时匹配 |
| A>B | 子选择器 | 匹配元素 A 的直接子元素 B |
| A+B | 相邻兄弟选择器 | 匹配紧跟在元素 A 后面的元素 B |
| .classname | 类选择器 | 匹配所有具有指定类属性值的元素 |
| #idname | ID 选择器 | 匹配具有指定 ID 属性值的元素 |
| A[att] | 简单属性选择器 | 匹配具有指定属性的元素 A |
| A[att=”val”] | 精确属性值选择器 | 匹配具有指定属性且属性值等于指定值的元素 A |
| A[att~=”val”] | 部分属性值选择器 | 匹配具有指定属性且属性值包含指定值的元素 A |
| A[att|=”val”] | 连字符前缀属性选择器 | 匹配具有指定属性且属性值等于或以指定值开头的元素 A |
| a:link | 伪类选择器 | 指定未访问链接的样式 |
| a:visited | 伪类选择器 | 指定已访问链接的样式 |
| :active | 伪类选择器 | 指定用户激活元素（如点击链接）时的样式 |
| :focus | 伪类选择器 | 指定当前具有输入焦点的元素的样式 |
| :hover | 伪类选择器 | 指定鼠标悬停在元素上时的样式 |
| :lang(xx) | 伪类选择器 | 选择匹配双字符语言代码的元素 |
| :first-child | 伪类选择器 | 选择文档流中其父元素的第一个子元素 |
| :first-letter | 伪元素选择器 | 选择指定元素的第一个字母 |
| :first-line | 伪元素选择器 | 选择指定元素的第一行 |
| :before | 伪元素选择器 | 在指定元素的开头插入生成的文本并应用样式 |
| :after | 伪元素选择器 | 在指定元素的结尾插入生成的内容并应用样式 |

22.2 示例代码

以下是一些选择器的使用示例：

* {font-family: serif;}
div {font-style: italic;}
h1, h2, h3 {color: blue;}
blockquote em {color: red;}
div.main>p {line-height: 1.5;}
p+ul {margin-top: 0;}
p.credits {font-size: 80%;}
#intro {font-weight: bold;}
table[border] {background: white;}
table[border="3"] {background: yellow;}
table[class~="example"] {background: yellow;}
a[lang|="en"] {background-image: url(en_icon.png);}
a:link {color: maroon;}
a:visited {color: gray;}
a:active {color: red;}
input[type="text"]:focus {background: yellow;}
a:hover {text-decoration: underline;}
a:lang(de) {color: green;}
p:first-child {line-height: 2em;}
p:first-letter {font-size: 4em;}
blockquote: first-line {letter-spacing: 4px;}
p.intro:before {content: "start here"; color: gray;}
p.intro:after {content: "fini"; color: gray;}

综上所述，网页设计与开发是一个综合性的过程，涉及 HTML、CSS、JavaScript 等多种技术，以及网站规划、图形设计、测试和发布等多个环节。通过遵循标准、优化代码和图形、进行充分的测试，可以创建出功能强大、用户体验良好的网页。

23. 总结与实践建议

23.1 关键要点回顾

在网页设计与开发的整个过程中，我们涉及了众多关键技术和概念。从基础的 HTML 标签和元素，到 CSS 的样式设置，再到网页图形的处理和网站的发布，每个环节都至关重要。以下是一些关键要点的总结：
- HTML 基础 ：了解了标签、元素、属性的正确使用，以及文件名的规范和 HTML 文档的基本结构。
- CSS 样式 ：掌握了选择器、属性和值的运用，能够对文本、颜色、背景、盒模型等进行样式设置，还学会了浮动、定位和不同的布局方式。
- 网页图形 ：知道了不同图像格式的特点，以及如何根据图像特点选择合适的格式，并对图形文件进行优化。
- 网站开发流程 ：熟悉了网站规划、生产前准备、测试和发布的各个阶段。

23.2 实践建议

为了更好地掌握这些知识和技能，以下是一些实践建议：
1. 多做练习 ：通过实际编写代码来巩固所学的知识。可以从简单的页面开始，逐渐增加复杂度。例如，先创建一个简单的个人介绍页面，然后尝试添加链接、图像、表格和表单等元素。
2. 参考优秀案例 ：研究一些优秀的网页设计案例，学习它们的布局、色彩搭配和交互设计。可以通过查看知名网站或设计博客来获取灵感。
3. 持续学习 ：网页技术不断发展，新的标准和框架不断涌现。保持学习的热情，关注行业动态，学习新的技术和技巧。
4. 进行测试 ：在开发过程中，要经常进行测试，确保网页在不同浏览器和设备上都能正常显示和使用。可以使用浏览器开发者工具来进行调试。
5. 优化性能 ：注意优化网页的性能，包括图像压缩、代码精简和减少 HTTP 请求等。这可以提高网站的加载速度，提升用户体验。

23.3 未来趋势展望

随着技术的不断进步，网页设计与开发也在不断演变。以下是一些未来可能的趋势：
- 响应式设计 ：随着移动设备的普及，响应式设计将变得更加重要。网页需要能够在不同尺寸的屏幕上自适应显示。
- 人工智能和机器学习 ：人工智能和机器学习技术可能会应用于网页设计和开发中，例如自动生成布局、个性化推荐等。
- 虚拟现实和增强现实 ：虚拟现实和增强现实技术可能会为网页带来全新的交互体验，例如创建沉浸式的虚拟场景。
- 渐进式 Web 应用（PWA） ：PWA 结合了网页和原生应用的优点，提供离线支持、推送通知等功能，未来可能会得到更广泛的应用。

23.4 流程图：网页开发完整流程

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px

    A([开始]):::startend --> B(网站规划):::process
    B --> C(需求分析):::process
    C --> D(内容创作):::process
    D --> E(页面设计):::process
    E --> F(HTML 编码):::process
    F --> G(CSS 样式设置):::process
    G --> H(添加交互功能):::process
    H --> I(图形处理与优化):::process
    I --> J(测试与调试):::process
    J --> K{是否通过测试?}:::process
    K -->|否| F
    K -->|是| L(网站发布):::process
    L --> M(持续维护与更新):::process
    M --> N([结束]):::startend

这个流程图展示了一个完整的网页开发流程，从网站规划开始，经过需求分析、内容创作、设计、编码、测试等环节，最终发布并进行持续维护。这有助于我们在实际开发中更好地组织和管理项目。

23.5 表格：常见问题及解决方案

问题	解决方案
图像无法显示	检查图像的 URL 是否正确，确保图像文件存在且格式正确，文件名后缀是否符合要求。
网页在不同浏览器显示不一致	使用标准的 HTML 和 CSS 代码，避免使用特定浏览器的私有属性。进行跨浏览器测试，针对不同浏览器进行适当的样式调整。
网站加载速度慢	优化图像文件大小，压缩代码，减少 HTTP 请求，使用 CDN 加速。
表单提交失败	检查表单的提交方法（GET 或 POST）是否正确，确保服务器端脚本能够正确处理表单数据。

通过总结这些常见问题及解决方案，可以帮助我们在开发过程中快速解决遇到的问题，提高开发效率。

总之，网页设计与开发是一个充满挑战和机遇的领域。通过不断学习和实践，我们可以掌握这些技术，创造出优秀的网页作品。希望这些知识和建议能够对你有所帮助，祝你在网页开发的道路上取得成功！