第1章 网页设计基础.pptVIP

网页设计与制作 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 第1章 网页设计基础 随着Internet的快速发展，各种类型的网站正被不断的建立。无论建立任何网站，都离不开网页设计技术。这一章首先介绍网站建设的基本流程，了解网站是如何从无到有的；接着再介绍网页的相关版式与风格；最后在介绍设计网页的一些主要技术和软件。 1.1 基本概念 网站（Web Site）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。 网页（Web Page）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。 1.1 基本概念 1.1 基本概念 浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游等等。 1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式 2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。 1.2 网站整体策划 规范的网站建设需要进行整体的策划，具体流程如图所示。 1.3 网页的基本构成 虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同。 1.3 网页的基本构成 1.3 网页的基本构成 1.4 网页的基本布局 “同”字型 也称“国”字型或“口”字型结构布局，此种布局的最上边是网站的标题及横幅广告，左右分列两条内容，中间是主要部分，最下边的是版权区 。该布局的优点是充分利用版面，信息量大，与其它页面的链接多，切换方便。缺点是页面拥挤，不够灵活。 如图： 1.4 网页的基本布局 “T”字型结构布局 也称“拐角型” 结构布局，该页面顶部是标题及横幅广告，左侧通常放导航链接，右侧大部分空间用来显示网页的内容。此种布局的优点是页面结构清晰，主次分明，栏目扩充便利。缺点是规矩呆板，如果细节色彩上不加注意，很容易落入“看之无味”的感觉。如图： 1.4 网页的基本布局 左右框架型 这是一种左右分割屏幕的框架结构，一般在左面是导航链接，最上面有时会有一个小的标题或标志，右面通常显示左边的链接内容。优点是结构清晰，自由活泼，可显示较多的文字、图像。缺点是将两部分有机的结合比较困难，不适合数据巨大的网站。 1.4 网页的基本布局 上下框架型 上下框架型与左右框架型类似，区别仅在于这里采用上下分割。 封面型 也称“pop型”或自由型布局，通常以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面上。其优点是页面令人赏心悦目，缺点是显示速度慢，文字信息量少，只适合以图像为主要内容的站点。 1.4 网页的基本布局 Flash型 这种结构与封面型类似，只是这里采用了目前流行的Flash设计，与封面型不同的是，页面所表达的信息因Flash的强大功能而更为丰富，页面上不仅可以有文字、图像，还可以加入动画、视频与音频效果。 变化型 变化型是上面几种类型的综合与演变。 1.5 网页色彩 三原色（RGB） 常见色彩的RGB值： Black = #000000 Green = #008000 Silver = #C0C0C0 Lime = #00FF00 Gray = #808080 Olive = #808000 White = #FFFFFF Yellow = #FFFF00 Maroon = #800000 Navy = #000080 Red = #FF0000 Blue = #0000FF Purple = #800080 Teal = #008080 Fuchsia= #FF00FF Aqua = #00FFFF 1.5 网页色彩 1.6 常用网页设计软件 Photoshop 简介 Photoshop是Adobe公司开发的强大的图像处理软件，在图像设计及处理方面得到广泛的应用，是公认最出色的图像处理软件。目前几乎所有的广告出版、平面印刷等领域都选择Photoshop 做为制作软件。 1.6 常用网页设计软件 1.6 常用网页设计软件 1.6 常用