网页制作教程03
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
40
绝对路径与相对路径(3)
例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/wm.gif 相对路径：<img src=“../../img/images/wm.gif”> 把绝对路径转化为相对路径的时候，两个文件绝对路径 中相同的部分忽略,只考虑他们不同之处。 为了避免在制作网页时出现路径错误，可以使用 Frontpage或dreamweaver的站点管理功能来管理站点。 站点中的网页保存时将把图片保存到站点中并自动把绝对 路径转化为相对路径，并且在站点中移动文件的时候，与 这些文件关联的连接路径都会自动更改。
……
9
例-创建“园林建筑艺术”网站
园林建筑艺术 index.htm
园林的定义 dingyi.htm
园林的特点 tedian.htm
皇家园林—颐和园 yiheyuan.htm
私家园林—拙政园 zhuozhengyuan.htm
私家园林图片 tupian.htm
10
导入/创建站点
执行“站点”/“新建站点”命令， 打开“站点定义”窗口
通用的方法：
先新建一个文件夹（如“某某的网站”） 直接制作每一个网页文件，然后把所有的网页文件保存 在“某某的网站”的相应的子文件夹中 插入的图片或其他素材文件要事先复制到相应的子文件 夹中 ……
7
网站创建的基本方法-例
8
网站创建的基本方法
常用的方法：
新建一个文件夹,将此文件夹定义为Dreamweaver站点 在“文件”面板中创建网页文件和素材文件夹 在“站点地图”中创建网站结构 打开相应的网页，进行具体网页的编辑工作
38
绝对路径与相对路径(1)
绝对路径：文件在硬盘上的真正路径
D:/myweb/wuming.html D:/myweb/images/wm.gif 如果在wuming.html网页中 插入wm.gif图片，使用绝对 <img src="D:/myweb/images/wm.gif"> 路径，那么在本地电脑中将一切正常，但将其拿到另一台机 器上或传到网站服务器上后，就会出错，因为要到当前机器 的D:/myweb/images路径下找wm.gif文件。
JPEG格式图像举例
JPEG格式（简称JPG）是一种流行的图像文件压缩格 JPEG JPG 式，通常，JPEG可将图像文件的长度缩短成原来的50% 到2%不等。在保证对图像质量的前提下，获得较高的压 缩比。摄影图像通常采用JPEG格式存储和显示，大多数 数字相机拍摄的图像都经过了JPEG压缩处理。
39
绝对路径与相对路径(2)
相对路径：当前网页相对目标文件的位置
/ 根目录 ../ 上一级 ../../ 上两级 例1：D:/myweb/wuming.html D:/myweb/images/wm.gif 相对路径：<img src=“images/wm.gif”> 例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif 相对路径： <img src=“../img/wm.gif”>
4
认识Dreamweaver界面
插入栏
文档工具栏
文档窗口
文件 面板 面 板 组
标签选择器 属性面板
5
“所见即所得”的网页编辑环境
设计：“所见即所得”的编辑环境 设计 代码：直接修改HTML代码 代码 拆分：“文档”窗口的一部分中显 拆分 示“代码”视图，另一部分中显示 “设计”视图。
6
网站创建的基本方法
41
建立超链接
超链接的实现方法：将某个文本串或某幅图像和其他 网页的地址（URL）联系在一起。 <a href =“网页地址/网页文件名.html”> 单击此处 </a> 可获得某某信息 URL链接 本地机器中网页文件 同一个网页文件中（书签）
42
建立超链接
URL链接 本地机器中网页文件 同一个网页文件中（书签）
网页设计与制作
Dreamweaver 8 网页制作与网站管理-1
内容提要
Dreamweaver介绍 网站创建的基本方法 站点的创建和管理 页面中使用文本 页面中使用图像 创建超链接
2
Dreamweaver介绍
Dreamweaver 是Macromedia公司开发的“所见即所得”
•加粗、倾斜
25
设置文本格式
字符格式
• 文字样式
“文本”/“样式”命令
26
设置文本格式
段落格式
• 段落的对齐方式
• 段落缩进
27
图形的插入
HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 <img src=“图像文件存放位置/图像文件名.扩展名”>
28
认识图形格式
GIF 可用颜色数 16777216 JPEG 16777216 16777216 有损 否 否 否 PNG 4294967296 256-4294967296 无损 Alpha通道 Alpha通道 否 （图形交换格式）（联合图像专家组）（可移植网络图形） 每幅图像的颜色 256 压缩 无损 透明 半透明 动画 单色 否 是
调整图像大小
直接拖拽来改变图片的大小 大图像不能通过减小该图像尺寸以达到减少 其文件大小和下载时间的目的。
重新取样图片
33
编辑图像
添加图像的说明文字
剪裁图像
34
编辑图像
调整图像的亮度和对比度
锐化图像
修正模糊的图像，增加图像清晰度或锐度
35
编辑图像
对齐图像
将图像与同一行中的文本、另一个图像、 插件或其它元素按给定的方式对齐。
13
设置页面属性
“修改”/“页面 属性”命令
“外观”选项 设置页面字体、大小、 文本颜色、背景色或 背景图像、页面边距
14
应用图像作网页背景
选择平铺效果具有整体感的图像作背景
15
设置页面属性
设置链接文本的字体、 大小、链接颜色、下 划线样式。
设置标题文本的字 体、大小和颜色
16
设置页面属性
设置网页的标题和编码
• 注释
“插入”/“注释”
20
页面中使用文本
添加项目列表和编号列表
设置多级列表
21
设置文本格式
字符格式
在属性面板上可设置文本的标题、字体、大小、颜色、 加粗、倾斜等属性。
• 文本标题
22
设置文本格式
字符格式
• 字体
23
设置文本格式
字符格式
• 文字大小
24
设置文本格式
字符格式
• 文字颜色
设置跟踪图像
在网页中将原来的平面设计稿 作为辅助的背景, 方便用户定 位文字、图像、表格、层等网 页元素在该页面中的位置。
17
页面中使用文本
创建文字内容
• 直接输入
• 从其它文本素材中粘贴 “复制” /“粘贴” “复制”/ “选择性粘贴” “文件”/“导入”插入word和 Excel文档
18
页面中使用文本
29
GIF格式图像举例
2cm×2cm 2K
4cm×3.6cm 8K
GIF（Graphics Interchange GIF Format）是作为一个跨平台图形 标准而开发的、与硬件无关的8 位彩色图形格式，也是在因特网 上使用最早、应用最广泛的图像 格式，包含87A和89A两种格式。
5cm×14cm 47K 256色的调色板 导致色滩出现， 色彩层次感差。 30
插入特殊文本元素
• 换行符
“插入”/“HTML”/“特殊字符”/“换行符”命令
文本将被强制移动到下一行继续显示 • 水平线
“插入”/“HTML”/“水平线”
19
页面中使用文本
插入特殊文本元素
• 特殊符号
“插入”/ “HTML”/“特殊字符”
• 段落缩进空格
“插入”/ “HTML”/“特 殊字符”/“不换行空格”
图像的边距
36
图像的几种对齐方式
顶端
底部
居中
左对齐
右对齐
37
图片不能正常显示问题
原因1：图片没有保存到网站中 原因2：图片保存到网站中，但保存的路径不正确。 网页中的图像、动画等素材都有自己固定的存放位置，网 页只是通过路径使用HTML语言来调用它们，然后把它们显 示在网页中。 网页中的路径有相对路径和绝对路径，在应该使用相对路 径的地方使用了绝对路径，或相对路径的引用不正确都会导 致浏览器无法在指定的位置打开指定的文件，使素材不能正 常显示。
• 定义书签 • 创建超链接
43
图像映射
图像映射是另一种形式的超链接，允许将不同的URL指 定给一幅图像的不同部分，使访问者根据不同的图像区 域跳转到不同的位置，这些区域称做“热点”，每一个热 热点 点与一个超链接相对应。
44
上机练习
１．创建“天堂鸟”网站，网站结构如图所示
主页 index.html
• 输入站点名称 • 不使用服务器技术 • 确定站点路径 • 无远端服务器
11
创建/导入站点
可管理当 前站点
12
管理站点
使用“文件”面板可对当前站点中的所有文件和文件夹 进行新建、复制、删除、重命名等操作 单击 “展开/折叠”按钮，把“文件”面板展开为一个 独立的编辑窗口 使用站点地图创建和查看网站结构
三毛其人 sanmao.html
人生旅途 lutu.html
作品介绍 zuopin.html
我的感受 ganshou.html
45
上机练习
２．创建站点的导航结构
46
上机练习
３．制作index.html网页
47
上机练习
４．制作sanmao.html网页
48
低压缩比 8cm×6cm 116K
高压缩比 15cm×20cm 43K 31
插入图像
执行“插入”/“图像” 菜单命令，或在“插 入”栏中选择“常用”栏中“图像”按钮
相对路径
先保存网 页文件 32
编辑图像
在“图像”面板上可设置图像属性 。
图像名称
为图像文件命名，可被Javascript和其它软件识别
的网站开发工具 用于对Web站点、Web页和 Web应用程序进行设计、 编码和开发 Dreamweaver 、Flash和Fireworks并称为“网页面，学习简单，操作快捷 支持多种浏览器，并可选择主要针对的浏览器 可以简便生成CSS、层、Javascript网页特效 强大的网站管理功能 丰富的媒体支持，可方便的加入Java，Flash， ShockWave，ActiveX及其它媒体插件 Dreamweaver与Flash、 Fireworks等密切配合， 提供了Web制作最完善的一套整体解决方案
绝对路径与相对路径(3)
例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/wm.gif 相对路径：<img src=“../../img/images/wm.gif”> 把绝对路径转化为相对路径的时候，两个文件绝对路径 中相同的部分忽略,只考虑他们不同之处。 为了避免在制作网页时出现路径错误，可以使用 Frontpage或dreamweaver的站点管理功能来管理站点。 站点中的网页保存时将把图片保存到站点中并自动把绝对 路径转化为相对路径，并且在站点中移动文件的时候，与 这些文件关联的连接路径都会自动更改。
……
9
例-创建“园林建筑艺术”网站
园林建筑艺术 index.htm
园林的定义 dingyi.htm
园林的特点 tedian.htm
皇家园林—颐和园 yiheyuan.htm
私家园林—拙政园 zhuozhengyuan.htm
私家园林图片 tupian.htm
10
导入/创建站点
执行“站点”/“新建站点”命令， 打开“站点定义”窗口
通用的方法：
先新建一个文件夹（如“某某的网站”） 直接制作每一个网页文件，然后把所有的网页文件保存 在“某某的网站”的相应的子文件夹中 插入的图片或其他素材文件要事先复制到相应的子文件 夹中 ……
7
网站创建的基本方法-例
8
网站创建的基本方法
常用的方法：
新建一个文件夹,将此文件夹定义为Dreamweaver站点 在“文件”面板中创建网页文件和素材文件夹 在“站点地图”中创建网站结构 打开相应的网页，进行具体网页的编辑工作
38
绝对路径与相对路径(1)
绝对路径：文件在硬盘上的真正路径
D:/myweb/wuming.html D:/myweb/images/wm.gif 如果在wuming.html网页中 插入wm.gif图片，使用绝对 <img src="D:/myweb/images/wm.gif"> 路径，那么在本地电脑中将一切正常，但将其拿到另一台机 器上或传到网站服务器上后，就会出错，因为要到当前机器 的D:/myweb/images路径下找wm.gif文件。
JPEG格式图像举例
JPEG格式（简称JPG）是一种流行的图像文件压缩格 JPEG JPG 式，通常，JPEG可将图像文件的长度缩短成原来的50% 到2%不等。在保证对图像质量的前提下，获得较高的压 缩比。摄影图像通常采用JPEG格式存储和显示，大多数 数字相机拍摄的图像都经过了JPEG压缩处理。
39
绝对路径与相对路径(2)
相对路径：当前网页相对目标文件的位置
/ 根目录 ../ 上一级 ../../ 上两级 例1：D:/myweb/wuming.html D:/myweb/images/wm.gif 相对路径：<img src=“images/wm.gif”> 例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif 相对路径： <img src=“../img/wm.gif”>
4
认识Dreamweaver界面
插入栏
文档工具栏
文档窗口
文件 面板 面 板 组
标签选择器 属性面板
5
“所见即所得”的网页编辑环境
设计：“所见即所得”的编辑环境 设计 代码：直接修改HTML代码 代码 拆分：“文档”窗口的一部分中显 拆分 示“代码”视图，另一部分中显示 “设计”视图。
6
网站创建的基本方法
41
建立超链接
超链接的实现方法：将某个文本串或某幅图像和其他 网页的地址（URL）联系在一起。 <a href =“网页地址/网页文件名.html”> 单击此处 </a> 可获得某某信息 URL链接 本地机器中网页文件 同一个网页文件中（书签）
42
建立超链接
URL链接 本地机器中网页文件 同一个网页文件中（书签）
网页设计与制作
Dreamweaver 8 网页制作与网站管理-1
内容提要
Dreamweaver介绍 网站创建的基本方法 站点的创建和管理 页面中使用文本 页面中使用图像 创建超链接
2
Dreamweaver介绍
Dreamweaver 是Macromedia公司开发的“所见即所得”
•加粗、倾斜
25
设置文本格式
字符格式
• 文字样式
“文本”/“样式”命令
26
设置文本格式
段落格式
• 段落的对齐方式
• 段落缩进
27
图形的插入
HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 <img src=“图像文件存放位置/图像文件名.扩展名”>
28
认识图形格式
GIF 可用颜色数 16777216 JPEG 16777216 16777216 有损 否 否 否 PNG 4294967296 256-4294967296 无损 Alpha通道 Alpha通道 否 （图形交换格式）（联合图像专家组）（可移植网络图形） 每幅图像的颜色 256 压缩 无损 透明 半透明 动画 单色 否 是
调整图像大小
直接拖拽来改变图片的大小 大图像不能通过减小该图像尺寸以达到减少 其文件大小和下载时间的目的。
重新取样图片
33
编辑图像
添加图像的说明文字
剪裁图像
34
编辑图像
调整图像的亮度和对比度
锐化图像
修正模糊的图像，增加图像清晰度或锐度
35
编辑图像
对齐图像
将图像与同一行中的文本、另一个图像、 插件或其它元素按给定的方式对齐。
13
设置页面属性
“修改”/“页面 属性”命令
“外观”选项 设置页面字体、大小、 文本颜色、背景色或 背景图像、页面边距
14
应用图像作网页背景
选择平铺效果具有整体感的图像作背景
15
设置页面属性
设置链接文本的字体、 大小、链接颜色、下 划线样式。
设置标题文本的字 体、大小和颜色
16
设置页面属性
设置网页的标题和编码
• 注释
“插入”/“注释”
20
页面中使用文本
添加项目列表和编号列表
设置多级列表
21
设置文本格式
字符格式
在属性面板上可设置文本的标题、字体、大小、颜色、 加粗、倾斜等属性。
• 文本标题
22
设置文本格式
字符格式
• 字体
23
设置文本格式
字符格式
• 文字大小
24
设置文本格式
字符格式
• 文字颜色
设置跟踪图像
在网页中将原来的平面设计稿 作为辅助的背景, 方便用户定 位文字、图像、表格、层等网 页元素在该页面中的位置。
17
页面中使用文本
创建文字内容
• 直接输入
• 从其它文本素材中粘贴 “复制” /“粘贴” “复制”/ “选择性粘贴” “文件”/“导入”插入word和 Excel文档
18
页面中使用文本
29
GIF格式图像举例
2cm×2cm 2K
4cm×3.6cm 8K
GIF（Graphics Interchange GIF Format）是作为一个跨平台图形 标准而开发的、与硬件无关的8 位彩色图形格式，也是在因特网 上使用最早、应用最广泛的图像 格式，包含87A和89A两种格式。
5cm×14cm 47K 256色的调色板 导致色滩出现， 色彩层次感差。 30
插入特殊文本元素
• 换行符
“插入”/“HTML”/“特殊字符”/“换行符”命令
文本将被强制移动到下一行继续显示 • 水平线
“插入”/“HTML”/“水平线”
19
页面中使用文本
插入特殊文本元素
• 特殊符号
“插入”/ “HTML”/“特殊字符”
• 段落缩进空格
“插入”/ “HTML”/“特 殊字符”/“不换行空格”
图像的边距
36
图像的几种对齐方式
顶端
底部
居中
左对齐
右对齐
37
图片不能正常显示问题
原因1：图片没有保存到网站中 原因2：图片保存到网站中，但保存的路径不正确。 网页中的图像、动画等素材都有自己固定的存放位置，网 页只是通过路径使用HTML语言来调用它们，然后把它们显 示在网页中。 网页中的路径有相对路径和绝对路径，在应该使用相对路 径的地方使用了绝对路径，或相对路径的引用不正确都会导 致浏览器无法在指定的位置打开指定的文件，使素材不能正 常显示。
• 定义书签 • 创建超链接
43
图像映射
图像映射是另一种形式的超链接，允许将不同的URL指 定给一幅图像的不同部分，使访问者根据不同的图像区 域跳转到不同的位置，这些区域称做“热点”，每一个热 热点 点与一个超链接相对应。
44
上机练习
１．创建“天堂鸟”网站，网站结构如图所示
主页 index.html
• 输入站点名称 • 不使用服务器技术 • 确定站点路径 • 无远端服务器
11
创建/导入站点
可管理当 前站点
12
管理站点
使用“文件”面板可对当前站点中的所有文件和文件夹 进行新建、复制、删除、重命名等操作 单击 “展开/折叠”按钮，把“文件”面板展开为一个 独立的编辑窗口 使用站点地图创建和查看网站结构
三毛其人 sanmao.html
人生旅途 lutu.html
作品介绍 zuopin.html
我的感受 ganshou.html
45
上机练习
２．创建站点的导航结构
46
上机练习
３．制作index.html网页
47
上机练习
４．制作sanmao.html网页
48
低压缩比 8cm×6cm 116K
高压缩比 15cm×20cm 43K 31
插入图像
执行“插入”/“图像” 菜单命令，或在“插 入”栏中选择“常用”栏中“图像”按钮
相对路径
先保存网 页文件 32
编辑图像
在“图像”面板上可设置图像属性 。
图像名称
为图像文件命名，可被Javascript和其它软件识别
的网站开发工具 用于对Web站点、Web页和 Web应用程序进行设计、 编码和开发 Dreamweaver 、Flash和Fireworks并称为“网页面，学习简单，操作快捷 支持多种浏览器，并可选择主要针对的浏览器 可以简便生成CSS、层、Javascript网页特效 强大的网站管理功能 丰富的媒体支持，可方便的加入Java，Flash， ShockWave，ActiveX及其它媒体插件 Dreamweaver与Flash、 Fireworks等密切配合， 提供了Web制作最完善的一套整体解决方案