网页规划与布局教案3.pptVIP

An Introduction to Database System 课程目标： 知识目标：网页设计的基本知识 。 能力目标：网页制作能力，页面设计能力 。 素质目标：创新意识和自主学习能力 。 一、网站的组织结构 1.顺序结构 它适合组织一些顺序性较强的页面内容，如电子图书，产品描述等，只需要简单地按照一定的顺序浏览即可。 一、网站的组织结构 2 层次结构 是最基本的一种网页组织形式。其优点是前后顺序清楚，关系明确。每一个页面在水平方向有极为密切的上下级关系，在竖直方向上具有并列关系。 一、网站的组织结构 3 网状结构 是网页之间连接灵活，是一种较为人性化的设计，与前两种相比更加灵活、查找效率高。 一、网站的组织结构 4 复合结构 在实际的网页设计中，页面间的组织结构通常是不会采用以上单一的结构，而是使用两种或两种以上的结构，称为复合结构。例如，一个网站的不同主题可以采用层次结构，而对于某一主题下的网页可根据需要采用顺序或网状结构。其实，无论采用何种组织结构，其目的都是让用户快速而准确地找到所需的信息。 二、网页内容的组织 网站的主要功能是提供发布信息、收集信息的平台。因此，根据网站的主要内容及网站的目的将网站分为： 企业网站（是以宣传企业形象、扩大企业影响、树立行业品牌、瞄准目标市场、突出产品特点、开发潜在的客户、增强服务品位、完善服务体系、维系客户基础为目的）、 政府网站（是以宣传政府法令、法规为目的）、 专业网站（是以提供某一专业信息作为网站内容）、 商业网站（是提供商业服务为目的，提供买卖双方的商务咨询、洽谈、网上订购和支付等服务）、 个人网站（是以宣传个人为主要的目的，也提供某一方面的信息或资料）。 二、网页内容的组织 三、网页布局 1.“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型。 三、网页布局 2.“T”字型：  三、网页布局 3.标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 三、网页布局 4.左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。 三、网页布局 6. 封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 封面型布局示例 第一步：规划网站， 主要由五个部分构成：? Example Source Code 1.Main?Navigation?导航条，具有按钮特效。?Width:?760px?Height:?50px?2.Header?网站头部图标，包含网站的logo和站名。?Width:?760px?Height:?150px?3.Content?网站的主要内容。?Width:?480px?Height:?Changes?depending?on?content?4.Sidebar?边框，一些附加信息。?Width:?280px?Height:?Changes?depending?on?5.Footer?网站底栏，包含版权信息等。?Width:?760px?Height:?66px? 　DIV结构如下： 　└#Container?{}　/*页面层容器*/　　　　├#Header?{}　/*页面头部*/　　　　├#PageBody?{}　/*页面主体*/　　　　│　├#Sidebar?{}　/*侧边栏*/　　　　│　└#MainBody?{}　/*主体内容*/　　　　　└#Footer?{}　/*页面底部*/ 第二步：创建html模板及文件目录等 下课了。。。 * 网页设计与欣赏 * 数据库原理及应用 朱辉生(jssyzhs@) 网页设计与欣赏 第七章 网页规划与布局 X1.HTM X2.HTM X3.HTM X1.html X6.html X4.html X5.html X2.html X3.html X7.html X1.html X6.html X4.html X5.html X2.html X3.html X7.html 1 1. 用户定位明确 组织的内容确实对浏览者有用，确实围绕所定义的目标和所定向的群体，不要大而全覆盖面过广； 2 2.内容有特色 有自己的独到见解，尽量避免平淡乏味； 3 3. 内容要易