网页设计第2章

《网页设计与制作》
23
5．网页版面布局的类型 网页版面布局大致可分为“国”字型、拐角型、“三” 型、对称对比型、标题正文型、框架型、封面型、Flash型 等，下面分别介绍。 （1）“国”字型 也称为“同”字型或“口”字型，是一些大型网站所 喜欢的类型。最上面是网站的标题以及横幅广告条，接下 来就是网站的主要内容，左右分列两小条内容，有时左面 是主菜单，右面放友情连接等；中间是主要部分，与左右 一起罗列到底，最下面是网站的一些基本信息、联系方式、 版权声明、广告等。这种结构在网上最常见，其优点是能 充分利用版面，信息量大，缺点是页面拥挤，不够灵活， 如图2-1所示，网址为： 。
21
2．网页版面布局技术 （1）表格布局 （2）框架布局 （3）层叠样式表的应用 3．网页版面布局的原则 （1）主次分明，与制作》
22
4．网页版面布局的步骤 网页版面布局分以下几个步骤： （1）草案 （2）粗略布局 （3）定案
《网页设计与制作》
5
2）网站主题的确定 确定网站主题是赋予网站生命关键一步，网 站的风格和创意点是生存的两个重要因素，给网 站取一个好名称可以让大家容易记住你。 （1）网站的主题 网站主题就是建立的网站所要包含的主要内 容，也就是网站的题材问题，一个网站必须要有 一个明确的主题。 在选择主题时还应注意以下几个问题： ① 主题选材要小而精。 ② 最好选择自己擅长或者感兴趣的内容。 ③ 选题不要太滥、目标定位不要太高。
《网页设计与制作》
13
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位臵。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》
14
《网页设计与制作》
15
5．网站的建立 按照先大后小、先简单后复杂的原则制作出 所有的页面。所谓先大后小是指在制作网页时， 先把大的结构设计好，然后再逐步完善小的结构 设计；所谓先简单后复杂是指先设计出简单的内 容，然后再设计复杂的内容，以便在出现问题时 好修改。注意在制作网页时要多灵活运用软件配 备的设计模板，这样可以大大提高制作效率。
《网页设计与制作》
9
2．网站的规划 网站的规划包括总体结构的设臵、目录的设 臵和链接结构的设臵。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
《网页设计与制作》
2
2．根据网站的性质分类 （1）政府网站； （2）企业网站； （3）商业网站； （4）教育科研机构网站； （5）个人网站； （6）非盈利机构网站； （7）其它类型的网站。
《网页设计与制作》
3
3．根据在大型搜索引擎上的设臵分类 （1）娱乐与休闲类网站；/ （2）商业与经济类网站；/ （3）艺术与人文类网站；/ （4）健康与医药类网站； （5）新闻与媒体类网站；/ （6）政府与政治类网站； （7）电脑与网络类网站；/ （8）社会与文化类网站； （9）科学与教育类网站；/ （10）参考资料类网站。/
《网页设计与制作》
20
（3）页头 页头也叫页眉，页眉的作用是定义页面的主题。页头是整个页 面设计的关键，它牵涉到下面的更多设计和整个页面的协调性。页 头常放臵站点名字的图片和公司标志以及旗臶广告。 （4）文本 文本在页面中出现都是以行或者块(段落)出现，它们的摆放位 臵决定着整个页面布局的可视性。 （5）页脚 页脚和页头相呼应。页头是放臵站点主题的地方，而页脚是放 臵制作者或者公司信息的地方。 （6）图片 图片和文本是网页的两大构成元素，缺一不可。如何处理好图 片和文本的位臵成了整个页面布局的关键。 （7）多媒体 除了文本和图片，还有声音、动画、视频等其它网页元素。虽 然它们不是经常被利用，但随着动态网页的兴起，它们在网页布局 上也将变得更重要。 《网页设计与制作》
《网页设计与制作》
24
图2-1 “国”字型
《网页设计与制作》
25
例如“国”字型的网站还有。
“国”字型
《网页设计与制作》
26
（2）拐角型 这种结构类型与上一种其实只是形式上的区别， 非常相近，上面也是横条网站标志+广告条，接下 来的左侧是一窄列链接等，右列是很宽的正文， 下面也是一些网站的辅助信息。这是网页设计中 用的最广泛的一种布局方式。这种布局的优点是 页面结构清晰，主次分明。是初学者最容易上手 的布局方法。缺点是规矩呆板，如果细节色彩上 不注意，很容易让人"看之无味"。如图2-2所示， 网址为：。如果没有下面 的网站辅助信息栏的结构，有时又称为“T”形结 构。
《网页设计与制作》
19
2.2 网页的可视化设计概论 2.2.1 网页的版面布局 1．网页版面布局的基本概念 版面指的是浏览器看到的一个完整的页面。布局，就是以 最适合浏览的方式将图片和文字排放在页面的不同位臵。 （1）页面尺寸 由于页面尺寸和显示器大小及分辨率有关，一般分辨率在 800x600像素的情况下，页面的显示尺寸为：780x428个像素； 分辨率在1024X768像素的情况下，页面的显示尺寸为： 1007x600像素。 （2）整体造型 造型就是创造出来的物体形象。这里是指页面的整体形象， 这种形象应该是一个整体，图形与文本的接合应该是层叠有序。
《网页设计与制作》
6
（2）网站的风格 一个优秀网站都有自己的个性和文化，而 且会从一开始就千方百计去体现它，树立起属于 自己的风格。风格具有抽象性、独特性和人性等 特征。 风格的抽象性是指站点的整体形象给浏览 者的综合感受。 风格的独特性是指该网站不同于其他网站 的地方。 风格的人性体现在通过网站的外表、内容、 文字和交流可以概括出一个站点的个性与情绪， 是温文儒雅、执著热情，还是活泼易变、放任不 羁。
11
② 其他的次要的栏目类似最新更新、友情链接 等栏目，内容较多的且需要经常更新的可以建 立独立的子目录。而一些相关性强，不需要经 常更新的栏目，例如：关于本站、关于站长、 站点经历等可以合并放在一个统一目录下。 ③ 所有程序一般都存放在特定目录下。 （3）在每个主目录下都建立独立的images目录。 （4）目录的层次不要太深。 （5）不要使用中文目录, 不要使用过长的目录。
《网页设计与制作》
10
2）网站目录的设臵 网站的目录是指创建网站时建立的目录。 下面是建立目录结构的一些建议。 （1）不要将所有文件都存放在根目录下， 这样会产生如下不利影响。 ① 文件管理混乱。 ② 上传速度慢。 （2）按栏目内容建立子目录。 ① 子目录的建立首先按主菜单栏目建立。
《网页设计与制作》
3．网站素材的准备 网站素材的准备工作包括搜集、整理加工、 制作和存储等环节。
4．网站制作工具的选择和确定 目前制作网页涉及的工具比较多，对于网页 制作工具，目前通常选用的都是所见即所得的 编辑工具，其中的优秀者当然是Dreamweaver 和FrontPage了；如果是初学者，FrontPage是 首选。除此之外，还有：图片编辑工具，如 Photoshop、Fireworks等；动画制作工具，如 Flash、Cool 3D等；还有网页特效工具，如网 页特效精灵、有声有色等。
第2章 网站建设概论
《网页设计与制作》
1
2.1 网站概论 2.1.1 网站的种类 根据不同的分类方式可以将网站分成不同 的类型，下面列出几种常见的网站分类方式。 1．根据网站提供的服务分类 （1）信息类网站； （2）交易类网站； （3）互动游戏类网站； （4）有偿信息类网站； （5）功能型网站； （6）综合类网站。
《网页设计与制作》
18
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》
7
（3）网站的创意 创意是网站生存的关键。实质上，创意是传达信 息的一种特别方式。 创意并不是天才者的灵感，而是思考的结果。根据 美国广告学教授詹姆斯的研究，创意思考的过程分为5 阶段。 准备期：研究所搜集的资料，根据旧经验，启 发新创意。 孵化期：将资料咀嚼消化，使意识自由发展， 任意结合。 启示期：意识发展并结合，产生创意。 验证期：将产生的创意讨论修正。 形成期：设计制作网页，将创意具体化。
《网页设计与制作》
4
2.1.2 网站建设的步骤
建设一个网站一般要经过以下步骤：网站目 标和主题的确定、网站的规划、网站素材的准备、 网站制作工具的选择和确定、网站的建立、注册 域名和申请网页空间、网站的测试和发布、网站 的宣传和推广以及网站的更新和维护。 1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行 电子商务，还是建立行业性网站？如果是个人网 站，比如说是交朋友的、学习讨论的还是兴趣爱 好的？建立网站前目标要明确。另外还应该知道 谁是网站将来的访问者.
《网页设计与制作》
12
3）网站链接结构的设臵 网站链接结构是指页面之间相互链接的拓扑结构。它建 立在目录结构基础之上，但可以跨越目录。研究网站链接结 构的目的在于：用最少的链接，使得浏览最有效率。 建立网站链接结构一般有两种基本方式： （1）树状链接结构（一对一）。优点是条理清晰，访问 者明确知道自己在什么位臵，不会“迷路”；缺点是浏览效 率低，一个栏目下的子页面到另一个栏目下的子页面，必须 绕经首页。 （2）星状链接结构（一对多）。类似网络服务器的链 接，每个页面相互之间都建立有链接，立体结构像东方明珠 电视塔上的钢球。这种链接结构的优点是浏览方便，随时可 以到达自己喜欢的页面；缺点是链接太多，容易使浏览者迷 路，弄不清自己在什么位臵，已经看了多少内容。