任务二首页的静态页面设计——布局.PDF

电子商务网站建设完整案例教程  任务二 首页的静态页面设计——布局 一、网页的页面布局 网页布局类型大致可分为 “国”字型、拐角型、标题正文型、左右框架型、上下框架型、 综合框架型、封面型、Flash型、变化型，下面分别论述。 （1） “国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是 网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小内容，中间是主 要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这 种结构是网上最常见的结构类型。 （2）拐角型：这种结构与上一种其实只是形式上的区别，上面是标题及广告横幅，接下 来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型 中，很常见的类型是最上面是标题及广告，左侧是导航链接。 （3）标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文。如一些文 章页面或注册页面等就是这种类型。 （4）左右框架型：这是一种左右分为两面的框架结构，一般左面是导航链接，有时最上 面会有一个小的标题或标志，右面是正文。大部分的大型论坛都是这种结构，有一些企业网 站也喜欢采用。这种类型结构非常清晰，一目了然。 （5）上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。 （6）综合框架型：是多种结构的结合，是一种相对复杂的框架结构。 （7）封面型：这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来 赏心悦目的感觉。 （8）Flash 型：其实这与封面型结构是类似的。与封面型不同的是，由于 Flash 强大 的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统 的多媒体。 （9）变化型：即上面几种类型的结合与变化，比如视觉上很接近拐角型，但所实现的功 能却是综合框架型。 一般根据内容的需求来选择合适的布局：网页如果内容非常多，就要考虑用“国字型” 或 “拐角型” ；如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；框架 结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想 展示一下企业形象或个人主页想展示个人风采， 封面性是首选；F lash型更灵活一些， 好的 Flash  大大丰富了网页，但是它不能表达过多的文字信息。 62 武进网上商城系统前台的具体设计 模块四  二、认识网站的首页 网站的首页也称为主页，主页的文件名一般为 index，至于扩展名可以根据开发的工具来 确定，因为本课程使用的是 ASP 来开发的，所以我们的首页文件全名为 index.asp。 首页是网站中第一个被访问也是被访问次数最多的页面，可见首页对于一个网站来说起 着至关重要的作用，人们通过访问首页对你的网站有一个整体的认识和了解。好的开始是成 功的一半，所以对于“网站的门面”——首页的设计与制作是绝对要重视的。所以我们不能 茫目地开始设计首页，首先应该先去参考一些著名的电子商务网站，了解关于电子商务网站 首页需要具备的各种元素，先构建出“武进网上商城”的首页布局，再进一步进行填充内容 及完善。 我们比较熟悉的电子商务网站，如淘宝网、易趣网、当当网等，对于这些网站首页进行 一些分析，我们会发现电子商务网站的首页一般包含以下几个部分。 内容 1：网站标题和标识（能体现站点主题和特色） 。 内容 2：网站导航（本网站提供了哪些服务功能）和站点层次。 内容 3：搜索 （让用户能够快速找到自己需要的资料） 。 内容 4：导读 （就像杂志封面一样，主页要用一些 “里面有精彩内容”的暗示来吸引用 户。 “内容推荐”部分应该突出最新、最好、最热门的内容片断，例如头条促销信息或者热销 商品等。 “功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简 报等。 ） 内容 5：内容更新 （最新的新闻或公告信息、网站新动向、推行的新业务等，让用户了 解我们的网站很活跃，不是一潭死水） 。 内容 6：登陆注册 （如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链 接或者直接登陆框，免得用户