第03章 创建简单的网页及其相关操作
合集下载
第3章 使用Dreamweaver创建简单网页
Dreamweaver 工作界面
Dreamweaver 的各种面板
• Dreamweaver 的面板包括：
– 插入面板：所包含的按钮在“插入”菜单中可以找到。
网页编辑时，通过单击按钮，可以快速、方便地在网页
中插入相应的对象 (元素) ，如图像、表格、层、框架等 – 浮动面板：可以用来控制网站结构、网页代码及内容格
插入表格
• 创建表格的步骤如下：
– 在文档窗口中将光标放置在文档中要插入表格的地方
– 执行菜单“插入”-“表格”命令
– 在“表格”对话框中设置表格的样式 – 单击“确定”按钮完成表格的设置
表格的基本操作
• 对表格进行操作，首先应将光标定位于要选择的表
格中。在表格中任一位置单击后，表格的上方或下
方将出现一个绿色的指示图，通过这个指示图，我
• 安装后，第一次运行Dreamweaver MX 2004，会出
现选择工作区布局对话框
– “设计者”工作区是一个集成工作区，其中全部窗口和
面板被集成在一个更大的应用程序窗口中，并将面板组 停靠在右侧，这种布局适合于初学者和刚入门、对网页
代码不甚了解的网页设计人员。系统默认“设计者”布
局 – “代码编写者”工作区是同样的集成工作区，但是将面 板组停靠在左侧，而且主窗口在默认情况下显示网页代 码。这个布局是为了方便高级网页设计人员编写代码
式。包括设计、代码、应用程序、标签、文件等面板
– 属性面板：集中了“修改”和“文本”菜单的部分选项 功能,显示了在文档窗口中所选中元素的属性。通过属性 面板可以直观地设置、修改元素的属性参数
3.2 站点管理
• 制作网页的根本目的是为了设计一个完整的网站。
因此，在用Dreamweaver开始制作网页之前，要先
第3章 用Dreamweaver CS4创建基本网页
网页设计与制作教程
(第4版）
机械工业出版社同名教材 配套电子教案
第3章 用Dreamweaver CS4创建基本网页
一 Dreamweaver CS4入门 二 制作简单网页 三 制作图文并茂网页 四 网页结构语言XHTML 五 实训
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动
插入面板
文档工具栏
文档窗口 组合面板
属性面板
图3-3 Dreamweaver CS4的主工作区
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速 切换：代码视图、设计视图、和拆分视图。文档工具栏中还包 含一些与查看文档、在本地和远程站点间传输文档有关的常用 命令和选项，如图3-4所示。
显示代码视图 显示代码视图和设计视图 显示设计视图 文件管理 可视化助理 验证标记
显示实时视图
文档标题 刷新设计视图 在浏览器中预览/调试
检查浏览器兼容性
图3-4 文档工具栏的常用命令和选项
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应 用程序开发，相应的面板也是这样分类的。 ① 设计类面板组
3.2.3 页面属性设置
页面属性的设置包括页面的布局和格式设置。 1．设置网页标题
3.2 制作简单网页
3.2.3 页面属性设置 2．设置网页外观
3.2 制作简单网页
3.2.3 页面属性设置 3．设置网页链接
(第4版）
机械工业出版社同名教材 配套电子教案
第3章 用Dreamweaver CS4创建基本网页
一 Dreamweaver CS4入门 二 制作简单网页 三 制作图文并茂网页 四 网页结构语言XHTML 五 实训
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 1．Dreamweaver CS4的启动
插入面板
文档工具栏
文档窗口 组合面板
属性面板
图3-3 Dreamweaver CS4的主工作区
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （1）文档工具栏 文档工具栏中的按钮使用户可以在文档的不同视图间快速 切换：代码视图、设计视图、和拆分视图。文档工具栏中还包 含一些与查看文档、在本地和远程站点间传输文档有关的常用 命令和选项，如图3-4所示。
显示代码视图 显示代码视图和设计视图 显示设计视图 文件管理 可视化助理 验证标记
显示实时视图
文档标题 刷新设计视图 在浏览器中预览/调试
检查浏览器兼容性
图3-4 文档工具栏的常用命令和选项
3.1 Dreamweaver CS4入门
3.1.1 Dreamweaver CS4工作环境 （2）面板 Dreamweaver的三个重要功能分别是网页设计、代码编写和应 用程序开发，相应的面板也是这样分类的。 ① 设计类面板组
3.2.3 页面属性设置
页面属性的设置包括页面的布局和格式设置。 1．设置网页标题
3.2 制作简单网页
3.2.3 页面属性设置 2．设置网页外观
3.2 制作简单网页
3.2.3 页面属性设置 3．设置网页链接
第3章简单网页设计
图3.10 “属性”面板
3.2.2 设置文本特性
在Dreamweaver中设置文本特性包括文本的字体选择、大小设置、 颜色设置、字体样式设置，本书以“样本原文.html”所示的文字 为例分别说明。 具体的步骤如下。 步骤1：设置字体。在3.2.1中已经设置了标题“文本格式设置”， 本步骤选中正文的文本，在属性面板的“字体”下拉列表中选 择“默认”字体。如果要选择其它字体，可以通过“文本”菜 单的“字体/编辑字体列表”命令来选择，新增的字体将出现 “属性”面板的“字体”下拉列表中。 步骤2：设置字体大小。选中正文，在“属性”面板的“大小”下 拉列表中选择“14”，说明字体大小设置为14像素。在字体右面 的下拉列表中还可以选择字体大小的单位，可以是“像素”、 “厘米”、“英寸”、“点数”等。
图3.19 插入水平线
2. 修改水平线 要修改Dreamweaver文档窗口中插入的水平线，操作步骤如下。 步骤1：在Dreamweaver的文档窗口中选择要修改的水平线。 步骤2：在如图3.19所示的“属性”面板中进行相应水平线属 性的修改即可。
3.3.3 插入特殊字符
在我们制作文本网页的时候经常还会碰到键盘输入不了的特殊字符， 典型的如版权符号。因此，Dreamweaver MX 2004提供了插入特 殊字符的功能，具体操作如下。 步骤1：将光标定位在需要插入特殊字符的位置，如本例在正文文 本的最后另起一行，并选择居中对齐。 步骤2：在插入栏上选择“文本”标签，则出现常用文本对象的插 入按钮。 步骤3：单击 按钮，弹出特殊常用特殊字符的菜单，此时选择 “版权”命令，则插入了版权符号，再输入文字“网页制作与 实训编写组”。 步骤4：如果插入栏提供的特殊符号不能够满足需要，还可以单击 图3.22所示菜单的“其他字符”命令，弹出“插入其他字符”对 话框。在该对话框中设计者根据需要选择所需的特殊符号，然 后单击“确定”按钮，就会在光标定位处插入选中的特殊字符。
chapter3制作简单网页
太原师范学院计算机系胡正红
3.6 添加背景音乐
准备好音乐，后缀为.mid,.avi,.mp3； 新建文档，注意它与音乐文件的路径； 切换到代码窗口，添加如下标记： <embed src=“bgsound.mid”></embed>
保存文件并浏览，浏览器窗口出现一个播放控制 器； 如当作背景音乐，进行如下设置： <embed src=“bgsound.mid” hidden=true autostart=true loop=true></embed>
太原师范学院计算机系胡正红
3.2 设置文件头
文件头在浏览器中是不可见的，但包含网 页的重要信息：关键字、描述文字。 文件头还包括一些非常重要的功能，如自 动刷新。
太原师范学院计算机系胡正红
3.2.1 设置网页的编码 在设计视图下选择“查看”-“文件头内容” 命令； 默认有两个图标：文件头属性、标题属性 Dreamweaver CS3默认的新建文档的编码 是UTF-8； 将默认编码修改成GB2312，点击菜单“编 辑”→“首选参数”，然后在“新建文档” 中设置默认编码为“GB2312”； 查看文件头属性，可以点击文件头属性图 标；
3.5.1 插入Flash动画 新建文档，光标定位在插入动画的位置； 将“插入”工具栏切换到“常用”插入工 具栏，单击“媒体”的下接按钮，在其中 选择Flash命令； “选择文件”对话框中找到.swf文件，单 击“确定”。 选中Flash对象，在“属性”中进行设置； 保存文件并浏览。
太原师范学院计算机系胡正红
3.5.2 Flash文字的插入 光标定位，在“常用”工具栏中单击“媒 体”，在下拉列表中选择“Flash文本”； 打开对话框，在“文本”中输入内容，设 置文字的字体、大小、斜体等； 设置文字颜色，“颜色”设定正常状态下 的文本颜色，“转滚颜色”设定鼠标移到 Flash文字上的颜色； 在“链接”中可添加链接、链接目标； “背景色”设定Flash文本的背景色； “另存为”设定当前Flash文本的保存路径；
3.6 添加背景音乐
准备好音乐，后缀为.mid,.avi,.mp3； 新建文档，注意它与音乐文件的路径； 切换到代码窗口，添加如下标记： <embed src=“bgsound.mid”></embed>
保存文件并浏览，浏览器窗口出现一个播放控制 器； 如当作背景音乐，进行如下设置： <embed src=“bgsound.mid” hidden=true autostart=true loop=true></embed>
太原师范学院计算机系胡正红
3.2 设置文件头
文件头在浏览器中是不可见的，但包含网 页的重要信息：关键字、描述文字。 文件头还包括一些非常重要的功能，如自 动刷新。
太原师范学院计算机系胡正红
3.2.1 设置网页的编码 在设计视图下选择“查看”-“文件头内容” 命令； 默认有两个图标：文件头属性、标题属性 Dreamweaver CS3默认的新建文档的编码 是UTF-8； 将默认编码修改成GB2312，点击菜单“编 辑”→“首选参数”，然后在“新建文档” 中设置默认编码为“GB2312”； 查看文件头属性，可以点击文件头属性图 标；
3.5.1 插入Flash动画 新建文档，光标定位在插入动画的位置； 将“插入”工具栏切换到“常用”插入工 具栏，单击“媒体”的下接按钮，在其中 选择Flash命令； “选择文件”对话框中找到.swf文件，单 击“确定”。 选中Flash对象，在“属性”中进行设置； 保存文件并浏览。
太原师范学院计算机系胡正红
3.5.2 Flash文字的插入 光标定位，在“常用”工具栏中单击“媒 体”，在下拉列表中选择“Flash文本”； 打开对话框，在“文本”中输入内容，设 置文字的字体、大小、斜体等； 设置文字颜色，“颜色”设定正常状态下 的文本颜色，“转滚颜色”设定鼠标移到 Flash文字上的颜色； 在“链接”中可添加链接、链接目标； “背景色”设定Flash文本的背景色； “另存为”设定当前Flash文本的保存路径；
小学五年级信息技术学习制作简单的网页
小学五年级信息技术学习制作简单的网页在小学五年级的信息技术学习中，学生们将学习如何制作简单的网页。
通过掌握基本的HTML标记语言和网页设计原则，他们可以创造出具有一定交互性和美观性的网页。
下面将介绍制作简单网页的步骤和技巧。
一、准备工作1. 打开文本编辑器：在开始制作网页之前，学生需要打开一个文本编辑器，例如Windows平台上的记事本或者Mac平台上的文本编辑器等。
2. 保存文件：学生应该将文件保存在一个容易访问的地方，例如桌面或一个新建的文件夹中。
文件的后缀应为.html。
二、编写基本结构1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body></body></html>以上是一个基本的HTML结构。
其中，<!DOCTYPE html> 表示这是一个HTML5文件，<html>标签是HTML文档的根元素，<head>标签用于放置与网页相关的元数据，<meta charset="UTF-8">定义了网页的字符编码，<title>标签用于定义网页的标题，<body>标签包裹了网页的主要内容。
三、添加网页内容在<body>标签中，可以添加各种网页内容，例如文字、图片、链接等。
1. 文字<h1>欢迎来到我的网页</h1><p>这是我第一个制作的网页，非常兴奋！</p>使用<h1>标签可以定义一级标题，<p>标签可以定义段落。
学生可以根据需要添加更多的标题和段落内容。
2. 图片<img src="图片的URL或路径" alt="图片描述">使用<img>标签可以插入图片。
Dreamweaver 8 创建和编辑网页
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
2. 【页面属性】对话框
• 外观
【外观】选项卡
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
2. 【页面属性】对话框
• 链接
【链接】选项卡
网页设计与制作——《 Dreamweaver 8 教程》讲义
【文件】面板
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
1. 网页的基本属性
• 外观属性——指页面中文本的字体、字样、大小、颜 色、背景颜色和背景图像，以及页面边距的设置。 • 链接属性——指链接文本的字体、大小，链接文本的 颜色，鼠标指针指向链接文本时的颜色，已访问过的链 接文本的颜色，单击链接文本时的颜色，以及下画线的 样式。
1. 通过【打开】对话框打开文档
• 选择【文件】| 【打开】命令， 弹出【打开】对 话框，选择所需 的网页文档，单 击【打开】按钮。
【打开】对话框
网页设计与制作——《 Dreamweaver 8 教程》讲义
四、打开已有文档：
2. 通过【文件】面板打开文档
• 显示【文件】面板， 在面板左上方的【站 点】下拉列表框中选 择保存网页的站点、 服务器或驱动器，然 后在文件和文件夹列 表中双击所需网页文 档的图标。
三、网页的保存：
• 保存当前网页：选择【文件】|【保存】命令，弹出 【另存为】对话框，打开所需站点文件夹，在【文件夹】 文本框中输入网页名称，然后单击【保存】按钮。 • 保存已创建的所有页面：选择【文件】|【保存全部】 命令。
网页设计与制作——《 Dreamweaver 8 教程》讲义
第3章 制作一个简单网页
• 执行“插入” “媒体” “Flash”命令 执行“插入” 媒体” Flash” • 单击“属性面板”中的“播放”按钮，预 单击“属性面板”中的“播放” 览动画 • 在属性面板中设置高、宽及其边距 • 单击“参数”按钮，设置“wmode”为 单击“参数”按钮，设置“wmode” “trandparent” trandparent”
返回
超级链接相关知识
• 如果说互联网是一张网，那么超级链接是组成 这张网的线，没有超级链接，就根本不存在这 样的网。前面简单制作了两张网页，它们之间 还没有任何联系，要将它们连接起来，就要用 到超级链接，否则就无法实现网页的功能了。
返回
URL简介 URL简介
URL是Uniform Resoure Locator的缩写，中 文意思是“统一资源定位器”，指WWW网页 的地址。如 /pc/index.htm。
第3章 制作一个简单网页
网页中的文本、图像、媒体、链接
教学目标
• • • • • 掌握网页中文本、图像和媒体的插入 掌握网页中图像的布局、媒体属性的设置 掌握内部、外部和锚记链接的插入 掌握下载和邮件类链接的插入 了解相对路径和绝对路径的概念
教学重点
• • • • 空格的输入与编辑字体列表 用层布局网页中的图像 媒体属性的更改 各种链接的插入
第6课 使用文本和图像
• • • • • • 输入文本和空格 编辑字体列表 网页中直接插入图像（图6 和图6 12） 网页中直接插入图像（图6-9 和图6-12） 用层布局网页中的图像 制作鼠标经过图像 特殊符号的输入
输入文本和空格
• 定位光标 • 输入文本 （Enter和Shift+Enter) Enter和 • 插入空格
返回
制作鼠标经过图像
返回
超级链接相关知识
• 如果说互联网是一张网，那么超级链接是组成 这张网的线，没有超级链接，就根本不存在这 样的网。前面简单制作了两张网页，它们之间 还没有任何联系，要将它们连接起来，就要用 到超级链接，否则就无法实现网页的功能了。
返回
URL简介 URL简介
URL是Uniform Resoure Locator的缩写，中 文意思是“统一资源定位器”，指WWW网页 的地址。如 /pc/index.htm。
第3章 制作一个简单网页
网页中的文本、图像、媒体、链接
教学目标
• • • • • 掌握网页中文本、图像和媒体的插入 掌握网页中图像的布局、媒体属性的设置 掌握内部、外部和锚记链接的插入 掌握下载和邮件类链接的插入 了解相对路径和绝对路径的概念
教学重点
• • • • 空格的输入与编辑字体列表 用层布局网页中的图像 媒体属性的更改 各种链接的插入
第6课 使用文本和图像
• • • • • • 输入文本和空格 编辑字体列表 网页中直接插入图像（图6 和图6 12） 网页中直接插入图像（图6-9 和图6-12） 用层布局网页中的图像 制作鼠标经过图像 特殊符号的输入
输入文本和空格
• 定位光标 • 输入文本 （Enter和Shift+Enter) Enter和 • 插入空格
返回
制作鼠标经过图像
制作简单网页的方法
制作简单网页的方法引言如今，互联网已经成为了人们获取信息、交流、娱乐的重要途径之一。
制作一个自己的网页不仅可以展示自己的技能和个人特色，还可以实现一些个性化需求。
本文将介绍制作简单网页的方法，帮助读者快速入门，并且以markdown格式输出。
准备工作在开始制作网页之前，需要进行一些准备工作：1. 安装一个文本编辑器，如VS Code、Sublime等。
2. 学习HTML和CSS的基础知识，了解它们的语法和常用标签。
3. 确定网页的主题和内容，准备好相关的素材。
步骤一：创建HTML文件首先，在文本编辑器中创建一个以`.html`为后缀的文件，比如`index.html`。
在文件中输入以下内容作为基础结构：html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的网页</title></head><body></body></html>这段代码是一个最简单的HTML结构，用于定义一个HTML文档开始和结束的标记，并包含了`<head>`和`<body>`两个基本标签。
步骤二：填充网页内容在`<body>`标签中，可以添加各种HTML标签来填充网页内容。
比如，添加一个标题、段落和图片，代码如下：html<body><h1>欢迎来到我的网页</h1><p>这是我的第一个网页</p><img src="image.jpg" alt="我的照片"></body>这段代码将在网页中显示一个标题、一个段落和一张图片。
其中，`<h1>`标签用于定义一个大标题，`<p>`标签用于定义段落，`<img>`标签用于插入图片。
信息技术应用教案编写一个简单的网页
信息技术应用教案编写一个简单的网页教案一：网页制作初探教案目标：通过本节课的学习，学生将能够掌握网页制作的基本概念和技巧，能够编写一个简单的网页。
教案重点：1. 网页的基本结构和标签语法；2. 文本、图片和超链接的插入；3. 网页布局和样式的调整。
教案步骤：一、导入（5分钟）1. 引入话题：今天我们将学习如何制作一个简单的网页；2. 激发兴趣：你们平时使用的网页都是如何制作的呢？二、基础知识梳理（10分钟）1. 网页的基本结构：<!DOCTYPE html>、<html>、<head>、<body>等标签；2. 标签语法的基本规则：尖括号、标签名、属性和属性值的使用；3. 常用的文本标签及其功能：<h1>、<p>、<strong>等。
三、实践操作（30分钟）1. 创建一个网页文件：新建一个文本文件，将后缀名改为.html；2. 编写基本结构：根据基础知识，编写一个简单的网页结构；3. 插入文本和图片：使用相应的标签和属性，插入自定义的文本和图片；4. 添加超链接：在网页中创建跳转链接，实现页面间的跳转。
四、网页布局与样式（20分钟）1. 使用标签和属性调整布局：使用<div>等标签进行划分和布局；2. 设置样式：使用<style>标签或外部CSS文件，改变文本和图片的样式；3. 调整页面背景：添加背景图或纯色背景，美化页面效果。
五、总结与拓展（5分钟）1. 回顾本节课的内容：复习网页制作的基本概念、标签语法和技巧；2. 拓展思考：网页制作在现代社会中的重要性及应用领域。
教案评价：通过本节课的学习，学生将能够基于所学知识编写一个简单的网页，并掌握网页布局和样式调整的基本方法。
希望学生在实践中体验到网页制作的乐趣，并能在今后的学习和工作中灵活运用所学的知识。
第3章 制作第一个网页
• 不知道哪国的大师曾经说过“设计就是在原有的基础上加
以改良或整合形成自己的作品”，我喜欢这句话。当一个 优秀的设计师，你需要在这个过程中形成自己的思想，要 学会整理和收集。 整理的方法归类的方式有很多大家都是在不断的摸索中总 结自己的收集整理素材的方式，这样才适合你自己。如图 所示，是对素材整理后的效果。
• •
• （1）新建站点 • 在Dreamweaver中单击“站点”|“新建站点”命令，在弹出
的“站点设置对象”对话框中，输入站点名称为“站点1”、 设置“本地站点文件夹”的相应名称，单击“保存”按钮完 成，效果如图所示。
• （2）站点文件夹 • 在已经创建的“站点1”站点中可以创建多个“本地站点文件
• •
• •
3.3 准备素材
• 在制作网站时，准备好素材，是重要的一步。素材的质量，
严重影响着网站出来后的效果。在进行素材的处理时，它 的方法与技巧是至关重要的。因为处理不当，可能会使得 效果变成“画蛇添足”的境地。这也就意味着，其它内容 再怎样完美，但是整个网站在素材来说，存在着不可忽视 的缺限。
•
• 收集比素材整理还重要,建议你使用两种方法整理保存下来的
网页截图，首先如果是整站的截图，建议你先讲整站的截图 统一命名方便以后查找，然后按照颜色分类或按照类型分类。 如图所示，是对素材收集的保存效果。
3.3.3 编辑
• 在收集并整理了需要使用的网站素材后，对该素材内容根
据符合网站内容与否，以及是否可以使用等情况，进行相 应处理，然后进行一些适当编辑。比如，对图片的大小尺 寸进行调整等。总之，编辑的目的是要使得不合理的素材 内容，最终能被应用于网页。
框架指定标题，单击“确定”按钮完成，如图所示。
• （3）上述的设置完成以后，可得到如图所示的带有框架的页
以改良或整合形成自己的作品”，我喜欢这句话。当一个 优秀的设计师，你需要在这个过程中形成自己的思想，要 学会整理和收集。 整理的方法归类的方式有很多大家都是在不断的摸索中总 结自己的收集整理素材的方式，这样才适合你自己。如图 所示，是对素材整理后的效果。
• •
• （1）新建站点 • 在Dreamweaver中单击“站点”|“新建站点”命令，在弹出
的“站点设置对象”对话框中，输入站点名称为“站点1”、 设置“本地站点文件夹”的相应名称，单击“保存”按钮完 成，效果如图所示。
• （2）站点文件夹 • 在已经创建的“站点1”站点中可以创建多个“本地站点文件
• •
• •
3.3 准备素材
• 在制作网站时，准备好素材，是重要的一步。素材的质量，
严重影响着网站出来后的效果。在进行素材的处理时，它 的方法与技巧是至关重要的。因为处理不当，可能会使得 效果变成“画蛇添足”的境地。这也就意味着，其它内容 再怎样完美，但是整个网站在素材来说，存在着不可忽视 的缺限。
•
• 收集比素材整理还重要,建议你使用两种方法整理保存下来的
网页截图，首先如果是整站的截图，建议你先讲整站的截图 统一命名方便以后查找，然后按照颜色分类或按照类型分类。 如图所示，是对素材收集的保存效果。
3.3.3 编辑
• 在收集并整理了需要使用的网站素材后，对该素材内容根
据符合网站内容与否，以及是否可以使用等情况，进行相 应处理，然后进行一些适当编辑。比如，对图片的大小尺 寸进行调整等。总之，编辑的目的是要使得不合理的素材 内容，最终能被应用于网页。
框架指定标题，单击“确定”按钮完成，如图所示。
• （3）上述的设置完成以后，可得到如图所示的带有框架的页
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
SharePoint Designer2007实用教程 Designer2007实用教程
3.5.2 设置段落的对齐方式
段落共有3 段落共有3种对齐方式，分别是左对齐、居中和右对齐。要对某个段落设 置对齐方式，首先要选中该段落，然后直接单击工具栏中相应的按钮即可。这 些按钮包括【左对齐】按钮、【居中】按钮和【右对齐】 些按钮包括【左对齐】按钮、【居中】按钮和【右对齐】按钮 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.5.1 增加段落标志与换行
段落标志主要用于划分文本之间的段落，在文本中增加段落标志，相当 于在HTML语言中加入“<p>……<p>”段落标签。 于在HTML语言中加入“<p>……<p>”段落标签。 在文本中增加段落标志最简单的办法就是在输入完一段文本后，直接按 下Enter键进行分段。另外，在3.4.5节中介绍过的插入水平线操作，也可进行 Enter键进行分段。另外，在3.4.5节中介绍过的插入水平线操作，也可进行 分段。 换行操作曾在3.4.1节中介绍过，在输入文字的过程中，直接按下 换行操作曾在3.4.1节中介绍过，在输入文字的过程中，直接按下 Shift+Enter组合键，即可实现换行操作。另外，用户还可通过选择【插入】 Shift+Enter组合键，即可实现换行操作。另外，用户还可通过选择【插入】| 【HTML】|【换行符】命令，来实现换行操作 。 HTML】 换行符】
3.4.5 插入水平线
水平线主要用来分割文本的段落、页面修饰等。要插入水平线，用户可 先将光标定位在要插入水平线的位置，然后选择【插入】 HTML】 先将光标定位在要插入水平线的位置，然后选择【插入】|【HTML】|【水平 线】命令，如图3-62所示。插入水平线后，原本处于同一段落中的文字被一分 命令，如图3 62所示。插入水平线后，原本处于同一段落中的文字被一分 为二，效果如图3 63所示 为二，效果如图3-63所示 。
3.4.3 查找与替换文本
当网页中的文字比较多时，用户若想从中找到某个文字或词语，无异于 大海捞针。SharePoint 大海捞针。SharePoint Designer 2007提供了文本的查找与替换功能，以方便 2007提供了文本的查找与替换功能，以方便 用户查找与替换文字。 选择【编辑】 查找】命令，如图3 54所示，打开【查找和替换】 选择【编辑】|【查找】命令，如图3-54所示，打开【查找和替换】对话 框，如图3 55所示。在该对话框中，用户可设置查询参数，然后对网页进行特 框，如图3-55所示。在该对话框中，用户可设置查询参数，然后对网页进行特 定条件的查询 。
【布局表格】任务窗格
SharePoint Designer2007实用教程 Designer2007实用教程
3.3.2 编辑表格结构
表格布局应用后，并不一定会完全符合用户的要求，在实际的操作中， 还需要对其进行适度的调整，以满足网页设计的需求。对布局表格的调整包括 调整布局表格的大小、调整布局表格的行高和列宽等 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.4.2 编辑文本
文本输入完成后，还可对其进行进一步的编辑操作，以使文字能够更加 清晰的表达所要传达的信息 。
设置文字大小 设置文字颜色 使用【字体】 使用【字体】对话框
SharePoint Designer2007实用教程 Designer2007实用教程
SharePoint Designer2007实用教程 Designer2007实用教程 教学重点与难点
创建与保存网页 版面布局 输入与编辑文本 设置段落格式与网页属性 预览网页
SharePoint Designer2007实用教程 Designer2007实用教程
3.1 创建与保存网页
创建与保存网页是SharePoint 创建与保存网页是SharePoint Designer 2007的基本操作，对于 2007的基本操作，对于 SharePoint Designer 2007的初学者来说，在制作网页之前，首先应学会创建 2007的初学者来说，在制作网页之前，首先应学会创建 网页与保存网页 。 创建空白网页 保存网页
SharePoint Designer2007实用教程 Designer2007实用教程
3.3.1 新建布局表格
要使用SharePoint 要使用SharePoint Designer 2007的布局表格功能，用户可执行以下操作： 2007的布局表格功能，用户可执行以下操作： 新建一个网页或者打开一个空白网页，然后选择【表格】 布局表格】 新建一个网页或者打开一个空白网页，然后选择【表格】|【布局表格】命令， 如图3 11所示。随即，系统会自动打开【布局表格】任务窗格，如图3 12所 如图3-11所示。随即，系统会自动打开【布局表格】任务窗格，如图3-12所 示。
SharePoint Designer2007实用教程 Designer2007实用教程
3.2.3 关闭网页
要关闭网页，用户可选择【文件】 关闭】 要关闭网页，用户可选择【文件】|【关ห้องสมุดไป่ตู้】命令，可关闭当前正处于编 辑状态的网页，如图3 10所示。选择【文件】 关闭网站】 辑状态的网页，如图3-10所示。选择【文件】|【关闭网站】命令，可关闭当 前打开的网站以及该网站子目录下的所有网页文件 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.2 打开与关闭网页
用户若要对已经存在的网页进行编辑，可打开网页，打开与关闭网页也 是SharePoint Designer 2007的基本操作之一，其中，打开网页又分为打开最 2007的基本操作之一，其中，打开网页又分为打开最 近使用过的网页与打开已经存在的网页两种方式 。 打开最近使用过的网页 打开已经存在的网页 关闭网页
SharePoint Designer2007实用教程 Designer2007实用教程
第03章 创建简单的网页及其相关操作 03章
在上一章中介绍了本地站点的创建方法，本地站点创建完成后，就可以 开始制作网页了。网页是组成网站的基本元素，利用SharePoint 开始制作网页了。网页是组成网站的基本元素，利用SharePoint Designer 2007用户即可轻松的制作出精美的网页。本章就来介绍创建简单网页的方法 2007用户即可轻松的制作出精美的网页。本章就来介绍创建简单网页的方法 及其相关操作 。
3.4.1 输入文本
在SharePoint Designer 2007的网页编辑窗口中输入文本的方法和在其他 2007的网页编辑窗口中输入文本的方法和在其他 文字软件中输入文本的方法基本相同。直接将光标定位在要输入文本的位置， 然后用键盘键入文字即可。例如，用户可在一个空白网页中输入一篇文章，如 图3-46所示 。 46所示
SharePoint Designer2007实用教程 Designer2007实用教程
3.5.3 调整段落缩进
要调整段落的缩进量，可以通过工具栏中的【减少缩进量】按钮和【 要调整段落的缩进量，可以通过工具栏中的【减少缩进量】按钮和【增 加缩进量】 加缩进量】按钮来实现。默认情况下，工具栏中的这两个按钮是隐藏的，用户 可通过设置将他们显示在工具栏中 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.5 设置段落格式
对文本段落格式的设置主要包括增加段落标志与换行、设置段落的对齐 方式、调整段落的缩进、设置段落间距、以及为段落设置边框和底纹等操作 。 增加段落标志与换行 设置段落的对齐方式 调整段落缩进 设置段落间距 为段落添加边框和底纹 添加项目符号和编号
SharePoint Designer2007实用教程 Designer2007实用教程
3.2.2 打开已经存在的网页
要打开已经存在的网页，用户可选择【文件】 打开】命令，打开【 要打开已经存在的网页，用户可选择【文件】|【打开】命令，打开【打 开文件】对话框，在该对话框中选择要打开的网页，然后单击【打开】 开文件】对话框，在该对话框中选择要打开的网页，然后单击【打开】按钮即 可。
SharePoint Designer2007实用教程 Designer2007实用教程
3.1.2 保存网页 .1.2
网页编辑完成后，需要将其保存起来以备日后使用。在SharePoint 网页编辑完成后，需要将其保存起来以备日后使用。在SharePoint Designer 2007中，保存网页分为3种方式：“保存”、“另存为”和“全部保 2007中，保存网页分为3 存”。 要保存网页，用户可选择【文件】 保存】 要保存网页，用户可选择【文件】|【保存】命令，若当前网页是首次保 存，则系统会弹出【另存为】对话框，如图3 存，则系统会弹出【另存为】对话框，如图3-4所示。在该对话框中，设置文 件的保存路径和文件名，然后单击【保存】 件的保存路径和文件名，然后单击【保存】按钮，即可保存 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.2.1 打开最近使用过的网页
若要打开最近使用过的网页，可选择【文件】 最近使用过的文件】 若要打开最近使用过的网页，可选择【文件】|【最近使用过的文件】命 令，然后在其子命令中单击某个要打开的网页的文件名，即可快速的打开该网 页，如图3 页，如图3-7所示 。
SharePoint Designer2007实用教程 Designer2007实用教程
3.3 打开与关闭网页
一个网页能否吸引人，在很大程度上取决于它的版面布局，一个布局合 理，结构清晰的网页一定会给浏览者留下一个良好的印象。使用SharePoint 理，结构清晰的网页一定会给浏览者留下一个良好的印象。使用SharePoint Designer 2007的布局表格功能，即可帮助用户轻松的设计版面布局 。 2007的布局表格功能，即可帮助用户轻松的设计版面布局 新建布局表格 编辑表格结构 设置表格属性