《网页设计与制作》网页设计基础学技术改变生活资料

网页设计基础
当今社会已经进入到信息时代，同时随着 INTERNET的迅速发展，人们越来越多地通 过网络来实现其活动：网上信息、网上购物、 网上求医等等。
对于网站的要求也随之不断提高，网站的内 容要充实，网页的浏览以及更新速度要快， 网页在视觉上要美观，这对网站开发人员提 出了更高的要求。
网页设计基础
我们研究网站的链接结构的目的在于用最少的链接， 使得浏览最有效率 。
链接结构的两种基本方式
树状链接结构（一对一）
星状链接结构（一对多）
首页链接指向一级页面，一 每个页面相互之间都建立有
级页面链接指向二级页面。 链接。立体结构像东方明珠
立体结构看起来就像蒲公英。 电视塔上的钢球。
浏览时，一级级进入，一级
为了在最短时间内开发出最符合客户需求的 网站，开发工具的选择成为一个重要因素。
由Macromedia公司开发的Dreamweaver、 Fireworks和Flash被称为网页制作三剑客， 为 网站的开发人员提供了三把用于网站开发 的利剑。我们将在随后的章节中逐一介绍。
网页设计基础
本篇主要内容： 介绍网页设计的基本知识 介绍网站的建设流程
二.总体设计方案主题鲜明
1.定位网站和主题
Web网站主页应具备得基本成分：
•页头： 准确无误地标识你的网站和企业标志 •E-mail地址： 用来接收用户垂询 •联系信息： 比如普通邮件地址或电话 •版权信息： 声明版权所有者等
2.定位网站CI形象
•所谓CI(Corporate Identity)，是借用的广告界术语， 意思是通过视觉来统一企业的形象。 •一个杰出的网站，和实体公司一样，也需要整体的 形象包装和设计。准确的、有创意的CI设计，对网 站的宣传推广有事半功倍的效果。
和加强这种印象。
1.2网站设计与建立的基本原则
（1）准确定位网站的主题、名称，方向明确。 （2）做好网站形象和整体风格的创意设计。 （3）仔细策划网站的栏目模块及其层次结构。 （4）网站内容要精、专、奇、新，不要面面俱到。 （5）灵活运用色彩，发挥其在网页设计中的作用。 （6）导航结构要一目了然，以提高网络的交互性
（3）在每个主目录下都建立独立的images目录 为每个主目录建立一个独立的images目录是最利于管理的。 根目录下的images目录放首页和一些次要栏目的图片。 目录的层次不要太深，为了维护方便，建议不要超过3层。
（4）其他注意方面
①不要使用中文目录名，使用中文目录名可能 对网址的正确显示造成困难。
3．网站的目录结构
网站的目录是指你建立网站时创建的目录。 目录结构的好坏，对浏览者来说并没有什么
太大的感觉，但是对于网站本身的上传维护、 内容及未来的扩充和移植有着重要的影响。 组织好网站的结构会便于以后的管理和维护 工作。
常用的方法
在本地计算机上创建一个专门放置网站所 有文件的文件夹，然后在该文件夹中制作 和编辑Web页。当发布网站时，你就可以 复制该文件夹到Web服务器上，以便让更 多的人可以访问到你的网站。将你的网站 内容以目录结构组织起来以方便维护和导 航，将相关的文件放置在同一个文件夹里。
二.网站的整体风格
风格是网站的整体形象给浏览者的感受， 它有以下主要特点：
（1）风格是抽象的 （2）风格是独特的 （3）风格是人性的
如何树立网站的风格
树立网站风格通常可从以下几个方面来思考：
①确信风格是建立在有价值的内容之上的。 ②要彻底搞清楚自己希望网站给人的印象是
什么。 ③在明确自己的网站印象后，开始努力建立
一定的方法分类并将它们作为网站的主题栏目 （2）设立一个最近更新或网站指南栏目
（3）设立一个可以双向交流的栏目
（4）设立一个下载或常见问题回答栏目
2．网站和版块
版块比栏目的概念要大一些，每个版块都有自己的 栏目。
关于版块方面，主要是门户网站等较大ICP需要考 虑的问题。
设计时应注意： （1）各版块要有相对独立性。 （2）各版块要相互关联。 （3）版块的内容要围绕网站主题。
标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱
通常适于网页标准色的颜色有： 蓝色，黄/橙色， 黑/灰/白色三大系列色
（3）设计网站的标准字体
标准字体是指用于标志、标题、主菜单的特有字体。 一般我们网页默认的字体是宋体。
三.网站的栏目版块及网站结构
你是否能将最好的、最吸引人的内容放在最突出的 位置以吸引更多的网友浏览网站？
在制定栏目的时候，要仔细考虑，合理安排
•网站的栏目 •网站和版块 •网站的目录结构 •其他
1．网站的栏目
栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来 一般的网站栏目安排要注意以下几方面： （1）记住一定要紧扣你的主题即将你的主题按
网站最忌讳多而杂，在搜集资料时不要追求内容多 而全，而应追求精、专、新，包括图像、文本及多 媒体（Flash、Shockwave或其他），在某一领域 中应做到全面、专业和深入。
介绍的主要内容
一.Web网站设计规划 二.总体设计方案主题鲜明 三.网站的栏目板块及网站结构 四.网站草图与网页布局
五.设计导航结构及链接结构 六.收集网站所需资料 七.创建高浏览器兼容的站点 八.网站测试
一.Web网站设计规划
创建Web网站的第一步是设计规划，在制作 之前对网站进行规划是非常重要的。
级退出。 优点是条理清晰，访问者明
优点是浏览方便，随时可以 到达自己喜欢的页面。
确知道自己在什么位置，不
会迷路。

缺点是浏览效率低，一个栏 目下的子页面到另一个栏目 下的子页面，必须绕经首页。
缺点是链接太多，容易使浏 览者迷路，搞不清自己在什 么位置，看了多少内容。
六.收集网站所需资料
②不要使用过长的目录名，太长的目录名不便 于记忆。
③尽量使用意义明确的目录名，你可以用Flash、 Dhtml、Javascript来建立目录名，也可以用1， 2，3来建立目录名，但是哪一个更明确，更 便于记忆和管理呢?显然是前者。
四.网站草图与网页布局
网站草图：一般是在纸上绘制出网站的布局和大 致外观，也可在特定的软件中（如Freehand和 Fireworks）精确地绘制草图。当具体制作网站内 容时，将一切参考网站草图进行。
设计网站的标志（logo）
设计网站的标准色彩
设计网站的标准字体
设计网站的宣传标语
（1）设计网站的标志（logo）
• logo是你网站特色和内涵的集中体现
• 标志的设计创意来自你网站的名称和内容
• 标志可以是中文、英文字母，可以是符号、 图案，还可以是动物或者人物等等。
标志的设计创意来源
①网站有代表性的人物、动物、花草，可以作为设计 的蓝本，加以卡通化和艺术化，例如迪斯尼的米老 鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。
要明确设计网站的目的和用户需求，从而做 出切实可行的设计计划。根据消费者的需求、 市场的状况、企业自身的情况等进行综合分 析，以“消费者”为中心，而不是以“美术” 为中心进行设计规划。
在设计规划时我们应考虑
（1）建站的目的是什么? （2）为谁提供服务和产品? （3）能提供什么样的产品和服务? （4）网站的目的消费者和访问者的特点是什么? （5）产品和服务适合什么样的表现方式（风格）?
（1）创意并不是天才的灵感， 而是思考的结果
根据美国广告学教授詹姆斯的研究，创意思考的过 程可分为五个阶段：
准备期 ——研究所搜集的资料，根据经验，启发 新创意；
孵化期 ——将资料咀嚼消化，使意识自由发展， 任意结合；
启示期 ——意识发展并结合，产生创意； 验证期 ——将产生的创意讨论修正；
度。
（7）要注意带宽、浏览器、分辨率等问题。
和亲合
1.3网站建立的一般流程
一般来说，网页制作可分为三个阶段： 1．前期工作准备阶段：在此阶段主要完成以下几个
方面的工作：拟定网页主题、搜集相关资料、规划 网页内容、绘制结构草图。 2．中期制作阶段：在此阶段主要利用各种网页制作 工具，开始制作网页，并不断地进行上传与测试， 直到最后制作完毕。 3．后期维护阶段：网页制作完成后，可进行发布和 推广应用。根据需要，对网页进行更新与维护。
网页布局 ：Dreamweaver ห้องสมุดไป่ตู้X提供了重复使用页面 布局的简便方法，即制作网站时使用模板。使用模 板技术不但可以提高网页制作的效率，而且当我们 决定修改整个网页布局时，仅需更改模板即可。
五.设计导航结构及链接结构
Web网站设计中，导航结构的设计一直是 网页设计者比较关心的问题。
导航栏对整个网站内容有提纲的作用，同 时，一些广告和网站更新通知也经常放置 在导航栏中，导航栏往往需要随时改变。
1．导航结构的设计
导航栏一定要清晰、醒目。通常导航栏要在“第 一屏”能显示出来，横向放置的导航栏要优于纵 向的导航栏。
下面这些方法会非常有用：
（1）“当前位置”：在每一页的顶部提示当前所在 页所处的位置，以便让浏览者知道身在何处，并 可轻松地返回到上一层页面。
（2）“搜索和索引”：在网站中添加搜索和索引功 能，可以让浏览者快速查找到所需要的内容。
本篇主要目的： 对网页设计有一个初步的认识和了解
第1章
网站设计与建立的一般流程
1.1网站设计的创意及风格
设计网站需要考虑的因素非常多，从前期的 网站的定位、整理资料、设定网站框架，到 具体制作中的设计环节，再到最后的调试、 发布、宣传，是一个环环相扣的过程。
作为一名普通网页设计师，无论你设计的是 企业网站还是个人网站，最重要的是要有创 意，要有自己的风格，要与众不同。
形成期 ——设计制作网页，将创意具体化。