网页设计制作基础.ppt

1、网页设计与制作教程,西安工业大学计算机学院 雷聚超,1 网页、网站的概念 2 Web标准 3 网站的规划与设计 4 网站开发工作流程 5 网站策划书撰写要点 6 常用网页制作软件 7 网页设计的基本概念 8 网页版面设计 9 实训 10 网页的相关概念,第1章 网页设计制作概述,1.1.1 网页、网站和主页 网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链

2、接，可以方便地跳转到其他相关网页或是相关网站。 如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为index.html或default.html），这个最先打开的默认页面就被称为“主页”或“首页”。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页 静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。 动态网页技术根据程序运行的

3、区域不同，分为客户端动态技术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括JavaScript、ActiveX和Flash等。,1.1 网页、网站的概念,1.2.1 Web标准的概念 Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要

4、包括对象模型W3C DOM、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 例如，人体模特换衣服和表演。模特就好比数据，衣服则是表现形式，模特的表演动作是行为。模特和衣服是分离的，这样就可以随意换衣服。,1.2 Web标准,1.2. 2 建立Web标准的目的 简单地说，建立Web标准的目的是： 提供最大利益给最多的网站用户； 确保任何网站文档都能够长期有效； 简化代码，降低建设成本； 让网站更容易使用，能适应更多不同用户和

5、更多网络设备； 当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。,1.2 Web标准,1.2.3 采用Web标准的优点 1客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）； 2. 服务器端的优点 采用Web标准后，服务器端的好处主要体现在以下方面： 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低； 更容易被搜寻引擎搜索到；,1.2 Web标准,在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规

6、划与设计。 网站的规划与设计一般应遵循以下三个原则： 最大限度地满足用户需要； 最有效地进行资源利用； 使用方便，界面友好，运行高效； 常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。,1.3 网站的规划与设计,典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。 3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容

7、资源：包括使用Fireworks、Photoshop和Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。,1.4 网站开发工作流程,案例一：规划曙光大学网站 【案例综述】规划曙光大学网站的结构。 【案例展示】本书围绕着一个完整网站的制作作为主要讲解案例，其站点规划结构图及其含义如图1-1所示。,1.4 网站开发工作流程,网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。

8、 1前期调研分析 2. 网站的功能定位 3网站技术解决方案 4网站内容规划 5网页设计 6网站维护 7网站测试 8网站发布与推广 9网站设计日程表 10费用明细,1.5 网站策划书撰写要点,1.6 常用网页制作软件,1.6.1 网页制作工具 网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。 1Dreamweaver 2. FrontPage 3Adobe GoLive

9、 4HomeSite 5Visual Studio 2008/2010 6. Delphi Intraweb,1.6 常用网页制作软件,1.6.2 网页图形图像处理工具 使用网页图形图像处理工具可以设计、处理适合网页的图形图像。 1Fireworks 2. Photoshop 3CorelDRAW,1.6 常用网页制作软件,1.6.3 网页动画制作与特效工具 随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。 1Flash 2. Ulead GIF Animator,1.6 常用网页制作软件,1.6.4 网页

10、上传工具 制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。 1CuteFTP 2. FlashFXP 3LeapFTP 4其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。,1.6 常用网页制作软件,1.6.5 网页设计工具的发展动向 2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形

11、网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。 另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。,1.7.1 虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页

12、可以有多个，通常根据需要分层设置。 从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。,1.7 网页设计的基本概念,1.7.1 虚拟界面 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。,图2-1 包含多种多媒体的网页,1.7 网页设计的基本概念,1.7.2 网页界面的特点

13、 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。 1版面尺寸规范化 2. 媒介形式的多样化 3有限的界面颜色数量 4界面的嵌套性 5具有控制功能,1.7 网页设计的基本概念,1.7.2 网页界面的特点 版面尺寸规范化：通常采用显示器的标准显示模式。 1）800像素600像素。 2）1024像素768像素。 3）1280像素1024像素或更高。 图2-2是采用不同显示模式显示的迪斯尼公司网站的网页。,a) 800像素600像素 b) 1024像素768像素 c) 1280

14、像素1024像素,1.7 网页设计的基本概念,1.7.3 网页的功能 网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。,1.7 网页设计的基本概念,1.8.1 版面编排原则 网页是信息传播的一种载体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。 版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合

15、理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。 1突出中心，理清主次 2. 搭配合理，大小呼应 3图文并茂，相得益彰,1.8 网页版面设计,1.8.2 网页排版布局的一般步骤 （1）构思 根据网站内容的整体风格，设计版面布局。 （2）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。 （3）细化 在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。,1.8 网页版面设计

16、,1.8.3 版面典型风格 网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。,1.8 网页版面设计

17、,1.8.3 版面典型风格,1.8 网页版面设计,对称型,偏置型,标题型,1.8.4 网页排版布局的常用技术 （1）CSS（层叠样式表）布局 使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。 （2）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。 （3）框架布局 从布局上考虑，框架结构不失为一个好的布局方法。,1.8 网页版面设计,1.8.5 色彩搭配 色彩是人的视觉中最敏感的东西，把

18、握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”，网页的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。,1.8 网页版面设计,1.8.5 色彩搭配 1首屏页面的设计 所谓首屏页面，是指在打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。,1.8 网页版面设计,1.8.5 色彩搭配 2.导航栏的设计 导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图2-7是网站的导航栏。,1.8 网页版面设计,1.8.6 设计

19、规则 网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。 1首屏页面的设计 2. 导航栏的设计 3媒介规格设计 4网页效果与网页效率 5强调整体 6网页与读者群 7网页命名规则 8及时更新网页,1.8 网页版面设计,1.8.7 设计误区 在设计网页时，如果设计不当，就会造成网页虽美观，但运行缓慢，甚至无法正常运行的现象。为了避免上述现象发生，列举几个常见的设计误区，以便引起重视。 1片面追求版面效果 2. 使用纵向的导航栏 3使用多种媒体形式 4规则化,1.8 网页版面设计,1.8.8 案例一：设计曙光大学网站首页版面 【案例综述】使用网页版面设计技术设计曙光大学网站首

20、页版面。 【案例展示】曙光大学网站首页版面的效果如图2-8所示。,1.8 网页版面设计,1.9.1 实训一：设计“爱家美食”网站首页版面 【实训综述】使用网页版面设计技术设计“爱家美食”网站首页版面。 【实训展示】“爱家美食”网站首页版面的效果如图2-9所示。,1.9 实训,图2-9 实例效果,1简述网页、网站和主页的异同。 2. Web标准主要由哪3部分组成？分别解释其含义。 3简述网站开发的工作流程。 4简述怎样撰写网站策划书？ 5常用的网页制作工具有哪些？分别有哪些特点？ 6对于现在普遍使用的19in显示器，网页的版面尺寸设置为多少像素合适？为什么？ 7上网浏览网页，指出这些网页版面属于

21、哪种类型。 8色彩搭配有哪些原则？请给出几组匹配的色彩。 9如图2-10所示是“韵魅”网站的首页，请读者谈谈该页面网页版面设计的步骤。,1.9 习题,1.10 网页的相关概念,1.10.1 浏览器 1.10.2 网页与HTML 1.10.3 URL、域名与IP地址 1.10.4 网站上传和下载 1.10.5 网页的HTML构成 1.10.6 HTML常用标记,1.10.1 浏览器,浏览器是指将互联网上的文本文档（或其他类型的文件）翻译成网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页的内容。 互联网（Internet）又称为因特网，是一个把分布于世界各地的计算机用传输介质互相连接起

22、来的网络。Internet主要提供的服务有万维网（WWW）、文件传输协议（FTP）、电子邮件（E-mail）及远程登录（Telnet）等。,1.10.2 网页与HTML,HTML（Hyper Text Marked Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页的最基本的语言，它可以直接由浏览器执行。,1.10.3 URL、域名与IP地址,URL也就是网络地址，是在Internet上用来描述信息资源，并将Internet提供的服务统一编址的系统。 域名类似于Internet上的门牌号，相对于IP地址而言，更便于使用者理解和记忆。 IP地址是给因特网上的

23、每台计算机和其他设备分配的一个唯一的地址。在IE浏览器的地址栏中输入IP地址“4.9”，按下回车键。,1.10.4 网站上传和下载,上传（Upload）是从本地计算机（一般称客户端）向远程服务器（一般称服务器端）传送数据的行为。下载（Download）是从远程服务器取回数据到本地计算机的过程。,1.10.5 网页的HTML构成, 文档标记 头部标记 主体标记 段落标记 文字标记, 文档标记,文档标记的语法格式如下。 . （1.3.1）, 头部标记,头部标

24、记（）包含文档的标题信息，头部标记都不可或缺，但是其起始和结尾标记可省。 头部标记中最常用的是，用于给出文档的标题，并在IE浏览器中显示出来。每个文档在中仅存在一个。 （1.3.2）, 主体标记,主体标记（）包含了文档的内容，用若干个属性来规定文档中显示的背景和颜色。 为该标记添加属性的代码格式如下。 . (1.3.3) 注意背景颜色和文字颜色的变化。,.1 注释标记 注释标记的格式为： 注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。 .2 强制换行和不换行标记、. 要用HTML的标记来强制换行、分段。放在一行的末尾，可以使

25、后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为： 文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为： 文字 (1.3.4), 段落标记,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用标记设置字号（被W3C列为不建议使用的标记，以后将学习用CSS来设定字体）。设置文字大小的格式为： 被设置的文字 标记可设定文字的字体、字号和色彩。 size用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。 face用来设置字体。

26、如黑体、宋体、楷体_GB2312、隶书、Times New Roman等。 color用来设置文字色彩。 【.8】, 文字标记 字体标记.,1.10.6 HTML常用标记, 链接标记 段落标记 通用块标记 行内标记 元数据标记, 图像标记 框架容器标记 子框架标记 表格标记 0 浮动帧标记 1 滚动标记,1.10.6 HTML常用标记, 链接标记,链接标记定义

27、了文档的关联，在头部标记中可包含任意数量的。 表示“a1.html”是当前文档的词汇表。 表示当前文档是“a1.html”的词汇表。, 段落标记,定义了一个段的块级标记，所使用的属性是“ID”属性和“LANG”属性。 块标记是相对于行内标记来讲的，可以换行。在没有任合布局属性的作用时，标记中的内容是自动换行的。而行内标记的内容默认时是同行排列，直到宽度超出它的容器宽度才自动换行。 “ID”属性 ID属性为文档指定了一个唯一的身份标识。 My first Paragraph. My second Paragraph. “LANG”属性 LANG属性指定了内容所使用的语言。 Thi

28、s paragraph is in English. (1.4.2 2), 通用块标记,可以把文档分割为独立的部分，可以包含任何行内或块级标记，以及多个嵌套。与很多通用属性的联合使用非常有效，“CLASS”属性在标记中的使用方法如下： This is the first news This is the second news (1.4.3 1), 行内标记,可以通过使用通用属性来提供外加的结构，和包含块级元素的DIV相对应。 “STYLE”属性允许为一个单独出现的元素指定样式，比如下面的例子。 A popular font for on-screen reading is Verdana (1.4.4 1) 如果想对例子中的一些文字进行进行加黑，看例1.4.4 2, 元数据标记,元数据标记定义HTML页面中的相关信息，语法格式如下： 使用元数据标记还可以指定编码格式，以保证网页中的汉字正常显示，比如： （1.4.5 1）, 图像标记,行内标记定义了一个行内图像，使用格式如下所示。 （1.4.