案例4:Prime Properties
Prime Properties是一个小型房地产公司,专门从事居住房业务。它的主人Maria Valdez想创建一个网站来展示她的房屋销售清单和为客户提供联系方式,她的主要客户是想在北京西北郊安家的、有工作的中产阶级家庭。Maria想要一个主页面、一个包含她的房地产销售信息的页面、一个理财页面和一个联系方式页面。
图2.38展示了"Prime Properties房地产"网站的站点地图。
![]() |
| 图2.38 Prime Properties站点地图 |
此站点地图描述了网站的基本架构,包括一个主页和三个内容页:房地产信息、理财和联系方式。
图2.39展示了一个示例页面样板,包括网站标志、导航区、内容区和用于显示版权信息的页脚区域。
广州网站建设,网站建设,广州网页设计,广州网站设计
![]() |
| 图2.39 Prime Properties页面布局 |
在本案例分析中,你有下面两个任务。
1.创建主页:index.html。
2.创建理财页:financing.html。
实训案例
创建一个名为prime的文件夹来包含Prime Properties房地产网站的文件。
1. 主页 要用记事本创建Prime Properties房地产网站的主页,如图2.40所示。
![]() |
| (点击查看大图)图2.40 Prime Properties主页(index.html) |
启动记事本并创建符合下列要求的网页。
网页 使用描述性的网页标题--公司名是商业网站的恰当选择。
网页标志 使用一级标题显示"Prime Properties房地产"。
导航 将以下使用了<strong>逻辑样式元素的文本放到一个段落中。
主页 | 房地产信息 | 理财| 联系方式
使用锚标记,使"主页"链接到index.html;"房地产信息"链接到listings.html;"理财"链接到financing.html,"联系方式"链接到contact.html。
内容 以下每一行文本都单独用一个段落显示。
Prime Properties房地产提供宣传和销售您的房地产的最佳方案。
Prime Properties房地产的服务宗旨是推销我们的客户,而不是我们自己。
广州网站建设,网站建设,广州网页设计,广州网站设计
我们也可帮助你寻找符合要求的房地产。
再用一个无序列表显示以下内容:
位置
价格
特色
联系信息 添加地址和电话号码信息。使用<small>物理样式元素配置文本大小。
100084 中国北京市海淀区
清华大学二校门东侧
010-88888888
页脚 将以下版本信息用小字体(使用<small>物理样式元素)和强调字体样式(使用<em>逻辑样式元素)显示。
- Copyright 2010 Prime Properties房地产
把你的姓名放到版权信息下面的一个电子邮件链接中。
图2.40的页面看起来有点单薄,但不用担心--随着学习的深入,页面将会变得越来越专业。页面中的空白区域可以通过在需要的地方添加<br/>标记获得。如果你的页面看起来和例子中的不是完全一样,不要担心,因为现在的目的只是练习使用XHTML。
将网页保存到prime文件夹中,命名为index.html。
2.理财页 创建如图2.41所示的"理财"页。一个提高效率的窍门是在现有页面的基础上创建新页面--这样可以从以前的工作中获益。新的理财页将使用index.html作为起点。
![]() |
| 图2.41 Prime Properties理财页(financing.html) |
在记事本中打开Prime Properties房地产网站的index.html主页。选择"文件"|"另存为"将文件重命名为financing.html,保存到prime文件夹中。现在可以开始编辑网页了。
修改网页标题。将<title>和</title>标记对之间的文本改为"Prime Properties::理财"。
删除内容段落、无序列表和联系信息。
在网页上添加以下理财内容。
首先,用二级标题显示"理财"。
其次,用一个段落显示"我们和许多地区按揭贷款和理财公司合作。"
最后,用三级标题显示"按揭贷款FAQ"
用一个定义列表配置FAQ。使用<dt>元素表示问题,使用<dd>元素表示回答。FAQ的问题和回答包括:
我的按揭比例是多少?
基本月供一般是你的每月毛收入的29%到41%。
广州网站建设,网站建设,广州网页设计,广州网站设计
主要使用哪一档按揭比例?
具体选择的比例取决于借贷机构和融资类型。
我怎么开始?
立即联系我们,我们会帮助您量身定制理财计划。
保存网页并在浏览器中测试。测试financing.html中指向index.html的链接,再测试index.html中指向financing.html的链接。如果链接不起作用,应该重新检查作品,特别注意下面这些细节。
检查是否已将网页以正确的名字保存到正确的文件夹中。
检查锚标记中网页文件名的拼写。
修改之后重新进行测试。







