0 Comments

案例4:Prime Properties

发布于:2013-06-15  |   作者:广州网站建设  |   已聚集:人围观

案例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>逻辑样式元素)显示。


  1. 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的链接。如果链接不起作用,应该重新检查作品,特别注意下面这些细节。

检查是否已将网页以正确的名字保存到正确的文件夹中。

检查锚标记中网页文件名的拼写。

修改之后重新进行测试。

飞机