网页设计（书稿1-3章）.zip
2401_8828654323.66MB需要积分:1资源文件列表:
网页设计（书稿1-3章）.zip 大约有1个文件 
网页设计（书稿1-3章）.pdf 24.13MB
资源介绍:
网页设计（书稿1-3章）.zip
1
第 1 章
网页设计基础
学习目标:
了解网页设计的基本概念。
掌握 语言的基本标签。
教学难点:
语言基本标签的使用。
新标签的使用。
任务 1. 1 初识网页设计
进行网站建设 必须要弄清楚所建立的网页和网站到底是由什么组成的 做好的网站存
放在什么地方 以什么形式存放 网页如何被浏览 在网站使用的过程中如何进行更新与维
护等 要解决上述问题 就要了解一些关于网站制作应必备的网络和网页的基础知识
1. 1. 1 网络基础知识
在进行网页设计和制作之前 首先应该明白网页的相关概念 如网页 主页 网站
浏览器 等 具体描述如下
1. 互联网( Internet)
互联网 又称网际网络 是目前全球最大的计算机通信网 它通过电话线
光纤传输材料 使用一定的通信规范 把位于世界各地具有独立工作能力的计算机连接起
来 使之能够实现网络通信 资源共享
2. 全球信息网 WWW
全球信息网 是一个大型的 分布式的 全球性的 交互的
网页设计
2
动态的 跨平台的超媒体图形信息系统 是 中最流行 最主要的信息服务方式
用户通过 能够浏览 查询和共享 服务器站点上所有的超媒体信息
3. 网页
网页是 的基本文档 是在网络上用来同其他用户交流信息的最基本的组成部
分 网页界面的构成元素主要有文字 超链接和图像 另外还有声音 视频图像和动画等
多媒体元素 以及由 控件制作的特殊效果和交互功能 以丰富网页内
容 增强网页功能
4. HTML
是 的简写 中文名称是超文本标记语言 它是互
联网上非常流行的网页设计语言 能独立地运行于各种操作平台之上 不受操作系
统的影响 自 年起 就一直被用作 的信息表示语言 由 语言编写
的文件被称为 文件 它的扩展名是 或
5. 浏览器
浏览器就是用于浏览网页的应用程序 它在接收 页面时采用的是 协议 目
前使用较为广泛的浏览器有 公司的 浏览器和 公司的浏览器 尽管它们
使用不同的 文件标准 但在使用时均只需在地址栏中输入相应的 地址即可
6. 静态网页
静态网页是指网页的内容固定不变 当浏览器通过 的 协议 向网站服
务器请求提供网页的内容时 网站服务器收到要求后 传送事先准备好的 网页内
容只包含标准的 代码 要改变网页内容 只能重新进行手工编辑
7. 动态网页
动态网页中网页的内容具有交互性 它会依照不同的使用者 不同时间的改变而
改变
8. URL
统一资源定位符是互联网上资源的位置和访问方法
的简洁表示 是互联网上标准资源的地址 俗称网址 互联网上的每个文件都有唯一的
它包含网络协议和网络资源文件的位置 由协议 等 主机名称可
以是域名或 地址 端口号一般可省略 路径和文件名默认首页可省略组成
的格式如图 所示
图 1 - 1 URL 的格式
第 1 章 网页设计基础
3
例如
1. 1. 2 网站制作的基础知识
1. 超文本
超文本就是指文档中设置了超链接的文本 它所链接对象是纯文本 使
用了超链接的文字带有下划线 当鼠标移至其下方时 鼠标指针会变成手形 单击已定义
好超链接的关键字 便可显示与其相关的说明文字
2. 超媒体
超媒体是超文本的一种扩展 它将所链接信息类型扩展到了全新视角的
多媒体 综合了文字 影像 图片 动画 声音等文件 使得超链接不再是单纯的文本跳
转 而且可以显示图形 播放动画 音乐 也可以播放视频信息
3. 超链接
超链接用来实现不同网页间的相互跳转 是 上使用最多的一种技
术 它用以实现超文本 超媒体以及与其他媒体之间的链接
4. Web 图像
较为常用的 图像有 等 但网络对网页的容量和质
量要求是非常苛刻的 因此目前网上流行的格式主要是 和
格式的图像是 和 兼容计算机系统标准的
图像格式 是 微软公 司 的专用 格 式 可 以指定是 否采用压 缩格式 它 支持 位图 颜色
索引颜色和灰度模式 但不支持 通道
格式的图像是在各种图形处理软件上均能够处理的
经过无损压缩的 支持动画的 常用于网络传输的一种图形文件格式 它仅支持 位图像
色彩的索引颜色 也就是 种颜色 适合于对色彩数目要求不高的卡通图像等 虽然
格式的图像体积小 适宜在网络上传输 但由于它是一种专利产品 因而在一些商业
网站上它的显示受到一定的限制
格式的图像是 格式图像的免专利替代品 能存储 位信息的位图文件 其
图像质量要比 格式图像的质量好 它也采用无损失压缩 通过对像素行和列的扫描
获得较好的压缩效果 它显示速度很快 但不支持动画 它支持位图颜色 索引颜
色和灰度模式 但不支持带 通道的位图颜色和索引颜色文件
格式的图像又称作联合图片专家 是 位
的图像文件格式 也是一种高效率的压缩格式 通过损失极少的 不易被人眼所观察的颜
色信息 可以将图像体积减少至原大小的 从而减少下载时间 它支持
和灰度颜色模式 但不支持 通道 格式的图像在打开时会自动解压缩
网页设计
4
它适合于存储照片之类的色彩丰富的图像
和 这 种格式图像的特性比较如表 所示
表 1 - 1 JPG、 GIF 和 PNG 的特性比较
特性
是否无损压缩 否 是 是
主要色彩模式 最多 色 或 色
图像类型
清晰度要求较高的
图片或照片等
色彩数量少 清晰度高的
小型图片 图标
皆适合
缺点 图像不支持透明 色彩数量少 文件尺寸过大
任务 1. 2 认识常用的网页制作工具
1. 2. 1 网页编辑工具
1. 用记事本编辑网页
作为文本文件的 文件 可以直接用文本编辑工具记事本来编辑 使用记事本可
以方便地编写 代码和脚本程序代码 但文件的扩展名一定要保存为 或
对于初学者来说 用记事本一个字一个字地编辑网页 不易掌握 学习速度也较慢
相比较而言 所见即所得的网页编辑工具 和 它们功能强大 操
作方便易学 能大大提高网页制作人员的工作效率
2. 用 FrontPage 编辑网页
是 推出的一款优秀的专业化网页设计软件 它以设计开发基本的
文档为基础 设计特性丰富 能自动地将输入的数据及其格式转换为 代码
但所转换的代码有些复杂 不便阅读 并且用 设计出来的网页框架在预览时容
易出现错位的现象
3. 用 Dreamweaver 编辑网页
是 公司推出的一款所见即所得的网页编辑工具 它采用浮
动面板的设计风格 其直观性与高效性是 所无法比拟的 也能将输
入的数据及其格式转换为 代码 且冗余代码相对较少
与 组合为专业网页制作的优秀套件 并称为
的网页制作梦幻组合 由于是同一公司的产品 因而在功能上有着非常紧密完善的结合
4. HBuilder 工具
是 数字天堂推出的一款支持 的 开发 的
第 1 章 网页设计基础
5
编写用到了 和 本身主体是由 编写的 它基于
兼容了 的插件 可以通过完整的语法提示和代码输入法 代码块等 大幅
提升 的开发效率
1. 2. 2 Web 图像与动画制作工具
较为常用的几种 图像与动画制作工具有
和 等
1. Photoshop
是目前应用最广泛的平面图像设计软件 它界面友好 功能强大 具有极
强的灵活性
是 公司推出的功能强大的文本图像处理软件 采用专业的图像编辑标
准 以及层 通道 路径 滤镜和蒙板等图像处理技术 可以得到让广大平面设计人员十
分青睐的设计效果 它支持大部分的图像格式 适用于打印 图像修复 浏览或其他
用途的品质较佳的图像
2. Flash
是 公司推出的一款动画设计与编辑软件 利用它制作的动画文件只
需几 字节就可以实现许多令人心动的效果 用在网页设计上不仅可以使网页更加生动
而且体积小 下载速度快
不仅是一个图形编辑 动画制作软件 还包括了 动画播放插件 它采用流
的形式 可以一边下载一边播放 它还支持 通道
3. Fireworks
是 公司推出的专业的网络图形设计和处理工具 它是编辑矢量
和位图的综合工具 有针对地提出了开发网页的整套方案 通过它既可以编辑网
页图像 又可以创建网页动画 从而避免了同一作品的图形制作与动画制作过程中在不同
的软件之间频繁切换的烦琐 提供了一个真正完美的 解决方案
和 结合紧密 可与 公司的其他图形程序和 编
辑器结合使用 为网站的制作提供了一套完整的方案
4. LogoMaker
是一个专业的 设计制作工具 它功能强大 界面友好 容易使用
内置大量的 模板
5. Image Optimizer
是功能较强大的图像优化软件 它可以在不影响图像品质的情况下
将 等图像文件体积减小 在压缩的过程中 可根据需要设定
压缩率 且可以通过其预览功能 预览图像压缩后的品质 利用它内建的批量向导功能
qq_42239353
wisdomroc
csm2017
m0_46552684