1.1 认识网页和网站
1.1.1网页,网站
1.网页是由HTML编写,通过WWW网传输,且被浏览器编译后供用户获取信息的页面文件,又称为Web页,集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。如果说WWW是Intemet (因特网)上的一 一个大型图书馆, 那么图书馆的等-本书就是一个Web站点,而网页就是书中的某-页,页码就是网址,网址与页面- -对应, 多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫作主页( Homepage,也叫首页),相当于书的封面。
HTML不是一种程序语言, 而是一种描述文档结构的标记语言,是用户与电子计算机(俗称“电脑”)之间进行交流的一种文本技术。 各种网页均是用HtniL来描述的,用HTML编写的网页文件的扩展名-般为“*. htm"或“* himl" 。
由于网页中包含超级链接,网页也被为超文本传输协议(lyper Tel Tamsfer Prtorol, 1T)。
2.网站
Web站点也称为网站、www信息是由无数的Web站点组成的,网页则是Web站点的基本信息单位、超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。
Web站点其实是Intemet上能够提供Intemet 服务的一个位置,这个位置由独一无二的IP地址或者域名来描述,一个网站需要有一台或者是多台服务器来实现WWW服务。不同网站的规模与大小各不相同:大的网站如新浪、搜狐等,需要多台服务器;小的网站如个人主页等,仅占据某台服务器上一个很小的空间。
网站是多个网页的集合,按网站内容可将网站分为5种类型:门户网站、企业网站、个人网站、专业网站和职能网站。按网站的设计技术可将网站分为静态网站和动态网站(ASP, JSP, PHP和Web后台服务器软件)。
网站是有独立城名、独立存放空间的内容的集合,这些内容可能是网页,也可能是程序或者其他文件。不一定需要很多的网页,只要有独立域名和空间,哪怕只有一一个页面也可以称为网站。
3. 常用术语
网页设计有其专业的常用术语,如Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等,作为一名网页设计师,必须熟练掌握这些常用术语。
Intemet:由各种不同类型的计算机网络连接起来的全球性网络。
www:其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。
浏览器:将Internet中的文本文档和其他文件翻译成网页的软件,通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有Internet Explorer (IE)浏览器,Firefox 浏览器和Chrome浏览器等。
URL:统一资源定位符,指定通信协议和地址,如“http: //www. baidu. com”是一个URL,“http: //”表示通信协议为超文本传输协议,“www. baidu. com”表示网站名称。
IP:网际协议。Internet中的每台计算机都有唯一的 IP地址,表示该计算机在Interne中的位置。IP通常分为A、B和C三类。
域名:指网站名称,在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名.主机名.类别名.地区名。
HTTP:超文本传输协议,是互联网上应用最为广泛的一种网络协议。所有的www文件都必须遵守这个标准。
FTP:文件传输协议,通过该协议,可把文件从一个地方传到另外一个地方,从而真正地实现资源共享。
发布:指将制作好的网页传到网络上的过程,也称为上传网站。
站点:一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的,必须为每一个要处理个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。
超链接:从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,可以是相同网页的不同位置,也可以是一个图片、一个电子邮件地址,一个文件,甚至是一个程序。在浏览网页时单击超链接就能跳转刀与之相应的页面。
客户机和服务器:浏览网页是由个人计算机向Internet中的计算机发出请求,Internet中的计算机在接受到请求后响应请求,将需要的内容发到个人计算机上,这种发送请求的个人计算机称为客户机或客户端,而Inemel中的计算机称为服务器或服务端。
1.1.2静态网页和动态网页
1.静态网页
静态网页是指客户物的浏览器发送URL请求给WWW服务器,服务器查找需要的超文本文件并不加处理地直接下载到客户端,运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容,无论网页本身是否具有视觉意义上的动态效果,只要采用动态网站技术生成的网页都称为动态网页,其本质主要体现在交互性方面。根据程序运行区域的不同,动态网页可分为客户端动态网页与服务端动态网页。
客户端动态网页不需要与服务器进行交互,实现动态功能的代码往往采用脚本语言形式直接嵌入网页中,常见的客户端动态网页技术包括JavaScripl, Aetivex 和Flash等。
服务端动态网页则需要与客户端共同参与,客户端通过浏览器发出页面请求后,服务端根据URL携带的参数运行服务端程序,产生的结果页面再返回客户端。动态网页比较注重交互性,即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页(如注册、登录和查询等)都需要服务端动态网页程序。
1.2网页的基本构成元素
在初次设计网页之前,首先应该认识一下构成网页的基本元素,这样才能在设计中得心应手,根据需要合理地组织和安排网页内容。
一般网站的首页包 含常见的网页元素,如导航栏、广告动画、图片、交互表单、文本和超链接等。
1.文本
文本具有体积小、网络传输速度快等特点,可使用户更方便他也浏览和下载文本信息,是网页最主要的基木元素,也是页面中最主要的信息载体。与图片相比,文本虽然不如图片那样能够很快引起浏览者的注意,但却能准确地表达信息的内容和含义。为了克服文本固有的缺点,人们赋予了网页中文本更多的属性,如字体、字号、颜色、底纹和边框等,通过不同格式的区别,突出显示重要的内容。此外,用户还可以在网页中设计各种各样的文字列表,清晰地表达一系列项目。
2.图片和动画
图片比文本更加生动和直观,可以传递一些文本不能表达的信息,具有强型的视觉冲击力。网页中的网站标识,背景,链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等,其中使用最广泛的是GIF和JPEC两种格式。在网页中,为了更有效地吸引浏览者的注意,许多网站的广告都做成了动画形式。
3.超链接
超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接、指定从一个位置跳转到另一个位置,可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转,也可以在页面外进行跳转。
4.音频和视频
音频文件可使网页效果多样化,网页中常用的音频格式有mid和mp3。其中mp3为压缩文件,其压缩率非常高,音质也不错,是背景音乐的首选。
网页中的视频文件一般为flv格式,它是一种基于Flush MX的视频流格式, 具有文件小、加载速度快等特点,是网络视频格式的首选。
5.交互表单
网页中的表单通常用来接收用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件,也可以是服务器端的应用程序。表单一般用来收集联系信息, 接收用户要求,获得反馈意见,让浏览者注册为会员并以会员的身份登录站点等。
6.其他常见元素
网页中除了以上几种最基本的元素之外,还有些其他的常用元素, 包括悬停按钮 、JavaSeipi与AetiveX 等各种特效,它们不仅能点缀网页,使网页更活泼有趣,还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3页面布局结构
对一个网站来说,除了内容之外,还要对网站进行整体规划设计。格局凌乱的网站内容再精彩,也不是一个好网站。在网页插入各种对象和装饰效果前,要先确定网页的总体风格和布局。
1.网页页面布局
根据不同的网页制作风格,可以将网页分为个人网页和商业网页。商业网页内容丰富、信息量大,一般都有统的布局;个人网页风格比较多样、内容比较专一、形式比较灵活,更容易创造出美感。
确定好网页风格,要对网页的布局进行规划,也就是确定网页上网站标识,导航栏以及菜单元素等位置。在网页设计中,结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括"国"字型,厂字型,海报型和Flash型等
2. 网页色彩搭配
(1) 网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后,这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色,绿色和蓝色。当颜色数字时,构成的颜色数字信号值为0,51,102,153,204和255是构成的颜色组合一共有216种颜色。
(2) 网页中色彩的表达。在网页设计中,颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法,由数字0-9和字母A~F组成,字母不区分大小写。颜色值可以采用6位的十六进制来进行表示, 并且需要在前面加上特殊符号“#”,如#0E533D。还可通过RGB, HSB,,Lab和CMYK来进行表示: RGB色彩校式是通过对在红(R)、绿(G)、蓝(B) 3个颜色通道的变化以及相互之间的叠加来得到各种颜色,是目前运用最广的颜色系统之一。 HSB 色彩模式是普及型设计软件中常见的色彩模式。Lab颜色权型由亮度(L)和a、b两个颜色通道组成,这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式,由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色,使用相近色进行网页色彩的搭配,可以使网页的效果更加统一和谐, 如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色,称为互补色,也是对比最强的色组。也可以指两种明显区分的色彩,包括色相对比、明度对比、饱和度对比、冷吸对比等,如黄和蓝,紫和绿,红和青。任何色彩和黑、白、灰,深色和浅色,冷色和暖色,亮色和暗色都是对比色关系。
(2) 网页中色彩的表达。在网页设计中,颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法,由数字0-9和字母A~F组成,字母不区分大小写。颜色值可以采用6位的十六进制来进行表示, 并且需要在前面加上特殊符号“#”,如#0E533D。还可通过RGB, HSB,,Lab和CMYK来进行表示: RGB色彩校式是通过对在红(R)、绿(G)、蓝(B) 3个颜色通道的变化以及相互之间的叠加来得到各种颜色,是目前运用最广的颜色系统之一。 HSB 色彩模式是普及型设计软件中常见的色彩模式。Lab颜色权型由亮度(L)和a、b两个颜色通道组成,这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式,由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色,使用相近色进行网页色彩的搭配,可以使网页的效果更加统一和谐, 如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色,称为互补色,也是对比最强的色组。也可以指两种明显区分的色彩,包括色相对比、明度对比、饱和度对比、冷吸对比等,如黄和蓝,紫和绿,红和青。任何色彩和黑、白、灰,深色和浅色,冷色和暖色,亮色和暗色都是对比色关系。
(2) 网页中色彩的表达。在网页设计中,颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法,由数字0-9和字母A~F组成,字母不区分大小写。颜色值可以采用6位的十六进制来进行表示, 并且需要在前面加上特殊符号“#”,如#0E533D。还可通过RGB, HSB,,Lab和CMYK来进行表示: RGB色彩校式是通过对在红(R)、绿(G)、蓝(B) 3个颜色通道的变化以及相互之间的叠加来得到各种颜色,是目前运用最广的颜色系统之一。 HSB 色彩模式是普及型设计软件中常见的色彩模式。Lab颜色权型由亮度(L)和a、b两个颜色通道组成,这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式,由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色,使用相近色进行网页色彩的搭配,可以使网页的效果更加统一和谐, 如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色,称为互补色,也是对比最强的色组。也可以指两种明显区分的色彩,包括色相对比、明度对比、饱和度对比、冷吸对比等,如黄和蓝,紫和绿,红和青。任何色彩和黑、白、灰,深色和浅色,冷色和暖色,亮色和暗色都是对比色关系。