第1章网页设计与网站开发基础PPT资料.ppt

第1章网页设计与网站开发基础PPT资料.ppt

《第1章网页设计与网站开发基础PPT资料.ppt》由会员分享，可在线阅读，更多相关《第1章网页设计与网站开发基础PPT资料.ppt（41页珍藏版）》请在冰豆网上搜索。

通常以用点分开的四个十进制数表示，例如202.115.222.14。

IP地址能够唯一地标识出计算机所在的网络和网络中位置的编号，而对网络以及其中的计算机，则要根据IP地址的分类来确定。

1.1.2IP地址和域名地址和域名第第11章章网页设计与网站开发基础网页设计与网站开发基础1.1Internet基础知识基础知识按照网络规模的大小，一般将其分为三类。

A类：

0.0.0.0127.255.255.255B类：

128.0.0.0191.255.255.255C类：

192.0.0.0223.255.255.255IP地址全部由数字组成，为了方便记忆，Internet引入了域名系统。

简单说，域名就是Internet上计算机的名字，实际和IP地址是一样的。

例如IP地址211.82.168.8用域名可以表示为。

域名采用层次结构，按地理域或机构域进行分层，书写中用点号将各个层次隔开，自左至右分别为：

计算机名.网络名.机构名.最高域名。

按照Internet的组织模式，域名有两种分类方法：

一种是按机构进行分类，见表1-1所示。

另一种是按国家和地区进行分类，例如cn（中国）、us（美国）、jp（日本）、hk（中国香港）等。

1.1.2IP地址和域名地址和域名第第11章章网页设计与网站开发基础网页设计与网站开发基础1.1Internet基础知识基础知识1.1.2IP地址和域名地址和域名表1-1机构域名表域名域描述域名域描述Com商业机构Firm商业或公司Edu教育机构Store商场Gov政府部门Web和WWW有关的实体Int国际机构Arts文化娱乐Mil军事机构Arc消费性娱乐Net网络组织Infu信息服务Org非盈利组织Nom个人第第11章章网页设计与网站开发基础网页设计与网站开发基础1.1Internet基础知识基础知识统一资源定位地址是一种通用的地址格式，用于对Internet上的众多资源进行标识，当用户查询信息资源时，只要给出URL地址，便可以找到网络资源的位置。

URL地址的格式为：

通信协议：

/Web服务器地址/文件在服务器中的路径/文件名。

例如：

http:

/www.ncsa.uiuc.edu/SDG/Software/Homepage.html其中http是WWW服务器与客户之间遵循的通信协议；

www.ncsa.uiuc.edu是Web服务器地址，即域名；

/SDG/Software/是文件在服务器上的路径；

Homepage.html是文件名。

1.1.3统一资源定位地址统一资源定位地址（URL）第第11章章网页设计与网站开发基础网页设计与网站开发基础1.1Internet基础知识基础知识万维网也叫WWW，是WorldWideWeb的缩写，是Internet上提供的一种信息查询服务。

浏览WWW必须通过浏览器来完成。

浏览器是用来访问Internet的基于超文本技术，是使用最广泛的网络软件，它可以提供包括WWW的浏览、搜索、网络资讯的打印和收发E-mail的功能。

在浏览器中，比较有代表性的是InternetExplorer、Navigator和MSNExplorer浏览器。

1.1.4万维网和浏览器万维网和浏览器第第11章章网页设计与网站开发基础网页设计与网站开发基础1.1Internet基础知识基础知识WWW采用的是服务器/客户机交互方式。

服务器主要对各种信息按超媒体方式进行组织，并以文件方式存储于服务器中。

当客户提出访问请求时，服务器负责向用户发送文件，客户机接收到该文件后进行解释，并将内容显示在用户的计算机上。

1.1.5服务器与客户端服务器与客户端http:

/客户机发送请求服务器响应请求第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素按照网页元素的作用划分，网页中一般包括网页标题、网站LOGO、页眉、导航栏、内容版块和页脚等元素。

网站LOGO页眉导航栏页脚内容版块第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素每个网页都有一个标题，用于标识网页，指示网页的主要内容。

网页标题显示在浏览器窗口的标题栏中。

在设计网页时，网页制作软件一般自动为网页文件指定“未命名”作为网页的默认标题。

在设计网页时，应养成给网页指定标题的习惯，使浏览者看到标题就能了解网页的大体内容。

1.网页标题网页标题第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素LOGO是一个网站的标志，一看到它就使人联想到企业。

所以企业的标志或者注册商标通常被用来当作网站LOGO。

一个好的LOGO可以给浏览者留下深刻的印象，有助于网站的宣传和推广。

LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符、符号及其变形。

2.网站网站LOGO第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素页眉指的是页面上端的部分，通常位于水平导航栏上面。

有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。

页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。

页眉的设计风格应与页面的整体风格协调一致。

3.页眉页眉第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素导航栏是网页的重要组成部分,是网站内多个页面的超链接组合。

它的作用是引导浏览者快速的找到网站中的各个页面，使浏览者尽情浏览页面不致迷失方向。

一般来说，导航栏的形式多种多样，可以是文字、图片或者下拉菜单。

4.导航栏导航栏第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素内容版块是页面设计的主体元素。

它一般是二级连接内容的标题，或者内容摘要。

表现手法采用文字、图象或动画相结合。

布局通常按内容的分类进行分栏安排。

页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的左上方，次要的内容安排在右下方。

页面内容是否丰富是吸引浏览者的重要指标，而内容版块安排是否合理，是否能够体现网站丰富的内容则直接决定网站的点击率。

5.内容版块内容版块第第11章章网页设计与网站开发基础网页设计与网站开发基础1.2网页组成元素网页组成元素页脚是页面的底端部分，通常用来放置版权信息、联系方式等基本信息。

个别网站也会把导航栏、友情链接放在页脚位置。

6.页脚页脚第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局网页布局大致可分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等类型。

1.国字型国字型由同字型演化而来，多适用于大型网站。

其布局为，网站标题及横幅广告条位于最上方，其次是网站主要内容，共分3列，中间是主要部分，左右分列两栏内容，最下方是网站的一些基本信息如联系方式、版权声明等。

这种结构是网上最常见的一种结构类型。

第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局与国字型非常相近，形式上略有区别，最上方是网站标题及广告横幅，其次是网站主要内容，共分2列，左列是一窄列链接，通常为导航栏，右列是正文，最下方也是网站的一些基本信息。

2.拐角型拐角型第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局最上方是标题或其它内容，下面是正文，常见的文章页面和注册页面就采用这种类型。

3.标题正文型标题正文型第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局这是一种左右分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小标题或标志，右面是正文。

我们见到的大部分的大型论坛都是这种结构。

此类型结构清晰、一目了然。

4.左右框架型左右框架型第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局与左右框架型类似，区别仅在于它是一种上下分为两页的框架结构。

5.上下框架型上下框架型是左右框架和上下框架两种结构的结合，此类型结构相对复杂，较为常见的类似于“拐角型”结构，只是采用了框架结构。

6.综合框架型综合框架型这种类型通常出现在网站首页，一般表现为精美的平面设计加小动画，再放上几个简单的链接。

7.封面型封面型第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局第第11章章网页设计与网站开发基础网页设计与网站开发基础1.3网页布局网页布局与封面型结构类似，只是这种类型采用Flash做封面，与其相比，Flash型页面所表达的信息更丰富，视觉效果及听觉效果不亚于传统多媒体。

8.Flash型型即上面几种类型的结合与变化，比如页面在视觉上接近拐角型，但所实现的功能体现了上、左、右结构的综合框架型。

9.变化型变化型第第11章章网页设计与网站开发基础网页设计与网站开发基础1.4网页配色网页配色色彩在网页制作中占有极其重要的地位，成功的配色可以使人加深对网站的记忆。

下面仅介绍一些色彩所表示的性格特征。

红色：

代表热情、热闹、活泼、激烈、温暖、幸福、吉祥。

橙色：

代表温馨、活泼、热闹、丰收、朴实。

黄色：

代表高傲、敏感、希望、威严。

绿色：

代表和平、安逸、希望、环保、清新、洁净。

青色：

代表青春、希望、坚强、庄重。

蓝色：

代表高贵、自由、静谧、理智、清冷。

紫色：

代表高贵、忧郁、神秘、深沉、成熟、浪漫。

黑色：

代表崇高、神秘、静寂、严肃、稳定。

灰色：

代表忧郁、消极、平凡、沉默、中庸。

白色：

代表高雅、清纯、纯洁、神圣、朴素、明快。

第第11章章网页设计与网站开发基础网页设计与网