4.5 网页制作 本节概述 本节的学习目标 主要内容.

Presentation on theme: "4.5 网页制作 本节概述 本节的学习目标 主要内容."— Presentation transcript:

1 4.5 网页制作 本节概述 本节的学习目标 主要内容

2 本节概述 学时：理论教学2学时， 上机实验2学时 内容： Dreamweaver概述 Dreamweaver网页制作及发布

3 本节的学习目标 掌握网页文件的主要类型 掌握站点的定义及站点的创建方法 掌握向网页中添加文本、图像、声音和视频的方法
掌握网页中常用超链接创建的方法 掌握用表格布局页面的方法 掌握用框架布局页面的方法 理解网页发布

4 主要内容 网页设计基础 网页中各种对象的添加 页面布局 网页发布

5 网页设计基础 文件类型 在 Dreamweaver 中可以使用多种文件类型。主要文件类型是 HTML 文件（或超文本标记语言文件），包含基于标签的语言，负责在浏览器中显示 Web 页面。可以使用 .html 或 .htm 扩展名保存 HTML 文件。

6 窗口布局

7 创建站点 站点定义 创建本地站点 设置站点属性 使用“站点 ” →“新建站点”命令
创建了本地站点之后，可以随时通过“站点” → “站点管理”命令对站点的属性进行设置和修改。

8 页面属性设置 设置“页面属性”是开始制作网页前一道必不可少的工序。可以通过“修改”菜单→“页面属性”命令，打开“页面属性”对话框。
1. “页面属性”之外观 可以修改指定页面的默认字体、字色、字的大小、背景颜色和背景图片等。

9 页面属性设置 2. “页面属性”之链接 可以修改指定页面的默认链接样式。 第9页

10 主要内容 网页设计基础 网页中各种对象的添加 页面布局 网页发布

11 ⒈ 文本 编辑文本格式 (通过“属性面板”进行编辑) 第11页

12 ⒈ 文本 修改字体 第12页

13 ⒈ 文本 文本换行 按 Enter 键换行的行距较大，按 Enter＋Shift 键换行的行间距较小。 Enter 键换行
⒈ 文本 文本换行 按 Enter 键换行的行距较大，按 Enter＋Shift 键换行的行间距较小。 Enter 键换行 Enter＋Shift 键换行 第13页

14 ⒈ 文本 文本空格 第14页

15 ⒈ 文本 特殊字符 第15页

16 ⒈ 文本 插入列表 无序列表 有序列表 第16页

17 ⒈ 文本 插入时间 第17页

18 ⒉ 图像 在网页中插入图像 设置图像属性 创建鼠标经过图像

19 在网页中插入图像 有两种方法： “插入”菜单→ “图像” 插入面板“常用”选项→ “图像”

20 设置图像属性 单击要调整属性的图像后，在属性面板中显示出了图像的属性

21 创建鼠标经过图像 “插入” →“图像对象” →“鼠标经过图像”

22 ⒊ 声音和视频 链接声音和视频： 选中对象。 单击“属性”面板中“链接”后浏览文件按钮。 在弹出的对话框中选择一个声音或视频文件 。

23 ⒊ 声音和视频 嵌入声音和视频: 定位→“插入” →“媒体” →“插件” 第23页

24 ⒋超链接 创建网页之间的链接 创建到网页中任意位置的链接

25 创建网页之间的链接 使用“插入”菜单创建 “链接” 使用“属性面板”创建 “链接” “目标”：
_blank 将链接的文档载入一个新的、未命名的浏览器窗口。 _parent 将链接的文档加载到该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档加载到整个浏览器窗口。 _self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。 _top 将链接的文档载入整个浏览器窗口，从而删除所有框架。

26 创建到网页中任意位置的链接 创建命名锚记： 链接到命名锚记

27 主要内容 网页设计基础 网页中各种对象的添加 页面布局 网页发布

28 页面布局 一个典型的网页页面布局图

29 ⒈ 表格 插入表格 选择“插入” →“表格”命令，进行表格的行数、列数及表格宽度等相关属性的设置，然后单击“确定”即完成表格的插入。 设置表格属性

30 一个用表格布局网页的实例

31 ⒉ 框架 框架集 框架 框架集是框架的集合，也是 HTML 文件，它定义一组框架的布局和属性。
框架是一个非常重要的页面布局工具。它可以把浏览器的窗口分割成若干相互独立又有联系的区域，在每个区域中显示一个独立的网页文件。框架由框架集和框架组成。

32 ⒉ 框架 创建框架集 或 第32页

33 ⒉ 框架 在文档窗口中选择框架或框架集 在框架面板中选择框架或框架集 要选择框架，可在“设计”视图中按住Alt键的同时单击框架内部。
要选择框架集，可在“设计”视图中单击框架集的内部框架边框。 在框架面板中选择框架或框架集 第33页

34 ⒉ 框架 在框架中打开文档 第34页

35 ⒉ 框架 保存框架和框集 第35页

36 一个用框架布局网页的实例 框架可以将浏览器显示窗口分割成几个小窗口，每个小窗口可以独立显示不同的网页。

37 主要内容 网页设计基础 网页中各种对象的添加 页面布局 网页发布

38 4.5.4 网页发布 将站点中的所有文件和文件夹上传到Web服务器的过程，叫做网页的发布。
网页发布 将站点中的所有文件和文件夹上传到Web服务器的过程，叫做网页的发布。 制作好的站点最终目的是将其上传到Internet服务器上，让Internet上的浏览者能够访问制作好的站点。现在上传的工具很多，可以采用Dreamweaver自带的站点管理上传，也可以采用专门的FTP软件上传。

39 服务器空间和域名 完整的站点必须拥有完整的域名和空间。只有拥有域名与空间的站点才能正确上传到Internet服务器上。
站点空间有收费和免费两类，它们都是由空间服务商提供的。 域名是在Internet上用于解决IP地址对应的一种方法。

40 发布站点 有两种方法： 使用Dreamweaver发布 使用上传软件 “站点”→“管理站点”→“新建”→“站点”
如CuteFtp.exe 、网络传神等软件。

41 利用Dreamweaver 发布站点 设置Web服务器的远程站点 发布站点 单击“文件”面板中的“上传”按钮，即可上传整个站点。