网页设计与制作知识点整理总结.docx

《网页设计与制作知识点整理总结.docx》由会员分享，可在线阅读，更多相关《网页设计与制作知识点整理总结.docx（91页珍藏版）》请在冰豆网上搜索。

网页设计与制作知识点整理总结

第1章网页设计概述

1.1Internet与WWW

1.1.1Internet

Internet，译为“因特网”，又叫做“国际互联网”。

Internet为用户提供了多种服务：

•万维网服务（WWW）

•电子邮件服务（E-mail）

•远程登录服务（Telnet）

•文件传输服务（FTP）

1.1.2WWW

WWW，是“WorldWideWeb”的缩写，简称Web，译为“万维网”。

WWW是运行在Internet之上的超文本信息浏览系统。

WWW的核心部分由三个标准构成：

HTML/URL/HTTP

1．HTML：

超文本标记语言，用于定义超文本文档（网页）的结构。

2．URL：

统一资源定位符，用于标识万维网上信息资源的地址（网址）。

3．HTTP：

超文本传输协议，是客户端浏览器与Web服务器之间的通信协议。

1.1.3W3C

万维网联盟（WorldWideWebConsortium，W3C），又称W3C理事会。

W3C致力于对web进行标准化。

W3C制定了包括XHTML和CSS等众多影响深远的标准规范。

1.2网页设计

1.2.1网页

网页是用超文本标记语言HTML书写的一种纯文本文件。

网页需要通过浏览器对其进行解释，才生成包含文字、图像、声音、视频和动画等多媒体信息的页面。

1.2.2网页的类型

静态网页：

网页内容固定不变。

文件扩展名是.htm或.html。

动态网页：

网页内容由服务器端运行的程序动态生成。

文件扩展名是.aspx、.jsp、.php等。

1.2.3网页布局设计

按页面大小划分，网页布局分为：

•固定宽度布局（常见的网页宽度是780px，或1000px）

•可变宽度布局（常见的网页宽度是屏幕的100%）

按页面版式划分，网页布局分为：

•单栏布局

•两栏布局

•三栏布局

•多栏布局

•变化布局

1.3服务器与浏览器

1.3.1Web服务器

Web服务器也称为WWW服务器，主要功能是提供超文本信息浏览服务。

Windows平台上使用IIS（InternetInformationServer）作为Web服务器软件。

网页被放置在Web服务器上。

当Web服务器接收到客户端的一个HTTP请求，会返回一个网页。

1.3.2浏览器

浏览器是安装在客户端用于显示网页的软件。

常见的浏览器有：

•IE

•FireFox

1.4Web标准的含义

1.4.1网页制作的历史

1．传统的网页制作方法

单纯使用HTML语言制作网页，HTML负责“结构”与“表现”双重任务。

2．传统网页制作方法的缺点

•HTML标记被滥用，网页失去了语义。

•“结构”与“表现”混杂在一起，代码复杂，维护困难。

3．CSS的引入

1996年W3C正式推出了CSS1.0。

HTML负责网页结构，CSS负责网页表现，实现了“结构”与“表现”相分离。

1.4.2基于Web标准的网页制作

1．描述网页结构的标准语言：

XHTML

2．描述网页表现的标准语言：

CSS

3．描述网页行为的标准语言：

JavaScript

第2章认识Dreamweaver

2.1Dreamweaver简介

Dreamweaver是美国MacroMedia公司开发的一款“所见即所得”的网页编辑器。

AdobeDreamweaverCS3是MacroMedia公司被Adobe公司收购后推出的第一个版本。

2.2创建本地站点

2.2.1站点的含义

“站点”对应一个文件夹，用来存放一个网站的所有网页文件和其他资源文件。

2.2.2站点的结构

站点结构的设计原则

•将文件分类保存在子文件夹中。

•文件夹的层次不要太深，不要超过3层。

•文件夹、文件都不能使用中文命名。

•尽量使用意义明确的名称，以便于识记。

•首页命名为index.html。

2.2.3在Dreamweaver中管理站点

使用“站点|新建站点”菜单命令新建站点。

使用“站点|管理站点”菜单命令编辑或删除站点。

2.3编辑文本

2.3.1分段与换行

分段：

Enter

换行：

Shift+Enter

2.3.2标题文本

标题文本的分级：

标题1~标题6。

“标题1”是最大的标题，“标题6”是最小的标题。

2.3.3列表

列表的分类：

•项目列表

•编号列表

•定义列表

2.3.4重点、强调

重点（粗体），强调（斜体）。

2.3.5空格

插入空格的方法：

方法1：

按空格键可以在两个字符间可以插入一个半角空格。

方法2：

按Ctrl+Shift+Space组合键，可以连续插入多个半角空格。

方法3：

在HTML文档中插入空格的代码 。

2.4插入图像

在网页中，只允许使用以下格式的图像文件：

1．GIF格式

无损压缩；8位色深（256色）；支持透明；支持动画。

2．JPG格式

有损压缩；24位色深。

3．PNG格式

无损压缩；具有8位、24位和32位三种色深；支持透明和半透明。

2.5插入Div标签

Div是一个块容器，一般用于划分网页的逻辑结构。

2.6插入表格

表格由单元格、单元格填充（cellpadding）、单元格间距（cellspacing）、表格边框（border）组成。

2.7插入表单

表单是收集用户信息的重要工具。

表单由两部分组成：

•表单对象：

收集信息，包括文本框、单选按钮、复选框等对象。

•应用程序：

处理信息，包括客户端应用程序、服务器端应用程序。

2.8创建超链接

内部链接：

页面内部的链接

外部链接：

外部网站的链接

E-mail链接：

邮箱的链接

空链接：

第3章XHTML语言

3.1XHTML概述

3.1.1什么是XHTML

XHTML是英文ExtensibleHyperTextMarkupLanguage的缩写，中文意思是“可扩展超文本标记语言”。

XHTML1.0是以XML1.0的语法规范对HTML4.0的改进。

3.1.2XHTML文档的类型

XHTML1.0分为三种文档类型：

1．XHTML1.0Transitional（过渡的）

允许使用表现层的标记和属性，但要符合XHTML的语法。

2．XHTML1.0Strict（严格的）

不允许使用任何表现层的标记和属性。

3．XHTML1.0Frameset（框架的）

用于框架结构的网页。

3.1.3DOCTYPE（文档类型声明）

DOCTYPE声明是（X）HTML文档开头处的一行代码，用于告知浏览器（X）HTML是哪个版本。

DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”>

3.1.4XHTML标记分类

1．双标记

语法：

<标记>内容

例：

制作网页是我的爱好。

聊城大学

站点名

2．单标记

语法：

<标记/>

例：

3.1.5XHTML标记属性

标记属性

语法：

<标记 属性名1=“属性值” 属性名2=“属性值”…>

例：

3.2XHTML标记和属性

3.2.1文档结构标记

…HTML文档标记

…文档头部标记

…文档主体标记

例：

DOCTYPEhtml>

欢迎光临我的文学小屋!

3.2.2头部标记

辅助信息标记

文档标题标记

链接外部文件标记

例：

3.2.3文本标记

…

换行标记

…强调标记

…重点标记

例1：

登鹳雀楼

白日依山尽，

黄河入海流。

欲穷千里目，

更上一层楼。

例2：

《登鹳雀楼》是王之涣的诗。

3.2.4标题文字标记

…

…

…

…

…

…

3.2.5特殊文本标记

HTML代码

显示结果

HTML代码

显示结果

半角空格

©

©

&

&

<

<

"

"

>

>

3.2.6项目列表标记

…

例：

中国城市

• 北京
• 上海
• 广州

3.2.7编号列表标记

…

例：

中国城市

1. 北京
2. 上海
3. 广州

3.2.8图像标记

图像标记

例：

3.2.9超链接标记

…超链接标记

例：

红舞鞋

雪绒花

邮箱”>欢迎给我来信

好站推荐：

榕树下

3.2.10表格标记

…表格标题

…表格行

…表头单元格

…单元格

例1：

简单表格

1

2

3

4

5

6

例2：

公司数据

公司

雇员

成立于

ABC

1000

1974

XYZ

2000

1982

3.2.11表单标记

…表单标记

用户输入区域

…列表/菜单标记

…选项标记

…文本区域标记

…标签标记

例：

姓名：

密码：

性别：

男

女

喜好：

电影

看书

3.2.12块容器标记

div可以包含任何元素，用于在HTML文件中建立逻辑结构。

例：

单列布局网页逻辑的结构。

…