认识网页的基本元素
网页设计教程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）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。
根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。
- 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动画为主。
通过吸引浏览者点击链接的方式达成广告效果。
广告区设置要达到明显、合理、引人注目，这对整个网站的布局很重要。