《网页设计》——网页基础知识
2013-06-05 50页 ppt 1MB 76阅读
is_187882
暂无简介
举报
《网页设计》——网页基础知识null网页设计网页设计null1.1网页概述
1.2 网页制作工具简介
1.3 HTML基础
1.4 实践技能训练第1章 网页基础知识null1.1.1什么是网页
Web直译过来就是“网”，可以理解为通过超级连接将各种文档连接起来的一个大规模的信息集合。
网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。 WWW是“World wide web”的缩写；HTML则是“HyperText Markup Language”的缩写，意为“超文...
null网页网页设计null1.1网页概述
1.2 网页制作工具简介
1.3 HTML基础
1.4 实践技能训练第1章 网页基础知识null1.1.1什么是网页
Web直译过来就是“网”，可以理解为通过超级连接将各种文档连接起来的一个大规模的信息集合。
网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和成页面的文件。 WWW是“World wide web”的缩写；HTML则是“HyperText Markup Language”的缩写，意为“超文本标记语言”，它是一种，一种标准。超文本就是指页面可以包含图片、链接、音乐等非文字的元素。
制作网页所需要的硬件和软件：
硬件：计算机主频最好的PⅡ以上，内存最好在128MB以上，必须有足够大的空间来存放网页素材。
软件：Dreamweaver 8.0是目前制作网页的最新版本，Frontpage也是一个不错的产品。处理网页图像和文字可以选择Fireworks，若要制作网页动画，可以选择 Flash。 1.1 网页概述null1.1.2 网页中的基本元素
网页包括的主要元素有：
文本、图像、动画、声音、视频、表格、表单等。
1.1 网页概述null1.1.2 网页中的基本元素
1.文本
文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。
文本在网页中的主要功能是显示信息和超级链接，文本通过文字的具体内容与不同的格式来显示信息的重要内容，这是文本的直接功能。此外，文本作为一个对象，往往又是超级链接的触发体，通过文本表达的链接目标指向相关内容。
2.图像
图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志、网页背景、链接按纽、导航条、网页主图等，网页中使用图像的格式主要有：GIF、JPEG、PNG等格式。1.1 网页概述null1.1.2 网页中的基本元素 ---图像
⑴GIF图像。GIF(graphics interchange format)由Compu-Serve公司1987年6月制订。GIF通常对于卡通、图像、Logo、以及带有透明区域的图像、动化很有作用。
GIF文件格式的扩展名是“.gif”.
⑵JPEG图像。JPEG（joint photographic experts group 联合照片专家组）是一种特别为照片图像设计的图片压缩处理格式。JPEG文件采用先进的压缩算法，可以保持较好的图像保真度和较高的压缩比。JPEG文件格式的扩展名为 “.jpg”.
⑶ PNG图像。PNG（portable network graphic）即可移植网络图形。PNG图像是专门针对Web开发的一种无损压缩图像，它的压缩比要大大超过许多传统的图像无损压缩算法，同时还支持透明背景和动态效果。PNG文件格式的扩展名是“.png”1.1 网页概述null1.1.2 网页中的基本元素
3.动画
动画实质上就是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由于活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。网页中使用较多的动画是GIF动画和Flash动画。
4.声音
声音是多媒体网页的一个重要组成部分。用于网络声音文件格式非常多，常用的是MIDI、MAV、MP3和AIF等。
一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。可以在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。
浏览器的不同，处理声音文件的方式也会有很大的差异和不一致的地方，最好将声音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。1.1 网页概述null1.1.2 网页中的基本元素
⒌视频
在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX、flash等。
⒍表格
表格是一种用来控制网页中页面布局的有效方式。为了达到理想的视觉效果，通常都不显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。
许多设计人员使用表格对网页进行布局。Dreamweaver提供两种方式来查看和操作表格：标准视图和布局视图。在标准视图中，表格显示为行和列的网格，而布局视图允许创建者在将表格用做基础结构的同时在网页上绘制、移动方框以及调整方框的大小。1.1 网页概述null1.1.2 网页中的基本元素
⒎表单
表单是一种特殊的网页元素。表单的主要用途是：收集联系信息、接受用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。登录的用户名、密码、搜索引擎等都是表单。
表单由不同功能的表单元素组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本、选中单选按钮和复选框，以及从下拉列表框中选择选项。根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、流言簿表单、搜索表单和用户注册表单等类型。1.1 网页概述null1.1.3网页的类型：
有3种不同的类型：基本网页、动态网页和模板网页。
1.基本网页
基本网页又称静态网页，是相对动态网页而言的。工作原理如下。
客户端请求 服务器
接受响应
客户端浏览器 网页1.1 网页概述null⒉动态网页
动态网页中除了基本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能完成。
应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网页。
动态网页是经过人与服务器对话的结果。如图网页上的登录、注册、网上购物等都属于此类网站。1.1 网页概述null动态网页有两种：一种是普通动态网页，它不包含数据库；一种是包含数据库的动态网页。
⑴普通动态网页，其工作的过程如图所示1.1 网页概述null⑵.包含数据库的动态网页，如Access、SQL、MYSQL等，其工作过程如图所示：1.1 网页概述null1.1 网页概述3.模板网页
模板是提供一个标准页面，它的模式固定，例如页面布局、字体排列等固定不变，只需要改变页面的内容，这有助于读者成批地建立页面风格相同的页面，从而使网站风格得到统一。模板能够带给你对网页功能和布局更为完整的概念，并且模板文件能够让你更容易的浏览页面代码。
null1.2 网页制作工具简介1.2.1网页编辑工具
1.FrontPage
2.Dreamweaver
null1.2 网页制作工具简介1.2.2网页动画制作软件
Flash也是Macromedia公司推出的产品。Flash8.0可以更好的为网页设计师和开发人员服务，帮助他们提高工作效率，创造丰富的、极具诱惑力个感染力的动画作品。
Flash的主要功能是制作动画，这种动画不能是纯粹的动画，还应该具有交互的特点，制作出来的作品应该达到令人目眩的感觉。
Flash8.0兼容了以前的版本，凡是以前使用过Flash5.0、Flash MX以及Flash MX 2004的用户都可以立即上手，应用起来更方便、更快捷。Flash8.0的功能得到了极大的扩展，用它可以创造完整的动态站点，从内容显示到数据库的连通，以及视频的调整，给用户带来的惊喜是空前的。
凭借Flash8.0的开发环境及新的服务器技术优势，网页的开发者可以通过它建立新一带的网络动画，带来更具视觉震撼力的Web产品。null1.2 网页制作工具简介 1.2.3网络图像处理软件
Fireworks是Macromedia公司专门为网页设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。Fireworks是Web图形工具的首选软件。
Photoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专门图像创作的首选软件。 null1.3 HTML基础---概念 HTML则是“HyperText Markup Language超文本标记语言”的缩写，它是构成Web页面的主要工具，是用来表示网上信息的符号标记语言。
在Internet上，如果要想全球范围内发布信息，需要一个能够被广泛理解的语言，也就是说所有的计算机都能够理解的用语出版的“母语”。WWW （World wide web）所使用的出版语言就是HTML语言。
通过HTML，将所需要表达的信息按某种规则HTML文件，通过专用的浏览器来识别，并将这些HTML“翻译”成可以识别的信息，就是我们所见到的网页。null1.3 HTML基础---功能HTML的功能如下：
⒈出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。
⒉通过超链接检索在线的信息。
⒊为获取远程服务而设计表单，可用于检索信息、订购产品。
⒋在文档中直接包含了电子表格、视频剪辑、声音剪辑以及其他的一些功能。null1.3 HTML基础1.3.1 HTML语言结构的基本标志
⒈文档标志
。标志用于HTML文档的最前面，用来标识HTML文档的开始。而标志恰恰相反，它放在HTML文档的最后边，又来标识HTML文档的结束，两个标志必须成对使用。
⒉文件头标志
。和构成HTML文档的开头部分，在此标志之间可以使用
、
等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。标志中还可以有如表1-1所示的属性。null1.3 HTML基础1.3.1 HTML语言结构的基本标志 ⒋文件标题标志显示在浏览器最上边蓝色条中的文本
是一个很简单的标志，它没有结束标志，因为它是用来创建一个回车换行的。在
的使用上面还有一定的技巧，如果把
加在标志对的外边,将创建一个很大的回车换行,即
前面和后面的文本的行与行之间的距离很大,若放在的里面,则
前面和后面的文本行与行之间的距离比较小.null1.3 HTML基础1.3.2页面格式标志 3.列表标志 ⑴一个普通的列表
文本标志的综合示例
![]()
标志并不是真正地将图像加入到HTML文档中，而是将标志对的SRC属性赋值。这个值是图像文件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到文档中。
所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。
通常有如下情况：
⑴．假如HTML文件与图形文件（假设文件名为logo.gif）在同一个目录下，则可以将代码写成
。
⑵.假如图形文件放在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为
。
⑶.假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“../”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为
，若home是网站下的目录king下面的一个子目录，则代码应该为
了。null1.3 HTML基础1.3.4 图像标志
必须强调，src属性在![]()
标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，![]()
标志还有alt 、align、 border、 width和height属性：
alt属于是当鼠标移动到图像上时显示的文本。
align是图形的对齐方式。
border属性是图形的边框，可以取大于或者等于0的整数，默认单位是像素。
width和height属性是图形的宽和高，默认单位是像素。
⒉水平线标志
标志是在HTML文档中假如一条水平线，它可以直接使用，具有size、color、width 和noshade属性。 size是设置水平的厚度。 width是设置水平线的宽度、默认单位为像素。 noshade属性不需要赋值，而是直接加入标志即可使用，它是用来假如一条没有阴影的水平线（不假如此属性，水平线将有阴影）。null1.3 HTML基础1.3.5表格标志 ⒈创建表格标志
标志对用来创建一个表格，下表所示的是属性。
null1.3 HTML基础1.3.5表格标志
⒉行、单元格和表格头标志
⑴.
标志对之间使用，而在此标志对之间加入文本是无用的，因为
、还有align和 valign属性，
align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。
valign是垂直对齐方式，取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。
具有width、colspan、rowspan和nowrap属性。
width是单元格的宽度，单位用绝对像素值或总宽度的百分比。
colspan设置一个表格单元格跨占的列数（缺省值为1）。
rowspan设置一个表格单元格跨占的行数（缺省值为1）。
nowrap禁止对表格单元格内的内容自动断行。
⑵
表格标志的综合示例
nullnull1.3 HTML基础1.3.6链接标志
1.创建连接页面标志
创建页面的标志对的href属性无论如何是不可缺少的，标志对之间假如需要链接的文本和图像（链接图像即加入
标志）。Href的值可以是网址或相对路径，也可以mailto:形式。
对于第一种情况，语法为,这样就可以创建一个超文本链接了，例如：
这是我的网站
对于第二种情况，语法为 ，这就创建了一个自动发送电子邮件的连接，mailto：后边紧跟着要自动发送的电子邮件的地址（即E-mail地址），例如：
这是我的电子邮箱（E-mail）null1.3 HTML基础1.3.7 标志帧
帧可以用来向浏览器窗口中装载多个HTML文件。也就是说每个HTML文件占据一个帧，而多个帧可以同时显示在同一浏览器窗口中，它们组成了一个最大的帧，也就是一个包含多个HTML文档的HTML文件（我们称它为主文档）。帧通常的使用方法是在一个帧中放置目录（即可以供选择的链接），然后将HTML文件显示在另一个帧中。
⒈帧属性标志
标志对放在帧的主文档的标志对的外边，也可以嵌套在其他帧的文档中，并且可以嵌套使用。此标志对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用
、
等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。标志中还可以有如表1-1所示的属性。null1.3 HTML基础1.3.1 HTML语言结构的基本标志 ⒋文件标题标志
红色背景、蓝色的文本
null1.3 HTML基础1.3.2页面格式标志 ⒈段落标志 ⑴. 标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，标志还可以使用align属性，它用来说明对齐方式，语法是
。align可以是Left （左对齐）、Center（居中）和 Right（右对齐）三个值中间的一个。 如：表示标志对中的文本使用居中对齐方式。 ⑵.是一个很简单的标志，它没有结束标志，因为它是用来创建一个回车换行的。在
的使用上面还有一定的技巧，如果把
加在标志对的外边,将创建一个很大的回车换行,即
前面和后面的文本的行与行之间的距离很大,若放在的里面,则
前面和后面的文本行与行之间的距离比较小.null1.3 HTML基础1.3.2页面格式标志 3.列表标志 ⑴
- 中国城市
- 北京
- 上海
- 广州
- 美国城市
- 华盛顿
- 芝加哥dd>
- 纽约
- 北京
- 上海
- 广州
中国城市
- 华盛顿
- 芝加哥
- 纽约
美国城市
最大的标题
使用h3的标题
最大的标题
黑体字文本
斜体字文本
下加一划线文本
打字机风格的文本
引用方式的文本
强调文本
加重文本
size取值"+1"color取值为红色时的文本
null1.3 HTML基础1.3.4 图像标志 ⒈图像属性赋值标志。
⑵.假如图形文件放在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为。
⑶.假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“../”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下面的一个子目录，则代码应该为了。null1.3 HTML基础1.3.4 图像标志
必须强调，src属性在标志是在HTML文档中假如一条水平线，它可以直接使用，具有size、color、width 和noshade属性。 size是设置水平的厚度。 width是设置水平线的宽度、默认单位为像素。 noshade属性不需要赋值，而是直接加入标志即可使用，它是用来假如一条没有阴影的水平线（不假如此属性，水平线将有阴影）。null1.3 HTML基础1.3.5表格标志 ⒈创建表格标志
| 意大利 | 英格兰 | 西班牙 | |||
|---|---|---|---|---|---|
| AC米兰 | 拂罗伦莎 | 曼联 | 纽卡斯尔 | 巴塞罗那 | 皇家社会 | null1.3 HTML基础1.3.5表格标志
| 尤文图斯 | 桑普多利亚 | 利物普 | 阿申纳 | 皇家马德里 | ...... |
| 拉奇奥 | 国际米兰 | 切尔西 | 米德尔斯堡 | 马德里竞技 | ...... |