常用网页制作软件与技巧.docx

《常用网页制作软件与技巧.docx》由会员分享，可在线阅读，更多相关《常用网页制作软件与技巧.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、111第第 章章导读网站开发入门: 网页和网站的区别: 常用网页制作软件: 网页制作的原则和用色技巧: 网页制作的流程为了适应网站开发的需要，Macromedia公司推出了Dreamweaver 8，它是一款优秀的网页编辑器，所见即所得，使用者无须掌握Java、HTML等专业语言，就能制作出专业的网页。本章介绍网页与网站的区别，了解建站常用的工具软件，同时向读者讲述网页制作的原则和用色技巧，并详细讲解网站制作的基本流程，在正式制作网页之前向读者介绍网站的入门知识。1.1 认识网页和网站很多人会把网页和网站混淆。那么网页和网站究竟有什么区别呢？简单来说，网站是由网页组成的，而大家通过浏览器看到的

2、画面就是网页，网页说具体了是一个HTML文件，浏览器是用来解读这份文件的。但是网站要复杂一些，很明显，网站一般不止一个网页。网站是由若干个网页集合而成，至于多少网页集合在一起才能称作网站没有明确的规定，其实即使只有一个网页文件也能被称为网站。本书的编写目的就是教会读者如何使用Dreamweaer 8软件来编辑制作网页。1.1.1 认识网页网页称作HTML文件，是一种可以在WWW网上传输，并被浏览器认识和翻译成页面并显示出来的文件。 Wide Web的缩写；HTML是Hypertext Markup Language的缩写，中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、

3、音乐、程序等非文字的元素，它就像记事本和放映机一样，记录着网站拥有者和设计者的生活、思想、经验、心情等。在现今信息飞速发展的时代，网页已与人们密不可分，融合成为我们生活中重要的一部分。从设计角度来讲，网页可以分为“静态网页”和“动态网页”。静态网页是指网页文件中没有程序，而只有HTML代码，一般以.html或.htm为后缀名的网页。静态网站内容不会在制作完成后自动更新，任何人访问此网页都显示一样的内容，如果想要修改网页中的内容就必须使用网页编辑工具修改网页源代码然后再重新上传到Web服务器上。动态网页，就是说该网页文件不仅具有HTML标记，而且还含有程序代码，通过数据库建立连接。动态网页可以根

4、据不同的时间、不同的来访者以及不同的浏览器显示不同的网页内容；动态网站更新方便，一般在后台通过信息发布的方式在Web端直接进行网站信息的添加、删除等更新操作。使用静态网页还是使用动态网页呢？应该根据网站的内容来决定。如果网站内容比较固定，做好之后不需要经常修改内容及界面，就可以采用静态页面。静态的制作成本低而且网站的打开速度相对较快，而且基本上不需要维护；如果网站的内容经常需要添加、修改，那么做成动态的网页更方便管理，因为文字和图片等资料的更新随时可以后台操作，这对于网站的使用者和管理者来说很方便，不需要掌握编程和网页制作知识就可以轻松管理自己的网站，更为设计者在日后维护网站时减少了页面编辑的

5、工作量。1.1.2 认识网站网站，通俗地说就是在互联网上一块固定的面向全世界发布消息的地方。它由网页集合而成，放置到指定的网站空间中（服务器或虚拟主机），通过域名（也就是网站地址）进行访问。衡量一个网站的性能，通常从网站空间大小、网站连接速度、服务器主机配置、主机性能等几个方面考虑。如果将互联网比喻成一个超级市场，那么企业上网，只是以一个旁观者的身份进入到这个超级市场当中，只有企业建立了自己的网站，才能在这一市场当中有了自己的摊位，才可以更加直观地在Internet中宣传公司产品，展示企业形象。1.1.3 了解网页制作中的专业术语1Banner（横幅广告）横幅广告是互联网广告中最基本的广告形式

6、。它是一个表现商家广告内容的图片，放置在广告商的页面上，尺寸是48060像素，或23330像素；一般是Gif格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像；除普通Gif格式外，新兴的RichMedia Banner（富媒体广告）能赋予Banner更强的表现力和交互内容，但一般需要用户使用的浏览器插件支持（Plug-in）。Banner一般翻译为网幅广告、旗帜广告、横幅广告等。 2Browser（浏览器）浏览器（Browser）就是指在电脑上安装的，用来显示指定文件的程序。WWW的原理就是通过网络客户端（Client）的浏览器去读指定文件。同时，Internet上还提供了远程登录

7、（Telnet）、电子邮件（E-mail）、传输文件（FTP）、电子公告板（BBS）、网络论坛（Netnews）等多种交流的方式。3Click（点击次数）用户通过点击广告而访问广告主的网页，称点击一次。点击次数是评估广告效果的指标之一。4CookieCookie电脑中记录用户在网络中行为的文件。网站可通过Cookie来识别用户是否曾经访问过该网站。当浏览某些Web站点时，这些站点会在用户的硬盘上用很小的文本文件存储一些信息，这些文件就称为Cookie。Cookie中包含的信息与浏览者的爱好有关。5Database（数据库）Database通常指的是利用现代计算机技术，将各类信息有序地分类整理，

8、便于查找和管理。在网络营销中，指利用互联网收集用户个人信息，并存档、管理，例如姓名、性别、年龄、地址、电话、兴趣爱好、消费行为等。6HTML（超文本标识语言）HTML是一种基于文本格式的页面描述语言，是网页通用的编辑语言。7HTTP（超级文字传输协议）HTTP，即Hyper Text TransferProtocol，是万维网上的一种传输格式，当浏览器的地址栏上显示“HTTP”时，就表明正在打开一个万维网页面。 8Key Word（关键字）Key Word是用户在搜索引擎中提交的文字，以便快速查询所需内容。9URLURL即某网页的链接地址，在浏览器的地址栏中输入URL，即可看到该网页的内容。1

9、0Web Site（站点）Web Site即为互联网或者万维网上的一个地址。站点包含各种组成物，某一个特定的域名，一个包含网页的地方。更多术语可以参看本书后的附录G“网页制作部分常用专业术语”。1.2 常用网页制作软件本节介绍制作网页过程中常用的编辑软件、网页图片处理常用软件、制作动画的处理软件，以及一些互联网上常用到的小工具软件。本书只是提交这些软件的大概功用及优势，至于如何具体操作，会在具体的实例中有所提及。1.2.1 网页编辑软件作为网页三剑客成员之一，Dreamweaver是目前应用最广的网页制作软件。虽然Macromedia公司发生了一些变故，但目前的网页制作市场上依旧至少流行着Dr

10、eamweaver的3个版本，即Dreamweaver 4.0、Dreamweaver MX 2004和Dreamweaver 8。本书主要应用Dreamweaver 8来制作网页，还有一些其他的工具软件也同样可以制作和编辑网页，在此列举最常用的几个工具软件。q Microsoft FrontPage：市场上最流行的优秀网页设计软件之一，Office办公系统软件自带的一个工具，操作简单，实用性强。q Dreamweaver MX 2004：目前Dreamweaver在市场上仍然流通至少3个版本，占主流地位。它是一套“所见即所得”的网页编辑软件，适合不同层次的人使用。q UltraEdit-32

11、：代码编辑工具，主要编辑ASP等动态网页。q JavaScript：网络编程工具。1.2.2 图像处理软件做网页需要有一定的平面设计基础。如果设计者只会写程序，没有一定的界面设计功底，即便你的程序编写得再好，没有美观的界面为依托，还是没有人愿意来看你的网页，就像一件衣服一样，衣料再好，样子不好看也不会有人去买。在制作网页过程中常用的图像处理软件有：q Photoshop，网页设计者必须精通的一个图形处理工具。q Imageready，在用Photoshop将界面设计完成后，切换到Imageready中进行界面分割处理，快速完成由图到网页的过渡。不过凡事有利弊，要学会灵活运用。q ACDSee，

12、目前最流行的数字图像处理软件，它能广泛应用于图片的获取、管理、浏览、优化，甚至和他人进行分享。q Fireworks，制作网页的高级辅助工具，可以进行动画制作，图像优化，热点、切片和轮替按钮，文件导入和导出，无须学习代码即可创建具有专业品质的网页图形和动画，例如变换图像和弹出菜单等。1.2.3 动画制作软件网页的动画一般分为两种，即GIF动画和Flash动画。这两种动画都可以通过Flash软件来完成，而GIF动画有很多种工具可以实现，Flash的文字动画也有专门的工具，这些工具对于想做出好的动画，又不能熟练使用Flash的制作者提供了极大的方便。下面就一些常用工具简要地做一下介绍。至于如何应用

13、，读者可以找专门的相关教程来学习，这里不再赘述。q Fash MX 2004Flash 8.0：Flash是交互式矢量图和Web动画的标准，网页设计者使用Flash能创建漂亮的、可改变尺寸的动画，可以创建极其紧密的导航界面、技术说明以及其他奇特的效果。q Swish 2.0：在此工具中做好文字动画后可以导出为.swf格式的文件，再导入到Flash中进行进一步的处理，让Flash更生动，更炫目多彩。q Ulead GIF Animator 5.05：友立公司出版的动画GIF制作软件，内建的Plugin有许多现成的特效可以立即套用，可将AVI文件转换成动画GIF文件，而且还能将动画GIF图片最佳化

14、，能将放在网页上的GIF动画减肥，以便让人能够更快速地浏览网页。q 硕思闪客精灵：支持将SWF文件导出成FLA文件，帮助丢失FLA文件的影片作者重新获得FLA文件，从而可以再编辑。q 硕思闪客之锤：是一款具有专业水准的动画制作工具。它支持图形设计、运动动画、引导线、遮罩效果、流声音和事件声音、帧标记、设置电影剪辑、按钮等符号。q 文字动画特效制作Swish Zone：特效中有许多细节结合使用能得到非常炫的效果，直接预览，能直接导出为SWF文档格式。q GIF动画制作GIF Movie Gear 3.0：GIF动画制作软件，几乎有需要制作GIF动画的编辑功能它都有，无须再用其他的图形软件辅助。1

15、.2.4 其他小工具软件在制作网页的过程中，有时需要做一些特殊处理，这时就需要一些小的工具软件来帮忙，这样既省时又省力，就像一些特效Java代码，没必要一行一行来写，再加上调试浪费不少精力。下面简单介绍几个常用的实用小工具软件。q 网页小秘书：有屏幕取色、IE滚动条设置、文本转换、颜色配制等特色小设置。q 网页魔法菜单：可以很轻松地制作多种意想不到的下拉菜单效果。超实用。q 网页减肥茶：可以将网页文件成批，最大可达50%，压缩后直接读取，与压缩前完全一样。本软件还有还原功能，可以放心使用，可以助设计者一臂之力。q 批量改网页的内容替换工具：主要功能是替换文本文件内容，可多行替换和成批文件替换。

16、q 网页特效大师：一个可以自动生成网页特效的软件，收集了包括时间特效、文字特效、图形图像处理、鼠标特效、页面特效、小甜饼、在线游戏、其他特效在内的8类共62个特效。还有更多的软件就不一一列举了，可以根据具体的需要来有选择性的利用以上这些工具。俗话说“工欲善其事，必先利其器”，在制作网页的过程中用到的这些工具，只有能灵活运用，才能保证在最快的时间内做出最有效率并值得欣赏的网页作品来。1.3 网页制作的原则和技巧本章介绍制作网页的原则和一些技巧。本节所谈到的原则及技巧可能不是最好的，只是作者在日常中的一些经验总结，希望能在制作中给读者一点帮助和参考，这样就足够了。万事没有定规，不管什么原则，只要保

17、证作品能让浏览者肯定和认可，这样就可以说是成功了，不必为自己求全责备。网页制作是一个自我提高的过程，每做一件作品，再回头看曾经的作品相信每一次制作都是一次自身的提高，而不是中规中矩的重复劳动。如果是这样，本书也就没有什么意义了。1.3.1 网页制作的基本原则凡事皆有原则，网页设计更不例外。在设计网页之初，就像一张白纸，不可能随便乱涂乱画，想怎么做就怎么做。做出一个优秀的页面，应该考虑到以三点：网页内容、浏览速度、界面美感。基于国内的网速和带宽，网页的内容和浏览速度则当优先考虑，至于界面当然也要尽可能做到美观简洁。其实像现在流行的铺天盖地的韩国网站模板，说实话并不太适合国内的行情，网速是主要的原

18、因，所以大家在借鉴的同时要综合考虑，“取其精华，去其弊端”，网页制作基本要遵循以下几个原则。1网站内容内容要放在第一位。浏览者之所以会看到你的网站，首先就是想找到他需要的信息，像一些专门提供下载素材，如软件、MP3、小说、图片素材类的网站。一般浏览者没有时间来看界面是不是够炫，通过搜索引擎来到网站的客户主要是针对网站的内容而来，在各在搜索网站中排名靠前的网站无一不是以内容取胜。2网页大小在明确好内容的基础上，就要考虑到浏览网速。因为国内网络的传输线路相对较慢，有时内容即使再好，如果网页下载速度过慢，也会使浏览者失去耐心，可能不到网页打开四分之一就把网页关掉了，从而严重影响到网站访问量。有的网站

19、为了提高访问速度，不得不牺牲一些网页外观。因此，在图片处理上就要更细致，图片的大小不能太大，表格的多层嵌套也要慎用。3界面美观像一些设计类的网站就比较注重界面的视觉效果。的确，如果是客户找商家下订单，作为设计者本身的网站不能够吸引人，就会失去不少客户。但是从另一个方面考虑，如果一味注重网站的美感，就肯定要做出两个牺牲，一是速度，二是要投入太多的时间。一个好的排版会消耗很多时间。但是在大多数的情况下，例如做一个企业网站给客户，他看的主要是网页漂亮不漂亮，其他的不会多想，毕竟他们不是专业人士，不会想更多这样的问题。这也让设计者更多的是无奈，但是客户是第一位的，如何保障一个网站既能让客户在界面上满意

20、，又能保障网站的快速浏览就需要设计者下更多的功夫了。1.3.2 网页制作的技巧一个经验丰富的网页设计人员，会适当使用一些技巧。当然，技巧归技巧，有些看上去很炫的网页特效，会给网页带来几十行的代码累赘，除非是特别需要，一般特效还是要慎用。下面举几个简单且常用的小技巧。1屏蔽鼠标右键最常见的一种方法为：/当用户按下鼠标右键时会弹出一个警告窗口 function click() if (event.button=2) alert(对不起，本页的内容不经允许不得复制。)document.onmousedown=click简单一点的方法：/IE5适用，取消菜单显示 document.oncontextm

21、enu =new function()return false 或者在标签中加入2最大化窗口最大化3最小化窗口 最小化4关闭窗口关闭窗口5如何定时载入另一个网站的内容在源代码中的head/head 加入如下代码： meta http-equiv=refresh content=40;URL= 40秒后将自动载入所在的网页网页制作过程中还需要掌握一些制作要领和制作规范，以及网页设计的色彩搭配技巧，这在本书第14章会有更详细的介绍。通过前人制作的经验再加上自身的实践积累，多动手多动脑才能制作出精美的网页。1.3.3 用色技巧要想让网页给浏览者一个视觉上的冲击，那么色彩就是最好的表现方式。在制作过程

22、中，色彩通用的应用原则是“总体协调，局部对比”，也就是说，网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈的色彩对比。在同一页面中，可以使用相近色来设置页面中的各种元素。q 首先，要确定整个站点的主色调。确定主色调时，最好根据网站的对象及站点的内容来确定主色调。例如，想创建一个游戏站点，则适合选用黑色或暗红色；旅游类站点适合选草绿色搭配黄色；政府类站点可以使用深红色、深蓝色；时装类站点可以选用高级灰、玫瑰紫等；校园类站点一般选用绿色；科技类站点一般选用深蓝色；新闻类站点适合用蓝色、桔黄、深红色。q 其次，如果是创建公司站点，还应该考虑公司的企业文化。从公司的标识上可以大体

23、看出一个公司的基本文化。例如，某科技公司的标识是由红色和黑色组成的，那么在设计该公司站点时就可以考虑以红色或黑色为主色调。q 对于站点标志一般要用深色，具有较高的对比度，以便浏览者能够非常方便地看到其在该站点中所处的位置。标题可以使用与网页内容非常不同的字体和颜色来设计，也可以采用网页内容的反色来做。q 在同一页面中，当要在两种截然不同的色调之间过渡时，在它们中间搭配上灰、白或黑，往往能很自然地进行过渡。网页中的文字要暗，对比度要高。一般是白底黑字，如果是黑底，也可用灰色的字体，或用很淡的颜色来做。q 对于导航栏所在区域，是一个网站的灵魂所在，就像一把大门的钥匙，网站最离不开的就是它。一般的做

24、法是把菜单背景颜色和导航字体或图片做对比度比较高的设置，将网页内容和菜单的不同目的准确地区分开来。q 对于侧栏，尽管不是所有的网页都有侧栏，但它也不失为显示附加信息的一个有用方式。设置侧栏时，它应与网页的内容清楚地区分开来，以便于阅读。q 页脚可以考虑和侧栏相同的颜色，或稍微淡一些的颜色；如果侧栏的颜色比较淡，则可以大胆使用深色的细条来处理，还有些采用渐变来处理页脚。q 如果有一些需要跳跃的内容，则可以采用一些鲜艳的颜色来引导浏览者的视线。例如用比较鲜艳的橙色或蓝色来做导航、按钮等。一个网站不可能单一地运用一种颜色，让人感觉单调、乏味。但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮、花哨

25、。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。特别需要注意的是，一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。另外要考虑哪种因素占主要地位，是明度、纯度还是色相。“不拘一格”往往可以出奇制胜。按部就班有时会使网页的整体感觉过于死板，在颜色的配比上，有时突破常规往往会取得意想不到的效果，让人眼前一亮，在设计的时候针对不同的客户不妨尝试一下。1.4 网页制作的流程制作网页的基本语言HTML看上去并不复杂，然而真

26、正制作出高质量的网页也并非人人都行。这至少要涉及到文字编辑，版式设计，图片加工和处理，多媒体制作等各方面因素。要真正地制作出高质量、艺术性与技术性俱佳的主页，需要专业人员进行合理的统筹安排才能高效率地完成。1.4.1 收集资料和素材收集客户资料，根据客户提出网站建设基本要求，收集相关文本及图片资料和用户确定制作内容及要求（如公司介绍、项目描述、网站基本功能需求、基本设计要求），并搜集此网页需要的图片等素材。前期的准备工作可以让你在设计时节省很多寻找素材的时间。这时需要一份客户需求书，因为客户毕竟不全是专业人士，通过这个需求书可以让客户更细致地准备资料。1.4.2 规划站点根据客户的需求，规划网

27、站的布局和结构划分。这时需要做一份精细的网站策划书。别以为先期这些工作是无用功，其实这一点至关重要。往往有这样的情形，在设计时投入了大量的精力，等设计好后，自认为比较完美的方案客户却不满意。这时需要站在客户的角度考虑网站的受众对象，最好的不一定是客户最需要和最满意的。这是因为没有和客户沟通好，所以做好这一点就能减少以后的很多无用功，以及反复修改设计的过程。1.4.3 制作网页签订好合同，收付定金，客户与用户确认后，开始制作网页。一般是先制作出首页，在请客户对网页风格确认后，再进行其他网页的制作。制作网页的过程需要合理地分配设计时间，以提高效率。这里面的道理其实很简单，就是“统筹分配”。在客户确

28、认了网站的风格以及布局以后，如何快速完成网页的制作，作者有几点心得，写出来供大家参考。q 第一步，在纸上做好网页的布局设计。例如，导航放在哪个位置，网页分几栏，是左右结构还是分三栏，网页的头和尾大概要做成什么样子，此时头脑中就应该有了这个网站的主色调选配，为下一步做好准备。q 第二步，在Photoshop中设计网页的首页。选择好主色调和布局，余下的就是发挥你的设计水平，设计出成形的界面出来。q 第三步，在设计好界面以后，进行切图。作者一般习惯用Adobe ImageReady来切图，它与Photoshop的工具栏有个切换，一般在安装Photoshop时会自动将其安装。切图也有不少的技巧，有的人

29、图省事，在界面里画好分割线，按分割线进行切片，然后导出网页。看来是容易得很，但是在Dreamweaver中进行编辑时就会发现，这根本就是无用功。因为在ImageReady中直接导出的HTML文件通常是不可以直接使用的，有些地方在实际运用时要调整。例如有动态文字的地方，需要在页面中输入文字而不是使用图片，那么就要把图片拿走，如果在直接生成的HTML中拿走不想要的图片再加上想要的东西，会发现页面将变得惨不忍睹，整个页面可能完全乱了套，这时就需要重新制作表格。切图时需要注意的是：大面积的色块单独切成一块，尽可能保持水平线上的整齐；在导出图片时如果色彩单一，可以选择尽量小的色值位，这样会大大减小文件的

30、大小，同时又能比较好地保持图片的色彩；切图时不要进行整个界面的分割，有时可以将需要切割的图另存出来单独进行分割，这样做的原因是，当在主界面画分割线时会将原有的图片切得更碎，考虑到网页的运行速度问题以及文件的易编辑性有时需要这样的处理。q 在Dreamweaver中进行站点的建立，以及网页的编辑。后面会有详细的介绍，这里就不多 说了。q 完成网页的制作，做好链接，检查网页中的错误（死链、错链、错别字等），如没有即可进行下一步操作了。1.4.4 测试站点制作完成后，上传到测试空间进行网站测试，客户根据协议内容进行验收工作，对客户提出不同意见的部分进行进一步的完善。1.4.5 发布站点客户在验收合格以后，为客户注册域名，开通网站空间，上传制作文件，设置电子邮箱。1.4.6 更新和维护站点如果一个网站都是静态的网页，在网站更新时就需要增加新的页面，更新链接，当然风格要延续先前的界面；如果是动态的页面，只需要后台进行信息的发布和管理就可以了。1.5 本 章 小 结通过本章由表及里的介绍，可以让读者明白网页和网站的区别与联系，了解网页在制作过程中需要使用哪些工具，以及网页的制作原理和技巧。这些理论上的知识需要在实际制作过程中慢慢体会。