网页图像动画与脚本编程 主讲：熊丽华

第一章网页制作基础 本章要点 网页的简单制作方法 网络的基本术语 网站的分类与网站赏析 网页设计师的素质 网页设计的基本原则(自学) 基于工作过程的 网页设计与制作教程

基于工作过程的网页设计与制作教程 情境1：俞晨视觉传奇个人主页

1）启动Dreamweaver CS3，出现如图1-2所示的界面，选择“创建新项目”栏目中的HTML，系统便会新建一个HTML文档。 俞晨视觉传奇个人主页制作步骤 1）启动Dreamweaver CS3，出现如图1-2所示的界面，选择“创建新项目”栏目中的HTML，系统便会新建一个HTML文档。 图 1-2 Dreamweaver CS3启动界面

2）单击“文件”菜单，选择“另存为”对话框中选择文件保存的位置并给文件命名，如命名为index.html，然后单击“保存”按钮保存文件。 俞晨视觉传奇个人主页制作步骤 2）单击“文件”菜单，选择“另存为”对话框中选择文件保存的位置并给文件命名，如命名为index.html，然后单击“保存”按钮保存文件。 注意：在网页编辑之前先将网页保存，这是一个良好的习惯，并且应该为文件取一个英文名称或汉语拼音名称（不要命名为汉字名称），如果网页为主页可以命名为index.html或者为default.html。 3）在工具栏中如图1-3所示的位置输入网页标题 “欢迎访问俞晨视觉传奇网站!” 图 1-3 工具栏中的文档标题文本框

4）执行“插入”→“表格”命令，参数如图1-4所示，然后设置表格属性如图1-5所示：高为100%，背景颜色为黑色#000000。 俞晨视觉传奇个人主页制作步骤 4）执行“插入”→“表格”命令，参数如图1-4所示，然后设置表格属性如图1-5所示：高为100%，背景颜色为黑色#000000。 图 1-4 设置表格大小 图 1-5 设置表格属性

7）按<F12>键，在IE浏览器中预览该网页，效果如图1-1所示。 俞晨视觉传奇个人主页制作步骤 5）执行“插入”→“图像”命令，在“选择图像源文件”对话框中选择“index.jpg”图片，点击“确定”按钮即可完成图像的插入，选择图像设置“居中对齐”。 6）插入图像后，按<回车>键，输入“2007-2009 版权所有：俞晨 建议1024*768以上分辨率浏览”版权信息。选择输入的文字，在属性栏中修改文字的颜色为白色（#ffffff）。 7）按<F12>键，在IE浏览器中预览该网页，效果如图1-1所示。 注意：这个项目还可以进行优化，在今后的学习中可以进一步提高，在保存的文件夹中的default.html文件为优化过的网页。该页面采用了表格布局，插入了flash动画，设置了样式表，是大家进一步学习的目标，通过浏览default.html网页下面我们来大家学习网页的基本元素。

1.1.2 网页的基本要素 网页标题 LOGO 超级链接 网页文本 网页图像 网页导航 网页页脚 图 1-6 俞晨视觉传奇网站default.html网页基本构成要素

1.1.2 网页的基本要素 1．页面标题 网站中的每一个页面都有标题，用来提示该页面的主要内容，标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是让浏览者清楚地知道所要浏览的内容，不至于迷失方向。 设置页面标题很简单，一般的网页编辑软件都提供这项设置。在HTML文档中的<title>和</title>之间输入网页的标题即可。有些网页编辑软件有一个默认的页面标题，如在Dreamwaver中默认为Untitled-1。

1.1.2 网页的基本要素 2．网站标志 3．页面尺寸 由于页面尺寸和显示器大小及分辨率有关，网页的显示无法突破显示器的显示范围，而且浏览器本身也会占去不少空间，因此留给页面的范围受到了限制。一般分辨率为800像素×600像素的情况下，页面的显示尺寸为778像素×430像素，分辨率为1024像素×768像素的情况下，页面的显示尺寸为1000像素×600像素。从以上数据可以看出，分辨率越高，页面尺寸越大。

1.1.2 网页的基本要素 4．页眉和页脚、导航栏、图片、文本 页眉的风格一般要求和页面的整体风格保持一致。一个富有个性特色的页眉将和网站标志一样起到标示的作用。在页眉中常放置含有站点名字的图片、标志、网站宗旨、宣传口号和广告语等 页眉 导航栏 LOGO

5．多媒体 在网页中可以使用的媒体对象主要包括flash动画、flash按钮、flash文本、java小程序、音频和视频等。 1.1.2 网页的基本要素 5．多媒体 在网页中可以使用的媒体对象主要包括flash动画、flash按钮、flash文本、java小程序、音频和视频等。 图 1-10 网页中的Flash动画 图 1-11 网页中的视频

互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 1.2 网页的基本概念 1．互联网 互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 图 1-11 Internet示意图

1.2 网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 1.协议 协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。万维网使用的是HTTP协议（Hyper Text Transfer Protocol,超文本传输协议）。

1.2 网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 2.地址 地址：万维网采用统一的命名方案来访问Web上的资源。URL（Uniform Resource Locations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。 每个URL均由3部分组成，如下所示。 用于通讯的协议 与之通信的主机（服务器） 服务器上资源的路径（例如文件名） http:// www.hcit.edu.cn / main.htm 协 议 主 机 路 径 http www.hcit.edu.cn main.htm

3.HTML（Hyper Text Markup Language，超文本标记语言） 1.2 网页的基本概念 2．万维网 万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是： 3.HTML（Hyper Text Markup Language，超文本标记语言） HTML用于创建网页文档。HTML文档是使用HTML标记和元素创建的，此文件以扩展名.htm或.html保存在Web服务器上。 请 求 响 应 客户浏览器 客户浏览器/服务器工作的过程

1.2 网页的基本概念 3．Web浏览器 Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：Web Browser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。

1.2 网页的基本概念 4．网页与网站 网站：网站是万维网上相关网页的集合。 网页：网页是万维网上的页面，其文件后缀名通常为.html或.htm。HTML：HTML是超文本标记语言（Hyper Text Markup Language）的简称。 HTML编辑器：也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是Macromedia Dreamweaver和Microsoft FrontPage。

1.3网站的分类与赏析 1.网站的分类 1．资讯类网站 如新浪、网易、搜狐等门户网站。这类站点一般会为访问者提供大量的信息，而且访问量较大。因此，应对这些信息进行合理的分类，将页面划分为多个栏目，页面机构要合理、美观，便于浏览者浏览。 2．形象类网站 如一些中小型公司或单位的网站。这类网站一般较小，有的只有几页，需要实现的功能也比较简单，网页设计的主要任务是宣传企业形象。对于这类网站来说，版式、色彩、动画设计等是项目重点，一般对美工的要求较高。 3．资讯与形象相结合的网站 如大型公司或高校的网站。这类网站在设计上要求较高，既要考虑到资讯类网站的各项指标，同时又要突出企业、单位的形象。

1.3 网站的分类与赏析 2.网站的赏析-门户类网站 YAHOO是互联网上最知名的公司，一直高居访问流量之首，是互联网上最大的门户，也是一个垂直网站总汇。YAHOO致力于做成互联网上最大的媒体，涉及的领域包括网络门户、电子商务、网络通信等，提供的服务还包括拍卖、购物、开设网上商店、聊天等。YAHOO公司是一家全球性的互联网通信、商贸及媒体公司，是全球第一家提供互联网导航服务、主要以广告为支撑的网站，广告收入占公司收入的60%。YAHOO网站如图1-13所示。

（3）文字颜色 使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形式，鼠标放上去后会有微妙的明度变化以及下划线的出现。 说明性文字用的是黑色。 信息内容框里的标题，主次关系排视觉第一位，内容框里的主要内容缩小字号，都做了粗细的变化。 从文字上看，又一次体会到了门户网站对细节的推敲的严谨性。 1.3 网站的分类与赏析 YAHOO的网站以浅蓝、紫色系为主要色调，右上新业务栏会不时变化相应的主题，根据相应的主题来定制不同的颜色，使用户总有即时、新鲜的感觉。 2.网站的赏析-门户类网站 （4）图形 第一屏上最大的图片为右方的YAHOO！Travel，它能够直接体现出YAHOO收益的新业务。其次为屏幕中央的新闻照片，其它则为左侧的导航图片（个性服务）。 在整个网站里，破除单调呆板印象，使整个版面生动的点睛之笔是左侧的8个图标，也是网站为用户订制的特色服务。 （2）色彩 与某些门户网站相比较，YAHOO网站的用色比较清爽、干净。 整体看来，YAHOO使用了蓝色、紫色两套邻近色，辅助以灰色，使色彩过渡和谐。点睛色无疑为顶部左侧醒目突出网站的标志“YAHOO！”，这也是网站中纯度最高的颜色。 YAHOO网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度主次的把握也值得称赞。 （1）框架结构-首页 上左中右下结构是框架,确切地说是左中右结构。整个网站的主要内容主要集中在中和右的信息内容上。

1.3 网站的分类与赏析 2.网站的赏析-数码产品类网站 数码产品网站主要用来说明和展示数码产品的功能和样式，对于功能齐全和有一定技术含量的网站，还可以通过网站进行电子交易和产品订购等操作。不同的企业建设数码产品的要求有所不同，设计风格也不同，此类网站主要还是以符合产品的特点为主。网页设计者在设计的时候，只要抓住数码产品的样式风格、性能特征等方面的特点，设计与其风格匹配的网站即可。设计风格通常比较时尚、大方、具有时代感，色彩多选择蓝色、红色、灰色等体现时尚感的颜色。

2.网站的赏析-数码产品类网站 1.3 网站的分类与赏析 （1）色彩分析 使用蓝色来体现具有科技感的网站早已司空见惯，该实例大胆的采用了红、橙色来作为主色调，同时选用银灰色来作为辅助色。页面整体布局体现了产品的时代科技感，同时也体现了产品的活力潮流感。 选用红、橙色是依据网站logo、手机屏幕的色彩方案而设定的，是一种能同时体现企业形象与产品风格的设计方案。热情、充满活力的红色和橙色很好的体现了音乐手机的时尚魅力，让用户第一眼就被网站亮丽的色彩所吸引，这在当今网络上数以亿计的网页中显得尤为重要。 银灰色的选用主要是起到了辅助衬托的作用，它不仅不抢主色调的风采，反而增加了页面的对比度。因为既然选用了红、橙色来作为主色调，那么就尽量少用或不用其他诸如蓝、绿等比较抢眼的颜色，否则将会出现主次不分明、画面凌乱的副作用。 （2）布局分析 该网页的整体页面属于上下型结构，导航和 Banner区域为一块，内容区域为另外一块。导航和Banner区域的边框和内容区域的边框风格一致，这样既有整体性也有对比性。 放在Banner区域左边的会员登录框被包围在“电子线路板”的圆角线条框内，体现科技感的同时也符合了用户从“从左至右”的习惯。 内容区域使用的是左右结构。左边使用了一张较大的手机屏幕图，然后将主要内容放置其中显得特别突出；右边使用了两幅广告图来推荐主要的业务；下面是文字类新闻标题。图文并茂显得画面更丰富多彩。

制作者需要掌握各种网页制作软件的功能和特点。 制作者应该具备美术设计方面的才能。 制作者应该具备深厚的文学修养，以及对社会的透彻分析能力。 1.4 网页设计师所具备的素质 制作者需要掌握各种网页制作软件的功能和特点。 制作者应该具备美术设计方面的才能。 制作者应该具备深厚的文学修养，以及对社会的透彻分析能力。 制作者应该具备丰富的网络经验，了解最新的网络技术与发展动态。

第一章网页制作基础 本章总结 网页的简单制作方法 网络的基本术语 网站的分类与网站赏析 网页设计师的素质 网页设计的基本原则(自学) 基于工作过程的 网页设计与制作教程

浅谈对网站、网页、HTML、浏览器的理解。 如何理解网页设计的基本原则？ 1.4 习题 基础简答题 如何理解协议、地址的概念？ 浅谈对网站、网页、HTML、浏览器的理解。 如何理解网页设计的基本原则？ 项目实战题 通过连接http://www.edu.cn理解http协议。 通过连接ftp://ftp.pku.edu.cn理解ftp协议。 搜索世界500强企业网站例如微软中国网站，针对色彩与布局对其进行简单的分析。

谢谢大家