第一章网页设计基础 - 计算机学院-入门级教程
合集下载
网页设计入门教程分享
网页设计入门教程分享第一章：网页设计基础知识在了解网页设计之前，我们需要对基础知识有一定的了解。
首先是HTML（超文本标记语言），它是一种用于创建网页的标记语言。
HTML通过使用标签来描述网页的结构和内容，如标题、段落、图片等。
其次是CSS（层叠样式表），它是一种用于为HTML文档添加样式的语言。
CSS可以控制网页的布局、颜色、字体等方面。
最后是JavaScript，它是一种为网页添加交互性和动态效果的编程语言。
第二章：网页设计工具在进行网页设计之前，我们需要选择合适的网页设计工具。
常见的网页设计工具有Dreamweaver、Photoshop、Illustrator等。
Dreamweaver是一种可视化网页编辑工具，可以帮助我们快速创建网页并进行修改。
Photoshop是一种图像编辑软件，可以帮助我们设计网页所需的图像。
Illustrator是一种矢量图形编辑软件，可以帮助我们创建矢量图形和图标。
第三章：网页设计布局网页的布局非常重要，它可以影响用户对网页的第一印象和整体的使用体验。
网页的布局可以分为三种类型：固定布局、流式布局和响应式布局。
固定布局指的是网页的宽度固定不变，适用于桌面设备。
流式布局指的是网页的宽度会随着浏览器窗口的大小变化而自动调整，适用于手机和平板设备。
响应式布局则是一种结合了固定布局和流式布局的布局方式，根据不同的设备和屏幕大小，网页会自动调整布局和展示方式。
第四章：网页设计的配色和字体选择网页的配色和字体选择都会直接影响到用户对网页的感觉和体验。
在选择配色方案时，应该考虑网站的主题，以及色彩心理学的原理。
常用的配色方案有类比配色、对比配色和单色配色等。
字体选择也需要考虑网页的主题和内容特点。
常用的字体有无衬线字体和衬线字体，每种字体都有自己的特点和适用场景。
第五章：网页设计的图像处理图像是网页设计中重要的组成部分，通过合适的图像可以提升网页的美观性和吸引力。
在使用图像时，需要对图像进行一定的处理，如裁剪、调整大小、优化等。
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页设计与制作 第一章 网页设计制作基础
1.1.3网页的相关术语
3、统一资源定位器 统一资源定位器简称URL，是用来指出某项信息的位置及存取方式，以取得 各种服务信息的一种标准方法。简单地说，URL就是网络服务器主机的地址，也 称为网址。 如：http：///view/index.htm就是一个网址，其中包括如下几 个部分： 传输协议：也就是上面举例中的http部分，表示传输方式遵循超文本传送协 议要求。 主机名：标识网络上某台计算机的专门名字。在Internet上，主机名是一个 字来表示，它们的作用是相同的。 文件路径及文件名：如上例的“view“表示网页文件所在的目 录；”“index.htm”表示网页文件名。在主机名与路径之间，路径与文件之间， 一般用“/”符号隔开。
1.1.4 网页制作流程
3、实现阶段 使用网页制作工具完成页面的制作。目前，网页的制作工具很多，如： Frontpage，Dreamweaver，.Net等。利用这些工具，可以根据画出的逻辑结构图 制作并实现网页效果。 4、测试阶段 使用浏览器测试网页的效果和正确性。网页制作完毕后，需要在浏览器中进 行网页测试，看看制作的网页效果如何，是否能在浏览器中正确显示。如果有不 合理的地方，要及时对网页进行修改，以保证网页的质量。 5、维护阶段 网页经过测试确定没有问题后，就可以把网页上传并发布到Internet上。这样， 全世界的网络浏览者都可以随时浏览此网页。为了吸引更多的浏览者，网页要经 常变化，并对制作好的网页进行定期的维护、更新、修改。
1.1.3网页的相关术语
7、发布 将制作好的网页传输到Internet服务器的过程称为发布，也称为上传。做好 网页后，如果没有将网站的内容上传到Internet服务器上，别人是无法访问到这 些资源的，那么这些资源就仅保存在本地硬盘而不供别人浏览。 8、超文本标记语言 超文本标记语言缩写为HTML，是用于描述网页文档的一种标记语言。HTML 是一种规范，一种标准，它通过标记符号来标识要显示的网页中的各个部分。浏 览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。但需要注 意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可 能会有不同的显示效果。 以IE浏览器为例，显示网页的html代码。在浏览器窗口选择【查看】|【源文 件】菜单命令，系统将自动启动记事本或写字板显示该网页的HTML源文件，如 图所示。
网页设计基础CCppt课件
1.2 网站的组成
1.2.2 网站硬件平台 网站硬件主要由两大部分组成：网络设备和服务器
1.网络设备： 网络设备主要用于网站局域网建设、网站与因特网
的连接。
路由器是一种连接多个 网络或网段的设备，是将网站 连入因特网的桥梁。
交换机是局域网组网的重要设备，多台不同的计算机 可以通过交换机组成网络。
6
1.1 网站基础知识
1.1.2 网站 网站(Website)是指在因特网上，根据一定的
规则使用HTML等工具制作的，用于展示特定内 容的相关网页的集合。 网站就是在互联网上一块固定的面向全世界发 布消息的地方，人们可以通过网站来发布自己 想要公开的资讯，或者利用网站来提供相关的 网络服务。
8
1.1 网站基础知识
1.1.3 IP地址、域名及URL 1. IP地址
• IP地址：是接入因特网的主机被分配的唯 一编号，用32位二进制数表示，每8位一 组，每组数的十进制范围为0~255，各数 之间用一个点号“.”分开。如： 192.168.0.1
9
1.1 网站基础知识
1.1.3 IP地址、域名及URL 2. 域名
1.2 网站的组成
1.2.1 网站IP地址和域名 域名：每个IP地址都可以申请一个与其
对应的、便于记忆的域名。域名 （Domain Name），是一个企业或机构 在网上的永久性电子商标，它如同商标 在市场上的作用一样，是一种无形资产。 要建立网站，注册域名是一个重要的环 节，用户不但可以申请国内域名，也可16
1weaver 工作环境 1.8 Dreamweaver工作流程
3
1.1 网站基础知识
1.1.1 Internet与Web服务 1.1.2 网站 1.1.3 IP地址、域名及URL 1.1.4 服务器与客户机
网页制作课件第1章 网页设计基础
第1章 网页设计基础
制作人：曾俊国
重点和难点
✓了解互联网的相关概念 ✓理解网页与网站的基础知识及其关系 ✓HTML基础知识 ✓网站设计基本流程
1.1 互联网(Internet)基础
互联网(Internet)已经渗透到了当今社会的各个方面。用户通过 互联网即可以坐在家里了解最近的新闻，阅读当天的报纸，了 解股市行情，还可以实现网上购物，预订机票和酒店房间，查 阅资料。各类学校还可以通过互联网实现远程教学。
1.5 典例剖析：制作一个简单的欢迎页面
本实例实际上是对本章所讲述内容的综合，具体操作步骤如 下： （1）网页素材的准备：为“相关链接”的导航按钮及网页背景 准备图像，设置其合适的长度和宽度。 （2）规划网页布局：本实例实际上是运用了3个table来布局整 个网页，第一个table涵盖了整个网页，第二个table是嵌套在 其中的，并将其设置在网页的左边，用于布局“相关链接” 中的导航栏及图片，第三个table也是嵌套在第一个table中， 用于布局“自我介绍”、“我的家人”等栏目的链接。 （3）调整每个表格的宽度和高度以及调整每个表格中的表元宽 度与高度，做到网页内的所有元素相互协调、匀称。
1.6 习题
一、选择题
1．（ ）标签可应用于<head>中。
A）<HTML>
B）<BODY>
C）<TITLE> D）
<IMAGE>
2．一个标准的HTML语法结构不包括（ ）标签。
A）<html>
B）<head>
C）<title>
D）
<body>
3．链接的基本语法标签是（ ）。
A）<p>
制作人：曾俊国
重点和难点
✓了解互联网的相关概念 ✓理解网页与网站的基础知识及其关系 ✓HTML基础知识 ✓网站设计基本流程
1.1 互联网(Internet)基础
互联网(Internet)已经渗透到了当今社会的各个方面。用户通过 互联网即可以坐在家里了解最近的新闻，阅读当天的报纸，了 解股市行情，还可以实现网上购物，预订机票和酒店房间，查 阅资料。各类学校还可以通过互联网实现远程教学。
1.5 典例剖析：制作一个简单的欢迎页面
本实例实际上是对本章所讲述内容的综合，具体操作步骤如 下： （1）网页素材的准备：为“相关链接”的导航按钮及网页背景 准备图像，设置其合适的长度和宽度。 （2）规划网页布局：本实例实际上是运用了3个table来布局整 个网页，第一个table涵盖了整个网页，第二个table是嵌套在 其中的，并将其设置在网页的左边，用于布局“相关链接” 中的导航栏及图片，第三个table也是嵌套在第一个table中， 用于布局“自我介绍”、“我的家人”等栏目的链接。 （3）调整每个表格的宽度和高度以及调整每个表格中的表元宽 度与高度，做到网页内的所有元素相互协调、匀称。
1.6 习题
一、选择题
1．（ ）标签可应用于<head>中。
A）<HTML>
B）<BODY>
C）<TITLE> D）
<IMAGE>
2．一个标准的HTML语法结构不包括（ ）标签。
A）<html>
B）<head>
C）<title>
D）
<body>
3．链接的基本语法标签是（ ）。
A）<p>
网页制作课件_1 网页设计基础
下面使用Dreamweave制作一个简单的网页，介绍一下Dreamweave制作 网页的基本流程。
1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网页
1.2.3 站点的建立
Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了 大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文 件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用 Dreamweaver 8的网站管理功能，必须首先建立“站点”。 下面就介绍如何创建一个站点。
使用 教材
清华大学出版社 书号：9787302162711
1.1 HTML基础
在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而 成。本节先介绍HTML的基础知识。
1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签 1.1.4 HTML文档的基本结构
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
图1-69 HTML工具栏
1.1.4 HTML文档的基本结构
一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标 题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质 内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等 元素，这些元素构成了网页的内容。
1.2 初识Dreamweaver
1．新建网页 2．编辑网页 3．保存网页 4．预览网页 5．继续编辑网页 6．再次预览网页
1.2.3 站点的建立
Dreamweaver 8不仅仅是网页设计工具，更是网站设计工具，提供了 大量和网站管理维护相关的功能，能够对网站中的文件、链接、媒体文 件等多种资源进行统一管理，使网站设计工作事半功倍。要想使用 Dreamweaver 8的网站管理功能，必须首先建立“站点”。 下面就介绍如何创建一个站点。
使用 教材
清华大学出版社 书号：9787302162711
1.1 HTML基础
在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而 成。本节先介绍HTML的基础知识。
1.1.1 什么是HTML 1.1.2 课堂实例――创建和测试第一个网页 1.1.3 认识HTML标签 1.1.4 HTML文档的基本结构
用记事本创建一个HTML文档，网页效果如图1-68所示。在Dreamweaver 中利用标签选择器创建HTML文档，完成同样的效果。
练习2 文件头标签的应用
练习用“HTML”工具栏中的“文件头”按钮（如图1-69所示）进行网页 文件头的设计，包括设置网页关键字、设置页面自动切换等功能。
图1-69 HTML工具栏
1.1.4 HTML文档的基本结构
一个HTML文档分为两部分：文件头和文件体。文件头中提供了文档标 题，并建立了HTML文档与文件目录间的关系。文件体部分是网页的实质 内容，它是HTML文档中最主要的部分，其中包含了文本、图像、表格等 元素，这些元素构成了网页的内容。
1.2 初识Dreamweaver
第1章网页设计基础
1.2 Web设计基础
3. 网页设计一致性 一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。对优秀的 Web站点分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页 面之间的一致性。 要保持一致性，可以从页面的结构排版入手：
通过定义一致的页面模板，各个页面使用相同的页边距。 文本和图形之间保持相同的间距。 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，如果使用图标导航，
1.3 网页布局
1.3.2 布局设计类型 网页布局大致可分为“国”字型、“匡”字形型、标题正文型、框架型、封面型、Flash型、变化型等。
思考：1. 网易网站的布局设计属于哪种类型？ 2. 网络传播学院的网站首页布局设计属于哪种类型？
1.3 网页布局
1.3.3 布局设计元素 在网页文件中，会涉及很多的页面元素。如何将这些页面元素有机地组合起来，达到满意的视觉效
随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服，建议使用。
1.3 网页布局
3. 框架布局 框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用。先用
框架将页面划分为几个区域，然后再用表格实现各区域的精确局部。常用在网站系统的后台页面设计 中。由于在HTML 5标准中已经不被推荐，所以该布局不建议使用。
1.3 网页布局
1.3.1 布局设计原则 通常可以从以下几个大的方面考虑布局的基本设计原则。 （1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必 须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近的栏目集中在一个区域显现，构成 一种群体效应。 （2）网页布局应区分栏目模块的重要程度。分开栏目的主次性，重要栏目以顶部、左侧排列，次要的 栏目以底部、右侧排列。即重要信息、重要功能模块“靠上靠左”原则。 （3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不 同语种用户的浏览习惯。
第1章网页设计与制作基础
（5）文本。文本是网页发布信息的主要形式，用它制作 出的网页占用的空间比较小，因此当用户浏览时可以很快地展 现在用户面前。在浏览器中，默认的中文字体为宋体，英文字 体为Times New Roman。也就是说，如果没有设置任何字体， 网页将以这两种字体显示。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
第01章-网页设计基础知识ppt课件(全)
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
1.4.4 网页框架语言HTML
HTML(Hyper Text Markup Language)即超文本标记语言，是WWW上 通用的描述语言。HTML语言主要是为了把存放在一台计算机中的文本或图 形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。
《 网页设计与制作基础教程(第3版)》
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
简单地说，WWW是漫游Internet的工具，它把Internet上不同地点的相 关信息聚集起来，通过WWW浏览器(如IE，即Internet Explorer)检索，无论 用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些 信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上
edu :::::
1.1.2 网页的基本元素
网页是一个纯文本文件，其通过HTML、CSS等脚本语言对页面元素进 行标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、 图像、超链接、Flash动画、表格、交互式表单以及导航栏等。
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
网页制作软件——Dreamweaver 图像处理软件——Photoshop 动画制作软件——Flash
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
第1章 网页设计基础PPT学习课件
2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
重庆邮电大学计算机科学与技术学院 胡军
网页
网页的学名称作HTML文件，是一种可以在 WWW网上传输，并被浏览器认识和翻译成 页面显示出来的文件。 HTML的意思则是“Hypertext Markup Language”，中文翻译为“超文本标记语 言”。“超文本”就是指页面内可以包含 图片，链接，甚至音乐，程序等非文字的 元素。网页就是由HTML语言编写出来的。
Internet(互联网)是由世界上各种各样的网 络互联所形成的“网络的网络”，是一个 网际网。它是目前世界上最大的计算机通 信网络，遍布全球，将世界各地各种规模 的计算机网络连接成一个整体，从而实现 信息交流和共享。
重庆邮电大学计算机科学与技术学院 胡军
IP地址
在Internet上连接的所有计算机，从大型机 到微型机都是以独立身份出现，称之为主 机。为了实现各主机间的通信，每台主机 都必须有一个惟一的网络地址。网络地址 是一台计算机惟一的标识，这个地址就称 为IP(Internet Protocol)地址。
重庆邮电大学计算机科学与技术学院 胡军
图像和动画
图像在网页中具有提供信息，展示作品， 装饰网页，表达个人情调和风格的作用。 用户可以在网页中使用GIF，JPEG(JPG)， PNG三种图象格式，其中使用最广泛的是 GIF和JPEG两种格式。 在网页中为了更有效地吸引浏览者的注意， 许多网站的广告都做成了动画形式。
重庆邮电大学计算机科学与技术学院 胡军
协议
网络协议（Protocol）是一系列通信规则的总称， 主要包括用户数据与控制信息的结构和格式，需 要发出的控制信息以及相应要完成的操作与响应， 对事件实现顺序的详细说明等三部分内容。一种 协议可以定义通过网络传输的数据包的格式，包 内的数据区以及如何对它们进行解释。显然，无 论是发送方还是接收方都必须理解并遵守。因此， 协议的实质就是进行通信所使用的语言。对于网 络来说，协议是必不可少的。
第一章 网页设计基 础
胡军 重庆邮电大学计算机科学与技术学院
本章的主要内容
1.1 Internet相关概念 1.2 网页设计的基本方式 1.3 网页中的常见元素 பைடு நூலகம்.4 网页的创作与编辑工具 1.5 网页制作的基本步骤
重庆邮电大学计算机科学与技术学院 胡军
1.1 Internet相关概念
重庆邮电大学计算机科学与技术学院 胡军
声音和视频
声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的 声音文件和格式，也有不同的方法将这些声音添加到Web页中。在决 定添加声音之前，需要考虑的因素包括其用途，格式，文件大小，声 音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是非常 不同的，彼此之间很可能不兼容。 用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和 AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览 器不要插件也可以支持MIDI，WAV和AIF格式的文件，而MP3和RM 格式的声音文件则需要专门的浏览器播放。 一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的 速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得 可以控制。 视频文件的格式也非常多，常见的有Realplay， MPEG， AVI和DivX 等。视频文件的采用让网页变得精彩而有动感。
重庆邮电大学计算机科学与技术学院 胡军
1.3 网页中的常见元素
文本 图象与动画 音频与视频 超级链接 表格 表单 导航栏 其他元素
重庆邮电大学计算机科学与技术学院 胡军
文本
文本一直是人类最重要的信息载体与交流工具， 网页中的信息也以文本为主。与图象相比，文字 虽然不如图象那样能够很快引起浏览者的注意， 但却能准确地表达信息的内容和含义。为了克服 文字固有的缺点，人们赋予了网页中文本更多的 属性，如字体，字号，颜色，底纹和边框等，通 过不同格式的区别，突出显示重要的内容。此外， 用户还可以在网页中设计各种各样的文字列表， 来清晰表达一系列项目。这些功能都给网页中的 文本赋予了新的生命力。
重庆邮电大学计算机科学与技术学院 胡军
WWW
WWW，是万维网（World Wide Web）的 英文缩写。WWW能够处理文字，图像，声 音，视频等多媒体信息。由于它的信息处 理能力已经远远超出了处理纯文本的范围， 所以它是一个多媒体的信息系统。并且通 过各种超链接，我们可以很方便地从一种 信息来源转到另一种信息来源。
重庆邮电大学计算机科学与技术学院 胡军
利用可视化工具
随着网页制作技术的不断发展，出现了诸如 FrontPage、Dreamweaver等可视化的网页编辑 工具。利用这些工具人们在可视环境下编辑制作 网页元素，由编辑工具自动生成对应的网页代码。 如要在网页上插入表格，就可以直接在工作区中 绘制表格而不用考虑编码的规则和语法。利用可 视化工具编辑网页操作简单直观，调试方便，是 大众化的网页编辑方式。但利用可视化工具在制 作一些特殊网页效果上有一定的局限性。
重庆邮电大学计算机科学与技术学院 胡军
手工编码与可视化工具结合
编码和可视化工具结合是一种比较成熟的网页制 作方式。具体过程为：一般的网页元素通过可视 化工具编辑制作，一些特殊的网页效果通过插入 代码生成。这种方式效率高、调试方便而且可以 实现丰富的网页效果，但要求设计人员既要熟悉 HTML语言又能运用可视化工具。除了上面三种 基本的网页设计制作方式外，我们还可以通过修 改已有的网页代码生成自己的网页。在网页编辑 制作过程中具体采用何种方式要根据个人的具体 情况而定，每必要拘泥于某种固定的模式。
重庆邮电大学计算机科学与技术学院 胡军
域名和域名系统
域名标识了一贯用户所属的机构，所使用 的主机或节点机。域名的命名方式称为域 名系统，域名必须按ISO有关标准进行。在 机器的地址表示中，从右到左依次为最高 域名段，次高域名段等，最左一个字段为 主机名。例如：在中，最 高域名为cn，次高域名为edu，最后一个域 为cqupt，主机名为cs。
重庆邮电大学计算机科学与技术学院 胡军
1.2 网页设计的基本方式
手工编码方式 利用可视化工具 手工编码与可视化工具结合
重庆邮电大学计算机科学与技术学院 胡军
手工编码方式
网页是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档， 设计制作网页的过程就是生成HTML代码的过程。 在WWW（World Wide Web ）发展的初期人们制 作网页是通过直接编写HTML代码来实现的。 手工编码制作网页对网页设计人员的要求较高， 编码效率低，调试过程复杂，因此，对大多数网 页设计人员来说采用这个方式比较困难。但手工 编码可以灵活地制作出丰富的网页效果。
网页
网页的学名称作HTML文件，是一种可以在 WWW网上传输，并被浏览器认识和翻译成 页面显示出来的文件。 HTML的意思则是“Hypertext Markup Language”，中文翻译为“超文本标记语 言”。“超文本”就是指页面内可以包含 图片，链接，甚至音乐，程序等非文字的 元素。网页就是由HTML语言编写出来的。
Internet(互联网)是由世界上各种各样的网 络互联所形成的“网络的网络”，是一个 网际网。它是目前世界上最大的计算机通 信网络，遍布全球，将世界各地各种规模 的计算机网络连接成一个整体，从而实现 信息交流和共享。
重庆邮电大学计算机科学与技术学院 胡军
IP地址
在Internet上连接的所有计算机，从大型机 到微型机都是以独立身份出现，称之为主 机。为了实现各主机间的通信，每台主机 都必须有一个惟一的网络地址。网络地址 是一台计算机惟一的标识，这个地址就称 为IP(Internet Protocol)地址。
重庆邮电大学计算机科学与技术学院 胡军
图像和动画
图像在网页中具有提供信息，展示作品， 装饰网页，表达个人情调和风格的作用。 用户可以在网页中使用GIF，JPEG(JPG)， PNG三种图象格式，其中使用最广泛的是 GIF和JPEG两种格式。 在网页中为了更有效地吸引浏览者的注意， 许多网站的广告都做成了动画形式。
重庆邮电大学计算机科学与技术学院 胡军
协议
网络协议（Protocol）是一系列通信规则的总称， 主要包括用户数据与控制信息的结构和格式，需 要发出的控制信息以及相应要完成的操作与响应， 对事件实现顺序的详细说明等三部分内容。一种 协议可以定义通过网络传输的数据包的格式，包 内的数据区以及如何对它们进行解释。显然，无 论是发送方还是接收方都必须理解并遵守。因此， 协议的实质就是进行通信所使用的语言。对于网 络来说，协议是必不可少的。
第一章 网页设计基 础
胡军 重庆邮电大学计算机科学与技术学院
本章的主要内容
1.1 Internet相关概念 1.2 网页设计的基本方式 1.3 网页中的常见元素 பைடு நூலகம்.4 网页的创作与编辑工具 1.5 网页制作的基本步骤
重庆邮电大学计算机科学与技术学院 胡军
1.1 Internet相关概念
重庆邮电大学计算机科学与技术学院 胡军
声音和视频
声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的 声音文件和格式，也有不同的方法将这些声音添加到Web页中。在决 定添加声音之前，需要考虑的因素包括其用途，格式，文件大小，声 音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是非常 不同的，彼此之间很可能不兼容。 用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和 AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览 器不要插件也可以支持MIDI，WAV和AIF格式的文件，而MP3和RM 格式的声音文件则需要专门的浏览器播放。 一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的 速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得 可以控制。 视频文件的格式也非常多，常见的有Realplay， MPEG， AVI和DivX 等。视频文件的采用让网页变得精彩而有动感。
重庆邮电大学计算机科学与技术学院 胡军
1.3 网页中的常见元素
文本 图象与动画 音频与视频 超级链接 表格 表单 导航栏 其他元素
重庆邮电大学计算机科学与技术学院 胡军
文本
文本一直是人类最重要的信息载体与交流工具， 网页中的信息也以文本为主。与图象相比，文字 虽然不如图象那样能够很快引起浏览者的注意， 但却能准确地表达信息的内容和含义。为了克服 文字固有的缺点，人们赋予了网页中文本更多的 属性，如字体，字号，颜色，底纹和边框等，通 过不同格式的区别，突出显示重要的内容。此外， 用户还可以在网页中设计各种各样的文字列表， 来清晰表达一系列项目。这些功能都给网页中的 文本赋予了新的生命力。
重庆邮电大学计算机科学与技术学院 胡军
WWW
WWW，是万维网（World Wide Web）的 英文缩写。WWW能够处理文字，图像，声 音，视频等多媒体信息。由于它的信息处 理能力已经远远超出了处理纯文本的范围， 所以它是一个多媒体的信息系统。并且通 过各种超链接，我们可以很方便地从一种 信息来源转到另一种信息来源。
重庆邮电大学计算机科学与技术学院 胡军
利用可视化工具
随着网页制作技术的不断发展，出现了诸如 FrontPage、Dreamweaver等可视化的网页编辑 工具。利用这些工具人们在可视环境下编辑制作 网页元素，由编辑工具自动生成对应的网页代码。 如要在网页上插入表格，就可以直接在工作区中 绘制表格而不用考虑编码的规则和语法。利用可 视化工具编辑网页操作简单直观，调试方便，是 大众化的网页编辑方式。但利用可视化工具在制 作一些特殊网页效果上有一定的局限性。
重庆邮电大学计算机科学与技术学院 胡军
手工编码与可视化工具结合
编码和可视化工具结合是一种比较成熟的网页制 作方式。具体过程为：一般的网页元素通过可视 化工具编辑制作，一些特殊的网页效果通过插入 代码生成。这种方式效率高、调试方便而且可以 实现丰富的网页效果，但要求设计人员既要熟悉 HTML语言又能运用可视化工具。除了上面三种 基本的网页设计制作方式外，我们还可以通过修 改已有的网页代码生成自己的网页。在网页编辑 制作过程中具体采用何种方式要根据个人的具体 情况而定，每必要拘泥于某种固定的模式。
重庆邮电大学计算机科学与技术学院 胡军
域名和域名系统
域名标识了一贯用户所属的机构，所使用 的主机或节点机。域名的命名方式称为域 名系统，域名必须按ISO有关标准进行。在 机器的地址表示中，从右到左依次为最高 域名段，次高域名段等，最左一个字段为 主机名。例如：在中，最 高域名为cn，次高域名为edu，最后一个域 为cqupt，主机名为cs。
重庆邮电大学计算机科学与技术学院 胡军
1.2 网页设计的基本方式
手工编码方式 利用可视化工具 手工编码与可视化工具结合
重庆邮电大学计算机科学与技术学院 胡军
手工编码方式
网页是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档， 设计制作网页的过程就是生成HTML代码的过程。 在WWW（World Wide Web ）发展的初期人们制 作网页是通过直接编写HTML代码来实现的。 手工编码制作网页对网页设计人员的要求较高， 编码效率低，调试过程复杂，因此，对大多数网 页设计人员来说采用这个方式比较困难。但手工 编码可以灵活地制作出丰富的网页效果。