HTML静态网页的制作 ppt课件

ppt课件
4
1.启动Dreamweaver程序
2. 在“开始”菜单的“所有程序”中找到“Adobe Dreamweaver CS3”，并单击该命令。Dreamweaver将立即启动， 在“文档”窗口内将打开一个空白文档，如下图所示。
ppt课件
5
2. Dreamweaver的用户界面
Dreamweaver由页面编辑器和站点管理器两大部分组成。 下图所示的是Dreamweaver的页面编辑器，包括页面编辑窗口 和各种浮动面板。
ppt课件
13
ppt课件
14
② 按 Ctrl+S 键 保 存 网 页 。 第 一 次 创 建 的 网 页 可 以 作 为 首 页 index.htm文件保存，随后该首页将得到进一步的扩充和完善。
注意：书中所提到的“保存网页”都是指将网页保存到本地站点 下。
(2) 将第一行“计算机工程系”作为网页的标题文字，操作步骤 如下： ① 选中“计算机工程系”，打开属性面板，如下图所示；
第2章 静态网页的制作
Web编程实用技术教程
ppt课件
1
学习目标
了解网页制作工具（Dreamweaver、Flash）的简 单使用方法，用之制作静态网页； 学会将Dreamweaver作为开发Web程序的平台； 掌握超级链接的创建； 学会利用表格和框架进行网页布局； 学会使用HTML和XML语言编制网页。
ppt课件
2
目录
2.1 常用的网页制作工具
2.2 制作第一个简单网页
2.3 超文本和超图像链接
2.4 网页制作中的Flash动画
Fra Baidu bibliotek
2.5 利用表格和框架制作网页
2.6 HTML与XML标识语言
ppt课件
3
2.1 常用的网页制作工具 Dreamweaver
Dreamweaver是一套专业化的网页创作工具，它采用“所 见即所得”的可视化编辑方式，能够快速高效地创建各种具 有专业水平的网页，不需要编写任何代码。如果需要在代码 界面进行工作，只需进入HTML代码窗口或源代码检视器中， 就能同步看到Dreamweaver生成的源代码。它支持最新的 DHTML、CSS标准及分层技术，具有极好的兼容性，适用于 各种平台和各种浏览器。
16
① 打开“编辑字体列表”对话框，执行下列操作之一： • 在属性面板上单击字体按钮 ，打开字体下拉列表，选 择“编辑字体列表”选项，如下图所示；
• 在菜单栏中选择“文本”｜“字体”｜“编辑字体列表”
命令。
ppt课件
17
② 在“编辑字体列表”对话框（如下图所示）中进行如下操 作：
ppt课件
18
② 在“编辑字体列表”对话框中进行如下操作：
• 先在“字体列表”框中选定“在以下列表中添加字体”项；
• 窗口设置框：设置显示窗口的大小，单击设置区右侧的小按钮， 在打开的菜单中，可以根据显示器屏幕的分辨率选择不同的显示 尺寸。
• 下载指示器：显示当前网页的文件量大小，以及网页被下载所需
要的时间，单位是*k/*秒。 ppt课件
9
(2) 浮动面板：
页面编辑器中有2个常用的浮动面板：插入面板、属性面 板，以及放置其他面板的浮动面板集。
• 浮动面板是Dreamweaver的一大特色。利用浮动面板对网页 进行属性设计，在页面编辑窗口中可以直接看到操作结果， 真正实现了“所见即所得”的编辑功能。
• 浮动面板集也是Dreamweaver的一大特色。设计者可以按自
已的需要任意组合或拆分浮动面板集中的各种面板，也可以
用鼠标拖拽浮动面板的标题栏来移动浮动面板，用鼠标拖拽
浮动面板的边框来改变浮动面板的大小。
ppt课件
10
(3) 站点管理器： 站点管理器主要用于管理站点内的文件和目录，可对站
点内的文件进行改名、编辑和删除等基本操作，并可检验对 象的链接情况，自动修改其他页面指向这个对象的链接。利 用模板和库，可以使站点内的部分页面应用相同的模板和库， 从而使多个页面具有相同的风格，并且可以快速进行统一更 新。管理器还自带FTP功能，能完成站点内文件的上传和下载， 进行站点的发布和远程管理。
ppt课件
6
(1) 页面编辑窗口：
页面编辑窗口由标题栏、菜单栏、工具栏、文档编辑区和 状态栏等基本部分组成，各部分的功能如下： ① 标题栏：显示当前页面的标题，括号中显示对应文档的路径 和文件名。 ② 菜单栏：包含所有的操作命令。Dreamweaver共有10个系统 菜单，分别为文件、编辑、查看、插入记录、修改、文本、命 令、站点、窗口、帮助。单击系统菜单，打开对应的下拉菜单， 可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上
ppt课件
15
② 在“格式”下拉选项中选择最大标题“标题1” 以设置标题 样式；
③ 单击 按钮将字体变粗，单击按钮将文字居中显示。 (3) 接着，设置中文字体。
在属性面板上单击字体按钮 ，打开字体下拉列表，选择想 设置的字体。如果字体下拉列表中没有想设置的字体，如何添 加中文字体呢？操作如下：
ppt课件
ppt课件
8
⑤ 状态栏：显示当前网页的有关信息。在状态栏中从左到右依次为 标签选择器、基本工具、窗口设置框和下载指示器。
• 标签选择器：编辑网页时，利用标签选择器可以显示和修改HTML 标签，单击标签按钮可以选择网页中相应的编辑对象。
• 基本工具：包括选取工具、手形工具、缩放工具和选择缩放比例 列表框。
ppt课件
11
2.2 制作第一个简单网页
制作一个浏览效果如下图所示的简单网页。
ppt课件
12
实现步骤如下： 首先启动Dreamweaver，打开前面所建立的本地站点，接着在页 面中插入各种基本的网页元素。 一、基本网页元素（文字、图像、水平线、日期和时间）的插入 1. 在页面中添加和处理文字 (1) 在页面中输入文字，操作步骤如下： ① 在页面编辑区中，按照页面的设计内容输入文字，各段文本 的末尾按回车键，如下图所示；
都有菜单操作命令与之相对应。
ppt课件
7
③ 工具栏：放置常用工具。如：左边第一个按钮用 于切换到HTML代码窗口，第二个按钮切换到HTML代 码视图和页面设计视图双状态同步窗口，第三个按 钮则切换到页面编辑窗口。
④ 文档编辑区：编辑网页的区域。Dreamweaver启动 后，自动创建一个空白的网页文档等待编辑。