案例2：Fish Creek动物医院
Magda Patel是一名兽医，经营着Fish Creek动物医院，她的客户包括当地饲养宠物的老人和孩子们。Magda想建一个网站，为她现在和未来的客户提供信息。她要求一个主页、一个服务页面、一个"兽医咨询"页面和一个联系方式页面。
图2.30展示了Fish Creek动物医院网站的站点地图。
 |
| 图2.30 Fish Creek站点地图 |
该站点地图描述了网站的基本架构，一个主页和三个内容页面：服务、兽医咨询和联系。
图2.31展示了网站的示例布局，包括网站标识、导航区、内容区和用于显示版权信息的页脚区域。
 |
| 图2.31 Fish Creek页面布局 |
在本案例分析中，你有下面两个任务。
1. 创建主页：index.html。
2.创建服务页：services.html。
实训案例
创建一个名为fishcreek的文件夹来包含Fish Creek网站的文件。
1.主页 要用记事本创建Fish Creek动物医院网站的主页，如图2.32所示。
广州网站建设,网站建设,广州网页设计,广州网站设计
 |
| （点击查看大图）图2.32 Fish Creek主页(index.html) |
启动记事本并创建符合下列要求的网页。
网页 使用描述性的网页标题--公司名是商业网站的恰当选择。
网页标志 使用一级标题显示"Fish Creek动物医院"。
导航 将以下使用了<strong>逻辑样式元素的文本放到一个段落中。
主页 | 服务 | 兽医咨询 | 联系方式
使用锚标记，使"主页"链接到index.html；"服务"链接到services.html；"兽医咨询"链接到askvet.html，"联系方式"链接到contact.html。
内容 使用定义列表格式显示以下内容。
24小时服务
兽医和工作人员一周7天，每天24小时为您服务。
丰富的从业经验
自1984年起，Fish Creek的兽医就开始为您的宠物提供高品质的、可以信赖的医疗服务。
门户开放策略
我们的专业人员欢迎不管在任何时候，宠物主人和他们的宠物呆在一起。
联系信息 在定义列表下方添加地址和电话号码信息。提示：用换行标记帮助配置这个区域。注意使用<small>物理样式元素配置文本大小。
100084 中国北京市海淀区
清华大学二校门东侧
010-88888888
页脚 将以下版本信息用小字体(使用<small>物理样式元素)和强调字体样式(使用<em>逻辑样式元素)显示。
- Copyright? 2010 Fish Creek动物医院
把你的姓名放到版权信息下面的一个电子邮件链接中。
图2.32的页面看起来有点单薄，但不用担心--随着学习的深入，页面将会变得越来越专业。页面中的空白区域可以通过在需要的地方添加<br/>标记获得。如果你的页面看起来和例子中的不是完全一样，不要担心，因为现在的目的只是练习使用XHTML。
将网页保存到fishcreek文件夹中，命名为index.html。
2.服务页 创建如图2.33所示的"服务"页。一个提高效率的窍门是在现有页面的基础上创建新页面--这样可以从以前的工作中获益。新的服务页将使用index.html作为起点。
在记事本中打开Fish Creek网站的index.html页面。选择"文件"|"另存为"将文件重命名为services.html，保存到fishcreek文件夹中。现在可以开始编辑网页了。
修改网页标题。将<title>和</title>标记对之间的文本改为"Fish Creek动物医院服务"。
删除定义列表和联系信息。
使用无序列表在网页中添加服务。配置每个服务类别的名称，加粗显示类别名称(使用<strong>逻辑样式元素)。每个类别名称后都添加一个换行。
服务类别及其描述如下。
医疗服务
我们提供最先进的设备和技术。服务包括疫苗接种、X光、内科和皮肤科。
外科手术
提供全面的外科手术，包括整容和急救手术。您的宠物的安全和健康对我们至关重要。我们使用气体麻醉、麻醉监测和镇痛药物。
 |
| 图2.33 Fish Creek服务页(services.html) |
牙科护理
一次牙科检查可判断你的宠物是否需要预防性的牙科护理，包括洗牙、抛光和抗菌。
出诊
老年人、行动不便者和饲养了多只宠物的家庭会喜欢上我们的上门出诊兽医服务。打一个电话，我们的专业人士就会上门接收宠物并带回医院进行专业治疗。治疗结束后，会再将宠物送上门来。
急诊
每个白天和晚上，我们至少有一位医生可以接诊。你的宠物不必非要选择"上班时间"生病或受伤。我们随时为您提供贴心服务。
保存网页并在浏览器中测试。测试services.html中指向index.html的链接，再测试index.html中指向services.html的链接。如果链接不起作用，应该重新检查作品，特别注意下面这些细节。
检查是否已将网页以正确的名字保存到正确的文件夹中。
检查锚标记中网页文件名的拼写。
修改之后重新进行测试。
广州网站建设,网站建设,广州网页设计,广州网站设计
