DreamweaverCS6、FlashCS6、PhotoshopCS6网页设计完全学习手册(txt+pdf+epub+mobi电子书下载)


发布时间:2020-05-13 19:39:21

点击下载

作者:金景文化编著

出版社:数字艺术出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

DreamweaverCS6、FlashCS6、PhotoshopCS6网页设计完全学习手册

DreamweaverCS6、FlashCS6、PhotoshopCS6网页设计完全学习手册试读:

前言

随着时代的发展,网络已经是人们日常生活不可或缺的一部分。对于网页爱好者而言,当每次打开计算机,看到各种不同类型、不同风格、不同内容的网站时,是不是也想拥有属于自己的网站,也想掌握网页设计制作的知识呢?

Dreamweaver、Photoshop和Flash这3款软件以强大的功能和易学易用的特性,被称为网页三剑客,是多媒体网站设计制作的梦幻组合。本书将讲解如何将这3款软件完美结合制作出优秀的网页作品。

内容安排

本书共25章,分为5篇,

入门篇

、Dreamweaver CS6篇、Photoshop CS6篇、Flash CS6篇和综合商业案例篇,循序渐进地向读者介绍了网页设计制作软件的相关知识点和操作方法。

入门篇(第1~第2章):讲解了有关网页设计制作的相关基础知识,包括什么是网页设计、网页开发常用软件和技术、网站建设的基本流程、以及常见的网站类型和网页配色的相关知识等。通过该部分内容的学习,可以使读者对网页设计与制作有更加深入的了解。

Dreamweaver CS6篇(第3~第10章):详细讲解了Dreamweaver CS6软件的操作方法和各知识点,包括网页文本的基本操作、创建站点、在网页中添加文本、在网页中插入图像、在网页中插入多媒体元素、各种不同类型网页链接的创建方法,另外还讲解了使用AP Div与行为实现网页特效、CSS样式与Div+CSS布局、表格和框架布局、模板和库、在网页中插入表单元素等网页制作高级功能。通过该部分内容的学习,读者可以掌握Dreamweaver CS6软件的操作和网页制作过程中的各方面知识。

Photoshop CS6篇(第11~第16章):讲解了Photoshop CS6的工作界面和文件的基本操作方法,详细讲解了Photoshop CS6中各种绘图工具、文本、图层的使用方法和技巧,重点讲解了网页图像的处理方法和技巧。通过该部分内容的学习,读者可以掌握Photoshop CS6的使用方法,以及常见网页元素的设计和表现方法。

Flash CS6篇(第17~第23章):对Flash CS6中的绘图工具、修改工具、填充工具等基本工具的使用方法进行了简单讲解,并对文本与对象的操作、元件与“库”面板、ActionScript 3.0、测试、发布与导出动画等内容进行了讲解,重点讲解了各种不同类型的Flash动画的制作方法。通过该部分内容的学习,读者可以掌握Flash CS6软件的使用方法,并能够制作出网页中常见的动画效果。

综合商业案例篇(第24~第25章):通过两个不同类型的典型商业网站案例,按照从页面设计、切割出网页所需素材、制作网页中的Flash动画、制作HTML页面这样的整体流程,全面分析和讲解了网页设计的制作方法和技巧。通过该部分内容的学习,读者可以掌握网页设计制作的流程,并掌握设计制作的方法和技巧。

本书特点

本书不但讲解了每一种软件的使用方法,还讲解了如何将这3个软件相互配合,充分发挥各自的特点,设计制作出精美的网页,具有很强的实用价值。

全面剖析三大网页设计制作软件

本书基于最新版的网页设计制作软件编写,分别对Dreamweaver CS6、Photoshop CS6和Flash CS6这3款软件的基础知识和基本操作进行了详细讲解,帮助读者掌握网页制作、图像处理、动画制作的基本技能。

清新的阅读环境

本书认真考虑读者的需求,将内容版式设计得清新、典雅,知识点与案例相结合,像一位贴心的老师手把手进行教导。

技巧和知识点的归纳总结

本书在知识点和实例的讲解过程中结合作者长期的网页设计与教学经验列出了大量的提示、技巧,使读者更容易理解和掌握相关的知识点。

多媒体光盘辅助学习

为了增强读者的学习兴趣,本书配有多媒体教学光盘。教学光盘中提供了本书中所有实例的相关素材、源文件和视频教学,使读者可以更方便地做出相应的效果,并能够快速地将其应用于实际工作中。

读者对象

本书适合想进入网页设计领域的读者与网页设计专业的大中专学生阅读,同时对专业设计人士也有很高的参考价值。希望读者通过对本书的学习,能够早日成为优秀的网页设计师。

本书由张晓景执笔,另外李晓斌、解晓丽、孙慧、程雪翩、王媛媛、胡丹丹、刘明秀、陈燕、王素梅、杨越、王巍、范明、刘强、贺春香、王延楠、于海波、肖阂、张航、罗廷兰等也参与了部分编写工作。本书在写作过程中力求严谨,如有疏漏之处望广大读者批评指正。编者2013年7月入门篇

第1章 了解网页设计

想要成为网页设计高手,制作出精美的网站页面,不仅需要能够熟练的使用网页设计制作的相关软件,掌握网页设计相关的一些基本概念和设计常识也是非常有必要的,这样可以使读者对网页设计有更加深入的了解。本章主要讲解有关网页设计的相关基础知识,包括网页设计的概念和术语、网页设计的元素和版式、网站开发常用的软件和技术以及网站建设的基本流程等。1.1 什么是网页设计

作为上网的主要依托,网页因人们频繁地使用网络而变得越来越重要,这使得网页设计也得到了发展。网页讲究的是排版布局,其目的就是提供给每一个浏览者一种布局更合理、功能更强大、使用更方便的形式,使他们能够愉快、轻松、快捷地了解网页所提供的信息。

网页设计是近年来兴起的设计领域。由于互联网是继报纸、广播、电视之后的又一全新的媒介,因此网页设计代表着一种新的设计思路。同时,网页设计也是一种为客户服务的理念,一种对网络特点的把握和对网络限制条件的理解。1.1.1 网页设计概述

随着时代的发展、科学的进步、需求的不断提高,网页设计已经在短短数年内跃升成为一个新的艺术门类,而不再仅仅是一门技术。相比其他传统的艺术设计门类而言,它更突出艺术与技术的结合、形式与内容的统一、交互与情感的诉求。

在这种时代背景的要求下,人们对网页产生了更深层次的审美需求。网页不仅要把各种信息简单地、清晰地表达出来,更要通过各种设计方法与技术技巧,让受众能更多更有效地接收网页上的各种信息,从而对网站留下深刻的印象,催生消费行为,提升企业品牌形象。

随着互联网技术的进一步发展与普及,当今时代的网站,更注重审美的要求和个性化的视觉表达,这也对网页设计师提出了更高层次的要求。一般来说,平面设计中的审美观点以及利用各种色彩的搭配营造出不同氛围、不同形式的美,都可以套用到网页设计上来。

但网页设计也有自己的独特性,在颜色的使用上,它有自己的标准色——“安全色”;在界面设计上,要充分考虑到浏览者使用的不同浏览器、不同分辨率的各种情况;在元素的使用上,它可以充分利用多媒体的长处,选择最恰当的音频与视频相结合的表达方式,给用户以身临其境的感觉和比较直观的印象。说到底,这还只是一个比较模糊抽象的概念,在网络世界中,有许许多多设计精美的网页值得去学习、欣赏和借鉴,如图1-1所示。图1-1 精美网页欣赏图1-1 精美网页欣赏(续)

图1-1所示的网页,也仅仅是互联网海洋中众多优秀网页作品的一朵朵小浪花而已,但从以上作品中不难看出,一般好的网站应该给人有这样的感觉:干净整洁、条理清晰、引人入胜。优秀的网页设计作品是艺术与技术的高度统一,它应该包含视听元素与版式设计两项内容;以主题鲜明、形式与内容相统一、强调整体为设计原则;具有交互性、持续性、多维性、综合性、艺术与技术结合的紧密性等特点。1.1.2 网页与网站

网页是Internet的基本信息单位,英文为Web Page。一般网页上都会有文本和图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容。进入网站首先看到的是其主页,主页集成了指向二级页面以及其他网站的链接。浏览者进入主页后可以浏览相应的网页内容并找到感兴趣的主题链接,通过单击该链接可以跳转到其他网页,图1-2所示为腾讯网站首页面。图1-2 腾讯网站首页面

提示

在网页中,文本内容是最常见的,早期的网页就是全部由文本构成的。随着技术的发展,网页中逐步添加了图像、动画、音乐、视频等多媒体内容,从而使网页更加美观,更具有视觉冲击力。

网站,英文为Web Site。简单来说网站是多个网页的集合,其中包括一个首页和若干个分页。首页是访问这个网站时打开的第一个网页。除了首页,其他的网页即是分页,图1-3所示为新浪网站的一个分页——“新闻中心”。虽然网站是多个网页的集合,但它又不是简单的集合,这要根据该网站的内容来决定,比如由多少个网页构成、如何分类等。当然一个网站也可以只有一个网页即首页,但是这种情况很少见,也不向大家推荐。图1-3 新浪网站“新闻中心”分页面1.1.3 静态网页与动态网页

静态网页是相对于动态网页而言的,并不是说网页中的元素都是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页,但网页中的GIF动画,Flash动画等也都会发生变化。

静态网页的执行过程大致为:

浏览器向网络中的服务器发出请求,指向某个静态网页。

服务器接到请求后传输给浏览器,此时传送的只是文本文件。

浏览器接到服务器传来的文件后解析HTML标签,将结果显示出来。

动态网页中除了包含静态网页中的元素外,还包括一些应用程序,这些程序需要浏览器与服务器之间发生交互行为,而且应用程序的执行需要服务器中的应用程序服务器才能完成。目前的动态网页主要使用ASP、PHP、JSP和.NET等程序。1.1.4 网页设计中的术语

在相同的条件下,有些网页不仅美观、大方,而且打开的速度也非常的快,而有些网页却要等很久,这就说明网页设计不仅仅是需要页面精美、布局整洁,很大程度上还要依赖于网络技术。因此网站不仅仅是设计者审美观、阅历的体现,更是设计者知识面、技术等综合素质的展示。

下面向大家介绍一些与网页设计相关的术语,只有了解了网页设计的相关术语,才能够制作出具有艺术性和技术性的网页。

因特网

因特网,英文为Internet,整个因特网的世界是由许许多多遍布全世界的电脑组织而成的,一台电脑在连接上网的一瞬间,它就已经是因特网的一部分了。网络是没有国界的,通过因特网,随时可传递文件信息到世界上任何因特网所能包含的角落,当然也可以接收来自世界各地的实时信息。

在因特网上查找信息,“搜索”是最好的办法。比如可以使用搜索引擎“百度”,它具有强大的搜索功能,只需在文本框中输入几个查找内容的关键字,就可以找到成千上万与之相关的信息,如图1-4所示。图1-4 搜索到的相关信息

浏览器

浏览器是安装在电脑中用来查看因特网中网页的一种工具,用户都要在电脑上安装浏览器来“阅读”网页中的信息,这是使用因特网的最基本的条件,就好像要用电视机来收看电视节目一样。目前大多数用户所用的Windows操作系统中已经内置了浏览器。

URL

URL是Universal Resource Locater的缩写,中文为“全球资源定位器”,是网页在因特网中的地址和访问方式,通过URL可以找到特定的网页。例如通过“搜狐”的URL:www.sohu.com,可对搜狐的主页进行访问,如图1-5所示。图1-5 浏览器地址栏中输入的站点URL

HTTP

HTTP是Hypertext Transfer Protocol的缩写,中文为“超文本传输协议”,是一种最常用的网络通信协议。如果想链接到某一特定的网页,就必须通过HTTP协议,不论使用哪一种网页编辑软件,在网页中加入什么资料,或是使用哪一种浏览器,利用HTTP协议都可以看到正确的网页效果。

TCP/IP

TCP/IP是Transmission Control Protocol/Internet Protocol的缩写,中文为“传输控制协议/网络协议”,是因特网所采用的标准协议。只要遵循TCP/IP协议,不管电脑是什么系统或平台,均可以在因特网的世界中畅行无阻。

FTP

FTP是File Transfer Protocol的缩写,中文为“文件传输协议”,与HTTP协议相同,它也是URL地址使用的一种协议名称,以指定传输某一种因特网资源。HTTP协议用于链接到某一网页,而FTP协议则是用于上传或是下载文件。

IP地址

IP地址是分配给网络上计算机的一组由32位二进制数值组成的编号,来对网络中计算机进行标识。为了方便记忆地址,采用了十进制标记法,每个数值小于等于225,数值中间用“.”隔开。一个IP地址相对一台计算机并且是唯一的,这里提醒大家注意的是所谓的唯一是指在某一时间内唯一。如果使用动态IP,那么每一次分配的IP地址是不同的,在使用网络的这一时段内,这个IP是唯一指向正在使用的计算机的;另一种是静态IP,是固定将这个IP地址分配给某计算机使用的。网络中的服务器使用的就是静态IP。

域名

IP地址是一组数字,记忆起来不够方便,因此人们给每个计算机赋予了一个具有代表性的名字,这就是主机名。将由英文字母或数字组成的主机名和IP对应起来就是域名,它能方便大家记忆。

域名和IP地址是可以交替使用的,但一般域名还是要通过转换成IP地址才能找到相应的主机,这就是上网的时候经常用到的DNS域名解析服务。

虚拟主机

虚拟主机(Virtual Host/Virtual Server)是使用特殊的软硬件技术,把一台计算机主机分成一台台“虚拟”的主机,每一台虚拟主机都具有独立的域名和IP地址(或共享的IP地址),有完整的Internet服务器(WWW、FTP、Email等)功能。在同一台硬件、同一个操作系统上,运行着为多个用户打开的不同的服务器程序,互不干扰;而各个用户拥有自己的一部分系统资源( IP地址 、文件存储空间 、内存、CPU时间等)。虚拟主机之间完全独立,并可由用户自行管理,在外界看来,每一台虚拟主机和一台独立的主机的表现完全一样。

虚拟主机属于企业在网络营销中比较简单的应用,适合初级建站的小型企事业单位。这种建站方式,适合用于企业宣传、发布比较简单的产品和经营信息。

租赁服务器

租赁服务器是通过租赁ICP的网络服务器来建立自己的网站。

使用这种建站方式,用户无须购置服务器只需租用服务器的线路、端口、机器设备和所提供的信息发布平台就能够发布企业信息,开展电子商务。它能替用户减轻初期投资的压力,减少对硬件长期维护所带来的人员及机房设备投入,使用户既不必承担硬件升级负担又同样可以建立一个功能齐全的网站。

主机托管

主机托管是企业将自己的服务器放在ICP的专用托管服务器机房,利用他们的线路、端口、机房设备为信息平台建立自己的宣传基地和窗口。

使用独立主机是企业开展电子商务的基础。虚拟主机会被共享环境下的操作系统资源所限,因此,当用户的站点需要满足日益发展的要求时,虚拟主机将不再能满足用户的需要,这时候用户需要选择使用独立的主机。1.2 网页设计元素及版式

现代的网页如同门面,小到个人主页,大到公司、政府部门,以及国际组织等,在网络上无不以网页作为自己的门户。当进入某一个网站时,首先映入眼帘的是该网站的网页界面,如页面的框架与构图、导航系统的设置、内容的安排、按钮的摆放、色彩的应用等,这一切都是网页设计的范畴,也都是网页设计师的工作,称之为网页艺术设计。1.2.1 网页构成元素

网页实际上就是一个文件,这个文件存放在世界上某个地方的某一台计算机中,而且这台计算机必须要与互联网相连接。那么,如何才能准确无误地找到这个文件呢?这就需要一个地址(URL:统一资源定位符)来帮助识别与读取。在浏览器的地址栏中输入网页的地址后,经过一段复杂而又快速的程序解析后(域名解析系统),网页文件就会被传送到计算机中,然后再通过浏览器解释网页的内容,最后展现在人们的眼前。

文字和图片是构成网页的两个最基本的元素。可以这样简单地理解,文字是网页的内容部分,图片能更好地充实内容部分或者装饰网页的外观。除了文字和图片以外,现在的网页元素还包括动画、声音、视频、表单、程序等,如图1-6所示。图1-6 网页中的基本元素

在网页的空白处单击鼠标右键,在弹出菜单中选择“查看源文件”命令,就会弹出一个记事本文件,这就是网页的源文件了。但是,现在很多网站为了避免自己的源文件泄露,屏蔽了鼠标的右键单击功能,这时,还可以使用另一种方法,在浏览器窗口“菜单”栏中执行“查看>查看源文件”命令,这样同样可以查看到网页的源代码,如图1-7所示。图1-7 查看网页源代码

可以发现,从源文件的角度来看,网页实际上只是一个纯文本文件,它通过各种各样的标签对页面上的文字、图片、表单、声音等元素进行描述(例如字体、颜色、大小等),而浏览器则对这些标签进行解释并生成页面,就得到网站页面了。

文本

文本是网页中最基本的组成元素之一,通过文本可以非常详细地将要传达的信息传送给浏览者。文本在网络上传输速度较快,用户可以很方便地浏览和下载文本信息,故其成为网页主要的信息载体。

网页中文本的样式繁多、风格不一,吸引人的网页通常都具有美观的文本样式。文本的样式可以通过CSS样式进行设置和修改。

图像

图像是网页中不可或缺的元素,图像比文本更直观更生动,能传递一些文本不能传递的信息。网站Logo、广告、按钮、背景等通常都是图像。

表单

表单元素在网页中的应用也比较广泛,主要能在网页中通过表单元素收集浏览者的相关信息或提供对网页内容的快速检索。网页中常见的表单应用有用户注册、登录、搜索等。

多媒体元素

Flash动画、音乐、视频等多媒体元素也在网页中有非常广泛的运用。网页中有了这些极富动感的多媒体元素的加入,平静的网页也会变得生机勃勃。

网页中常用的动画格式主要有两种,一种是GIF动画、一种是Flash动画。GIF动画是逐帧动画,相对比较简单,而Flash动画则更富表现力和视觉冲击力,还可以结合声音和互动功能,给浏览者带来强烈的视听感受。1.2.2 网页的设计构思

许多人认为网页设计就是网页制作,认为只要能够熟练的使用网页制作软件,就已经有能力胜任网页设计的工作了。其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。其实,网页设计中最重要的东西,并不是在软件的应用上,而是在于设计者对网页设计的理解以及设计制作的水平,在于设计者自身的美感以及对页面的把握。

设计的任务

设计是一种审美活动,成功的设计作品一般都比较艺术化,但艺术只是设计的手段,而并非设计的任务。网页设计的任务,是指设计者要表现的主题和需要实现的功能。设计的任务是要实现设计者的意图,并非创造美。网站的性质不同,设计的任务也不同,从形式上可以将站点分为以下三类。

第一类是资讯类网站,例如网易、新浪、搜狐等门户网站,这类网站为浏览者提供大量的信息,而且访问量较大,因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题,如图1-8所示。图1-8 资讯类网站

第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象,如图1-9所示。图1-9 资讯和形象相结合的网站

第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的只有几页,需要实现的功能也较为简单,网页设计的主要任务是突出企业形象,如图1-10所示,这类网站对设计者的美工水平要求较高。图1-10 形象类网站

提示

这只是从整体上来看,具体情况还要具体分析。不同的网站还要区别对待,别忘了最重要的一点,那就是客户的要求,它也属于设计的任务,明确了设计的任务之后,接下来要考虑的就是如何完成任务了。

设计的实现

设计的实现可以分为两个部分,第一部分为网站的规划及草图的绘制,这一部分可以在图纸上完成,第二部分为网页的制作,这一过程需要在计算机上完成。

设计首页的第一步是设计版面布局,可以将网页看作传统的报刊杂志来编辑,这里面有文字、图像、动画,设计者要做的工作就是以最适合的方式将图片、文字和动画排放在页面的不同位置。

接下来设计者需要做的就是通过使用软件,将设计的蓝图变为现实,最终的集成一般是在Dreamweaver里完成的。虽然在草图上,定出了页面的大体轮廓,但是灵感一般都是在制作过程中产生的。设计作品一定要有创意,这是最基本的要求,没有创意的设计是失败的。在制作的过程中,还会遇到许多问题,其中最敏感的莫过于页面的颜色了。

造型的组合

在网页设计中,设计者主要通过视觉传达来表现主题。在视觉传达中,造型是很重要的一个元素,不管是图还是文字,画面上的所有元素都可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里,是需要点、线、面的共同组合与搭配来构造整个页面的。

通常可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等。这些组合手法都有各自的特点,在设计中应根据具体情况,选择最适合的表现手法,这样有利于主题的表现。

通过点、线、面的组合,可以突出页面上的重要元素,突出设计的主题,增强美感,让浏览者在感受美的过程中领会设计的主题,从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感,而且能较好地突出企业形象,能将网页上的各种元素有机的组织起来,甚至还可以引导浏览者的视线。1.2.3 网页设计版式

网页的版式设计与报刊杂志等平面媒体的版式设计有很多相通之处,它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计,是指在有限的屏幕空间上将各种视听多媒体元素进行有机地排列组合,将理性思维以个性化的形式表现出来,是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时,也产生感官上的美感和精神上的享受。图1-11所示为几个具有代表性的网页版式设计。图1-11 具有代表性的版式设计

网页的排版与报刊杂志的排版又存在很多的差异。印刷品有固定的规格尺寸,网页则不然,它的尺寸是不固定的,这就使得网页设计者不能精确地控制页面上每个元素的尺寸和位置,而且网页的组织结构不像印刷品那样为线性组合,这也给网页的版式设计增加了一定的难度。1.3 网站开发常用软件和技术

要想制作出精美的网站页面,需要综合运用各种网页制作工具和技术,本节将向读者简单介绍网站开发时常用的软件和技术。1.3.1 Dreamweaver CS6——网页编辑软件

Dreamweaver是网页设计与制作领域中用户最多、应用最广泛、功能最强大的软件,无论是在国内还是在国外,都备受专业网站开发人员的喜爱。Dreamweaver用于网页的整体布局和设计,以及对网站的创建和管理,与Flash、Photoshop并称为网页设计三剑客,利用它可以轻而易举地制作出充满动感的网页。本书主要以最新版本的Dreamweaver CS6为读者进行讲解,Dreamweaver CS6的工作界面如图1-12所示。图1-12 Dreamweaver CS6的工作界面1.3.2 Photoshop CS6——网页图像处理软件

最常用的网页图像处理软件主要有Photoshop和Fireworks,其中Photoshop凭借其强大的功能和广泛的应用范围,一直占据着图像处理软件的领先地位。Photoshop支持多种图像格式以及多种色彩模式,可以任意调整图像的尺寸、分辨率及画布的大小。使用Photoshop可以设计整体的网页效果、处理网页中的图像效果、设计网站Logo、设计网页按钮和网页宣传广告图像等。本书主要以最新版本的Photoshop CS6为读者进行讲解,Photoshop CS6的工作界面如图1-13所示。图1-13 Photoshop CS6的工作界面1.3.3 Flash CS6——网页动画制作软件

Flash是一款非常优秀的交互式矢量动画制作软件,能够制作包含矢量图、位图、动画、音频、视频、交互式动画等内容在内的站点。为了引起浏览者的兴趣和注意,展示网站的动感和魅力,许多网站的介绍页面、宣传广告、按钮,甚至整个网站,都是用Flash制作出来的。用Flash制作的网页文件比普通网页文件要小很多,这大大加快了网页的浏览速度,是一款十分适合网页动画制作的软件。本书主要以最新版本的Flash CS6为读者进行讲解,FlashCS6的工作界面如图1-14所示。图1-14 Flash CS6的工作界面1.3.4 HTML——网页标记语言

要想专业地进行网页的设计和编辑,最好还要具备一定的HTML语言知识。虽然现在有很多可视化的网页设计制作软件,但网页的本质都是HTML语言构成的,可以说要想精通网页制作,必须要对HTML语言有相当的了解。

HTML是HyperText Marked Language的缩写,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。1.3.5 JavaScript——网页特效脚本语言

在网页设计中使用脚本语言,不仅可以减小网页的规模,提高网页的浏览速度,还可以丰富网页的表现力,因此脚本已成为网页设计中必不可少的一种技术。目前最常用的脚本有JavaScript和VBScript等,其中JavaScript是众多脚本语言中较为优秀的一种,是许多网页开发者首选的脚本语言。

JavaScript是一种描述性语言,它可以被嵌入到HTML文件中,和HTML一样,用户可以用任何一种文本编辑工具对它进行编辑,并在浏览器中进行预览。同时,JavaScript也是一种解释性编程语言,当用户向服务器请求页面资源时,其源代码在发往客户端执行之前并不需要经过编译,而是将文本格式的字符代码随HTML一起发送给客户端,完全由客户端支持JavaScript的浏览器来解释和执行。图1-15所示为使用JavaScript实现的网页特效。图1-15 使用JavaScript实现的网页特效1.3.6 ASP、PHP、JSP——动态网页编程语言

随着互联网的发展,静态网站页面已经渐渐满足不了大多数网站的需求,需要通过动态网页设计语言来实现网站的交互操作和对网站内容的便捷管理。动态网站编程语言种类繁多,目前比较常用的有ASP、PHP、JSP、CGI、ASP.NET等。

ASP是Active Server Pages的缩写,是Microsoft公司开发的Web 服务器端脚本开发环境,利用它可以生成动态、高效的Web应用程序。ASP就是嵌入了ASP脚本的HTML页面,它可以是HTML标签、文本和命令的任意组合。

PHP全称为PHP: Hypertext Preprocessor,同样是一种HTML内嵌式的服务器端语言,PHP在Windows或UNIX Like(UNIX、Linux、BSD等)平台下都能够运行,更重要的是它的源代码是免费的、开放的。

JSP,全称为Java Server Pages,是由Sun Microsystems公司倡导,多家公司参与一起建立的一种动态网页技术标准。在传统的HTML网页文件中加入Java程序片段(Scriptlet)和JSP标记(tag),就构成了JSP网页,其文件扩展名为.jsp。1.4 网站建设的基本流程

建设网站之前应该有一个整体的战略规划和目标,规划好网页的大致外观后即可进行设计。当整个网站测试完成后,就可以发布到网上。大部分站点需要定期进行维护,以实现内容的更新和功能的完善。1.4.1 前期网站策划

一件事情的成功与否,其前期策划举足轻重。网站建设也是如此。网站策划是网站设计的前奏,主要包括确定网站的用户群和定位网站的主题,还有形象策划、制作规划和后期宣传推广等方面的内容。网站策划在网站建设的过程中尤为重要,它是制作网站迈出的重要的第一步。作为建设网站的第一步,网站策划应该切实地遵循“以人为本”的创作思路。

网络是用户主宰的世界,由于可选择对象众多,而且寻找起来也相当便利,所以网络用户明显缺乏耐心,并且想要迅速满足自己的要求。如果他们不能在一分钟之内弄明白如何使用一个网站,他们会认为这个网站不值得再花费时间,然后就会离开,因此只有那些经过周密策划的网站才能吸引更多的访问者。1.4.2 规划站点结构

一个网站设计得成功与否很大程度上取决于设计者规划水平的高低。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片的运用等。只有在制作网站之前把这些方面都考虑到了,才能在制作时胸有成竹。1.4.3 收集网站相关素材

网站的前期策划完成以后,接下来是按照确定的主题进行资料和素材的收集、整理。这一步也特别重要,有了好的想法,却没有内容来充实,是肯定不能实现网站建设的。资料、素材的选择是没有什么规律的,可以寻找一些自己认为好的东西,同时也要考虑浏览者的情况,因为每个人的喜好都不同,如何权衡取舍,就要看设计者如何把握了。收集回来的资料一定要整理好,归类清楚,以便以后使用。

提示

制作商业网站时,通常客户会提供相关的素材图像和资料,所以在制作商业网站时,资料收集这一步可以省略,但是把客户提供的资料归类、整理还是很有必要的。1.4.4 网页的版式与布局分析

当资料的收集、整理完成后,就可以开始进行具体的网页设计工作了。在进行网页设计时,首先要做的就是设计网页的版式与布局。现在,网页的布局设计变得越来越重要,因为访问者不愿意再看到只注重内容的站点。虽然内容很重要,但只有当网页布局和网页内容成功结合时,这种网页或者说站点才是受人欢迎的,只取任何一面都有可能无法留住“挑剔”的访问者。关于网页的版式与布局,主要有以下几个方面的内容。

1.页面尺寸

由于页面尺寸和显示器大小及分辨率有关,而网页的局限性就在于无法突破显示器的范围,而且因为浏览器也将占去不少空间,所以留给页面的空间会更小。在网页设计过程中,向下拖动页面是唯一给网页增加更多内容的方法。但有必要提醒大家的是除非你能肯定网站的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么最好是在页面上创建内部链接,方便访问者浏览。

2.整体造型

造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的结合应该是层叠有序的。虽然,显示器和浏览器都是矩形,但对于页面的造型,可以充分运用自然界中的其他形状以及它们的组合:矩形、圆形、三角形、菱形等。

3.网页布局方法

网页布局的方法有两种,第一种为纸上布局,第二种为软件布局。

纸上布局法,许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计软件中边设计布局边添加内容。这种不打草稿的方法很难设计出优秀的网页,所以在开始制作网页时,要先在纸上画出页面的布局草图。

软件布局法,如果制作者不喜欢用纸来画出布局图,那么还可以利用软件来完成这些工作。可以使用Photoshop,Photoshop所具有的对图像的编辑功能正适合设计网页布局。利用Photoshop可以方便地使用颜色、图形,并且可以利用图层的功能设计出用纸张无法实现的布局效果。1.4.5 确定网页的主色调

色彩是艺术表现的要素之一。在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。同时应该根据色彩对人们心理的影响,合理地加以运用。按照色彩的记忆性原则,一般暖色较冷色的记忆性强;色彩还具有联想与象征的特质,如红色象征血、太阳;蓝色象征大海、天空和水面等。网页的颜色应用并没有数量的限制,但不能毫无节制地运用多种颜色。一般情况下,先根据整体风格的要求定出一到两种主色调,有CIS(企业形象识另系统)的,更应该按照其中的VI进行色彩运用。图1-16所示为成功的网站配色。图1-16 成功的网站配色图1-16 成功的网站配色(续)

在色彩的运用过程中,还应该注意的一个问题是由于国家和种族、宗教和信仰的不同,以及生活的地理位置、文化修养的差异等,不同的人群对色彩的喜好程度有着很大的差异。如儿童喜欢对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在沙漠中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成,以便于选择恰当的色彩组合。1.4.6 设计网站页面

在版式布局完成的基础上,将确定需要的功能模块(功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等)、图片、文字等放置到页面上。需要注意的是,这里必须遵循突出重点、平衡协调的原则,将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。1.4.7 切割和优化网页图像

整体的页面效果制作好以后,就要考虑如何把整个页面分割开来,并且使用什么样的方法可以使最后生成的页面的文件量最小。对页面进行切割与优化具有一定规律和技巧。1.4.8 制作网站HTML页面

这一步是具体的制作阶段,也就是大家常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司Dreamweaver,它具有强大的网页编辑功能,适合专业的网页设计制作人员,本书将主要介绍使用Dreamweaver对网页进行设计制作。完成了这一步整个网页也就制作完了。1.4.9 开发动态网站模块

完成网站HTML静态页面的制作后,如果还需要动态功能的话,就需要开发动态功能模块。网站中常用的功能模块有新闻发布系统、搜索功能、产品展示管理系统、在线调查系统、在线购物、会员注册管理系统、统计系统、留言系统、论坛及聊天室等。1.4.10 申请域名和服务器空间

网页制作完毕,最后要发布到Web 服务器上,才能够让众多的浏览者观看。首先需要申请域名和空间,然后才能上传到服务器上。

可以用搜索引擎查找相关的域名空间提供商,在他们的网站上可以进行在线域名查询,从而找到最适合自己的而且还没有被注册的域名。

提示

起一个好的域名,有以下一些注意事项:一般来说域名的长度越短越好。域名的意义以越简单越常用越好。域名要尽可能给人留下良好的印象。一般来说组成域名的单词数量越少越好(少于3个为佳)。主要类型有英文、数字、中文、拼音、混合。是否是以前被广泛使用过的域名,是否在搜索引擎中有好的排名或者多的连接数。是否稀有,是否有不可替代性。

有了自己的域名后,就需要一个存放网站文件的空间,而这个空间在Internet上就是服务器。一般情况下,可以选择虚拟主机或独立服务器的方式。1.4.11 测试并上传网站

网站制作完成以后,暂时还不能发布,需要在本机上内部测试,并进行模拟浏览。测试的内容包括版式、图片等显示是否正确,是否有死链接或者空链接等,发现有显示错误或功能欠缺后需要进一步修改,如果没有发现任何问题,就可以发布上传了。发布上传是网站制作最后的步骤,完成这一步骤后,整个过程就结束了。1.4.12 网站的更新与维护

严格地说,后期更新与维护不能算是网站设计过程中的环节,而是制作完成后应该考虑的。但是这一项工作却是必不可少的,尤其是信息类网站,更新和维护更是必不可少的。这是网站保持新鲜活力、吸引力以及正常运行的保障。1.5 本章小结

网页设计,必须在有限的空间中妥善地安排所用的画面构成、有趣的要素、文字介绍等内容,必须首先考虑用户的便利程度,还要考虑网站的全部流程。本章主要讲解了有关网页设计的相关基础知识,了解这些相关的知识,对于网页设计者来说是非常有必要的,可以使读者对网页设计能够有更加深入的理解。

第2章 网站的分类与配色

打开一个网站,给浏览者留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩。色彩给人的视觉效果非常明显。一个网站设计成功与否,在某种程序上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果的设计,除了立体图形、动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给浏览者留下深刻的印象。本章将讲解有关网站的分类与配色知识。2.1 常见的网站类型

网站就是把一个个网页系统地链接起来的集合,例如常见的网易、新浪、搜狐等。网站按照其内容和形式可以分为很多种类型,下面就向读者简单介绍一下各种不同类型的网站。2.1.1 个人网站

个人网站是以个人名义开发创建的具有较强个性的网站。一般是个人为了兴趣爱好或为了展示自己等目的而创建的,具有较强的个性化特点,无论是从内容、风格还是样式上,都形色各异、包罗万象。

个人网站一般不具有商业性质,规模也不大。制作个人网站的目的可能每个人不尽相同,有的人希望把自己的作品放在网上,以方便展示自己寻求发展机遇,而有的人则想把自己某一方面的特长或者特别的东西介绍给大家。图2-1所示为精美的个人网站。图2-1 个人网站2.1.2 企业类网站

随着网络的普及和飞速发展,企业拥有自己的网站已经是必然的趋势。企业网站作为电子商务时代企业对外的窗口,起着宣传企业、提高企业知名度、展示和提升企业形象、方便用户查询产品信息和提供售后服务等重要作用,因而越来越受到企业的重视。图2-2所示为精美的企业类网站。图2-2 企业类网站图2-2 企业类网站(续)2.1.3 行业信息类网站

随着Internet的发展,网民人数的增多以及网上不同兴趣群体的形成,门户网站已经明显不能满足不同上网群体的需求。一批能够满足某一特定领域上网人群的特定需要的网站应运而生。由于这些网站的内容服务更为专一和深入,因此被称为行业网站,也称为垂直网站。

垂直网站只专注于某一特定领域,并通过提供特定的服务内容,有效地把对这一特定领域感兴趣的用户与其他网站区分开来,并长期持久地吸引住这些用户,从而为其发展电子商务提供理想的平台。图2-3所示为精美的行业信息类网站。图2-3 行业信息类网站2.1.4 影视音乐类网站

影视类网站具有很强的时效性,重视视觉性的布局,要求具有丰富信息。在这类网站中,经常运用Flash动画、生动的图像及视频片段等。影视类网站的色彩设计多用透明度和饱和度高的颜色,以给人带来强烈的视觉刺激。在影视类网站中,深色的背景下透明度高的紫色组合会给人幻想的感觉,这种配色方法经常使用。动作片常用银色和蓝色的组合,爱情片则常用白色和粉红色的组合。

音乐类网站需要能够展现音乐带来的精神上的自由、感动和趣味。歌手、乐队网站需要根据音乐的不同安排有区别的图像。其他与音乐有关的网站都比较重视个性,利用背景音乐或制作可以听到的音乐来表现音乐网站的特性。图2-4所示为精美的影视音乐类网站。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载