网页设计与制作-网页设计基础学技术改变生活-45课件

网页设计基础当今社会已经进入到信息时代，同时随着INTERNET的迅速发展，人们越来越多地通过网络来实现其活动：网上信息、网上购物、网上求医等等。对于网站的要求也随之不断提高，网站的内容要充实，网页的浏览以及更新速度要快，网页在视觉上要美观，这对网站开发人员提出了更高的要求。网页设计基础当今社会已经进入到信息时代，同时随着INTER1网页设计基础为了在最短时间内开发出最符合客户需求的网站，开发工具的选择成为一个重要因素。由Macromedia公司开发的Dreamweaver、Fireworks和Flash被称为网页制作三剑客，为网站的开发人员提供了三把用于网站开发的利剑。我们将在随后的章节中逐一介绍。网页设计基础为了在最短时间内开发出最符合客户需求的网站，2网页设计基础本篇主要内容：介绍网页设计的基本知识介绍网站的建设流程本篇主要目的：对网页设计有一个初步的认识和了解

网页设计基础本篇主要内容：3第1章网站设计与建立的一般流程第1章网站设计与建立的一般流程41.1网站设计的创意及风格设计网站需要考虑的因素非常多，从前期的网站的定位、整理资料、设定网站框架，到具体制作中的设计环节，再到最后的调试、发布、宣传，是一个环环相扣的过程。作为一名普通网页设计师，无论你设计的是企业网站还是个人网站，最重要的是要有创意，要有自己的风格，要与众不同。1.1网站设计的创意及风格设计网站需要考虑的因素非常多，从51.1网站设计的创意及风格网站的创意与风格是网站能否生存的关键所在

给定一个主题，不同的人不可能设计出完全一样的网站。那么到底什么是创意，什么是风格呢?1.1网站设计的创意及风格网站的创意与风格是网站能否生存的关6一.网站的创意创意是捕捉出来的点子，是创作出来的奇招，是传达信息的一种特别方式。其目的是为了更好地宣传推广网站。这里说的创意是指网站的整体创意。一.网站的创意创意是捕捉出来的点子，是创作出来的奇招，是传达7（1）创意并不是天才的灵感，

而是思考的结果

准备期——研究所搜集的资料，根据经验，启发新创意；孵化期——将资料咀嚼消化，使意识自由发展，任意结合；启示期——意识发展并结合，产生创意；验证期——将产生的创意讨论修正；形成期——设计制作网页，将创意具体化。

根据美国广告学教授詹姆斯的研究，创意思考的过程可分为五个阶段：（1）创意并不是天才的灵感，

而是思考的结果准备期——研8（2）创意是将现有要素的重新组合网络上的许多创意来自与现实生活（或者虚拟现实）的结合。今天，网上的许多在线书店、电子社区、在线拍卖等无一不是现有要素重新组合的结果。从这一点出发，任何人，包括你和我，只要用心去观察都可以创造出不同凡响的创意。（2）创意是将现有要素的重新组合网络上的许多创意来自与现实9二.网站的整体风格（1）风格是抽象的（2）风格是独特的（3）风格是人性的风格是网站的整体形象给浏览者的感受，它有以下主要特点：二.网站的整体风格（1）风格是抽象的风格是网站的整体形象给10如何树立网站的风格树立网站风格通常可从以下几个方面来思考：①确信风格是建立在有价值的内容之上的。②要彻底搞清楚自己希望网站给人的印象是什么。③在明确自己的网站印象后，开始努力建立和加强这种印象。如何树立网站的风格111.2网站设计与建立的基本原则（1）准确定位网站的主题、名称，方向明确。（2）做好网站形象和整体风格的创意设计。（3）仔细策划网站的栏目模块及其层次结构。（4）网站内容要精、专、奇、新，不要面面俱到。（5）灵活运用色彩，发挥其在网页设计中的作用。（6）导航结构要一目了然，以提高网络的交互性和亲合度。（7）要注意带宽、浏览器、分辨率等问题。1.2网站设计与建立的基本原则（1）准确定位网站的主题、名121.3网站建立的一般流程一般来说，网页制作可分为三个阶段：1．前期工作准备阶段：在此阶段主要完成以下几个方面的工作：拟定网页主题、搜集相关资料、规划网页内容、绘制结构草图。2．中期制作阶段：在此阶段主要利用各种网页制作工具，开始制作网页，并不断地进行上传与测试，直到最后制作完毕。3．后期维护阶段：网页制作完成后，可进行发布和推广应用。根据需要，对网页进行更新与维护。1.3网站建立的一般流程一般来说，网页制作可分为三个阶段：13介绍的主要内容一.Web网站设计规划二.总体设计方案主题鲜明三.网站的栏目板块及网站结构四.网站草图与网页布局五.设计导航结构及链接结构六.收集网站所需资料七.创建高浏览器兼容的站点八.网站测试介绍的主要内容一.Web网站设计规划二.总体设计方案主题鲜明14一.Web网站设计规划创建Web网站的第一步是设计规划，在制作之前对网站进行规划是非常重要的。要明确设计网站的目的和用户需求，从而做出切实可行的设计计划。根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。一.Web网站设计规划创建Web网站的第一步是设计规划，在15在设计规划时我们应考虑

（1）建站的目的是什么?

（2）为谁提供服务和产品?（3）能提供什么样的产品和服务?

（4）网站的目的消费者和访问者的特点是什么?

（5）产品和服务适合什么样的表现方式（风格）?在设计规划时我们应考虑（1）建站的目的是什么?（2）为谁16二.总体设计方案主题鲜明1.定位网站和主题Web网站主页应具备得基本成分：页头：准确无误地标识你的网站和企业标志E-mail地址：用来接收用户垂询

联系信息：比如普通邮件地址或电话版权信息：声明版权所有者等

二.总体设计方案主题鲜明1.定位网站和主题Web网站主页应具172.定位网站CI形象所谓CI(CorporateIdentity)，是借用的广告界术语，意思是通过视觉来统一企业的形象。

一个杰出的网站，和实体公司一样，也需要整体的形象包装和设计。准确的、有创意的CI设计，对网站的宣传推广有事半功倍的效果。设计网站的标志（logo）

设计网站的标准色彩

设计网站的标准字体

设计网站的宣传标语

2.定位网站CI形象所谓CI(CorporateIdent18（1）设计网站的标志（logo）logo是你网站特色和内涵的集中体现

标志可以是中文、英文字母，可以是符号、图案，还可以是动物或者人物等等。

标志的设计创意来自你网站的名称和内容（1）设计网站的标志（logo）logo是你网站特色和内涵19标志的设计创意来源①网站有代表性的人物、动物、花草，可以作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。②专业性的网站，可以以本专业有代表性的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。③最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。标志的设计创意来源①网站有代表性的人物、动物、花草，可以作为20现实生活中的Logo现实生活中的Logo21（2）设计网站的标准色彩“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如：IBM的深蓝色，肯德基的红色条形，Windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱通常适于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色（2）设计网站的标准色彩“标准色彩”是指能体现网站形象和延22（3）设计网站的标准字体标准字体是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现网站的“与众不同”和特有风格，可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC机里没有安装你的特别字体，那么你的辛苦设计制作便会付之东流。（3）设计网站的标准字体标准字体是指用于标志、标题、主菜单23（4）设计网站的宣传标语网站的宣传标语也可以说是网站的精神、网站的目标，可用一句话甚至一个词来高度概括，它类似于现实生活中的广告金句。（4）设计网站的宣传标语网站的宣传标语也可以说是网站的精神、24三.网站的栏目版块及网站结构你是否能将最好的、最吸引人的内容放在最突出的位置以吸引更多的网友浏览网站？在制定栏目的时候，要仔细考虑，合理安排

网站的栏目

网站和版块

网站的目录结构

其他三.网站的栏目版块及网站结构你是否能将最好的、最吸引人的内251．网站的栏目栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来一般的网站栏目安排要注意以下几方面：

（1）记住一定要紧扣你的主题即将你的主题按一定的方法分类并将它们作为网站的主题栏目（2）设立一个最近更新或网站指南栏目（3）设立一个可以双向交流的栏目（4）设立一个下载或常见问题回答栏目1．网站的栏目栏目的实质是一个网站的大纲索引，索引应该一般的262．网站和版块版块比栏目的概念要大一些，每个版块都有自己的栏目。关于版块方面，主要是门户网站等较大ICP需要考虑的问题。设计时应注意：（1）各版块要有相对独立性。（2）各版块要相互关联。（3）版块的内容要围绕网站主题。2．网站和版块版块比栏目的概念要大一些，每个版块都有自己的273．网站的目录结构网站的目录是指你建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于网站本身的上传维护、内容及未来的扩充和移植有着重要的影响。组织好网站的结构会便于以后的管理和维护工作。3．网站的目录结构网站的目录是指你建立网站时创建的目录。28常用的方法在本地计算机上创建一个专门放置网站所有文件的文件夹，然后在该文件夹中制作和编辑Web页。当发布网站时，你就可以复制该文件夹到Web服务器上，以便让更多的人可以访问到你的网站。将你的网站内容以目录结构组织起来以方便维护和导航，将相关的文件放置在同一个文件夹里。常用的方法29需要注意的是：（1）不要将所有文件都存放在根目录下。所有文件都存放在根目录下，会造成文件管理混乱从而影响工作效率，另外还会影响上传速度。（2）按栏目内容建立子目录。子目录首先按主菜单栏目建立。对于次要栏目，需要经常更新的栏目可以建立独立的子目录。而不需要经常更新的栏目，可以合并放在一个统一目录下。所有程序一般都存放在特定目录下。所有需要下载的内容也最好放在一个目录下。（3）在每个主目录下都建立独立的images目录为每个主目录建立一个独立的images目录是最利于管理的。根目录下的images目录放首页和一些次要栏目的图片。目录的层次不要太深，为了维护方便，建议不要超过3层。需要注意的是：（1）不要将所有文件都存放在根目录下。（2）按30（4）其他注意方面①不要使用中文目录名，使用中文目录名可能对网址的正确显示造成困难。②不要使用过长的目录名，太长的目录名不便于记忆。③尽量使用意义明确的目录名，你可以用Flash、Dhtml、Javascript来建立目录名，也可以用1，2，3来建立目录名，但是哪一个更明确，更便于记忆和管理呢?显然是前者。（4）其他注意方面①不要使用中文目录名，使用中文目录名可能对31四.网站草图与网页布局：一般是在纸上绘制出网站的布局和大致外观，也可在特定的软件中（如Freehand和Fireworks）精确地绘制草图。当具体制作网站内容时，将一切参考网站草图进行。：DreamweaverMX提供了重复使用页面布局的简便方法，即制作网站时使用模板。使用模板技术不但可以提高网页制作的效率，而且当我们决定修改整个网页布局时，仅需更改模板即可。网站草图网页布局四.网站草图与网页布局：一般是在32五.设计导航结构及链接结构Web网站设计中，导航结构的设计一直是网页设计者比较关心的问题。导航栏对整个网站内容有提纲的作用，同时，一些广告和网站更新通知也经常放置在导航栏中，导航栏往往需要随时改变。五.设计导航结构及链接结构Web网站设计中，导航结构331．导航结构的设计导航栏一定要清晰、醒目。通常导航栏要在“第一屏”能显示出来，横向放置的导航栏要优于纵向的导航栏。下面这些方法会非常有用：（1）“当前位置”：在每一页的顶部提示当前所在页所处的位置，以便让浏览者知道身在何处，并可轻松地返回到上一层页面。（2）“搜索和索引”：在网站中添加搜索和索引功能，可以让浏览者快速查找到所需要的内容。（3）“反馈信息”：提供电子邮件地址或电话等信息，以便让浏览者能联系到网站的网管人员。遇到任何问题都可以快速得到反映并解决。1．导航结构的设计导航栏一定要清晰、醒目。通常导航栏要在“342．链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点链接，也可以和多个点链接。这些点并不是分布在一个平面上，而是存在于一个立体的空间中。我们研究网站的链接结构的目的在于用最少的链接，使得浏览最有效率。2．链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它35链接结构的两种基本方式树状链接结构（一对一）首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。星状链接结构（一对多）每个页面相互之间都建立有链接。立体结构像东方明珠电视塔上的钢球。优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。链接结构的两种基本方式树状链接结构（一对一）星状链接结构（一36六.收集网站所需资料网站最忌讳多而杂，在搜集资料时不要追求内容多而全，而应追求精、专、新，包括图像、文本及多媒体（Flash、Shockwave或其他），在某一领域中应做到全面、专业和深入。在开始制作网站内容之前，你应该确认已经收集了所有需要的资料。否则，你将有可能为了找到一个图像来创建按钮而中断了制作过程。六.收集网站所需资料37七.创建高浏览器兼容的站点现实状况：1访问者会使用不同的浏览器和不同的浏览器版本2站点使用的技术越前卫（如使用Flash动画、CSS、Layer定位），在不同的平台、不同的浏览器中出现问题的机会就越多方法1设置一些限制因素是不错的选择2在设计最好效果与最大浏览器兼容性之间取得平衡。3为站点的重要Web页提供不同的版本七.创建高浏览器兼容的站点现实状况：38八.网站测试由于网站刚开始不是满负荷运转，早期的测试并不能全面测试出网站的性能。一般情况下，网站测试需用六个月左右的时间，在这段时间里要统计网站访问量以及满负荷的运行速度、数据库的出错概率等，以便对网站及时做出调整。八.网站测试由于网站刚开始不是满负荷运转，早期的测试391.4在Internet上建立和管理一个网站中小型网站的建立

个人网站的建立

个人网站的建立1.4在Internet上建立和管理一个网站中小型网站的建立40一.建立企业级网站过程（1）申请域名。可向中国互联网信息中心CNNIC申请注册企业的域名，域名分为国际域名和国内域名。（2）制作企业的主页。（3）信息的发布和管理。