网站案例分析
以下所有案例将贯穿全书。本章引入的是网站梗概，给出站点地图或故事板，并指导你为网站创建两个页面。
案例1：JavaJam Coffee House
Julio Perez是JavaJam Coffee House的主人，此咖啡屋供应小吃、咖啡、茶和软饮料，每周有几个晚上会举办当地的民间音乐表演和诗歌朗诵会。JavaJam的客人主要是大学生和年轻白领。Julio想让他的咖啡屋上网，展示小店的服务项目和提供表演的时间表。他想要一个主页、菜单页面、表演时间表页面和招聘页面。
JavaJam Coffee House网站的站点地图如图2.26所示。
广州网站建设,网站建设,广州网页设计,广州网站设计
 |
| 图2.26 JavaJam站点地图 |
该站点地图描述了网站的基本架构，一个主页和三个内容页面：菜单、音乐和招聘。
图2.27展示了网页的示例布局，包括网站标志、导航区、内容区和用于显示版权信息的页脚区域。
 |
| 图2.27 JavaJam页面布局 |
在本案例分析中，你有下面两个任务。
1.创建主页：index.html。
2.创建菜单页：menu.html。
广州网站建设,网站建设,广州网页设计,广州网站设计
实训案例
创建一个名为javajam的文件夹来包含JavaJam网站的文件。
1.主页 要用记事本创建JavaJam Coffee House网站的主页，如图2.28所示。
 |
| 图2.28 JavaJam主页(index.html) |
启动记事本并创建符合下列要求的网页。
网页 使用描述性的网页标题--公司名是商业网站的恰当选择。
网页标志 使用一级标题显示"JavaJam Coffee House"。
导航 将下面的文本放到一个段落里。
主页| 菜单| 音乐| 招聘
使用锚标记，使"主页"链接到index.html；"菜单"链接到menu.html；"音乐"链接到music.html，"招聘"链接到jobs.html。
内容 将下面的内容做成一个无序列表：
招牌咖啡和茶
百吉饼，小松饼和小吃
音乐和诗朗诵
Open Mic之夜
联系信息 在无序列表下方添加地址和电话号码信息。提示：用换行标记帮助配置这个区域。
100084 中国北京市海淀区
清华大学二校门东侧
010-88888888
页脚 将以下版本信息用小字体(使用<small>物理样式元素)和强调字体样式(使用<em>逻辑样式元素)显示。
版权所有? 2010 JavaJam Coffee House
把你的姓名放到版权信息下面的一个电子邮件链接中。
图2.28的页面看起来有点单薄，但不用担心--随着学习的深入，页面将会变得越来越专业。页面中的空白区域可以通过在需要的地方添加<br/>标记获得。如果你的页面看起来和例子中的不是完全一样，不要担心，因为现在的目的只是练习使用XHTML。
将网页保存到javajam文件夹中，命名为index.html。
2.菜单页 创建如图2.29所示的菜单页。一个提高效率的窍门是在现有页面的基础上创建新页面--这样可以从以前的工作中获益。菜单页将使用index.html作为起点。
在记事本中打开JavaJam网站的index.html主页。选择"文件"|"另存为"将文件命名为menu.html，并保存到javajam文件夹中。现在可以开始编辑网页了。
修改网页标题。将<title>和</title>标记对之间的文本改为"JavaJam Coffee House菜单"。
删除无序列表和联系信息。
使用定义列表在网页中添加菜单内容。菜单项使用<dt>元素。配置菜单项的名称，使它加粗显示(使用<strong>元素)。用<dd>元素包含菜单项的描述。
菜单项的名称和描述如下：
Just Java
普通调制的无咖啡因咖啡，或当日口味
可任意续杯：$2.00
Cafe au Lait
家庭秘制口味的咖啡，注入热牛奶
单份$2.00，双份$3.00
Iced Cappuccino(卡布奇诺冰咖啡)
冰杯里放入咖啡冰块，加上打成泡沫的砂糖甜牛乳。
$2.75
保存网页并在浏览器中进行测试。测试menu.html页面中指向index.html的链接，测试index.html中指向menu.html的链接。如果链接不起作用，重新检查你的作品，特别注意下面这些细节：
检查是否将网页以正确的名字保存在正确的文件夹中
检查锚标记中网页文件名的拼写
更好之后要重新进行测试
广州网站建设,网站建设,广州网页设计,广州网站设计
