网页设计制作基础.ppt

网页设计与制作教程,西安工业大学计算机学院 雷聚超,1 网页、网站的概念 2 Web标准 3 网站的规划与设计 4 网站开发工作流程 5 网站策划书撰写要点 6 常用网页制作软件 7 网页设计的基本概念 8 网页版面设计 9 实训 10 网页的相关概念,第1章 网页设计制作概述,1.1.1 网页、网站和主页 网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。 如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为index.html或default.html），这个最先打开的默认页面就被称为“主页”或“首页”。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页 静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。 动态网页技术根据程序运行的区域不同，分为客户端动态技术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括JavaScript、ActiveX和Flash等。,1.1 网页、网站的概念,1.2.1 Web标准的概念 Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3C DOM、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 例如，人体模特换衣服和表演。模特就好比数据，衣服则是表现形式，模特的表演动作是行为。模特和衣服是分离的，这样就可以随意换衣服。,1.2 Web标准,1.2. 2 建立Web标准的目的 简单地说，建立Web标准的目的是： 提供最大利益给最多的网站用户； 确保任何网站文档都能够长期有效； 简化代码，降低建设成本； 让网站更容易使用，能适应更多不同用户和更多网络设备； 当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。,1.2 Web标准,1.2.3 采用Web标准的优点 1客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）； 2. 服务器端的优点 采用Web标准后，服务器端的好处主要体现在以下方面： 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低； 更容易被搜寻引擎搜索到；,1.2 Web标准,在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。 网站的规划与设计一般应遵循以下三个原则： 最大限度地满足用户需要； 最有效地进行资源利用； 使用方便，界面友好，运行高效； 常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。,1.3 网站的规划与设计,典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。 3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。,1.4 网站开发工作流程,案例一：规划曙光大学网站 【案例综述】规划曙光大学网站的结构。 【案例展示】本书围绕着一个完整网站的制作作为主要讲解案例，其站点规划结构图及其含义如图1-1所示。,1.4 网站开发工作流程,网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。 1前期调研分析 2. 网站的功能定位 3网站技术解决方案 4网站内容规划 5网页设计 6网站维护 7网站测试 8网站发布与推广 9网站设计日程表 10费用明细,1.5 网站策划书撰写要点,1.6 常用网页制作软件,1.6.1 网页制作工具 网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。 1Dreamweaver 2. FrontPage 3Adobe GoLive 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 网页上传工具 制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。 1CuteFTP 2. FlashFXP 3LeapFTP 4其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。,1.6 常用网页制作软件,1.6.5 网页设计工具的发展动向 2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。 另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。,1.7.1 虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为“虚拟界面”。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。 从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。,1.7 网页设计的基本概念,1.7.1 虚拟界面 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。,图2-1 包含多种多媒体的网页,1.7 网页设计的基本概念,1.7.2 网页界面的特点 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。 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像素1024像素,1.7 网页设计的基本概念,1.7.3 网页的功能 网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。,1.7 网页设计的基本概念,1.8.1 版面编排原则 网页是信息传播的一种载体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。 版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。 1突出中心，理清主次 2. 搭配合理，大小呼应 3图文并茂，相得益彰,1.8 网页版面设计,1.8.2 网页排版布局的一般步骤 （1）构思 根据网站内容的整体风格，设计版面布局。 （2）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。 （3）细化 在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。,1.8 网页版面设计,1.8.3 版面典型风格 网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。与平面广告相比，网页的总体风格是：文字较多，可进行超链接，使用动画、视频、声音，其信息量远远大于广告。比较典型的网页风格主要有：对称型、偏置型、标题型和混合型等。,1.8 网页版面设计,1.8.3 版面典型风格,1.8 网页版面设计,对称型,偏置型,标题型,1.8.4 网页排版布局的常用技术 （1）CSS（层叠样式表）布局 使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。 （2）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。 （3）框架布局 从布局上考虑，框架结构不失为一个好的布局方法。,1.8 网页版面设计,1.8.5 色彩搭配 色彩是人的视觉中最敏感的东西，把握好页面的色彩，页面设计就成功了一半。好的色彩运用能使浏览者对网站留下较深的印象。色彩和谐与否，是整个网页设计是否成功的关键。色彩总的应用原则是“总体协调，局部对比”，网页的整体色彩效果应该是和谐的，只在局部的、小范围的地方突出一些强烈色彩的对比。,1.8 网页版面设计,1.8.5 色彩搭配 1首屏页面的设计 所谓首屏页面，是指在打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。,1.8 网页版面设计,1.8.5 色彩搭配 2.导航栏的设计 导航栏是网页非常重要的组成部分，是引导阅读、扩大信息量的有力手段。图2-7是网站的导航栏。,1.8 网页版面设计,1.8.6 设计规则 网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。 1首屏页面的设计 2. 导航栏的设计 3媒介规格设计 4网页效果与网页效率 5强调整体 6网页与读者群 7网页命名规则 8及时更新网页,1.8 网页版面设计,1.8.7 设计误区 在设计网页时，如果设计不当，就会造成网页虽美观，但运行缓慢，甚至无法正常运行的现象。为了避免上述现象发生，列举几个常见的设计误区，以便引起重视。 1片面追求版面效果 2. 使用纵向的导航栏 3使用多种媒体形式 4规则化,1.8 网页版面设计,1.8.8 案例一：设计曙光大学网站首页版面 【案例综述】使用网页版面设计技术设计曙光大学网站首页版面。 【案例展示】曙光大学网站首页版面的效果如图2-8所示。,1.8 网页版面设计,1.9.1 实训一：设计“爱家美食”网站首页版面 【实训综述】使用网页版面设计技术设计“爱家美食”网站首页版面。 【实训展示】“爱家美食”网站首页版面的效果如图2-9所示。,1.9 实训,图2-9 实例效果,1简述网页、网站和主页的异同。 2. Web标准主要由哪3部分组成？分别解释其含义。 3简述网站开发的工作流程。 4简述怎样撰写网站策划书？ 5常用的网页制作工具有哪些？分别有哪些特点？ 6对于现在普遍使用的19in显示器，网页的版面尺寸设置为多少像素合适？为什么？ 7上网浏览网页，指出这些网页版面属于哪种类型。 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）又称为因特网，是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。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地址是给因特网上的每台计算机和其他设备分配的一个唯一的地址。在IE浏览器的地址栏中输入IP地址“201.10.38.64.9”，按下回车键。,1.10.4 网站上传和下载,上传（Upload）是从本地计算机（一般称客户端）向远程服务器（一般称服务器端）传送数据的行为。下载（Download）是从远程服务器取回数据到本地计算机的过程。,1.10.5 网页的HTML构成,1.10.5.1 文档标记 1.10.5.2 头部标记 1.10.5.3 主体标记 1.10.5.4 段落标记 1.10.5.5 文字标记,1.10.5.1 文档标记,文档标记的语法格式如下。 . （1.3.1）,1.10.5.2 头部标记,头部标记（）包含文档的标题信息，头部标记都不可或缺，但是其起始和结尾标记可省。 头部标记中最常用的是，用于给出文档的标题，并在IE浏览器中显示出来。每个文档在中仅存在一个。 （1.3.2）,1.10.5.3 主体标记,主体标记（）包含了文档的内容，用若干个属性来规定文档中显示的背景和颜色。 为该标记添加属性的代码格式如下。 . (1.3.3) 注意背景颜色和文字颜色的变化。,1.10.5.4.1 注释标记 注释标记的格式为： 注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。 1.10.5.4.2 强制换行和不换行标记、. 要用HTML的标记来强制换行、分段。放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为： 文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为： 文字 (1.3.4),1.10.5.4 段落标记,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用标记设置字号（被W3C列为不建议使用的标记，以后将学习用CSS来设定字体）。设置文字大小的格式为： 被设置的文字 标记可设定文字的字体、字号和色彩。 size用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。 face用来设置字体。如黑体、宋体、楷体_GB2312、隶书、Times New Roman等。 color用来设置文字色彩。 【1.3.51.3.8】,1.10.5.5 文字标记 字体标记.,1.10.6 HTML常用标记,1.10.6.1 链接标记 1.10.6.2 段落标记 1.10.6.3 通用块标记 1.10.6.4 行内标记 1.10.6.5 元数据标记,1.10.6.6 图像标记 1.10.6.7 框架容器标记 1.10.6.8 子框架标记 1.10.6.9 表格标记 1.10.6.10 浮动帧标记 1.10.6.11 滚动标记,1.10.6 HTML常用标记,1.10.6.1 链接标记,链接标记定义了文档的关联，在头部标记中可包含任意数量的。 表示“a1.html”是当前文档的词汇表。 表示当前文档是“a1.html”的词汇表。,1.10.6.2 段落标记,定义了一个段的块级标记，所使用的属性是“ID”属性和“LANG”属性。 块标记是相对于行内标记来讲的，可以换行。在没有任合布局属性的作用时，标记中的内容是自动换行的。而行内标记的内容默认时是同行排列，直到宽度超出它的容器宽度才自动换行。 “ID”属性 ID属性为文档指定了一个唯一的身份标识。 My first Paragraph. My second Paragraph. “LANG”属性 LANG属性指定了内容所使用的语言。 This paragraph is in English. (1.4.2 2),1.10.6.3 通用块标记,可以把文档分割为独立的部分，可以包含任何行内或块级标记，以及多个嵌套。与很多通用属性的联合使用非常有效，“CLASS”属性在标记中的使用方法如下： This is the first news This is the second news (1.4.3 1),1.10.6.4 行内标记,可以通过使用通用属性来提供外加的结构，和包含块级元素的DIV相对应。 “STYLE”属性允许为一个单独出现的元素指定样式，比如下面的例子。 A popular font for on-screen reading is Verdana (1.4.4 1) 如果想对例子中的一些文字进行进行加黑，看例1.4.4 2,1.10.6.5 元数据标记,元数据标记定义HTML页面中的相关信息，语法格式如下： 使用元数据标记还可以指定编码格式，以保证网页中的汉字正常显示，比如： （1.4.5 1）,1.10.6.6 图像标记,行内标记定义了一个行内图像，使用格式如下所示。 （1.4.6 1）,1.10.6.7 框架容器标记,是一个框架容器，取代了的位置，紧接标记之后。该标记要用到的属性有“ROWS”、“COLS”、“ONLOAD”、“ONUNLOAD”以及除了“LANG”和“DIR”属性之外的通用属性。 框架容器允许在一个窗口展现多个独立的文档。 ROWS：多重框架的高度值 COLS： 多重框架的宽度值,1.10.6.8 子框架标记,定义了一个框架设置文档中的子区域，包含在定义了框架尺寸的中。 NAME：框架的名称 SRC ：框架的内容 SCROLLING：框架的滚动设置 （将1.4.8 1left,1top,1right利用框架技术合并到一个页面 1.html）,1.10.6.9 表格标记,标记用来定义表格，一般处于标记中。简单的HTML表格由标记以及一个或多个、或标记组成。 标记定义表格行，标记定义表格头，标记定义表格单元 (1.4.9 table.html ),1.10.6.10 浮动帧标记（IFrame）,标记是浮动帧标记，所用的HTML文件可以直接嵌入在另外的HTML文件中，实现“画中画”电视的效果。 该标记的语法格式为 (1.4.10 1),1.10.6.11 滚动标记,使用标记可以实现滚动的文字或图片效果，所要用到的属性有：,align=right内容的对齐方式 behavior=scroll 内容的滚动方式 bgcolor=yellow 活动内容的背景颜色 direction=down 内容的滚动方向 height=300 高度 width=200宽度 hspace=50 与父容器水平边框距离 vspace=20与父容器垂直边框距离 loop=-1滚动次数（-1表示一直） scrollamount=10滚动速度（10pix/秒） scrolldelay=100 滚动延迟时间（100MS） onMouseOut=this.start() 鼠标移出区域继续滚动 onMouseOver=this.stop()鼠标移入区域停止滚动 (1.4.11 text.html pic.html),1.10.6.11 滚动标记,1.10.7 综合实战制作日程表,通过在记事本中输入HTML语言，可以制作出多种多样的页面，比如日程表。 (1.5 index),