资源描述
网页设计与制作,第一篇 网页设计基础,当今社会已经进入到信息时代，同时随着INTERNET的迅速发展，人们越来越多地通过网络来实现其活动：网上信息、网上购物、网上求医等等。 对于网站的要求也随之不断提高，网站的内容要充实，网页的浏览以及更新速度要快，网页在视觉上要美观，这对网站开发人员提出了更高的要求。,第一篇 网页设计基础,为了在最短时间内开发出最符合客户需求的网站，开发工具的选择成为一个重要因素。 由Macromedia公司开发的Dreamweaver、Fireworks和Flash被称为网页制作三剑客，为 网站的开发人员提供了三把用于网站开发的利剑。我们将在随后的章节中逐一介绍。,第一篇 网页设计基础,本篇主要内容： 介绍网页设计的基本知识 介绍网站的建设流程 本篇主要目的： 对网页设计有一个初步的认识和了解,第1章,网站设计与建立的一般流程,1.1网站设计的创意及风格,设计网站需要考虑的因素非常多，从前期的网站的定位、整理资料、设定网站框架，到具体制作中的设计环节，再到最后的调试、发布、宣传，是一个环环相扣的过程。 作为一名普通网页设计师，无论你设计的是企业网站还是个人网站，最重要的是要有创意，要有自己的风格，要与众不同。,1.1网站设计的创意及风格,网站的创意与风格是网站能否生存的关键所在,给定一个主题，不同的人不可能设计出完全一 样的网站。,那么到底什么是创意，什么是风格呢?,一.网站的创意,创意是捕捉出来的点子，是创作出来的奇招，是传达信息的一种特别方式。其目的是为了更好地宣传推广网站。这里说的创意是指网站的整体创意 。,（1）创意并不是天才的灵感，而是思考的结果,准备期 研究所搜集的资料，根据经验，启发 新创意； 孵化期 将资料咀嚼消化，使意识自由发展， 任意结合； 启示期 意识发展并结合，产生创意； 验证期 将产生的创意讨论修正； 形成期 设计制作网页，将创意具体化。,根据美国广告学教授詹姆斯的研究，创意思考的过 程可分为五个阶段：,（2）创意是将现有要素的重新组合,网络上的许多创意来自与现实生活（或者虚拟现实）的结合。今天，网上的许多在线书店、电子社区、在线拍卖等无一不是现有要素重新组合的结果。 从这一点出发，任何人，包括你和我，只要用心去观察都可以创造出不同凡响的创意。,二.网站的整体风格,（1）风格是抽象的 （2）风格是独特的 （3）风格是人性的,风格是网站的整体形象给浏览者的感受， 它有以下主要特点：,如何树立网站的风格 树立网站风格通常可从以下几个方面来思考： 确信风格是建立在有价值的内容之上的。 要彻底搞清楚自己希望网站给人的印象是什么。 在明确自己的网站印象后，开始努力建立和加强这种印象。,1.2网站设计与建立的基本原则,（1）准确定位网站的主题、名称，方向明确。 （2）做好网站形象和整体风格的创意设计。 （3）仔细策划网站的栏目模块及其层次结构。 （4）网站内容要精、专、奇、新，不要面面俱到。 （5）灵活运用色彩，发挥其在网页设计中的作用。 （6）导航结构要一目了然，以提高网络的交互性 和亲合度。 （7）要注意带宽、浏览器、分辨率等问题。,1.3网站建立的一般流程,一般来说，网页制作可分为三个阶段： 1前期工作准备阶段：在此阶段主要完成以下几个方面的工作：拟定网页主题、搜集相关资料、规划网页内容、绘制结构草图。 2中期制作阶段：在此阶段主要利用各种网页制作工具，开始制作网页，并不断地进行上传与测试，直到最后制作完毕。 3后期维护阶段：网页制作完成后，可进行发布和推广应用。根据需要，对网页进行更新与维护。,介绍的主要内容,一.Web网站设计规划,二.总体设计方案主题鲜明,三.网站的栏目板块及网站结构,四.网站草图与网页布局,五.设计导航结构及链接结构,六.收集网站所需资料,七.创建高浏览器兼容的站点,八.网站测试,一.Web网站设计规划,创建Web网站的第一步是设计规划，在制作之前对网站进行规划是非常重要的。 要明确设计网站的目的和用户需求，从而做出切实可行的设计计划。根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。,在设计规划时我们应考虑,（1）建站的目的是什么?,（2）为谁提供服务和产品?,（3）能提供什么样的产品和服务?,（4）网站的目的消费者和访问者的特点是什么?,（5）产品和服务适合什么样的表现方式（风格）?,二.总体设计方案主题鲜明,1.定位网站和主题,Web网站主页应具备得基本成分：,页头： 准确无误地标识你的网站和企业标志,E-mail地址： 用来接收用户垂询,联系信息： 比如普通邮件地址或电话,版权信息： 声明版权所有者等,2.定位网站CI形象,所谓CI(Corporate Identity)，是借用的广告界术语， 意思是通过视觉来统一企业的形象。,一个杰出的网站，和实体公司一样，也需要整体的 形象包装和设计。准确的、有创意的CI设计，对网 站的宣传推广有事半功倍的效果。,设计网站的标志（logo）,设计网站的标准色彩,设计网站的标准字体,设计网站的宣传标语,（1）设计网站的标志（logo）,logo是你网站特色和内涵的集中体现,标志可以是中文、英文字母，可以是符号、 图案，还可以是动物或者人物等等。,标志的设计创意来自你网站的名称和内容,标志的设计创意来源,网站有代表性的人物、动物、花草，可以作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。 专业性的网站，可以以本专业有代表性的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。 最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。,现实生活中的Logo,（2）设计网站的标准色彩,“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如：IBM的深蓝色，肯德基的红色条形，Windows 视窗标志上的红蓝黄绿色块，都使我们觉得很贴切， 很和谐。,标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱,通常适于网页标准色的颜色有： 蓝色，黄/橙色， 黑/灰/白色三大系列色,（3）设计网站的标准字体,标准字体是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。 为了体现网站的“与众不同”和特有风格，可以根据自己网站所表达的内涵，选择更贴切的字体。 需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC机里没有安装你的特别字体，那么你的辛苦设计制作便会付之东流。,（4）设计网站的宣传标语,网站的宣传标语也可以说是网站的精神、网站的目标，可用一句话甚至一个词来高度概括，它类似于现实生活中的广告金句 。,三.网站的栏目版块及网站结构,你是否能将最好的、最吸引人的内容放在最突出的 位置以吸引更多的网友浏览网站？,在制定栏目的时候，要仔细考虑，合理安排,网站的栏目,网站和版块,网站的目录结构,其他,1网站的栏目,栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来,一般的网站栏目安排要注意以下几方面：,（1）记住一定要紧扣你的主题即将你的主题按 一定的方法分类并将它们作为网站的主题栏目,（2）设立一个最近更新或网站指南栏目,（3）设立一个可以双向交流的栏目,（4）设立一个下载或常见问题回答栏目,2网站和版块,版块比栏目的概念要大一些，每个版块都有自己的栏目。 关于版块方面，主要是门户网站等较大ICP需要考虑的问题。 设计时应注意： （1）各版块要有相对独立性。 （2）各版块要相互关联。 （3）版块的内容要围绕网站主题。,3网站的目录结构,网站的目录是指你建立网站时创建的目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于网站本身的上传维护、内容及未来的扩充和移植有着重要的影响。 组织好网站的结构会便于以后的管理和维护工作。,常用的方法 在本地计算机上创建一个专门放置网站所有文件的文件夹，然后在该文件夹中制作和编辑Web页。当发布网站时，你就可以复制该文件夹到Web服务器上，以便让更多的人可以访问到你的网站。将你的网站内容以目录结构组织起来以方便维护和导航，将相关的文件放置在同一个文件夹里。,需要注意的是：,（1）不要将所有文件都存放在根目录下。 所有文件都存放在根目录下，会造成文件管理混乱 从而影响工作效率，另外还会影响上传速度。,（2）按栏目内容建立子目录。 子目录首先按主菜单栏目建立。 对于次要栏目，需要经常更新的栏目可以建立独立的子目录。 而不需要经常更新的栏目，可以合并放在一个统一目录下。 所有程序一般都存放在特定目录下。 所有需要下载的内容也最好放在一个目录下。,（3）在每个主目录下都建立独立的images目录 为每个主目录建立一个独立的images目录是最利于管理的。 根目录下的images目录放首页和一些次要栏目的图片。 目录的层次不要太深，为了维护方便，建议不要超过3层。,（4）其他注意方面,不要使用中文目录名，使用中文目录名可能对网址的正确显示造成困难。 不要使用过长的目录名，太长的目录名不便于记忆。 尽量使用意义明确的目录名，你可以用Flash、Dhtml、Javascript来建立目录名，也可以用1，2，3来建立目录名，但是哪一个更明确，更便于记忆和管理呢?显然是前者。,四.网站草图与网页布局,：一般是在纸上绘制出网站的布局和大 致外观，也可在特定的软件中（如Freehand和 Fireworks）精确地绘制草图。当具体制作网站内容时，将一切参考网站草图进行。,：Dreamweaver MX提供了重复使用页面 布局的简便方法，即制作网站时使用模板。使用模 板技术不但可以提高网页制作的效率，而且当我们 决定修改整个网页布局时，仅需更改模板即可。,网站草图,网页布局,五.设计导航结构及链接结构,Web网站设计中，导航结构的设计一直是 网页设计者比较关心的问题。 导航栏对整个网站内容有提纲的作用，同时，一些广告和网站更新通知也经常放置在导航栏中，导航栏往往需要随时改变。,1导航结构的设计,导航栏一定要清晰、醒目。通常导航栏要在“第一屏”能显示出来，横向放置的导航栏要优于纵向的导航栏。 下面这些方法会非常有用： （1）“当前位置”：在每一页的顶部提示当前所在页所处的位置，以便让浏览者知道身在何处，并可轻松地返回到上一层页面。 （2）“搜索和索引”：在网站中添加搜索和索引功能，可以让浏览者快速查找到所需要的内容。 （3）“反馈信息”：提供电子邮件地址或电话等信息，以便让浏览者能联系到网站的网管人员。遇到任何问题都可以快速得到反映并解决。,2链接结构,网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。 每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点链接，也可以和多个点链接。这些点并不是分布在一个平面上，而是存在于一个立体的空间中。 我们研究网站的链接结构的目的在于用最少的链接，使得浏览最有效率 。,链接结构的两种基本方式,树状链接结构（一对一） 首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,星状链接结构（一对多） 每个页面相互之间都建立有链接。立体结构像东方明珠电视塔上的钢球。 优点是浏览方便，随时可以到达自己喜欢的页面。 缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。,六.收集网站所需资料,网站最忌讳多而杂，在搜集资料时不要追求内容多而全，而应追求精、专、新，包括图像、文本及多媒体（Flash、Shockwave或其他），在某一领域中应做到全面、专业和深入。 在开始制作网站内容之前，你应该确认已经收集了所有需要的资料。否则，你将有可能为了找到一个图像来创建按钮而中断了制作过程。,七.创建高浏览器兼容的站点,现实状况： 1访问者会使用不同的浏览器和不同的浏览器版本 2站点使用的技术越前卫（如使用Flash动画、CSS、Layer定位），在不同的平台、不同的浏览器中出现问题的机会就越多 方法 1设置一些限制因素是不错的选择 2在设计最好效果与最大浏览器兼容性之间取得平衡。 3为站点的重要Web页提供不同的版本,八.网站测试,由于网站刚开始不是满负荷运转，早期的测试并不能全面测试出网站的性能。 一般情况下，网站测试需用六个月左右的时间，在这段时间里要统计网站访问量以及满负荷的运行速度、数据库的出错概率等，以便对网站及时做出调整。,1.4在Internet上建立和管理一个网站,中小型网站的建立,个人网站的建立,个人网站的建立,一.建立企业级网站过程,（1）申请域名。可向中国互联网信息中心CNNIC申请注册企业的域名，域名分为国际域名.com和国内域名。 （2）制作企业的主页。 （3）信息的发布和管理。,二.中小型网站的建立过程,1采用虚拟主机服务：可租用ISP（Internet Server Provider的缩写，表示互联网服务供应商）提供的服务器磁盘空间，由ISP专业人员进行系统维护; 2用服务器托管的方法：即将制作完成的服务器主机放在ISP的网络中心里，利用其通讯系统接入Internet; 3采用DNN专线接入的方法：即把自己的服务器放置在本地机房，通过DNN专线与ISP网络中心联结接入Internet。,三.个人网站的建立过程,对于个人网站来说，在网站发布之前，一般都需要向商业网站申请免费的存储空间。免费空间的好处是你不用花一分钱便可建立起个人网站，并且网站有专人管理，你只需要定期把更新的网页上传即可。 在申请免费空间成功后，会给你发送一个电子邮件，邮件中提供一个用户名和密码，然后利用FTP上传工具可以将网站发布到远程服务器上，这样任何上网的人都可以访问到你的网站 。,本章小节,基本知识点：,网页的创意方法,网页的不同风格,网页的设计与编辑的基本原则,网页设计的一般流程,网页设计的色彩搭配,要求：对如何制作一个简单的网页有一个系统的 概念， 对网页设计中应注意的问题提前有 所认识。,
展开阅读全文