网页设计与制作PPT模板.ppt
合集下载
《网页设计与制作》PPT课件
3
2/29/2020
如何控制CSS样式2-1
盒子模型 元素内容
网页中的所有元 素可以看作一个 一个的“盒子”
填充（也称内边距）
边框
边界（也称外边距）
4
2/29/2020
样式控制思路 盒内样式修饰 盒子位置布局
如何控制CSS样式2-2
盒内样式： 设置网页元素的 颜色、字体等外
观
盒子位置布局： 确定盒子所在的 位置、和其他网 页元素的关系
第七章 CSS样式表（三）
——布局、定位
1
2/29/2020
提问
回顾
使用CSS设置背景图像时，通常会同时设置背景图像的
（background- ）和（ background-）po属si性tion
repeat
使用font属性设置字体类型、风格、大小、粗细时的顺序
是什么？字体风格→粗细→大小→类型
5
2/29/2020
为什么需要盒子属性
盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性
盒子模型 平面图
盒子模型三维立体图： 注意背景色在背景图
的下一层
6
2/29/2020
盒子属性：
margin（外边距/边界） border（边框） padding（内边距/填充 ）
什么是盒子属性
<span>、<a>、<img/>、<strong>...
经验
内联标签可以包含于块级标签中，成为它的子元素， 而反过来则不成立
12
2/29/2020
控制元素的显示和隐藏 块级元素与行级元素的转变
display属性
网页设计与制作PPT图文教程
如何申请电子邮箱 电子邮箱的使用 举例: 登陆 注册信息后，设置帐号、密码
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
网页设计与制作实用教程ppt课件
置于页面中央：将转换的表格放在页面的中央。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
网页设计与制作PPT课件
8/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
所提供的服务主要是、、、网上传呼、在线聊天、网上购物等等，而其 中和是最常用的服务。
1.1.2
• ( )简称为或万维网，客户端只要通过“浏览器”（）就可以非常方 便地访问上的服务器端，迅速地获得所需的信息。如图所示。
客户端 浏览器
HTTP 网络协议
internet
WEB服务器
用户通过浏览器访问服务器的网页，那么如何查找这些网页呢？通过在浏览 器的地址栏中输入网址，即，统一资源定位器。
1.2.2 图形和图像处理工具
• 目前常用的图形和图像处理工具主要：及。 • 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆
绑了 ，能够实现各种专业化的图像处理、动画的制作等。 • 是由公司出品的首选图形图像处理软件。它的独特之处在于其能够优化
处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等， 可以生成 ，直接导入到网页中，使用非常方便。本教材将在以后的章节 做详细的介绍。
1.1.1 的概述
最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部 高级研究计划署协助开发的。最初是只允许国防部人员进入的封闭式 网络。到1987年，在美国国家科学基金会的推动下，将之主要从军 事用途转向科学研究和民事用途，形成了今天的主干网雏形。全球网 络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网 站这些活动已融入我们的日常生活。
1.2.3 动画制作工具
• 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设 计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一 起，以制作出高品质的网页动态效果。所使用的图形是压缩的矢量图 形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载 边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出 高品质的动画，已经慢慢成为网页动画的标准，成为一种新兴的技术 发展方向。本教材将在以后的章节做详细的介绍。
• 我们知道新浪网的域名：，但很少有人知道新浪网服务器的地址是多 少？
• 域名的分类：域名系统是一个分层的树状结构组织，如图所示。最上 面是一个无名的根域，下层为顶级域名，接着是二级……
1.1.4 域名与地址
根域
Com net
org
Ibm hp yahoo
jp
cn
tw
Com edu net
Sina
图1.2 域名结构图
ebay alibaba
表1.1 按组织分类的顶级域名
域名
域名机构
附注：全称
商业机构
教育机构
政府部门
国际性机构
军队
网络机构
非盈利机构
表1.2 按地理区域分类的项级域名
域名
国家
中国 加拿大
日本 韩国 俄罗斯 台湾 香港
附注：全称
域名的书写格式为：叶节点名.二级域名.顶级域名 例如：，：服务器名，：企业名称，：顶级域名。
1.1.4 域名与地址
• 在上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址 就是地址。
• 地址是由32的二进制数值构成4.11。
0123 8
16
24
31
A 0 网络号
主机号
0123 8
16
24
31
B 10
网络号
0123 8
16
主机号
24
31
C 11 0
网络号
主机号
A类地址的范围为： 1.0.0.0—126.255.255.255 B类地址的范围： 128.0.0.0-191.255.255.255 C类地址的范围： 192.0.0.0-223.255.255.255
1.1.4 域名与地址
• 地址是一串难以记忆的数字，因此在1985年开始，引入了域名的概 念，用具有含义的字符来表示网络中的主机，以便于浏览者访问。域 名与地址如何对应呢？通过域名解析系统将域名解析到相应的地址上， 实现这二者之间的对应关系。
的一般格式为：“协议名：主机名[/文件夹名/文件名]” 常用的协议名如下： ：超文本传输协议，用于转换网页。 ：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“”作
为下载的网址。 ：传送协议，主要用于传输电子邮件。 例如：
163
1.1.3 网页与网站
构建的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好 的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其 它文件，获得相应的信息，从而实现网页之间的链接，从而构成了的 纵横交织的网状结构。
章 网页设计基础知识
1.1 基础 1.2 网页设计工具 1.3 网站建设流程 1.4 语言
1.1 基础
1.1.1 的概述 是相互连接的网络集合。是由成千上万个网络、上亿台计算机通过
特定的网络协议相互连接而成的全球计算机网络，是提供信息资 源查询和信息资源共享的全球最大的信息资源平台。 网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何 种方法获得所需的信息。
1.1.1 的概述
从国内的发展现状来看，1994年4月，中科院计算机网络信息中心正式 接入，在10多年的时间里，中国发生了飞速的发展，截至2006年底， 我国网民人数达到了1.37亿，即每十人中就有一人是网民。10%的网 民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将 迎来更快速的增长期。另外网站数、地址等也迅速增长，分别达到 84.3万和9800万。从域名、网站数、地址等增长情况来看，我国互 联网资源得到了全面提升。
通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网 站。
网站点概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多， 可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面， 仅在某台服务器的占据很小的空间。
一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此 主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的或 等。
1.2 网页制作工具
• 目前网页制作工具较多，大多数网页制作工作都是通过“所见即所得” 的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工， 即图形和动画制作工具。
1.2.1 网页编辑工具
网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是(记 事本)、等。
所见即所得型的编辑软件主要有：微软的和。其中继承了系列软件的界 面通用、操作简单的特点，十分适合初学者使用。但与公司的相比， 在源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹， 因此我们这本教材主要介绍的网页编辑工具是。
1.1.2
• ( )简称为或万维网，客户端只要通过“浏览器”（）就可以非常方 便地访问上的服务器端，迅速地获得所需的信息。如图所示。
客户端 浏览器
HTTP 网络协议
internet
WEB服务器
用户通过浏览器访问服务器的网页，那么如何查找这些网页呢？通过在浏览 器的地址栏中输入网址，即，统一资源定位器。
1.2.2 图形和图像处理工具
• 目前常用的图形和图像处理工具主要：及。 • 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆
绑了 ，能够实现各种专业化的图像处理、动画的制作等。 • 是由公司出品的首选图形图像处理软件。它的独特之处在于其能够优化
处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等， 可以生成 ，直接导入到网页中，使用非常方便。本教材将在以后的章节 做详细的介绍。
1.1.1 的概述
最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部 高级研究计划署协助开发的。最初是只允许国防部人员进入的封闭式 网络。到1987年，在美国国家科学基金会的推动下，将之主要从军 事用途转向科学研究和民事用途，形成了今天的主干网雏形。全球网 络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网 站这些活动已融入我们的日常生活。
1.2.3 动画制作工具
• 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设 计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一 起，以制作出高品质的网页动态效果。所使用的图形是压缩的矢量图 形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载 边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出 高品质的动画，已经慢慢成为网页动画的标准，成为一种新兴的技术 发展方向。本教材将在以后的章节做详细的介绍。
• 我们知道新浪网的域名：，但很少有人知道新浪网服务器的地址是多 少？
• 域名的分类：域名系统是一个分层的树状结构组织，如图所示。最上 面是一个无名的根域，下层为顶级域名，接着是二级……
1.1.4 域名与地址
根域
Com net
org
Ibm hp yahoo
jp
cn
tw
Com edu net
Sina
图1.2 域名结构图
ebay alibaba
表1.1 按组织分类的顶级域名
域名
域名机构
附注：全称
商业机构
教育机构
政府部门
国际性机构
军队
网络机构
非盈利机构
表1.2 按地理区域分类的项级域名
域名
国家
中国 加拿大
日本 韩国 俄罗斯 台湾 香港
附注：全称
域名的书写格式为：叶节点名.二级域名.顶级域名 例如：，：服务器名，：企业名称，：顶级域名。
1.1.4 域名与地址
• 在上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址 就是地址。
• 地址是由32的二进制数值构成4.11。
0123 8
16
24
31
A 0 网络号
主机号
0123 8
16
24
31
B 10
网络号
0123 8
16
主机号
24
31
C 11 0
网络号
主机号
A类地址的范围为： 1.0.0.0—126.255.255.255 B类地址的范围： 128.0.0.0-191.255.255.255 C类地址的范围： 192.0.0.0-223.255.255.255
1.1.4 域名与地址
• 地址是一串难以记忆的数字，因此在1985年开始，引入了域名的概 念，用具有含义的字符来表示网络中的主机，以便于浏览者访问。域 名与地址如何对应呢？通过域名解析系统将域名解析到相应的地址上， 实现这二者之间的对应关系。
的一般格式为：“协议名：主机名[/文件夹名/文件名]” 常用的协议名如下： ：超文本传输协议，用于转换网页。 ：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“”作
为下载的网址。 ：传送协议，主要用于传输电子邮件。 例如：
163
1.1.3 网页与网站
构建的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好 的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其 它文件，获得相应的信息，从而实现网页之间的链接，从而构成了的 纵横交织的网状结构。
章 网页设计基础知识
1.1 基础 1.2 网页设计工具 1.3 网站建设流程 1.4 语言
1.1 基础
1.1.1 的概述 是相互连接的网络集合。是由成千上万个网络、上亿台计算机通过
特定的网络协议相互连接而成的全球计算机网络，是提供信息资 源查询和信息资源共享的全球最大的信息资源平台。 网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何 种方法获得所需的信息。
1.1.1 的概述
从国内的发展现状来看，1994年4月，中科院计算机网络信息中心正式 接入，在10多年的时间里，中国发生了飞速的发展，截至2006年底， 我国网民人数达到了1.37亿，即每十人中就有一人是网民。10%的网 民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将 迎来更快速的增长期。另外网站数、地址等也迅速增长，分别达到 84.3万和9800万。从域名、网站数、地址等增长情况来看，我国互 联网资源得到了全面提升。
通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网 站。
网站点概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多， 可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面， 仅在某台服务器的占据很小的空间。
一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此 主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的或 等。
1.2 网页制作工具
• 目前网页制作工具较多，大多数网页制作工作都是通过“所见即所得” 的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工， 即图形和动画制作工具。
1.2.1 网页编辑工具
网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是(记 事本)、等。
所见即所得型的编辑软件主要有：微软的和。其中继承了系列软件的界 面通用、操作简单的特点，十分适合初学者使用。但与公司的相比， 在源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹， 因此我们这本教材主要介绍的网页编辑工具是。