认识网页的基本元素

网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。

一般网页的基本内容包括标题、网站LOGO、页眉、页脚、导航、主要内容等。

如果想具体了解网页的基本构成，那无妨接着往下看吧!1、网页标题网页标题是对一个网页的高度概括。

网站中的每一个页面都有一个标题，用来表示该页面的主要内容。

它的主要作用是引导访问者清楚地浏览网站的内容。

2、网站的LOGO在IT领域，LOGO意味着标志、标识。

它的主要用途是与其他网站链接，让其他网站链接到该标志和门户，代表一个网站或网站的某个部分。

LOGO的图形形式，特别是动态的LOGO，比文字形式的链接更引人注意。

为了促进互联网上的信息传播，一个统一的国际标准是必要的。

目前，关于网站的LOGO有三种规格：(1) 88×31像素，这是互联网上最常见的LOGO规格。

(2) 120×60像素，这种规格用于一般大小的LOGO。

(3) 120×90像素，这种规格用于大型LOGO。

3、网页页眉网页页眉是指页面顶部的部分，有些页面划分得比较显然，有些页面则没有明确的区分。

通常状况下，页头的〔制定〕风格与页面整体风格一致，富有变化的页眉与网站的标志LOGO具有相同的作用。

页眉的位置比较吸引人，大多数网站制在这里设置网站的目的、口号、广告语等。

4、网页页脚网页页脚位于页面底部，通常用来标注站点所属公司的名称、地址、网站版权、电子邮件地址等信息，使用户能够了解网站所有者的基本状况。

5、网页导航网页导航是指通过一定的技术手段，为访问者提供一定的网页浏览方式，使他们能够方便地获取所必须内容。

网页导航在每个网页中的位置是不同的。

网页导航的表现形式是网页上的栏目菜单设置、辅助菜单和其他在线帮助。

6、网页的主体内容主体内容是〔网页制定〕的元素。

它一般是二级链接内容的标题，或是内容。

4 域名是。

1.1.3 网页的基本组成元素网页是由多种元素组成的。

文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。

而其他的很多元素（如超链接等）都是基于这两种基本元素而创建的。

从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。

然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。

网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。

以内容来划分，一般的网页界面包括网站Logo、Banner、导航栏、内容栏和版尾等部分。

1．LogoLogo（意译为标识、标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现，其制作要点如下。

● Logo的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo醒目，让浏览者能很快看到。

● Logo的内容通常包括特定的图形和文本，其具体内容应与开发网站的企业文化紧密结合，以体现网站的特色，图1-4所示为新浪网的Logo。

2．BannerBanner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。

Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。

其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素及120像素×240像素等。

其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小应在15KB左右，而88像素×31像素的Banner文件大小最好在5KB左右。

除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网首页特卖活动横幅广告。

网页设计教程第一章网页制作基础知识1.1 认识网页与网站1.1.1 网页和网站1．网页网页（Web page）是一个文件，它存放在某一部与互联网相连的计算机中，如图1-1所示。

2．网站网站（Website）是用于展示特定内容的相关网页的集合。

3．首页首页是进入某个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名是index和default加上扩展名。

1.1.2 网页构成元素虽然网页的外在表现形式多种多样，但构成网页的基本元素却是大体相同，一般包括文本、图像、超链接、表单、动画、音频和视频等，如图1-2所示。

1．文本和图像文本和图像是网页中最基本的构成元素。

2．超链接超链接是指超文本内由一文件连接至另一文件的连结。

当用户单击超链接时，其指向的目标内容将显示在用户的浏览器中。

3．表单表单通常用来收集信息或实现一定的互交效果，其主要功能是收集用户在浏览器中输入的信息，然后将这些信息发送到目的端。

4．动画为了吸引浏览者的眼球，通常网页中的都包含一定的动画效果，常见的有GIF图像动画和Flash动画。

5．音频和视频根据实际需要，网页中还会添加音频和视频来丰富页面效果，常见的音频格式为MP3，视频格式为FLV。

1.1.3 网页制作的工作环境1．Adobe Dreamweaver2．Adobe Photoshop3．Adobe Flash1.2 如何设计网页1.2.1 网页设计基本原则网站设计制作的优劣直接关系到门户网站的外在形象和访问者的使用效率，以下是一些在网站设计中应注意的基本原则。

（1）明确网站目标和用户需求。

（2）主题鲜明。

（3）注重布局设计。

（4）避免滥用技术。

（5）及时更新维护。

1.2.2 设计风格与颜色搭配1．风格定位风格即网站的特点，指的是浏览者对网站内容和形式的直观感受，所透露出来的是设计者的文化品位，图1-3所示的是卡通风格的网站。

网站的风格定位可从以下几方面考虑：第一，确保网页界面有较强的一致性，使网站形成统一的风格界面，这里的一致性包括字体、标题、图像、背景颜色和注脚等第二，确保网页界面美观、简洁，易于访问。

网页的基本构成元素有哪些？在设计网页时，我们应该组织页面的基本元素，同时配合一些特效，形成一个色彩丰富的网页。

网页由文本，图像和超链接组成。

内容是网站的灵魂，文本是网站灵魂的物质基础。

文本和图像是网站上使用最广泛的。

具有丰富内容的网站将不可避免地使用大量文本和图像，然后将超链接应用于文本和图像，以使这些文本和图像“生动”。

1.文本元素文本是网页的主体。

虽然flash和图形文本可以达到同样的效果，即使超出了纯文本的效果，Web文本的优点也无法替代。

因为纯文本的存储空间非常小。

但是，在页面上使用相同的字体会使页面过于僵化。

正确调整页面中文本的大小和颜色也可以提高页面的效果。

1）标题在网页或网站上的单独文章中，通常会有一个引人注目的标题。

告诉访问者网站的名称或文章的主题。

现在，许多网页设计师使用图像或Flash动画而不是文本标题。

2）文字大小正确调整文本大小可以使文本排列更加生动，并取得更好的效果。

3）段落具有不同段落和层次感的文章不仅可以使观众更好地阅读，还可以使页面看起来整洁优雅。

4）样式粗体，斜体和下划线是最基本的文本样式。

但是，在网页中不应使用下划线，这会使查看者将其误认为是超链接。

将一些字体样式添加到页面的适当位置将使页面更具装饰X。

5）字体颜色您还可以在页面上为字体添加颜色，以强调页面的焦点并使页面更加华丽。

但我们必须注意色彩搭配。

你不能在页面上使用太多的颜色，太华丽会引起观众的厌恶。

2，图像图像的视觉效果比单词的视觉效果强得多。

灵活应用图像可以在网页中起到修饰作用。

但不当使用会使网页变得混乱。

网页上的图像文本主要是JPG和GIF格式。

因为它们不仅具有柱高压缩比，而且还具有跨平台特X。

无论浏览器使用何种操作系统，它们都可以显示两张图片。

网页中有几种主要的图像应用形式。

1）图像标题通常，网页中应该有一个标题来提醒观众网站正在做什么，这在导航中起作用。

图像标题的应用可以使网页更加美观。

2）背景图像的另一个重要应用是作为网页的背景。

《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。

该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。

是一门用途广泛、前景良好的计算机行业课程，是适应计算机虚拟现实应用技术专业课程的需要。

该课程的学习可为后续《JavaScript脚本语言》等课程奠定一定的职业能力基础。

二、课程目标通过《网页设计》课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。

1．知识目标（1）理解网站的基本概念和HTML5网页编程语言基础；（2）掌握搭建开发环境、网站的搭建（3）掌握HTML5中文字和段落的设置和常用标签；（4）掌握列表标签的使用；（5）掌握超级链接标签的使用；（6）掌握表格标签的设计和使用；（7）掌握框架页面布局；（8）掌握表单的设计；（9）掌握网页中多媒体的应用；（10）掌握层叠样式表CSS3的基本知识；（11）掌握一到多款网页设计软件的运用。

2．能力目标（1）能运用HTML5标签设计网页；（2）能使用CSS3设计网页；（3）会网页设计工具设计网页。

3．素质目标（1）具有自我学习的能力；（2）具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。

三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。

（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。

根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。

网页的基本结构
网页是互联网应用的一种形态，它是将一组超文本标记语言（Hypertext Markup Language，简称HTML）写成的文档，在Web浏览器上呈现友好的用户界面。

它是以标准（XHTML或HTML 5）语言制作而成，使用HTML标记来表示界面上出现的元素，用Cascading Style Sheet（CSS）来描述网页外观和布局，还融合脚本语言形成的客户端和服务器端脚本来实现网页的动态功能等。

网页的结构大致可以分为四部分：Doctype声明、html元素、head元素和body 元素。

Doctype声明告诉浏览器HTML这种文档的版本信息；Html元素是网页的
根元素，将网页的内容包含在它的起止标签中，界定了HTML文档的拓展范围；Head元素包含网页中的一些重要信息，如文档title、meta信息、脚本等，它们约
定了网页的语言，定义了网页外观与布局；Body元素则是网页真正的内容展现部分，就是我们看到的网页正文部分，它放置着网页页面中展示的内容信息，如文本、图片、表单、链接等。

要想创建一个网页，首先要了解网页的基本结构，其次要了解HTML标记语
言和CSS样式语言的相关知识，同时还要掌握脚本语言才能真正将网页充分利用
起来。

每一部分内容都是紧密相连的，遵循标准实现内容到形式的简洁转换，这样才能使网页具有良好的可读性和可访问性。

网页的基本构成元素介绍
不同性质的网站，构成网页的基本元素是不同的。

网页中除了用法文本和图像外，还可以用法丰盛多彩的多媒体素材等。

1.2.1 网站Logo
网站Logo也称为网站标记，它是一个站点的象征，也是一个站点是否正规的标记之一。

网站的标记应体现该网站的特色、内容以及其内在的文化内涵和理念。

胜利的网站标记有着独特的形象标识，在网站的推广和宣扬中将起到事半功倍的效果。

网站标记普通放在网站的左上角，拜访者一眼就能看到它。

网站标记通常有三种尺寸：88×31、
120×60和120×90像素。

图1-11所示为网站Logo。

标记的设计创意来自网站的名称和内容，大致分以下三个方面。

网站有代表性的人物、动物、花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。

假如是专业性网站，可以用本专业的代表物品作为标记，如中国银行的铜板标记、疾驰汽车的方向盘标记。

最常用和最容易的方式是用自己网站的英文名称作为标记。

采纳不同的字体、字符的变形、字符的组合可以很简单地制作出自己的标记。

1.2.2 网站Banner
网站Banner是横幅广告，是互联网广告中最基本的广告形式。

Banner 可以位于网页顶部、中部或底部随意位置，普通为横向贯通囫囵或者
第1页共4页。