案例3：Pasha the Painter
Pasha Poduslawa是一位独立的粉刷匠和装修专家，她想要一个网站来招揽生意。她的客户主要是大城市郊区的中产阶级房主，年龄从三十几岁到五十几岁不等。Pasha要求网站包含一个主页、一个服务页面、一个免费估价页面和一个顾客反馈页面。
广州网站建设,网站建设,广州网页设计,广州网站设计
图2.34展示了Pasha the Painter网站的站点地图。
 |
| 图2.34 Pasha the Painter站点地图 |
该站点地图描述了网站的基本架构，一个主页面和三个内容页：服务、顾客反馈和免费估价。
图2.35显示了一个示例页面布局，包括网站标识、导航区、内容区和用于显示版权信息的页脚区域。
 |
| 图2.35 Pasha the Painter页面布局 |
在本案例分析中，你有下面两个任务。
1.创建主页：index.html。
2.创建服务页：services.html。
实训案例
创建一个名为painter的文件夹来包含Pasha the Painter网站的文件。
1. 主页 要用记事本创建Pasha the Painter网站的主页，如图2.36所示。
广州网站建设,网站建设,广州网页设计,广州网站设计
 |
| 图2.36 Pasha the Painter主页(index.html) |
启动记事本并创建符合下列要求的网页。
网页 使用描述性的网页标题--公司名是商业网站的恰当选择。
网页标志 使用一级标题显示"Pasha the Painter"。再用三级标题显示公司口号："自1986起拯救北京东北郊的居民。"
导航 将以下使用了<strong>逻辑样式元素的文本放到一个段落中。
主页 | 服务 | 顾客反馈 | 免费估价
使用锚标记，使"主页"链接到index.html；"服务"链接到services.html；"顾客反馈"链接到testimonials.html，"免费估价"链接到estimates.html。
内容 添加下面这段话：我们将与您携手建造您的梦幻家庭。
再用无序列表显示以下内容。
内部粉刷
外部粉刷
墙纸移除
墙纸安装
干板墙
页脚 将以下版本信息用小字体(使用<small>物理样式元素)和强调字体样式(使用<em>逻辑样式元素)显示。
- Copyright 2010 Pasha the Painter
把你的姓名放到版权信息下面的一个电子邮件链接中。
图2.36的页面看起来有点单薄，但不用担心--随着学习的深入，页面将会变得越来越专业。页面中的空白区域可以通过在需要的地方添加<br/>标记获得。如果你的页面看起来和例子中的不是完全一样，不要担心，因为现在的目的只是练习使用XHTML。
将网页保存到painter文件夹中，命名为index.html。
2.服务页 创建如图2.37所示的"服务"页。一个提高效率的窍门是在现有页面的基础上创建新页面--这样可以从以前的工作中获益。新的服务页将使用index.html作为起点。
 |
| 图2.37 Pasha the Painter服务页(services.html) |
在记事本中打开FPasha the Painter网站的index.html页面。选择"文件"|"另存为"将文件重命名为services.html，保存到painter文件夹中。现在可以开始编辑网页了。
广州网站建设,网站建设,广州网页设计,广州网站设计
修改网页标题。将<title>和</title>标记对之间的文本改为"Pasha the Painter服务"。
删除内容段落和无序列表。
使用无序列表在网页中添加服务。配置每个服务类别的名称，加粗显示类别名称(使用<strong>逻辑样式元素)。每个类别名称后都添加一个换行。
服务类别及其描述如下。
内部装修
如果你需要粉刷、图案设计或安装墙纸，Pasha the Painter是您的最佳选择！全部内部装修项目包括：粉刷墙壁、粉刷天花板、设计图案、安装干板墙和墙纸。
外部装修
如果需要清洗、粉刷、上漆或者只是想进行简单的装饰，Pasha the Painter是您的最佳选择！全部外部装修项目包括：高压清洗、粉刷、上漆和修补。
油漆
Pasha拥有本地区最值得信赖和最专业的油漆工，只使用最高品质、最环保的油漆。
墙面覆盖
Pasha的设计团队最专业的水准安装墙纸和其他墙面覆盖物。他们甚至能根据您的装修需要和预算，帮助您选择最合适的墙面覆盖方案。
保存网页并在浏览器中测试。测试services.html中指向index.html的链接，再测试index.html中指向services.html的链接。如果链接不起作用，应该重新检查作品，特别注意下面这些细节。
检查是否已将网页以正确的名字保存到正确的文件夹中。
检查锚标记中网页文件名的拼写。
修改之后重新进行测试。
