网站规划设计基础.ppt

《网站规划设计基础.ppt》由会员分享，可在线阅读，更多相关《网站规划设计基础.ppt（58页珍藏版）》请在第壹文秘上搜索。

1、网站规划与网页设计 1门户网站门户网站 2普及型网站普及型网站3电子商务类网站电子商务类网站 4媒体信息服务类网站媒体信息服务类网站 5办公事务管理网站办公事务管理网站 6商务管理网站商务管理网站2.3.1 网站主题的确定网站主题的确定 2.3.2 网站名称的确定网站名称的确定铁血军事 CI（Corporate Identity，企业形象），企业形象）指通过强化指通过强化视觉效果的手段视觉效果的手段来加深用户对企业形象的印象。来加深用户对企业形象的印象。例：可口可乐公司。例：可口可乐公司。1设计网站的标志（设计网站的标志（Logo）Logo是站点特色和内涵的集中体现。是站点特色和内涵的集中体现

2、。Logo可以是中文、英文字母、符号或图案，也可以是动可以是中文、英文字母、符号或图案，也可以是动物或人物等。物或人物等。2设计网站的标准色彩设计网站的标准色彩 “标准色彩标准色彩”是指能体现网站形象和延伸内涵的色彩。是指能体现网站形象和延伸内涵的色彩。一个网站的标准色彩不宜超过一个网站的标准色彩不宜超过3种种;l 标准色彩要用于网站的标准色彩要用于网站的Logo、标题、主菜单和主色块，、标题、主菜单和主色块，给人以整体统一的感觉。给人以整体统一的感觉。l 其他色彩也可以使用，只是作为点缀和衬托，绝不能喧其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。宾夺主。3设计网站的标准字体设计网

3、站的标准字体 标准字体是指用于标准字体是指用于Logo、标题和主菜单的特有字体、标题和主菜单的特有字体。一般网页默认的字体是宋体一般网页默认的字体是宋体。4设计网站的宣传标语设计网站的宣传标语 网站的宣传标语也可以说是网站的精神、网站的目标，网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句的广告语句.汽车之家:我的汽车网站，我的汽车之家中国银行：中国银行 全球服务2.5.1 设计网站的栏目设计网站的栏目 网站栏目网站栏目:实质是一个网站的大纲索引；实质是一个网站的大纲索引；索引应该

4、将网站的主体明确显示出来。索引应该将网站的主体明确显示出来。一般的网站栏目安排要注意以下一般的网站栏目安排要注意以下4点。点。1紧扣网站主题紧扣网站主题 2设计一个最近更新或网站指南栏目设计一个最近更新或网站指南栏目 3设计一个可以互动交流的栏目设计一个可以互动交流的栏目 4设计一个下载或常见问题回答栏目设计一个下载或常见问题回答栏目2.5.2 设计网站的版块设计网站的版块 版块比栏目的概念要大一些，每个版块版块比栏目的概念要大一些，每个版块都可以有自己的栏目都可以有自己的栏目。设置版块时，应该注意以下几点设置版块时，应该注意以下几点：各版块要有相对独立性各版块要有相对独立性；各版块要相互关联

5、各版块要相互关联；版块的内容要围绕站点主题版块的内容要围绕站点主题。1风格是建立在有价值的内容之上的风格是建立在有价值的内容之上的 2将网站将网站Logo尽可能地放在每个页面最突出的位置尽可能地放在每个页面最突出的位置 3使用统一的图片处理效果使用统一的图片处理效果 4设计宣传标语设计宣传标语2.7.1 设计网站的目录结构设计网站的目录结构 网站的目录是指用户建立网站时创建的目录。网站的目录是指用户建立网站时创建的目录。目录结构好坏，对浏览者没有什么太大的感觉，目录结构好坏，对浏览者没有什么太大的感觉，对于站点本身的上传维护，以及内容的扩充和移植有着对于站点本身的上传维护，以及内容的扩充和移植

6、有着重要的影响。重要的影响。建立目录结构的一些注意事项。建立目录结构的一些注意事项。1不要将所有文件都存放在根目录下不要将所有文件都存放在根目录下 2按栏目内容建立子目录按栏目内容建立子目录 3在每个主目录下都建立独立的在每个主目录下都建立独立的images目录目录 4目录的层次不要太深目录的层次不要太深 5不要使用中文目录名不要使用中文目录名 6不要使用过长的目录名不要使用过长的目录名2.7.2 设计网站的链接结构设计网站的链接结构 网站的链接结构网站的链接结构：指页面之间相互链接的拓扑结构。：指页面之间相互链接的拓扑结构。建立在目录结构基础之上，但可以跨越目录。建立在目录结构基础之上，但可

7、以跨越目录。建立网站的链接结构有以下两种基本方式。建立网站的链接结构有以下两种基本方式。1树状链接结构树状链接结构 树状链接结构类似于树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。级页面链接指向二级页面。优点优点：条理清晰，访问者明确知道自己在什么位置，不会：条理清晰，访问者明确知道自己在什么位置，不会“迷路迷路”。缺点缺点：浏览效率低，从一个栏目下的子页面到另一个栏目下的子页：浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。面，必须绕经首页。2星星（网状）状链接结构（网状）状链接结构 星状链接结构

8、类似于网络服务器的链接，每个页面相互之间都建立星状链接结构类似于网络服务器的链接，每个页面相互之间都建立有链接有链接。优点是浏览方便，随时可以到达自己喜欢的页面优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者缺点是链接太多，容易使浏览者“迷路迷路”，搞不清自己在什么位置，搞不清自己在什么位置，看了多少内容看了多少内容。网页组织结构树状结构（分级结构）n树状结构：由网站文件的主页开始，依次树状结构：由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。主 页页面1页面2

9、页面3页面4页面5页面6页面7一级标题一级标题二级标题二级标题图1.8树状结构网页组织结构线性结构n组织线性顺序形式存在的信息，可以引导组织线性顺序形式存在的信息，可以引导浏览者按顺序地浏览整个网站文件。浏览者按顺序地浏览整个网站文件。主 页页面1页面2页面3线性结构线性和分级结构的结合主 页标 题标 题标 题主 页二级标题三级标题网站文件的结构通常是树状结构和线性结构相结合星（网）状结构主 页标题一标题二标题三主 页二级标题三级标题 确定网站的题材，并且收集和组织了许多相关的资料内确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下方面组织内容来吸引浏览者浏览网站。容后，按照以下方

10、面组织内容来吸引浏览者浏览网站。1站点结构图站点结构图 2导航栏导航栏 3精美的图片精美的图片 4引人入胜的内容引人入胜的内容 5反馈表反馈表 6联系方式页面联系方式页面 7搜索工具搜索工具 8常见问题解答常见问题解答站点结构图站点结构图导航栏导航栏精美的图片精美的图片引人入胜的内容引人入胜的内容联系方式联系方式搜索工具搜索工具2.9.1 网页的基本元素网页的基本元素网页通常以网页文件及其附属文件形式存在。网页通常以网页文件及其附属文件形式存在。1文本文本 2图片和动画图片和动画 3声音和视频声音和视频 4超链接超链接 5导航栏导航栏 6表格表格 7表单表单 8其他常见元素其他常见元素1文本文

11、本2图片和动图片和动画画4超链接超链接5导航栏导航栏6表格表格图像格式图像格式 由于受网络带宽的限制，在由于受网络带宽的限制，在Web页上使用的图像都是一些压缩格页上使用的图像都是一些压缩格式，最常用的包括：式，最常用的包括：GIF格式、格式、JPEG格式、格式、PNG格式和矢量格格式和矢量格式。式。1GIF格式格式 GIF格式采用格式采用无损压缩算法无损压缩算法进行图像的压缩处理，是目前在进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。网页设计中使用最普遍、最广泛的一种图像格式。2JPEG格式格式 JPEG格式支持的颜色数几乎没有限制，因此适用于使用真彩格式支持的颜色

12、数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。色或平滑过渡色的照片和图片。JPEG格式使用有损压缩来减小格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。也降低了。3PNG格式格式 PNG格式是近年来新出现的一种图像格式，它适于任何类型、格式是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。任何颜色深度的图片。4矢量格式矢量格式 图像图像n浏览器能识别的图象有浏览器能识别的图象有jpg（也可叫也可叫jpeg）、）、gif、png和和bmp等等n目前网上用的最多的是目前网

13、上用的最多的是jpg和和gif，因这两因这两种格式文件体积较小。种格式文件体积较小。nGif格式的图象用工具处理后能去掉本身格式的图象用工具处理后能去掉本身的背景，而很好的和页面融合，还能做的背景，而很好的和页面融合，还能做成动画。成动画。使用网页图像的要点使用网页图像的要点在在Web页上显示图片之前，通常需要考虑页上显示图片之前，通常需要考虑下列三个问题：下列三个问题：确保文件较小；确保文件较小；控制图像的数量和质量；控制图像的数量和质量；合理使用动画。合理使用动画。超级链接超级链接 超链接是是网页中超链接是是网页中最重要、最根本的元素之一。最重要、最根本的元素之一。超链接超链接能够使多个孤

14、立的网页之间产生一定的相互联系，从而能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。使单独的网页形成一个有机的整体。（1）什么是超级链接）什么是超级链接 超链接：超链接：指从一个网页指向一个目标的连接关系，指从一个网页指向一个目标的连接关系，l 目标可以是另一个网页，也可以是相同网页上的不同目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。件，甚至是一个应用程序。l 在一个网页中用来超链接的对象，可以是一段文本或在一个网页中用来超链接的对象，可以是

15、一段文本或者是一个图片。者是一个图片。l 当浏览者单击已经链接的文字或图片后，链接目标将当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。显示在浏览器上，并且根据目标的类型来打开或运行。超级链接超级链接l 按照链接路径的不同，分为按照链接路径的不同，分为3种类型：内种类型：内部链接、锚点链接和外部链接。部链接、锚点链接和外部链接。l 按照使用对象的不同，链接分为：文本超按照使用对象的不同，链接分为：文本超链接、图像超链接、链接、图像超链接、E-mail链接、锚点链链接、锚点链接、多媒体文件链接、空链接等。接、多媒体文件链接、空链接等。1。避免孤立文件

16、的存在：应该避免存在孤立的文件，能使将。避免孤立文件的存在：应该避免存在孤立的文件，能使将来在修改和维护链接时有清晰的思路。来在修改和维护链接时有清晰的思路。2。避免使用过多的超级链接：在一个网页中设置过多超链接。避免使用过多的超级链接：在一个网页中设置过多超链接会导致网页的观赏性不强，文件过大。如果避免不了过多的超链会导致网页的观赏性不强，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。接，可以尝试使用下拉列表框、动态链接等一些链接方式。3。网页中的超链接不要超过。网页中的超链接不要超过4层：链接层数过多容易让人产生层：链接层数过多容易让人产生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。层。4。页面较长时可以使用书签：在页面较长时，可以定义一个。页面较长时可以使用书签：在页面较长时，可以定义一个书签，这样能让浏览者方便地找到想要的信息。书签，这样能让浏览者方便地找到想要的信息。5。设置主页或上一层的链接：有些浏览者可能不是从网站的。设置主页或上一层的链接：有些浏览者可能不是从网站