《网页设计与制作—第一章》(免费下载)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作
第1章 网页制作基础 章
南海学院计算机系制作
第1章
Web
网页制作基础
Web和浏览器 Web和浏览器 Web的特点和结构 Web的特点和结构 Web 最 大 的 特 点 是 使 用 了 超 文 本 Hypertext） （Hypertext） WWW采用 WWW采用C/S（客户机/服务器）工作模式 采用C/S（客户机/服务器） 在浏览器和服务器之间应用HTTP （ 在浏览器和服务器之间应用 HTTP（ Hyper Text Transfer Protocol，超文本传输协议） Protocol，超文本传输协议） 作为网络应用层通信协议
标记之间， 在HEAD标记之间，使用频率最高的标记就是 标记之间 TITLE，它用于定义显示在浏览器标题栏的文档标题。 ，它用于定义显示在浏览器标题栏的文档标题。
2011-1-11
25
励志学社” 【例】给网页设置 “励志学社”的文档标 可在头部输入以下代码： 题，可在头部输入以下代码： <TITLE>励志学社 励志学社</TITLE> 励志学社
2011-1-11
3
几个URL的例子. URL的例子 【例】几个URL的例子.
（1），用 ， http协议和缺省端口号 80） 协议和缺省端口号（ http协议和缺省端口号（80）访问微软公司 服务器 。 服务器。这里没有指定路 径和文件名， 径和文件名，所以访问的结果是把一个缺省 主页送给浏览器。 主页送给浏览器。 （2）ftp:///pub/msftp:///pub/mswindows/winvn926.zip， FTP协议访问北京 windows/winvn926.zip，用FTP协议访问北京 大学FTP服务器上路径名为pub/ms windows、 FTP服务器上路径名为pub/ms大学FTP服务器上路径名为pub/ms-windows、 文件名为winvn926.zip的文件。 winvn926.zip的文件 文件名为winvn926.zip的文件。
2011-1-11 6
IE6的界面
标题栏 菜单栏 工具栏 地址栏
浏览窗口
状态栏
2011-1-11 7
IE6.0的使用
浏览网页
“停止”按钮 前进和后退 刷新页面 改变文字大小 选择编码 全屏幕显示 查看源文件
2011-1-11
8
打开多个窗口
用菜单栏上的“文件” “新建” “窗口” 用菜单栏上的“文件”→“新建”→“窗口”， 会打开一个新的浏览器窗口。 会打开一个新的浏览器窗口。
2011-1-11
12
关闭图片显示
在网络速度较慢时， 在网络速度较慢时， 不观看网页中的图片和 其它多媒体内容可以得 到更快的下载速度。 到更快的下载速度。通 工具” “ 过“工具”→“Internet 选项”打开Internet选项 选项”打开 选项 对话框， 高级” 对话框，在“高级”选 项卡中可以对浏览器的 工作方式进行设置
是一种超文本标记语言， 是一种超文本标记语言，作为一种网页编 辑语言，易学易懂。 辑语言，易学易懂。
2011-1-11
23
1、HTML网页
HTML网页通常是由三部分内容组成的： HTML网页通常是由三部分内容组成的： 网页通常是由三部分内容组成的 版本信息、网页标题（HEAD） 版本信息、网页标题（HEAD）和文档主体 BODY）。 （BODY）。 下面就是网页结构的总体框架：
（4)/Addressing/URL/54)/Addressing/URL/5BNF.html#httpaddress，访问 BNF.html#httpaddress，访问 服务器 Addressing/URL目录下的 目录下的5 上Addressing/URL目录下的5-BNF.html 网页文件 中锚点标识为httpaddress的地方。 httpaddress的地方 中锚点标识为httpaddress的地方。
2011-1-11
27
Vlink为已经点击过的超级链接文字的颜色。 为已经点击过的超级链接文字的颜色。 为已经点击过的超级链接文字的颜色 Background设置，如果设置了背景图片， 设置， 设置 如果设置了背景图片， 图片会覆盖已经设置的颜色。 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 、 用于设置网页的左 边距和上边框， 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为 】将网页的上边距和左边距分别设置为40 30个像素的宽度 使用黑色文本、白色背景， 个像素的宽度， 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
2011-1-11 10
收藏夹的使用
使用菜单“ 使用菜单“收 藏”→“添加到收 藏夹” 藏夹”打开添加到 收藏夹对话框。 收藏夹对话框。
2011-1-11
11
使用菜单“收藏” “整理收藏夹” 使用菜单“收藏”→“整理收藏夹”打开收 藏夹整理对话框，进行收藏夹中网页的移动、 藏夹整理对话框，进行收藏夹中网页的移动、 删除、改名及创建新文件夹等操作。 删除、改名及创建新文件夹等操作。
一般情况下， 一般情况下，打 开四、 开四、五个窗口可以 充分利用系统资源， 充分利用系统资源， 而且通过调整窗口的 大小和位置还可以同 时浏览。 时浏览。
2011-1-11
9
主页、 主页、临时文件和历史记录
浏览器在打开 时自动调入的网页 称为“主页” 称为“主页”，主 页可以通过“ 页可以通过“工 具”→“Internet “ 选项”打开 选项” Internet选项对话 选项对话 常规” 框，在“常规”选 项卡的“主页” 项卡的“主页”栏 设置. 设置
24
（1）版本信息 ） 版本信息位于HTML网页文件的第一行 版本信息位于 网页文件的第一行
（2）HTML文件标记 ） 文件标记 大部分网页文件都是以<HTML>标记开始的，在文件 标记开始的， 大部分网页文件都是以 标记开始的 的结尾处又以</HTML>结束 的结尾处又以 结束
3） （3）头部信息 HEAD标记之间是 标记之间是HTML文档的头部，用来标明当前文档 文档的头部， 标记之间是 文档的头部 的有关信息
1、使用浏览器的“搜索”按钮 2、使用专门的搜索引擎
2011-1-11
15
认识网站
1.门户网站 2.个人网站 3.专业网站 4.职能网站
<!HTML网页版本信息说明 网页版本信息说明> 网页版本信息说明 <HTML> <HEAD> <!标题标记、属性及其内容 标题标记、 标题标记 属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> 主体标记、属性及其内容 主体标记 </BODY> </HTML>
2011-1-11
2011-1-11
21
网页中的元素
1.文字 文字 2.图像 图像 3.表单 表单 4.Flash动画 4.Flash动画 5. 表格 6. 超级链接 7. 视频、音频 视频、 8. POP窗口 窗口
2011-1-11
9. 标题栏和状态栏文字
22
1.2 网页制作的相关知识
HTML语言概述 HTML语言概述
2011-1-11
5
浏览器
概述 分类 Internet Explorer Netscape Navigator Mosaic等专业浏览器以及一些以上述浏览器 等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。 为内核的专用浏览器。 其中使用最广泛的是Microsoft出品的 其中使用最广泛的是 出品的 Internet Explorer 6.0（简称 （简称IE6）。 ）。
2011-1-11 4
8001///uu（3）: 8001///uugna/index.html，从运行在端口号8001 8001的 gna/index.html，从运行在端口号8001的 服务器上访问index.html主页 服务器上访问index.html主页。 服务器上访问index.html主页。
2011-1-11
2
URL
Internet上所有的资源都有一个唯一的 Internet上所有的资源都有一个唯一的 URL地址 一般将URL地址称为网址。 地址， URL地址称为网址 URL地址，一般将URL地址称为网址。
URL的完整格式如下： 的完整格式如下： 的完整格式如下
协议://主机名（或IP地址）：端口号/路径名/文件名
个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
2011-1-11
18
3.专业网站 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专 业文学网站。
2011-1-11
19
4.职能网站
2011-1-11
16
1.门户网站
这类网站是一种综合性网站，涉及领域 非常广泛，包含文学、音乐、影视、体 育、新闻和娱乐等方方面面的内容，具 有论坛、搜索和短信等功能。现在国内 较著名的门户网站有搜狐 （）、网易 （）等。
2011-1-11 17
2.个人网站
职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书 店（）等。
2011-1-11 20
认识网页
Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接
2011-1-11 13
关闭自动完成功能
通过工具→Internet 通过工具 选项，打开Internet 选项，打开 选项对话框， 选项对话框，在“内 选项卡的“ 容”选项卡的“个人 信息”部分单击“ 信息”部分单击“自 动完成” 动完成”按钮打开自 动完成设置对话框 。
2011-1-11
14
搜索引擎的使用
2011-1-11
26
（4）主体标记 ） 网页的主体是“ 网页的主体是“<BODY>……</BODY>”标记 标记 对作用的范围
<BODY>标记用于定义 标记用于定义HTML文档主体的开始， 文档主体的开始， 标记用于定义 文档主体的开始 它能够设置网页的背景图像、背景颜色、 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详 为背景颜色。 为背景颜色 细介绍。 为不包含超级链接的文字颜色。 细介绍。Text为不包含超级链接的文字颜色。 为不包含超级链接的文字颜色 Link为超级链接文字的颜色。 为超级链接文字的颜色。 为超级链接文字的颜色 Alink为正被点击的超级链接文字的颜色。 为正被点击的超级链接文字的颜色。 为正被点击的超级链接文字的颜色
第1章 网页制作基础 章
南海学院计算机系制作
第1章
Web
网页制作基础
Web和浏览器 Web和浏览器 Web的特点和结构 Web的特点和结构 Web 最 大 的 特 点 是 使 用 了 超 文 本 Hypertext） （Hypertext） WWW采用 WWW采用C/S（客户机/服务器）工作模式 采用C/S（客户机/服务器） 在浏览器和服务器之间应用HTTP （ 在浏览器和服务器之间应用 HTTP（ Hyper Text Transfer Protocol，超文本传输协议） Protocol，超文本传输协议） 作为网络应用层通信协议
标记之间， 在HEAD标记之间，使用频率最高的标记就是 标记之间 TITLE，它用于定义显示在浏览器标题栏的文档标题。 ，它用于定义显示在浏览器标题栏的文档标题。
2011-1-11
25
励志学社” 【例】给网页设置 “励志学社”的文档标 可在头部输入以下代码： 题，可在头部输入以下代码： <TITLE>励志学社 励志学社</TITLE> 励志学社
2011-1-11
3
几个URL的例子. URL的例子 【例】几个URL的例子.
（1），用 ， http协议和缺省端口号 80） 协议和缺省端口号（ http协议和缺省端口号（80）访问微软公司 服务器 。 服务器。这里没有指定路 径和文件名， 径和文件名，所以访问的结果是把一个缺省 主页送给浏览器。 主页送给浏览器。 （2）ftp:///pub/msftp:///pub/mswindows/winvn926.zip， FTP协议访问北京 windows/winvn926.zip，用FTP协议访问北京 大学FTP服务器上路径名为pub/ms windows、 FTP服务器上路径名为pub/ms大学FTP服务器上路径名为pub/ms-windows、 文件名为winvn926.zip的文件。 winvn926.zip的文件 文件名为winvn926.zip的文件。
2011-1-11 6
IE6的界面
标题栏 菜单栏 工具栏 地址栏
浏览窗口
状态栏
2011-1-11 7
IE6.0的使用
浏览网页
“停止”按钮 前进和后退 刷新页面 改变文字大小 选择编码 全屏幕显示 查看源文件
2011-1-11
8
打开多个窗口
用菜单栏上的“文件” “新建” “窗口” 用菜单栏上的“文件”→“新建”→“窗口”， 会打开一个新的浏览器窗口。 会打开一个新的浏览器窗口。
2011-1-11
12
关闭图片显示
在网络速度较慢时， 在网络速度较慢时， 不观看网页中的图片和 其它多媒体内容可以得 到更快的下载速度。 到更快的下载速度。通 工具” “ 过“工具”→“Internet 选项”打开Internet选项 选项”打开 选项 对话框， 高级” 对话框，在“高级”选 项卡中可以对浏览器的 工作方式进行设置
是一种超文本标记语言， 是一种超文本标记语言，作为一种网页编 辑语言，易学易懂。 辑语言，易学易懂。
2011-1-11
23
1、HTML网页
HTML网页通常是由三部分内容组成的： HTML网页通常是由三部分内容组成的： 网页通常是由三部分内容组成的 版本信息、网页标题（HEAD） 版本信息、网页标题（HEAD）和文档主体 BODY）。 （BODY）。 下面就是网页结构的总体框架：
（4)/Addressing/URL/54)/Addressing/URL/5BNF.html#httpaddress，访问 BNF.html#httpaddress，访问 服务器 Addressing/URL目录下的 目录下的5 上Addressing/URL目录下的5-BNF.html 网页文件 中锚点标识为httpaddress的地方。 httpaddress的地方 中锚点标识为httpaddress的地方。
2011-1-11
27
Vlink为已经点击过的超级链接文字的颜色。 为已经点击过的超级链接文字的颜色。 为已经点击过的超级链接文字的颜色 Background设置，如果设置了背景图片， 设置， 设置 如果设置了背景图片， 图片会覆盖已经设置的颜色。 图片会覆盖已经设置的颜色。
Leftmargin、Topmargin用于设置网页的左 、 用于设置网页的左 边距和上边框， 边距和上边框，它们是以像素为单位 【例1】将网页的上边距和左边距分别设置为 】将网页的上边距和左边距分别设置为40 30个像素的宽度 使用黑色文本、白色背景， 个像素的宽度， 和30个像素的宽度，使用黑色文本、白色背景， 未访问的链接源采用蓝色， 未访问的链接源采用蓝色，已访问的链接源标记 为暗红色。 为暗红色。 <BODY Background="moom.gif" Bgcolor="White" Bgproperties=Fixed Leftmargin=30 Link="Blue" Text="Black" Topmargin=40 Vlink="Maroon">
2011-1-11 10
收藏夹的使用
使用菜单“ 使用菜单“收 藏”→“添加到收 藏夹” 藏夹”打开添加到 收藏夹对话框。 收藏夹对话框。
2011-1-11
11
使用菜单“收藏” “整理收藏夹” 使用菜单“收藏”→“整理收藏夹”打开收 藏夹整理对话框，进行收藏夹中网页的移动、 藏夹整理对话框，进行收藏夹中网页的移动、 删除、改名及创建新文件夹等操作。 删除、改名及创建新文件夹等操作。
一般情况下， 一般情况下，打 开四、 开四、五个窗口可以 充分利用系统资源， 充分利用系统资源， 而且通过调整窗口的 大小和位置还可以同 时浏览。 时浏览。
2011-1-11
9
主页、 主页、临时文件和历史记录
浏览器在打开 时自动调入的网页 称为“主页” 称为“主页”，主 页可以通过“ 页可以通过“工 具”→“Internet “ 选项”打开 选项” Internet选项对话 选项对话 常规” 框，在“常规”选 项卡的“主页” 项卡的“主页”栏 设置. 设置
24
（1）版本信息 ） 版本信息位于HTML网页文件的第一行 版本信息位于 网页文件的第一行
（2）HTML文件标记 ） 文件标记 大部分网页文件都是以<HTML>标记开始的，在文件 标记开始的， 大部分网页文件都是以 标记开始的 的结尾处又以</HTML>结束 的结尾处又以 结束
3） （3）头部信息 HEAD标记之间是 标记之间是HTML文档的头部，用来标明当前文档 文档的头部， 标记之间是 文档的头部 的有关信息
1、使用浏览器的“搜索”按钮 2、使用专门的搜索引擎
2011-1-11
15
认识网站
1.门户网站 2.个人网站 3.专业网站 4.职能网站
<!HTML网页版本信息说明 网页版本信息说明> 网页版本信息说明 <HTML> <HEAD> <!标题标记、属性及其内容 标题标记、 标题标记 属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> 主体标记、属性及其内容 主体标记 </BODY> </HTML>
2011-1-11
2011-1-11
21
网页中的元素
1.文字 文字 2.图像 图像 3.表单 表单 4.Flash动画 4.Flash动画 5. 表格 6. 超级链接 7. 视频、音频 视频、 8. POP窗口 窗口
2011-1-11
9. 标题栏和状态栏文字
22
1.2 网页制作的相关知识
HTML语言概述 HTML语言概述
2011-1-11
5
浏览器
概述 分类 Internet Explorer Netscape Navigator Mosaic等专业浏览器以及一些以上述浏览器 等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。 为内核的专用浏览器。 其中使用最广泛的是Microsoft出品的 其中使用最广泛的是 出品的 Internet Explorer 6.0（简称 （简称IE6）。 ）。
2011-1-11 4
8001///uu（3）: 8001///uugna/index.html，从运行在端口号8001 8001的 gna/index.html，从运行在端口号8001的 服务器上访问index.html主页 服务器上访问index.html主页。 服务器上访问index.html主页。
2011-1-11
2
URL
Internet上所有的资源都有一个唯一的 Internet上所有的资源都有一个唯一的 URL地址 一般将URL地址称为网址。 地址， URL地址称为网址 URL地址，一般将URL地址称为网址。
URL的完整格式如下： 的完整格式如下： 的完整格式如下
协议://主机名（或IP地址）：端口号/路径名/文件名
个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
2011-1-11
18
3.专业网站 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专 业文学网站。
2011-1-11
19
4.职能网站
2011-1-11
16
1.门户网站
这类网站是一种综合性网站，涉及领域 非常广泛，包含文学、音乐、影视、体 育、新闻和娱乐等方方面面的内容，具 有论坛、搜索和短信等功能。现在国内 较著名的门户网站有搜狐 （）、网易 （）等。
2011-1-11 17
2.个人网站
职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书 店（）等。
2011-1-11 20
认识网页
Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接
2011-1-11 13
关闭自动完成功能
通过工具→Internet 通过工具 选项，打开Internet 选项，打开 选项对话框， 选项对话框，在“内 选项卡的“ 容”选项卡的“个人 信息”部分单击“ 信息”部分单击“自 动完成” 动完成”按钮打开自 动完成设置对话框 。
2011-1-11
14
搜索引擎的使用
2011-1-11
26
（4）主体标记 ） 网页的主体是“ 网页的主体是“<BODY>……</BODY>”标记 标记 对作用的范围
<BODY>标记用于定义 标记用于定义HTML文档主体的开始， 文档主体的开始， 标记用于定义 文档主体的开始 它能够设置网页的背景图像、背景颜色、 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor为背景颜色。关于颜色的值后面会详 为背景颜色。 为背景颜色 细介绍。 为不包含超级链接的文字颜色。 细介绍。Text为不包含超级链接的文字颜色。 为不包含超级链接的文字颜色 Link为超级链接文字的颜色。 为超级链接文字的颜色。 为超级链接文字的颜色 Alink为正被点击的超级链接文字的颜色。 为正被点击的超级链接文字的颜色。 为正被点击的超级链接文字的颜色