网页设计基础知识.ppt

网页设计基础知识.ppt

《网页设计基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计基础知识.ppt（54页珍藏版）》请在冰豆网上搜索。

第第11章章网页设计基础知识网页设计基础知识1.网页设计基本概念什么是网页、网站？

网页的板块什么是网页、网站？

网页的板块结构？

网页包含哪些基本构成要结构？

网页包含哪些基本构成要素？

素？

1.1网站网站网站（WebSite）是一个存放网络服务器上的是一个存放网络服务器上的完整信息的集合体完整信息的集合体。

它。

它包含一个或多个网页包含一个或多个网页，这些网页以一定的方式链接在一起，成为一，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。

个整体，用来描述一组完整的信息或达到某种期望的宣传效果。

有有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。

面，如个人网站。

1.2网页1.2网页网页网页（WebPage）实际上）实际上是一个文件是一个文件，网页里可以有文字、图像、，网页里可以有文字、图像、声音及视频信息等。

网页可以看成是一个单一体，是网站的一个元声音及视频信息等。

网页可以看成是一个单一体，是网站的一个元素。

素。

平常我们所听说的平常我们所听说的“新浪新浪”、“搜狐搜狐”、“网易网易”等，即是俗称的等，即是俗称的“网站网站”。

而当我们访问这些网站的时候，最直接访问的就是。

而当我们访问这些网站的时候，最直接访问的就是“网网页页”了。

这许许多多的网页则组成了整个站点，也就是网站。

了。

这许许多多的网页则组成了整个站点，也就是网站。

1.3首页首页首页（Homepage），它是一个单独的网页，和一般网页一样，可以，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个存放各种信息，同时又是一个特殊的网页特殊的网页，作为整个网站的起始点作为整个网站的起始点和汇总点和汇总点。

例如，当浏览者输入搜狐网站地址例如，当浏览者输入搜狐网站地址“”后后出现在第一个页面，即出现在第一个页面，即sohusohu网站的首页。

网站的首页。

问题：

首页和主页有区别吗？

问题：

首页和主页有区别吗？

通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，并建立一个网页以放置并建立一个网页以放置网站信息的目录网站信息的目录，即，即网站的网站的主页主页。

并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页的链接进入主页。

的链接进入主页。

1.4网页的表现形式静态网页：

客户端与服务器端不发生交互静态网页：

客户端与服务器端不发生交互访问者只能被动地浏览网站建设者提供的网页内容。

其特点：

访问者只能被动地浏览网站建设者提供的网页内容。

其特点：

网页内容不会发生变化，除非网页设计者修改了网页的内容。

不能网页内容不会发生变化，除非网页设计者修改了网页的内容。

不能实现和浏览网页的用户之间的交互。

实现和浏览网页的用户之间的交互。

信息流向是单向的信息流向是单向的。

动态网页：

客户端与服务器端要发生交互动态网页：

客户端与服务器端要发生交互动态网页是指浏览器动态网页是指浏览器可以和服务器数据库进行实时数据交流可以和服务器数据库进行实时数据交流的的交互网页，交互网页，而不是加上了动画等效果的动感网页而不是加上了动画等效果的动感网页。

动态网页技术的动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。

户管理、订单管理等。

信息流向是双向的信息流向是双向的。

2.网页的版块结构InternetInternet中的网页由于涉及和制作的中的网页由于涉及和制作的差别而千变万化，但通常由几大版块差别而千变万化，但通常由几大版块组成。

组成。

2.1网站LOGO通常网站为体现其特色与内涵，涉及并制作一个通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在图像放置在网站的左上角或其他醒目的位置。

网站的左上角或其他醒目的位置。

企业网站常常使用企业的标志或者注册商标。

企业网站常常使用企业的标志或者注册商标。

一个设计优秀的一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企可以给浏览者留下深刻的印象，为网站和企业形象宣传起到十分重要的作用。

业形象宣传起到十分重要的作用。

2.1网站LOGO2.2导航条导航条导航条是网页的重要组成元素。

设计的目的是将站点内的信息分类是网页的重要组成元素。

设计的目的是将站点内的信息分类处理，然后放在网页中以帮助浏览者快速查找站内信息。

处理，然后放在网页中以帮助浏览者快速查找站内信息。

导航条的形式多种多样，包括文本导航条、图像导航条以及动画导导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。

航条等。

有些使用特殊技术（例如有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条）制作的导航条还可以具有下拉菜单的功能。

还可以具有下拉菜单的功能。

2.2导航条2.3BannerBanner的中文意思是横幅的中文意思是横幅。

Banner的内容通常为网页中的广告。

的内容通常为网页中的广告。

在网页布局中，大部分网页将在网页布局中，大部分网页将Banner放置在与导航条相邻处，或者放置在与导航条相邻处，或者其他醒目的位置以吸引浏览者浏览。

其他醒目的位置以吸引浏览者浏览。

2.3Banner2.4内容版块网页的内容版块是整个页面的组成部分。

网页的内容版块是整个页面的组成部分。

设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并且每个内容版块主要来显示不同文本信息。

以有一个标题内容，并且每个内容版块主要来显示不同文本信息。

2.5版尾或版权版块版尾，即页面最低端的版块。

版尾，即页面最低端的版块。

这部分位置通常放置网页的版权信息，以及网页所有者、设计者的这部分位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。

联系方式等。

有的网站也将网站的友情链接以及一些附属的导航条放置在这里。

有的网站也将网站的友情链接以及一些附属的导航条放置在这里。

3.网页的基本构成要素虽然网页种类繁多，形式内容各有不同。

但网页虽然网页种类繁多，形式内容各有不同。

但网页的基本构成要素大体相同，网页设计就是要将构的基本构成要素大体相同，网页设计就是要将构成要素有机整合，表达出美与和谐。

成要素有机整合，表达出美与和谐。

3.1文本网页中的信息以文本为主。

与图片相比，文字虽然不如图片那样能网页中的信息以文本为主。

与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。

够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。

3.2图片用户在网页中使用的图片格式主要包括用户在网页中使用的图片格式主要包括GIF、JPEG和和PNG等，其中等，其中使用最广泛的是使用最广泛的是GIF和和JPEG两种格式。

两种格式。

3.3超链接超链接在本质上属于一个网页的一部分，是一种允许用户同其他网超链接在本质上属于一个网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。

页或站点之间进行连接的元素。

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。

一个电子邮件地址、一个文件，甚至是一个应用程序。

3.4动画在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

了动画形式。

网页中的动画主要有两种：

网页中的动画主要有两种：

GIF动画和动画和Flash动画。

其中动画。

其中GIF动画只动画只能有能有256种颜色，主要用于简单动画和图标。

种颜色，主要用于简单动画和图标。

3.5声音和视频声音是多媒体网页的一个重要组成部分。

用于网络的声音文件的格声音是多媒体网页的一个重要组成部分。

用于网络的声音文件的格式非常多，常用的有式非常多，常用的有MIDI、WAV、MP3和和AIF等。

等。

很多浏览器不要插件也可以支持很多浏览器不要插件也可以支持MIDI、WAV和和AIF格式的文件，而格式的文件，而MP3和和RM格式的声音文件则需要专门的浏览器播放。

格式的声音文件则需要专门的浏览器播放。

3.6表格在网页中表格用来控制网页中信息的布局方式。

在网页中表格用来控制网页中信息的布局方式。

包括两个方面：

一是使用行和列的形式来布局文本和图像以及其他包括两个方面：

一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。

中出现的位置。

3.7表单网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。

这个目标可以是文本文件、息发送到网页设计者设置的目标端。

这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。

页、电子邮件，也可以是服务器端的应用程序。

表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。

来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。

3.8其他常见元素包括悬停按钮、包括悬停按钮、Java特效、特效、ActiveX等各种特效。

它们不仅能点缀等各种特效。

它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

着不可忽视的作用。

4.网页设计软件熟练使用各种网页设计以及图像、动画处理熟练使用各种网页设计以及图像、动画处理制作软件，是一个网页设计师必须掌握的技制作软件，是一个网页设计师必须掌握的技能。

能。

4.1文本编辑器不仅在记事本中可以编写不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写代码，任何文本编辑器都可以编写HTML。

比如写字板、。

比如写字板、word等，但保存的时候必须保存为等，但保存的时候必须保存为.html或或.htm格式。

格式。

有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript、VBScript等多种语法的着色显示。

等多种语法的着色显示。

例如：

例如：

EmEditor、EditPlus、UltraEdit4.2Dreamweaver网页设计软件这是现在使用最广泛的网页编辑工具之一。

这是现在使用最广泛的网页编辑工具之一。

Dreamweaver是是Macromedia公司推出的网页编辑工具。

公司推出的网页编辑工具。

它是一个所见即所得网页编辑器，支持最新的它是一个所见即所得网页编辑器，支持最新的DHTML（DynamicHTML，动态，动态HTML）和）和CSS标准。

采用了多种先进技术，能够快速标准。

采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。

常简单。

另外还有另外还有Microsoft公司开发的公司开发的FrontPage也是设计网页和管理网站也是设计网页和管理网站的软件。

除了所见即所得的编辑功能之外，也可以直接编辑的软件。

除了所见即所得的编辑功能之外，也可以直接编辑HTML标记，让设计者可以轻松的编辑网页。

标记，让设