网页设计与制作概述

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与制作概述,了解有关网页的一些基本概念,了解网站的基本结构特性和网页的布局,了解网页制作的基本工具和开发语言,1.1 互联网与网站基本概念:,网页：,是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页。,万维网,（World Wide Web）：万维网简称WWW或3W，它也是建立在Internet上的一种网络服务。它遵循HTTP协议，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。,浏览器,：,要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。,目前常用的浏览器有:IE、netscape,和,腾训TT,统一资源定位器,（Universal Resource Locator，简称URL）：,Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL地址。,是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。,通信协议,：,也就是上面举例中的“http”部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。,主机名,：,指要访问服务器的Internet名称。,IP地址：,IP地址是一组32位的数字号码，如“218.30.12.184”，这就是上网主机的地址。,域名：,IP地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名的概念。,域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名www.good-下，有主机server1和server2，其主机全名就是和。也就是常说的二级域名。,域名前加上传输协议信息及主机类型信息就构成了网址（URL）,文件传输协议,（File Transfer Protocol，,简称FTP,）：,是一种快速、高效和可靠的信息传输方法。,超文本标记语言,（Hyper Text Markup Language，简称HTML）：它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。,表单:,表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。,超级链接:,这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。,导航条：,导航条能十分有效地实现超级链接功能。,发布：,将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。,1.2,网站制作流程,搜集资料，规划网站,选择合适的制作工具,制作网页,测试发布,推广宣传,网站维护,（1）定位网站的主题和名称,主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。,对于主题的选择，应注意：,主题要小而精。定位要小，内容要精。,题材最好是你自己擅长或者喜爱的内容。,题材不要太滥或者目标太高。,1.规划设计,（2）确定网站的栏目和版块,一般的网站栏目安排要注意以下几方面：,要紧扣你的主题,将你的主题按一定的方法分类并将它们作为网站的主栏目，主题突出，容易给人留下深刻印象。,设一个最近更新或网站指南栏目,设定一个可以双向交流的栏目,设一个下载或常见问题回答栏目,（3）确定网站的目录结构,不要将所有文件都存放在根目录下。,按栏目内容建立子目录。,在每个主目录下都建立独立的,images,目录。,目录的层次不要太深。目录的层次建议不要超过,3,层。,不要使用中文目录,不要使用过长的目录,尽量使用意义明确的目录，便于记忆和管理。,（4）确定网站的链接结构,树状链接结构（一对一）。,点击“古典音乐”,点击“古筝”,星状链接结构（一对多）。,页面1,（1.Htm),主页面,（index.Htm),页面3,（3.Htm),页面2,（2.Htm),点击“影视”,点击“古典音乐”,最好的办法是：,首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,页面1,（1.Htm),主页面,（index.Htm),页面3,（3.Htm),页面2,（2.Htm),页面6,（6.Htm),页面7,（7.Htm),页面4,（4.Htm),页面5,（5.Htm),点击“古典音乐”,音乐页面,在程序员进行详细设计的同时，网页美工开始设计网站的整体形象和首页。整体形象设计包括标准字体、Logo、标准色彩、广告语等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括菜单、标题、版权等模块设计。也可以将自己感兴趣的素材通过,图像切割工具将其收集。,模块布局宗旨在于方便访问者浏览，如今的多媒体Web网页具有强大的交互功能，多种媒体方式如,文字、图片、动画、声音、超级链接,等同时存在。文字是一种简洁有效的媒体，输入方便，处理速度快，在网速较慢的情况下适合用文字进行大面积布局。图片可以给人以较为直观的感受，以及更为感性的认识，其缺点是下载速度慢，,在网速慢的情况下不宜大面积运用。,（5）设计网站的整体风格,网页的色彩,网页的色彩是树立网站形象的关键因素之一。在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致。,可以采用专门的配色软件。,网页的文字,注意以下基本原则,:,不要使用超过,3,种字体类型，否则网页看起来将显得杂乱，没有主题,不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息,最好不要使用不停闪烁的文字。,标题的字体比正文要稍大一些，颜色也应有所区别。,设计网站的标志,(logo),logo,是你站点特色和内涵的集中体现，看见,logo,就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。,下载另存后的文件为：Twins07.swf,在自己的页面中选择“插入”|“媒体”|“Flash”命令,中国风格：古色古香，韵味典雅，古典的边框，温雅的颜色。,具有个性的网页欣赏：天马星空，随性发挥,常见的中国门户网站：庄重大气，有板有眼，方方正正，内敛不张扬。,企业类简洁网页：页面清爽，让客户一目了然，大气，颜色多和产品类型有关。,欧美风格-科技感：动感的弧形图案，金属质感的图标，以及商业化、科技感的图片。,时尚感：前卫、时尚的图片，相关颜色的陪衬,科技色多，色调偏冷、页面结构硬朗。,日韩风格：渐变颜色，颜色鲜明，使用高分辨率的图片。,日韩风格：颜色搭配调和，多种颜色而不觉花哨，色彩丰富饱和而恰到好处。,根据网站内容的整体风格，设计版面布局。设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识。这时设计者用笔在纸上粗略地勾画出布局的轮廓。常见的网页布局结构有：,（6）网页版面和布局,T型结构,同字结构,川字结构,三字结构,单一结构,Flash 型,T型结构,同字结构,川字结构,三字结构,单一结构,2.网页制作工具,（1）网页布局工具,Dreamweaver,Frontpage,（2）网页美化工具,图像处理软件:Photoshop,Fireworks,动画制作软件:FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D,本章小结,本章介绍了网页设计与制作的基本概念和基本知识、常用的网页制作工具、网站的基本结构和网页布局等内容。通过本章的学习使读者对网页的设计与制作过程有一个概貌性的了解。,