第5章-网页制作基础
主要内容
概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
2
5.1 概述
站点 具有相关主题的网页有机地整合在一起，集中
进行管理，构成一个整体，这就是站点。 超文本标记语言HTML
有文档的文件夹） • 网页设计、制作 • 网页文档复制到服务器中
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
14
5.2.1 网站设计
设计网站的基本步骤
对站点进行规划。
例如：旅游天地
•确定站点的主题和风格，明确建立站点的目的。
•收集素材。
•合理规划站点结构。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
生成相应的页面。 • 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾
标签，用“<”和“>”括起来，与被标注的内容 区分开来。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
9
5.1.2 HTML简介
文件的开始 头部
文件体 文件的结束
网页标题 图片
段落
Rwjg> xltj.ht ml
属性检查器★
通过菜单 查看>工具栏>XXX 来显示或隐藏某个工具栏，通过菜单 窗口>XXX 来显示或隐藏某个面板组或属性面板。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
8
5.1.2 HTML简介
HTML(HyperText Mackup Language 超文本 标记 语言)
• 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释
《大学计算机信息科技教程（第二版）》——第5章 网页制作
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
18
5.2.2 定义本地站点
修改站点的设置信息
“站点”/“管理站点” －“编辑”
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
19
5.2.2 定义本地站点
站点中的每个网页的内容都要使用一种标准的 语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 •Microsoft Office中的FrontPage •Macromedia公司的Dreamweaver
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
3
5.1.1 Dreamweaver简述
</ table >
</body>
</html>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
12
5.2 设计站点
网站设计 定义本地站点 管理站点资源（使用文件面板）
新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl＋拖曳） 删除、重命名（Del、两次单击） 导入（复制/粘贴）
到另一台电脑上
选中站点，单击“导出”按钮，将站点导出为包 含站点设置的 XML 文件，其文件扩展名为.ste。 根文 以后单击“导入”按钮，可以导入该文件，并成 件夹 为站点（注意选择站点根文件夹）。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
21
5.2.3 管理站点资源
定义了本地站点后，在本地计算机中建立了一个用于存放 站点中的文档的文件夹。初始状态下，该文件夹是一个空 文件夹，在此文件夹中可以进行新建文件夹、新建文件、 复制文件、移动文件、删除文件、重命名文件等操作。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
10
5.1.2 HTML简介
<html>和</html>标签标志了文件的开始和结束， 分成两部分：
• 第一部分叫作头部 以<head>和</head>标签标志开始和结束 其中<title>和</title>标签用于定义网页的标题
• 第二部分是文件体 以<body>和</body>标签标志开始和结束 包含对浏览器中显示的内容的具体描述 <p>和</p>标签标志一个段落，之间的文本将显示在浏览器中； <font>和</font>标签控制文本的字体、大小、颜色等； <div>和</div>标签用于排版段落的格式； <img>标签用于插入图片，没有结束标签，通常后面带有属性，
表示图片文件的存储路径、对齐、以及大小。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
11
<html>
<head>
<title>
①
…….
</title>
</head>
<body> <p> …….
</p>
②
<font>和</font> <div>和</div> <img>
<table> <tr> <td> ……. </ td> </ tr>
启动Dreamweaver 后，显示起始页。在 起始页中可以打开最 近使用过的网页，快 速地创建新的网页。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
7
5.1.1 Dreamweaver简述
打开或者创建网页后的操作界面
“插入”
工具栏★
“文档” 工具栏
面板组★
“标准” 工具栏
文档窗口
打开站点
选定站点，单击“完成”按钮
同一时刻只能打开一个站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
20
5.2.2 定义本地站点
建立多个站点
“新建”按钮：再建立另一个站点
复制站点
“复制”按钮：建立一个与选定站点相同的站点
删除站点
“删除”按钮：删除选定站点
导出、导入站点
将导出的
.根st文e文件件夹单和一站击起点复…的制
打开、保存和预览网页
打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
13
5.2.1 网站设计
网站：多个主题相关的网页按一定的组织结构、 以超链接方式连接在一起，形成一个整体。 网站主页：获取网站的信息的起点。 建立网站： • 在本地硬盘建立一个本地站点（存放网站的所
15
5.2.1 网站设计
创建站点的基本结构。 在本地站点中建立若干 个文件夹，用于存放各 类文档，必要时还可以 建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发 布到服务器。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
16
5.2.2 定义本地站点
新建站点
“站点”/“新建站点”
