认识网页的基本元素

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

一般网页的基本内容包括标题、网站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页。

网页的基本构成元素-网页包含什么-分类及介绍构成网页的基本元素主要有这些：文本和图像、超链接、动画、表单、音频、视频。

其中文本和图像是网页中两个基本构成元素，目前所有的网页中都有它们的身影。

一、网页的基本构成元素1、文本和图像。

是网页中两个基本构成元素，目前所有的网页中都有它们的身影。

2、超链接。

网页中的链接又可分为文字链接和图像链接两种，只要访问者用鼠标单击带有链接的文字或者图像，就可自动链接到对应的其他文件，这样才干让网页链接成为一个整体。

超链接也是整个网络的基础。

3、动画。

网页中的动画也可以分为GIF动画和Flash动画两种。

动态的内容总是要比静止的内容能够吸引人们的注意力，因此出色的动画能够让网页更加丰富。

4、表单。

是一种可在访问者和服务器之间进行信息交互的技术，使用表单可以完成搜索、登录、发送邮件等交互功能。

5、音频、视频。

〔制定〕人员会在网页中加入视频、背景音乐等，让网站更加富有个性和魅力，更具时尚感。

二、简单的网页里面都包涵什么一个完整的HTML文档必须包涵三个部分：一个用“html〞元素定义的文档版本信息，一个用“head〞定义各项声明的文档头部和一个由“body〞定义的文档主体部分。

“head〞作为各种声明信息的包涵元素，出现在文档的顶端，并且要先于“body〞出现。

而“body〞用来显示文档主体内容。

三、网站分类及介绍1)门户网站。

门户网站内容丰富，并提供多种服务，如主页服务、股票行情、电子信箱、天气预报、即时新闻、网上论坛、网上商城、网络游戏等。

另外，门户网站一般还提供搜索引擎。

2)信息咨询服务网站。

信息咨询服务网站的功能主要有信息发布、信息检索、在线咨询、资源服务等。

提供的资源一般有软件、图书、图片、技术资料、音乐和影视等。

这类网站上一般建立有BBS、虚拟社区等。

3)远程互动网站。

远程互动网站提供远程教育、医疗诊断等交互性应用服务。

4)娱乐游戏网站。

娱乐游戏网站专门提供各种娱乐、游戏服务。

实验一网页设计基础（4课时）实验目的：了解网页中基本元素了解网页设计常用工具了解网页常见的布局类型了解网页配色方案了解网页图像和文字的设计原则实验内容：1、搜索下面一些关键词：网页元素、网页工具、网页布局、网页配色、网页（或网站）设计原则、网页（或网站）设计流程）、主页（或首页）设计，从搜索结果中学习掌握相关知识，并回答问题：①网页由哪些基本元素构成？网页元素包括，文字、图片、音频、动画、视频。

文字，符合排版要求。

图片、音频、动画、视频，符合网络传输及专题需要，需要精选。

②有哪些常见的网页布局类型？网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型①1、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。

这种结构是我们在网上见到的差不多最多的一种结构类型。

②2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

③3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

④4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。

我们见到的大部分的大型论坛都是这种结构的，有一些门户网站也喜欢采用。

这种类型结构非常清晰，一目了然。

⑤5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

⑥6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

网页基本属性，要素，步骤，工具，属性面板，视图，结构，标记符，标题，水平线网页的基本功能主页index 主页是一个网站的核心，进入一个网站后，首先引入眼帘的是该网站主页。

主页的上部是含有该校中，英文名称的LOGO图片，网页的底部是版权区，在LOGO图片的下面，版权区的上面有两行横向导航菜单，包括概括设置资料等，每个子菜单都进行了超链接，浏览者可以根据需要浏览相应的内容，主页的中间部分是校内新闻，提供给浏览者一些最新新闻浏览者可以随意浏览任一条网页的基本要素1文字（标题，字号，字型）2表格：具有容量大，结构严谨或效果直观等优点，表格还可以控制信息的布局方式。

3图形：一般使用JPEG,GIF 4链接标志：有文字图像2种5交互功能6声音和视频网页制作工具：一种是利用网页制作工具进行制作，例：frontpage,dreamweaver另一种采用HTML超文本标识语言的专用格式来进行编制。

网页制作的基本步骤：1网站定位，定位要小内容要精，网站题材，名称要正，易记，有特色。

2整体规划：也就是组织网站的内容和设计其结构。

收集整理资料，准备素材，内容规划整体规划中3重常用结构类型：（1）层状结构，类似与目录系统的树型结构，很强层次性（2）线性结构，类似数据结构中的线性表，用在意义是平行的页面上（3）WEB结构，类似Internet的组成结构，各网页之间形成网状链接，允许用户随意浏览。

3网页的设计与制作，先静态后添加动态效果4测试网页：功能性测试和完整性测试5网页上传发布，服务器可以是远程或本地但必须支持ASP 6网站宣传推广7网站的反馈与评价8更新与维护建立目录结构建议：1不要将所有文件都存放在根目录下，会造成文件管理混乱，很难搞清哪些文件需要编辑和更新，哪些无用，哪些想关联，影响工作效率。

上传速度慢，文件量越大等待时间也越长。

所以尽可能减少根目录文件存放数。

2 在每个主栏目目录下都建立独立的images目录，最方便于管理，而根目录下的images 目录只用来存放首页和一些次要栏目的图片。

网页的理解
网页的自然定义
网页是构成网站的基本元素，是承载各种网站应用的平台。

我们看到的网页，都是以htm 或html 后缀结尾的文件。

俗称HTML文件。

不同的后缀，分别代表不同类型的网页文件，例如以CGI 、ASP、PHP 、JSP等等。

网站优化的根本就是网页的优化。

网页优化的作用
网页的是承载给用户看的页面，网页内容的结构和内容是否符合用户浏览的预期，足以影响网站的浏览量（pv）数量和网站流量(uv)的高低。

说近是关于PV和UV，说远了就是直接影响网站的转换流量的有效性，同时良好的网页优化结构直接影响搜索引擎岁网站良好的索引收录。

我们都知道一个网站如果没有进入搜索引擎的索引数据库，根本谈不上以后所谓的排名性、品牌性、高转化率。

网页优化的分类
网站是有网页一页页通过链接组成的。

不同网站优化的根本就是所优化的网页的数量和类别的差异。

这就产生了再不同网页的优化种侧重不同的。

一般网站的优化分为：首页优化、栏目页优化、列表页优化、产品页优化四个部分。

但是这个分类不是绝对的，我们都知道网站分类很多，有B2B、B2C、C2B、C2C这样的网站的页面优化应该有所不同。

本文有SEO思考分析/category/seothinks整理发表。