认识网页的基本元素
网页设计教程01-03网页设计基础-HTML基础-Dreamweaver cs3使用基础础.
2.2.2设置字型
格式：<b>受影响的文字</b> <i>受影响的文字</i> <tt>受影响的文字</tt> …… 说明：各种字型的标记有许多，但是格式都 一样。所不同的是标记名和需要受影响的文 字而已。
2.2.3特殊替换字符
在HTML文件中，有一些特殊字符是用来代表特定 意义的。例如小于（<）和大于（>）符号，是标 记指令专用的，但是当要在浏览器上显示出此类符 号时，就不能直接在代码中书写它们，而是利用以 下的一些特殊符号来替代它们。 <：替代小于符号（<）。 >：替代大于符号（>）。 "：替代双引号（"）。  ：替代不可分的空格。有时因为版面的关系 会将有空格的字符分成两行，此时就可以将两个字 符之间的空格定义为 。
2.1.2 HTML文件的基本结构
1．基本结构 HTML文件是一种纯文本格式的文件，其基本结构为： <html> <head> <title>网页的标题</title> </head> <body> 网页的内容 </body> </html> HTML文件必须以<html>开头，以</html>结尾。 HTML文件包括头部（head）和主体（body）。
2．字符格式标记 用来改变HTML文件文字的外观，增加文件的美观程度。主要有： （1）<font>：改变字体设置。 （2）<b>……</b>：粗体字。 （3）<i>……</i>：斜体字。 （4）<tt>……</tt>：标准打印机字体。 （5）<u>……</u>：文字带下划线。 （6）<strike>……</strike >：文字带删除线。 （7）<sub>……</sub >：下标。 （8）<sup>……</sup >：上标。 （9）<center>……</center>：居中对齐。 （10）<blink>……</blink>：文字闪烁。 （11）<big>……</big>：加大字型。 （12）<small>……</small>：缩小字型。 （13）<cite>……</cite>：参照。
浅析网页设计要素
一
其 主页面在 白色背景底 色的基础上 。选择蓝色作为主要色调 ，浅蓝、 钴 蓝、 普蓝运用在 不同内容 的标题 及菜单上 ， 白色的搭配给人一种 轻松 蓝 明快 的感觉 。中国国际航空公 司网站在 网页设计 时 。 考虑到航空行业的 特点 ， 借用 了白云与蓝天 的色调 ， 白底色上 配以普 蓝色字体 ， 同时红色的
后 根据页面 内容的性质 ， 确定 最适 合 的色调设计 ， 这样受众进入 网站主 页后 ， 能被其整体 色调 感觉 所吸弓 ， 就 Ｉ从而提高网站的点击率和 回访率 。 例如瑞丽女性 网的时 尚先锋 页面 ， 以绿色作 为其主色调 ， 幽绿 、 淡绿 、 粉
文字大小 的比例关系和平面设计上点线 面关 系的组合构成 ， 以获得 不 可
一
用的实例 中， 不需 要任何装饰 与组合 ， 能独立 地成为一 个完美的视 觉 便
传达。 在很 多经典 的设计作品 中， 字的组 合大多用来作为画面空间 的分 文 割。 长期 的实践应用中 ， 在 文字排版逐渐形成了一定的规 律和规 范。 过 通
个成功 的网页设计 ，首先要弄清楚网站信息所要传达 的受众 。 然
进 入网站首先 映人眼帘的就是网页的色彩。在网页设 计中， 首先要 文字是最容易传递信息和最通用的一种沟通方 式。 文字作为一种符
号， 在长期 的应用 和变革 发展中 ， 经历 了简单一复杂一简练 的演变 过程。 我们现在看到 和使用 的许多种 文字 符号已经发展得非常成熟 。 在一 些应 根据网站 内容， 设计合适 的色调组合 ， 成“ 形 总体协调 ， 局部 对 比” 也就 ， 是页面的整体 色彩设 计在 色调上应该形成 自己独特 的风格 ， 在一些特定 内容的版面上可以有小部分 的色彩对 比。
网页的基本构成-网页设计组成元素-基本结构介绍
网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。
一般网页的基本内容包括标题、网站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、网页的主体内容主体内容是〔网页制定〕的元素。
它一般是二级链接内容的标题，或是内容。
1.1.3 网页的基本组成元素[共2页]
![1.1.3 网页的基本组成元素[共2页]](https://img.taocdn.com/s3/m/d35d2ca402768e9950e73822.png)
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）背景图像的另一个重要应用是作为网页的背景。
认 识 网 页
(3)静态网页内容相对稳定，容易被检索。
(4)静态网页没有数据库的支持，在网站制作和维护
方面工作量较大。
(5)静态网页交互性较差。
网页类型
认识网页
动态网页文件中包含一定的程序和组件，并且这些 程序和组件必须在服务器端运行。
动态网页的扩展名通常为： – ASP（active server pages，活动服务器页面） – PHP（hypertext preprocessor，超文本预处理器） – JSP（java server pages，Java服务器页面）
页面内容完全包含在网页的代码 中并由浏览器解释执行。
静态网页可以 是.htm、.html、.shtml等为后后缀 的文本文件。
网页类型
认识网页
(1)静态网页固定的URL以.htm、.html、.shtml等常见
形式为后缀并不含有“？”。
(2)静态网页是实实在在保存在服务器上的文件，每
个网页都是一个独立的文件。
1.1 网页的定义
认识网页
网页是一个文本文档，其后缀通常是.htm或.html等。 网页通常存放在网站的指定的主页目录中。
网站通常搭建在网络上一台服务器计算机，用户通过 URL来定位并访问指定的网页。 网页常见构成元素有文本、图像、动画、音频和视频。
1.1 网页的定义
认识网页
文本是网页的基本元素 之一，是网页信息的主 要载体。
文字、字母、数字和符 号等都可以称为文本。
如图所示为网页文本示 例。
认识网页
1.1 网页的定义
图像是网页中重要的元 素，它可以决定页面的 风格和创意。
网页中使用的图片，风 格应该是统一的，主要 的就是确定图像的颜色 风格。
图像既可以作为背景图 片来使用，也可以作为 事物的照片来使用。
《网页设计》课程标准
《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。
该课程实现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页。
网页设计基础知识
魏
第3页共4页
本文格式为 Word 版，下载可任意编辑
表达式和算术运算符及程序的基本程序框架。Javascript 提供了四种 基本的数据类型和两种特别数据类型用来处理数据和文字。而变量提供 存放信息的地方，表达式则可以完成较冗杂的信息处理。
魏
第4页共4页
页通常用图像档来提供图画。网页要通过网页浏览器来阅读。
页，还可以协作各种脚本语言动态地对网页各元素进行格式化。
通俗的来讲，网页就是相当于刊物当中发表的一篇篇文章，但与纸
CSS 能够对网页中元素位置的排版进行像素级精确掌握，支持几
上的文章相比，它增加了多媒体信息和网上交互能力。
乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力。
本文格式为 Word 版，下载可任意编辑
网页设计基础知识
网页 2、网页的基础 HTML 标签
超文本标记语言〔简称：HTML〕标记标签通常被称为 HTML 标签，
网页设计基础学问
HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML〔标准通用
1、我们需要了解什么是网页
标记语言下的一个应用〕最重要的组成部分。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表
角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格
现 HTML〔标准通用标记语言的一个应用〕或 XML〔标准通用标记语言
式〔标准通用标记语言的一个应用，文件扩展名为.html 或.htm〕。网
的一个子集〕等文件样式的计算机语言。CSS 不仅可以静态地修饰网
另外，可以将相同样式的元素进行归类，使用同一个样式进行定 义，也可以将某个样式应用到全部同名的 HTML 标签中，也可以将一个 CSS 样式指定到某个页面元素中。假如要修改样式，我们只需要在样 式列表中找到相应的样式声明进行修改。
网页的基本构成元素-网页包含什么-分类及介绍
网页的基本构成元素-网页包含什么-分类及介绍构成网页的基本元素主要有这些：文本和图像、超链接、动画、表单、音频、视频。
其中文本和图像是网页中两个基本构成元素，目前所有的网页中都有它们的身影。
一、网页的基本构成元素1、文本和图像。
是网页中两个基本构成元素，目前所有的网页中都有它们的身影。
2、超链接。
网页中的链接又可分为文字链接和图像链接两种，只要访问者用鼠标单击带有链接的文字或者图像，就可自动链接到对应的其他文件，这样才干让网页链接成为一个整体。
超链接也是整个网络的基础。
3、动画。
网页中的动画也可以分为GIF动画和Flash动画两种。
动态的内容总是要比静止的内容能够吸引人们的注意力，因此出色的动画能够让网页更加丰富。
4、表单。
是一种可在访问者和服务器之间进行信息交互的技术，使用表单可以完成搜索、登录、发送邮件等交互功能。
5、音频、视频。
〔制定〕人员会在网页中加入视频、背景音乐等，让网站更加富有个性和魅力，更具时尚感。
二、简单的网页里面都包涵什么一个完整的HTML文档必须包涵三个部分：一个用“html〞元素定义的文档版本信息，一个用“head〞定义各项声明的文档头部和一个由“body〞定义的文档主体部分。
“head〞作为各种声明信息的包涵元素，出现在文档的顶端，并且要先于“body〞出现。
而“body〞用来显示文档主体内容。
三、网站分类及介绍1)门户网站。
门户网站内容丰富，并提供多种服务，如主页服务、股票行情、电子信箱、天气预报、即时新闻、网上论坛、网上商城、网络游戏等。
另外，门户网站一般还提供搜索引擎。
2)信息咨询服务网站。
信息咨询服务网站的功能主要有信息发布、信息检索、在线咨询、资源服务等。
提供的资源一般有软件、图书、图片、技术资料、音乐和影视等。
这类网站上一般建立有BBS、虚拟社区等。
3)远程互动网站。
远程互动网站提供远程教育、医疗诊断等交互性应用服务。
4)娱乐游戏网站。
娱乐游戏网站专门提供各种娱乐、游戏服务。
网站建设基本教程
分离补色：分离补色可以由2-3种颜色组成。在色环上选择一 分离补色 种颜色，他的补色就在色环的另一面。可以使用补色旁边的一 种或多种颜色，这样的一组颜色成为分离补色。分离补色的搭 配可以起到类似补充色的强烈对比作用，但有邻近色的缓冲， 可以使页面效果更加柔和。 组色：是色环距离相等的任意3种颜色，因为3种颜色形成了 组色 对比关系，所以当组色被用到一个色彩主题时，会造成浏览者 紧张的情绪。一般在商业网站上，不采用组色搭配。
去了网站存在的意义。有方向性。 去了网站存在的意义。有方向性。
的各个栏目。一个合理的导航设计可以使得网站变得合理应用。 的各个栏目。一个合理的导航设计可以使得网站变得合理应用。
正文内容：是网站的精神所在。 正文内容：是网站的精神所在。没有浏览者需要的内容就失 页脚：提供了字数，版权信息，联系方式等。 页脚：提供了字数，版权信息，联系方式等。
本章学习要点： 了解网页中的基本元素 熟悉网页设计所需的常用的工具 熟悉动态网站开发的常用技术 熟悉网站建设的一般步骤
1.1网站中的基本元素 1.1网站中的基本元素
网页中是由一些基本元素构成，包括文本、图像、超级链接、 表格、动画、音乐和交互式表单等。 • 文本 文本是现实社会中最重要的信息载体，而在网页中的信息 也多以文本为主。与图像相比，文字虽然不如图像那样易于 吸引浏览者的注意，但却能准确的表达信息的内容与含义。 • 图像和动画 图像在网页中具有提供信息，展示形象以及修饰网页的作 业。可以在网页中使用GIF,JPEG和PNG等多种图像格式，其 业。可以在网页中使用GIF,JPEG和PNG等多种图像格式，其 中最广泛的是GIF和JPEG两种格式。为了更有效的吸引浏览 中最广泛的是GIF和JPEG两种格式。为了更有效的吸引浏览 者的注意，通常网页中还会插入一些动画效果。 • 声音和视频 声音是多媒体网页的一个重要组成部分。用于网络的声音 文件
网页设计基础
实验一网页设计基础（4课时）实验目的：了解网页中基本元素了解网页设计常用工具了解网页常见的布局类型了解网页配色方案了解网页图像和文字的设计原则实验内容：1、搜索下面一些关键词：网页元素、网页工具、网页布局、网页配色、网页（或网站）设计原则、网页（或网站）设计流程）、主页（或首页）设计，从搜索结果中学习掌握相关知识，并回答问题：①网页由哪些基本元素构成？网页元素包括，文字、图片、音频、动画、视频。
文字，符合排版要求。
图片、音频、动画、视频，符合网络传输及专题需要，需要精选。
②有哪些常见的网页布局类型？网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型①1、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到的差不多最多的一种结构类型。
②2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
③3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
④4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。
我们见到的大部分的大型论坛都是这种结构的，有一些门户网站也喜欢采用。
这种类型结构非常清晰，一目了然。
⑤5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。
⑥6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
网页的基本功能_主页index_主页是一个网站的核心
网页基本属性，要素，步骤，工具，属性面板，视图，结构，标记符，标题，水平线网页的基本功能主页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 目录只用来存放首页和一些次要栏目的图片。
网页设计必备知识
2.1.1 网页页面元素种类
若由网页具体内容的类型来区分，页面元素 主要由文本、图像、表格、图层、音效、动 画、影片、特效等，设计者在网页已规划好 的版式区域中加入所需的元素并作进一步编 辑，以最精美的外观组合呈现网页整体效果。
页面元素则可分为网站Logo、按钮、导航、 搜索元件、联系信息、版权信息、信息栏横 幅、广告等。
2.1.3 网页多媒体元素的分类
网页中的多媒体元素可分为音频和视
频两种。 –音频格式主要包括WAV、MIDI、 MP3、WMA四种。 –网络视频格式包括ASF、RM、 RMVB、MOV等，此外MPEG、 AVI由于具备较高画质，常常作为 资源下载传播。
2.1.4 网页动画元素
在网页设计中只有两种多媒体动画素材，一种是作 为图像衍生格式的GIF文件，另一种则是具备影音效 果的Flash动画。下面分别介绍这种动画元素的特性 。 – 1) GIF动画图像 – GIF格式图像具有无损高压缩性和支持透明背景， 而除了这些优点，GIF图像还有一个突出的特点就 是具备动画效果。 – 2) Flash动画 – Flash动画具有体积小、兼容性强，同时支持互动 和影音效果等诸多优点，因此自面世以来就成为 一种流行的网络动画格式。
图8 标准五分栏·
图9 五分栏· 韩国短信商业站点
1.3
分栏式结构的变化
在新浪网二分栏框架的解析图(图10)上，我们 可以清楚地看到右列被分成了多个小的区域， 这些利用列宽而划分出的多个小区域，可以配 合网站内容放置不同的信息和功能区。并且能 灵活地处理页面元素，以活跃页面气氛。
图2.4 GIF动画原理
图2.5 网页中的Flash动画
2.2 网页设计规格
网页的理解
网页的理解
网页的自然定义
网页是构成网站的基本元素，是承载各种网站应用的平台。
我们看到的网页，都是以htm 或html 后缀结尾的文件。
俗称HTML文件。
不同的后缀，分别代表不同类型的网页文件，例如以CGI 、ASP、PHP 、JSP等等。
网站优化的根本就是网页的优化。
网页优化的作用
网页的是承载给用户看的页面，网页内容的结构和内容是否符合用户浏览的预期，足以影响网站的浏览量（pv）数量和网站流量(uv)的高低。
说近是关于PV和UV，说远了就是直接影响网站的转换流量的有效性，同时良好的网页优化结构直接影响搜索引擎岁网站良好的索引收录。
我们都知道一个网站如果没有进入搜索引擎的索引数据库，根本谈不上以后所谓的排名性、品牌性、高转化率。
网页优化的分类
网站是有网页一页页通过链接组成的。
不同网站优化的根本就是所优化的网页的数量和类别的差异。
这就产生了再不同网页的优化种侧重不同的。
一般网站的优化分为：首页优化、栏目页优化、列表页优化、产品页优化四个部分。
但是这个分类不是绝对的，我们都知道网站分类很多，有B2B、B2C、C2B、C2C这样的网站的页面优化应该有所不同。
本文有SEO思考分析/category/seothinks整理发表。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
布局基础理念
网站是否受欢迎固然要看网站的内部结构、前期定位和网站内容，但是网站中的各个网页看起来是否赏心悦目而便于操作，也是非常重要的，这就涉及到了网页的布局设计这个问题。
随着Web标准的推广，将网页布局设计的更为合理，已经不再像在HTML时代那样难以做到，所以浏览者对网页布局的评价也越来越挑剔。
【认识网页基本元素】
网站的基本元素是网页，一个个的网页构成了一个完整的网站网页也是可分的，构成网页的基本元素包括标题、网站LOGO、页眉、页脚、主体内容、功能区、导航区、广告栏等。
这些元素在网页的位置安排，就是网页的整体布局。
1.标题
每个网页的最顶端都有一条信息，这条信息往往出现在浏览器的标题栏，而非网页中，但是这条信息也是网页布局中的一部分。
这条信息是对这个网页中主要内容的提示，即标题。
2. 网站LOGO
LOGO是网站所有者对外宣传自身形象的工具。
LOGO集中体现了这个网站的文化内涵和内容定位。
可以说，LOGO是一个网站的最为吸引人、最容易被人记住的标志。
如果网站所有者已经导入了CIS系统，那么LOGO的设计就要符合CIS的设定。
如果所有者没有导入CIS，就要根据网站的文化内涵和内容定位设计LOGO。
无论怎样，网站LOGO的设计都要在网站制作初期进行，这样才能从网站的长远发展角度出发，设计出一个能够长时间使用的、最能代表该网站的LOGO。
LOGO在网站中的位置都比较醒目，目的是要使其突出，容易被人识别与记忆。
在二级网页中，页眉位置一般都留给LOGO。
另外，LOGO往往被设计成为一种可以回到首页的超链接。
说明CIS简称CI，全称Corporate Identity System，译称企业识别系统，意译为“企业形象统一战略”。
3.页眉
网页的上端即是这个页面的页眉。
页眉并不是在所有的网页中都有，一些特殊的网页就没有明确划分出页眉。
页眉往往在一个页面中相当重要的位置，容易引起浏览者的注意，所以很多网站都会在页眉
中设置宣传本网站的内容，如网站宗旨、网站LOGO等，也有一些网站将这个“黄金地段”作为广告位出租。
4. 主体内容
主体内容是网页中的最重要的元素。
主体内容并不完整，往往由下一级内容的标题、内容提要、内容摘编的超链接构成。
主体内容借助超链接，可以利用一个页面，高度概括几个页面所表达的内容，而首页的主体内容甚至能在一个页面中高度概括整个网站的内容。
主体内容一般均有图片和文档构成，现在的一些网站的主体内容中还加入了视频、音频等多媒体文件。
由于人们的阅读习惯是由上至下、由左至右，所以主体内容的内容分布也是按照这个规律，依照重要到不重要的顺序安排内容，所以在主体内容中，左上方的内容是最重要的。
5. 页脚
网页的最底端部分被称为页脚，页脚部分通常被用来介绍网站所有者的具体信息和联络方式，如名称、地址、联系方式、版权信息等。
其中一些内容被做成标题式的超链接，引导浏览者进一步了解详细的内容。
6. 功能区
功能区是网站主要功能的集中表现。
一般位于网页的右上方或右侧边栏。
功能区包括：电子邮件、信息发布、用户名注册、登陆网站等内容。
有些网站使用了IP定位功能，定位浏览者所在地，然后可在功能区显示当地的天气、新闻等个性化信息。
7. 导航区
如果说主体内容部分重要的话，导航区的重要性与其不相上下，甚至导航区的设计可以成为一种独立的设计，与网页布局设计分庭抗礼。
之所以说导航区重要，是因为其所在位置左右着整个网页布局的设计。
导航区一般分为4种位置，分别是左侧、右侧、顶部和底部。
一般网站使用的导航区都是单一的，但是也有一些网站为了使网页更便于浏览者操作，增加可访问性，往往采用了多导航技术，如Yaho o!网站采用了左侧导航与底部导航相结合的方式。
但是无论采用几个导航区，网站中的每个页面的导航区位置均是固定的。
8. 广告区
广告区是网站实现赢利或自我展示的区域。
一般位于网页的页眉、右侧和底部。
广告区内容以文字、图像、Flash动画为主。
通过吸引浏览者点击链接的方式达成广告效果。
广告区设置要达到明显、合理、引人注目，这对整个网站的布局很重要。