第三章网页文本的编辑与控制
第三章第2节编辑文本(图片﹑图形﹑艺术字﹑文本框的添加及编辑)
四．添加背景
课后自评
一节课下来，同学们对所学知识掌握较好，课堂密度稍大，学生自己动手时间少，应多准备一些难度不同的样例，以适合不同层次的学生。
教学重点
图片、图形、艺术字、文本框的添加及编辑
教学难点
使学生灵活运用所学知识点解决实际问题
教学媒体
计算机
教学方法
引导式﹑演示法﹑讲练法
教学过程
步骤时间
教学内容
教师活动
学生活动
前
提
测
平
目
标
实
施
复习：输入一段文字：
大雪整整下了一夜。早晨，天放晴了，太阳出来了。俗话说，“瑞雪兆丰年。”
一．插入艺术字
插入艺术字并设置艺术字的格式，包括线条和填充﹑艺术字形状﹑版式、设置竖排文字﹑字体字号调整等方面。
课题
图片﹑图形﹑艺术字﹑文本框的添加及编辑
个数
课型
新授
备课日期
授课日期
教
学
目
标
知识目标：使学生学会对文档中的图片﹑自选图形﹑艺术字﹑文本框对象进行插入和处理，从而使创建的文档更加丰富多彩
能力目标：培养学生发现问题﹑分析问题﹑解决实际问题的能力；培养学生的设计及审美能力；培养学生的表达能力
情感目标：通过创设宽松﹑和谐的课堂气氛培养学生互帮互助的精神，促进师生之间﹑学生之间的情感交流
通过大屏幕来演示插入文本框的方法并举例。
在文本框中插入图片的好处。
教师辅导
演示一种填充效果，其他的由学生来完成。
学生观看
学生上机输入图形
学生练习
学生练习并找出其他的文本框的形式。
学生来完成其他的填充效果。
小结
本节课讲了文章的修饰重点掌握艺术字的添加及文本框的使用。
第三章网页文本的编辑与控制
利用HTML处理网页文本 处理网页文本 利用
（3）设置文字和超链接的颜色
设置正文和超链接颜色时，可以使用BODY标记符的text、link、 设置正文和超链接颜色时，可以使用BODY标记符的text、link、 vlink和alink属性。 vlink和alink属性。
（4）设置页面背景声音
在HEAD中添加： HEAD中添加： < BODY BGSOUND src=“网页背景声音的地址”> src=“网页背景声音的地址”
利用HTML处理网页文本 处理网页文本 利用
设置页面属性
（1）设置页面背景颜色 在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 其格式为：<BODY 其格式为：<BODY bgcolor = “#ff0066”> #ff0066” （2）设置页面背景图像 选择特定图案作为页面的背景，使用BODY标记符的background 选择特定图案作为页面的背景，使用BODY标记符的background 属性即可。 HTML语句为：<BODY background="网页背景图案的地址"> HTML语句为：<BODY background="网页背景图案的地址">
注意：XHTML要求标记符区分大小写！养成习惯都用小写。 注意：XHTML要求标记符区分大小写！养成习惯都用小写。
绝大多数标记符都是成对出现的， 绝大多数标记符都是成对出现的，包括开始标记符和结束标记 符。某些标记符，例如<BR>，只要求单一标记符号。 某些标记符，例如<BR>，只要求单一标记符号。
网页图文网页上的文本编辑
（2）出现【列表属性】对话框后，在“列表类型”菜单中选择“项目列
表”或“编号列表”（如图所示），接着在“样式”下拉列表中选择
相应的符号或编号（如图所示），然后单击
按钮。
第三章 网页图文
21
第三章 网页图文
22
由于所有的列表项目被视为同一个段落，因此完成设置后，所有项目 符号或编号就会变成所选的正方形或大写罗马数字（如图所示），而不 需要一项一项修改。
第三章 网页图文
12
（ 1）编排文本段落 ①将光标移到要分段的位置后，按下【Enter】键。 ②当按下【Enter】键时，则会造成较大行距的段落。如图所示。
第三章 网页图文
13
若按下【Shift】+【Enter】键，则只是强迫文本换行而已。如 图所示。
第三章 网页图文
14
（2）修改文本色与字体
26
网格线
第三章 网页图文
27
项目一
1.实训题目
“长城—世界建筑史上一大奇迹”网页
2.实训目的
通过制作该网页作，可以掌握文本的标题设置、文字的移动和复 制、文字的查找与替换等基本设计过程。
第三章 网页图文
28
3.实训案例效果
第三章 网页图文
29
网页设计与制作
拼音缩写：根据每个页面的标题或主要内容，提取每个汉字的第1个字母作 为文件名。如“公司简介”页面的拼音是“gongsijianjie”，那么文件名就 是“gsjj.html”。
第三章 网页图文
（2）文件夹和文件命名规则 英文缩写：适用于专有名词。例如，“Active Server Pages”这个专 有名词一般用ASP来代替，因此文件名为“asp.html”。 英文原义：这种方法比较实用、准确。如可以将“图书列表”页面 命名为“BookList.html”。
第三章 网页编辑
新建一个个人网站主页index.htm，对自己的 简要情况，兴趣爱好，所学专业等进行简要的 介绍。 要对网页中文本的格式进行设置，包括字形， 字号，加粗，下划线等效果。 插入自己的一张照片，并使用照片属性对其设 置，做到美观大方。 在不同的栏目之间用水平线进行分割。 在网页底部插入当前日期和时间。 用列表项列出自己的兴趣爱好。
第3章 网页编辑
3.1 网页的基本操作
3.1.1 新建网页 Dreamweaver提供了多种创建网页的方法，下面分 别介绍一下：（演示3-1） 1．如果Dreamweaver MX 2004 运行后显示起始页， 则在起始页中直接选择“新建HTML文档”。 2．如果Dreamweaver MX 2004运行后不显示起始 页，则在“文件”菜单选择“新建”命令，打开“新建 文档”对话框。 3．在文档窗口中，也可以直接按Ctrl+N组合键，打 开 “新建文档”对话框。
3.2 在网页中添加文本和图片
3.2.1 在网页中添加文本 1.添加文本 2）复制文本 打开字处理软件下含有文本的文档，如word 文档，执行“编辑”菜单中的“复制”命令复制 文本。然后在Dreamweaver文档窗口中，将插入 点置于要添加文本的位置，执行“编辑”菜单中 的“粘贴”命令，完成文本复制。
3.3 创建列表项
3.3.4修改列表属性（演示3-16） 首先将文字按照无序或有序列表方式 进行列表设置，然后将光标移到列表文字 中。单击“文本属性面板”中的“列表项 目”按钮，或者执行“文本”菜单下的子 菜单“列表”中的“属性”菜单命令，弹 出“列表属性”对话框。 介绍对话框的主要内容和功能。
上机操作指导
准备工作： 1. 首先启动Dreamweaver，确保已经用 站点管理器建立好了一个网站（根目录）。 2. 为了制作方便，最好事先打开资源管 理器，把要使用的图片收集到网站目录 images文件夹内。
第3章 网页元素编辑
• •
password file checkbox radio button submit reset
第三章 网页元素编辑
1、文字域text 、文字域 text属性值用来设定在表单的文本域中，输入任何 属性值用来设定在表单的文本域中， 属性值用来设定在表单的文本域中 类型的文本、数字或字母。输入的内容以单行显示。 类型的文本、数字或字母。输入的内容以单行显示。
第三章 网页元素编辑
• • • 3.4 建立表单 表单是实现交互动态网页的一种主要的外 在形式，是网站管理者与浏览者之间沟通的桥梁。 表单的主要功能是收集信息，接受浏览 者在网页中的操作，并传递给服务器端的表单处 理程序。
第三章 网页元素编辑
• 表单是网页上的一个特定区域，它由
• <form></form>标签定义。 • • • • • • 语法： <form name=“form_name” method=“method” action=“url” > …… </form>
文字域属值 name maxlength size value 描述 文字域的名称 文字域的最大输 入字符数 文字域的宽度 文字域的默认值
第三章 网页元素编辑
结果 代码 <form> 姓名： type=“text” 姓名：<input type=“text” name=“name” size=“20” name=“name” size=“20” /> </form>
(1)单选框 当type=“radio”时,表示该输入项是一个 单选项,具有相同name属性的单选按钮形成一个组,用户 只能选择单选项中的一项作为输入信息。 checked属性，用来表示此项被默认选中。 value属性，用来设定选中项目后传送到服务器 端的值。
第3章网页的编辑
大。一般换行使用Enter+Shift组合键，这样换
网
行才是正常行距。
页
的
编
使用Enter键的效果
辑
使用Enter+Shift组合键的效果
3.1.1 字体与字号-添加字体
由于Dreamweaver提供的默认字体中没有中文
第
字体，所以在设置字体之前，应该先将中文字
三
体添加到“属性面板” 字体下拉列表框中。
字号的字号大小。例如，5表示5号字，+3表 示默认字号大小加上3，-2表示默认字号大小
减去2。
3.1.2 文字的对齐方式
选中单元格, 这时属性面板显示的是单元格
第
设置的内容。单击“对齐”框在弹出的下拉
三
菜单内中选择“居中对齐”，单元格中文字
章
在单元格中居中显示。
网
选中整个表格，将属性面板中的“填充”值更 改为10，这样各个单元格间的距离更改为10像
操作。
3.2.3 设置图片
第 三
单击图片，图片被一个黑框框住，同时出现三 个小的实心黑框。鼠标指针指向实心黑框，当 鼠标指针变成双向箭头时，拖动鼠标，更改图
章
片的大小。
网
页
的
在单击图片时，属性面板同时被打开。在“替
编
代”框中输入文字。这样，当鼠标在浏览器中
辑
移动到该图片上时，会显示替代文字；特别地 ，由于网络慢等原因，图片不能正常下载时，
图片区域会显示替代文字，从而不会影响到网
页的整体效果。
3.2.4 添加网页背景
第
要使网页漂亮起来，设置页面属性必不可少。 用鼠标单击菜单栏上的“修改”，在下拉菜单
三
中单击“页面属性”，打开“页面属性”对话
网页编辑软件基本教程
网页编辑软件基本教程第一章：网页编辑软件的定义和作用网页编辑软件是一种用于创建和编辑网页的工具。
它提供了一个直观的界面和丰富的功能，使用户能够设计和制作具有良好用户界面的网页。
通过网页编辑软件，用户可以插入文本、图像、多媒体文件和其他各种元素，调整布局、风格和格式，以及进行网页的发布和管理。
第二章：常见的网页编辑软件1. Adobe DreamweaverAdobe Dreamweaver是一款功能强大的网页编辑软件，被广泛认可和使用。
它提供了一个所见即所得的界面，可以在设计模式和代码模式之间切换。
用户可以通过拖放方式轻松插入元素，使用CSS进行样式定义，并实时预览网页效果。
2. Microsoft Expression WebMicrosoft Expression Web是微软公司推出的一款专业网页编辑软件。
它提供了一套丰富的工具和模板，帮助用户轻松创建和编辑符合标准的网页。
Expression Web支持多种网络技术，包括HTML、CSS、JavaScript等，同时还提供了一个直观的用户界面和强大的调试功能。
第三章：网页编辑软件的基本操作1. 创建新网页在网页编辑软件中，用户可以通过选择新建项目或文件的方式来创建新网页。
用户可以选择相应的模板或者从头开始创建一个空白网页。
在创建过程中，用户可以定义网页的大小、布局以及其他基本设置。
2. 插入和编辑元素用户可以通过拖放方式将各种元素插入到网页中，包括文本、图像、链接、音频、视频等。
网页编辑软件通常提供了一系列的编辑工具，用户可以用于调整元素的大小、位置、颜色、字体等属性。
3. 设置样式和布局通过CSS（层叠样式表），用户可以轻松设置网页的样式和布局。
这包括网页的背景、字体、边距、对齐方式等。
用户可以直接在编辑器中编辑CSS，也可以链接外部CSS文件。
4. 调整和预览网页网页编辑软件通常提供了一个所见即所得的预览功能，用户可以实时查看网页的效果。
三章网页图文CSS样式ppt课件
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
计算机基础实训作业-第3章 网页设计实验
第三章网页设计实验1 网站的创建和管理一、实验目的1、学会创建网站。
2、理解网站与网页的概念，了解网站结构。
3、掌握网站中网页的基本编辑方法。
二、实验内容和步骤1、创建一个新站点在Dreamweaver中使用“站点定义向导”创建一个本地新站点。
（1）选择“站点”|“新建站点”命令，打开站点定义对话框的“基本”选项卡，在“您打算为您的站点起什么名字”文本框中输入新建站点的名称，如图3-1所示。
图3-1站点定义对话框（2）单击“下一步”按钮，在“编辑文件，第2部分”选项区中，显示是否选择使用的服务器技术，这里选择“否，我不想使用服务器技术”单选按钮。
（3）单击“下一步”按钮，在“编辑文件，第3部分”选项区的“您将把文件存储在计算机的什么位置？”文本框中输入站点文件存放的位置或者点击右边的文件夹图标在本地计算机选择一个文件夹（例：E:\MySite\），没有输入或选择将使用系统默认值。
（4）单击“下一步”按钮，将站点定义对话框的“共享文件”选项区的“您如何连接到远程服务器”下拉列表框中选择“无”选项。
（5）单击“下一步”按钮，将站点定义对话框的“总结”选项区中，将显示以上设置步骤的详细信息。
（6）单击“完成”按钮，一个本地新站点已经创建完成。
此时选择“窗口”|“文件”命令，在打开的“文件”面板中将显示创建的新站点，如图3-2所示。
图3-2 “文件”面板（7）要设置本地文件夹，可以选择“站点”|“管理站点”命令，将打开管理站点对话框，如图3-3所示。
在左侧的列表中选择“我的站点”或对应的站点，在右侧选择“编辑”命令，将显示“本地信息”的所有参数设置选项，如图3-4所示。
如果显示的是如图3-1的站点定义对话框，点击上面的“高级”标签即可切换到如图3-4所示。
图3-3 管理站点对话框图3-4 本地信息对话框2、在站点中创建一个新的网页（1）在文档窗口中，选择“文件”|“新建”命令，在打开的“新建文档”对话框中选择要创建的文档类型，如图3-5所示。
七年级信息技术 《第三章网页制作》教学设计 青岛版
《第三章网页制作》教学设计一、教学目标设计（一）教学对象分析在学习本章节之前，学生已初步具备获取信息的能力，他们学习了网络基础知识，掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。
学生希望自己能制作网页，并将网页发布。
因此学生对本章学习的兴趣很大。
学生在学习本章节前已经学过WPS应用软件的使用方法，并掌握一定的文字编辑和图片处理的技巧，这对于本章的学习非常有利。
（二）教材内容分析1．教学内容简介及教学重点与难点本章主要内容是让学生学习FrontPage 2000网页制作工具的使用，并利用FrontPage 2000制作网页。
本章分为四节：第一节介绍网页、主页、子页的概念以及网页所包含的主要元素。
第二节介绍利用FrontPage 2000制作简单网页的全过程。
第三节介绍美化网页的各种方法。
第四节简明扼要地介绍网页发布的方式和方法。
2．课型特征本章书主要课型为应用软件的学习课，以掌握应用软件的使用方法，并使用软件解决实际问题为目的。
（三）教学目标[基本目标]1．知识与技能（1）了解网页、主页和子页的概念。
（2）了解网页所包含的主要元素。
（3）掌握FrontPage 2000的启动和退出。
（4）熟悉FrontPage 2000的窗口组成。
（5）掌握创建、打开网站的操作步骤。
（6）能熟练地建立、打开、关闭、保存、预览网页、浏览网页。
（7）掌握制作网页的全过程。
（8）理解表格在网页中的作用。
（9）熟悉表格的组成，掌握创建表格、表格操作、表格编辑的方法。
（10）掌握表格和单元格的属性设置方法。
（11）掌握在网页中插入图像和动画的方法。
（12）掌握对网页中的图形进行剪裁和插入文本的方法。
（13）能根据实际需要使用不同的超链接，合理地组织网页。
（14）掌握装扮网页文本的方法。
（15）能为网页添加合适的网页背景图案和背景音乐。
（16）掌握在网页中插入滚动字幕、横幅广告管理器和悬停按钮的方法。
（17）初步了解网页发布的方式和方法。
网站建设与网页制作_第三章_在网页中插入文本
网站建设与网页制作
3.6 文本和段落的HTML标记 文本和段落的HTML标记 和段落的HTML
HTML编辑和运行环境 3.6.2 HTML编辑和运行环境
因为HTML是一个文本文件 ， 所以可以使用任何一个 是一个文本文件， 因为 是一个文本文件 文本编辑器进行编写，它通过浏览器来解释执行。 文本编辑器进行编写 ， 它通过浏览器来解释执行 。 我们一 般采用纯文本文档编辑器， 般采用纯文本文档编辑器，如Windows中的记事本来编辑 中的记事本来编辑 HTML文件。 文件。 文件
网站建设与网页制作
3.5 插入标尺和网格 插入标尺和网格
3.5.2 插入网格
网格是用做在网页文档窗口的设计视图中对层进行绘制、 网格是用做在网页文档窗口的设计视图中对层进行绘制、定位或 大小调整的可视化向导，可以使网页元素在被移动时， 大小调整的可视化向导，可以使网页元素在被移动时，自动靠齐到网 格； 网格设置：执行菜单“查看” 网格设置” 网格设置”命令； 1. 网格设置：执行菜单“查看” “网格设置” “网格设置”命令； 显示/关闭网格：执行菜单“查看” 网格设置” 2. 显示/关闭网格：执行菜单“查看” “网格设置” 选择勾选 “显示网格”命令； 显示网格”命令； 启用和禁用网格靠齐：执行菜单“查看” 网格设置” 3. 启用和禁用网格靠齐：执行菜单“查看” “网格设置” 选择勾 选“靠齐到网格”命令； 靠齐到网格”命令；
网站建设与网页制作
3.6 文本和段落的HTML标记 文本和段落的HTML标记 和段落的HTML
HTML的基本结构 3.6.3 HTML的基本结构
下面我们开始编写一个简单HTML文档： 下面我们开始编写一个简单HTML文档： 文档 <html> <head> <title>第一个HTML示例</title> </head> <body> HTML的基本结构。 </body> </html>
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章：Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合，让学生了解Dreamweaver的发展历程和版本更新实践操作，让学生掌握Dreamweaver的基本功能和操作界面案例分析，让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业：让学生制作一个简单的网页，巩固所学内容课堂讨论：引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章：创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver的网页创建和管理功能实践操作，让学生熟悉网页编辑区的基本操作案例演示，让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业：让学生创建一个简单的网页，并设置网页、描述和关键词课堂讨论：引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章：编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中文本的编辑和排版功能实践操作，让学生熟悉字体、颜色、大小和样式的设置方法案例演示，让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业：让学生编辑和排版一个文本内容丰富的网页课堂讨论：引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章：添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作，让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析，让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业：让学生添加图像和媒体元素到一个网页中，提升网页视觉效果课堂讨论：引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章：创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章：表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表格的创建和编辑功能实践操作，让学生熟悉表格的布局和样式设置方法案例分析，让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业：让学生创建一个表格布局的网页，展示信息列表课堂讨论：引导学生分享自己在网页设计中关于表格布局的经验和心得第七章：表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表单的创建和编辑功能实践操作，让学生熟悉表单元素和属性的设置方法案例分析，让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业：让学生创建一个包含表单和动画的网页，实现用户互动课堂讨论：引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章：CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作，让学生熟悉CSS选择器和属性的设置方法案例分析，让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业：让学生创建一个CSS样式和模板应用的网页，提升网页美观度课堂讨论：引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章：网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中网站的发布和管理功能实践操作，让学生熟悉FTP协议和网站方法案例分析，让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业：让学生将所学网页发布到服务器，进行实际操作课堂讨论：引导学生分享自己在网站发布和管理中的经验和心得第十章：网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合，让学生分析实际网页重点和难点解析1. 章节一和二：Dreamweaver简介和创建与管理网页重点解析：理解Dreamweaver的历史和发展，熟悉其操作界面和基本功能，以及如何有效地创建和管理网页。
第3章 网页文本编辑
3.1 添加网页文本
3.1.3导入文本表格式数据 将光标定位在需要输入文本的位置 执行【文件】→【导入】→【表格式数据】命令
3.2 添加HTML对象
3.2.1 插入日期和时间 执行【插入】→【日期】命令，或单击“常用”工具 栏中的【日期】按钮 弹出“插入日期”对话框 ，可以设置相应的格式
3.2 添加HTML对象
3.2 添加HTML对象
3.2.3 插入水平线 插入水平线的方法 执行【插入】→【HTML】→【水平线】命令 更改水平线颜色 选中水平线，单击“文档”工具栏中的【拆分】按 钮，转换视图为“拆分视图”状态。 有一行代码被选中，将光标定位在“<hr”的后面， 输入一个空格，在输入“color="#CC0000"”
3.7 职业上机实战——文本网页制作技巧
实例制作要点是网页文本的格式设置及段落列表的添加，制作过程中要注意 段落的换行方式。本实例是提供一种文本网页的制作方法及思路，需要进一 步观察和分析各种不同的文本网页，理解并发掘这些网页的特点
3.6 检查拼写与查找替换
3.6.1 检查拼写 执行【文本】→【检查拼写】命令，弹出“检查拼写” 对话框 系统自动找到网页中不能识别的单词，可以根据建议 进行更改，也可以在“更改为”文本框中输入要更改 的单词
3.6 检查拼写与查找替换
3.6.2 查找和替换 执行【编辑】→【查找和替换】命令，弹出“查找和 替换”对话框
3.4 编辑段落格式
3.4.3 缩进段落 段落缩进有两种方式，分别是： 文本缩进：可将选中段落的首行文字右侧缩进两个 中文字符宽度。 文本凸出：可将选中段落的首行文字向左侧凸出两 个中文字符宽度。
3.5 添加列表
3.5.1 为段落文本添加列表 可以使用的列表有以下几种： 项目列表 编号列表 定义列表 单击“文本”工具栏中的“编号列表”按钮，就为所 选文字添加了编号列表
网页制作技术-3 文本的处理与控制
3.2.3 强制换行 在Dreamweaver 中输入文字的时候，通常在换行时按下回车键即可 ，但是往往重新开始的一段文字和前面一段文字的距离有些远。如 果希望前后两行文字之间能够紧挨着，可以在按“Shift”键的同时 按下回车键，进行强制换行。
3.2.4 文字的基本设置 在Dreamweaver CS6 中，属性检查器中的各种属性都按照类别划分 到相应的HTML 代码和CSS 样式标签下。控制
3.1 设置网页标题
3.2 文本的基本设置 3.2 项目列表 3.3 使用外部文本
3.1 设置网页标题
3.1 设置网页标题
我们打开网页，最先看到的就是网页的标题。它一般位于网页的左 上角，也就是浏览器中当前网页的名称。
3.2 文本的基本设置
3.2.1 设置文本标题
1.在属性检查器中编辑CSS 规则
3. 在属性检查器中设置HTML 格式
选择要设置格式的文本，打开属性检查器，单击“HTML”按钮。
3.2.5 “ 文本”插入栏的使用
除了在属性检查器中可以对文字进行设置外，用户还可以使用插入 栏的“文本”选项卡来设置文字。
3.3 项目列表
对于项目列表的设置，经常被使用到词汇表和品种说明书中。
3.4.3 导入Word 文档和Excel 表格
♦在任何的文字编排软件中，都会使用到标题的设置。 ♦选择“分类”列表框中的“标题（CSS）”选项，在标题的设置选项中可以看到，文本标题 的设置共有6 个级别。
3.2.2 添加空格 在Dreamweaver 中添加空格时，如果直接在文档窗口中选择文本， 并按下空格键只能输入一个空格，继续按下去光标将不会向后移动。
之前对项目列表的设置都是在代码视图中进行的，其实这些设置也 可以在标签检查器中完成。
网页基本设置&文本输入与编辑
插入水平线和特殊字符
插入水平线
目的：组织信息和区分版块，使网页内容更容易理解，阅读 更轻松。 方法：插入 HTML 插入面板 常用 水平线 水平线
插入特殊字符
特殊字符：版权符号、注册商标符号以及常见的货币符号等无 法用输入法来直接输入的字符。 插入多个空格:通过在字符之间插入一种称为“不换行空格”的 字符 。 打开*.html文件。 插入 HTML 特殊字符版权。
操作步骤：
练习
设置文档头信息 设置文档页面属性 输入文本 设置文本格式 插入水平线 插入特殊字符
格式：设置所选文本的格式，可以选择段落、标题1、标题2等。 ID：为所选内容分配一个ID。 类：设置应用于所选内容的类样式。 链接：为所选文本设置超链接。 目标：指定打开链接文档的方式。
应用“CSS”类型
单击属性检查器左侧的CSS按钮 的CSS类型属性。 ，可显示文本
目标规则：显示当前选定内容所应用的CSS规则或用户正在编辑的CSS规则。 字体：设置或更改目标规则的字体，可选择或添加字体。 文本颜色：可选择或设置颜色。
文本输入与编辑
输入文本
输入文本的两种方法： 只要将插入点定位在网页的某个位置（如某个表格单元格 内），然后选择输入法输入文本。 对于大量的外部文本，可利用剪贴板将其拷贝至网页文档中。
注意： 分段：将插入点置于要作为下一段的文本起始处的左侧，按 enter键。 换行：shift+enter键。
设置文本格式的两种方法： 应用“HTML”类型： Dreamweaver会将文本格式 属性添加到页面正文的HTML代码中。 应用“CSS”类型：Dreamweaver会将属性写入文档 头或单独的样式表中。 注意： 设置文本格式首先要打开属性菜单：窗口 属性
网络编辑教程
网络编辑教程网络编辑教程第一步：准备工作在开始网络编辑之前，你需要准备一些基础的工作。
首先，确保你的电脑和网络连接正常，以便无缝地进行编辑工作。
其次，你需要选择一款适合你使用的网络编辑软件。
常见的网络编辑软件包括Microsoft FrontPage和Adobe Dreamweaver。
选择适合自己的软件后，安装并熟悉它的基本操作。
最后，你需要弄清楚你要编辑的网站的主题和目的，以便有针对性地进行编辑工作。
第二步：网站结构规划在进行具体的编辑工作之前，你需要事先规划网站的整体结构。
这意味着你需要确定每个页面的内容和功能，并确定页面之间的链接关系。
你可以使用一些图形工具，如MindManager或Microsoft Visio，来帮助你可视化地规划网站的结构。
第三步：编辑网页内容编辑网页内容是网络编辑的核心工作。
首先，你需要编写各个页面的文本内容。
文本应该简洁明了，语法正确，避免拼写错误和语病。
同时，文本应该具有一定的吸引力和可读性，以吸引用户的注意力，并使他们更容易理解你的信息。
其次，你需要选择合适的图片和视频资源来丰富页面的内容。
确保这些资源与页面的主题和目的相符，并且拥有高质量的分辨率。
第四步：设计网页布局设计网页布局是确保用户体验的关键。
你需要合理安排页面中各个元素的位置和尺寸，以使网页看起来整洁美观，并且易于浏览。
通常，你应该遵循一些设计原则，如使用对比色来突出重要的内容，使用一致的字体和字号来保持页面的统一感等。
此外，你还可以添加一些特效和动画来增加页面的交互性和吸引力。
第五步：添加页面元素添加页面元素是为网站增加功能的重要环节。
你可以添加导航菜单，在页面上创建表格和表单，设置多媒体播放器，甚至添加购物车功能等。
无论你要添加何种元素，都要确保它们能够顺利地与你选择的编辑软件集成，并且在各种设备上表现良好。
第六步：测试和优化编辑完成后，你需要测试整个网站以确保它的功能正常，并能够在各种浏览器和设备上正常显示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
绝大多数标记符都是成对出现的， 绝大多数标记符都是成对出现的，包括开始标记符和结束标记 符。某些标记符，例如<BR>，只要求单一标记符号。 某些标记符，例如<BR>，只要求单一标记符号。
标记符基础
在 HTML中，所有的标记符都用尖括号括起来。 HTML中 所有的标记符都用尖括号括起来。
例如，<html>、<a>。 例如，<html>、<a>。
HTML 标记符是不区分大小写的。<html>、<Html>和<HTML>没 标记符是不区分大小写的。<html>、<Html>和<HTML>没 有区别。 有区别。
注意：对于XHTML，这样的标记写为<br 注意：对于XHTML，这样的标记写为<br />
开始标记符与结束标记符的区别在于：结束标记符多一个斜杠 开始标记符与结束标记符的区别在于： “/”（不是反斜杠“\”！） 不是反斜杠“
标记符基础
属性是用来描述对象特征的特性。例如，一个人的身高、 属性是用来描述对象特征的特性。例如，一个人的身高、体重 就是人这个对象的属性。 就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符的尖括号里，多个 HTML中 所有的属性都放置在开始标记符的尖括号里， 属性之间用空格分开，通常也不区分大小写。 属性之间用空格分开，通常也不区分大小写。
1、利用软件编辑文本 、
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
在网页中添加和处理文本（操作演示） 1．输入文字
（1）换行 （2）输入空格 （3）插入特殊的字符 （4）加入注释文字 （5）插入水平线 （6）插入日期和时间
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
利用HTML处理网页文本 利用 处理网页文本
2、强制换行标记符
强制换行标记符的格式为：文字<BR> 强制换行标记符的格式为：文字<BR>
3．换段标记符
（1）强制换段标记符 强制换段标记符的格式为：文字<P> 强制换段标记符的格式为：文字<P> （2）设置段落标记符 设置段落标记符的格式为：<P align="对齐方式"> 设置段落标记符的格式为：<P align="对齐方式"> 文字 </P>
水平线标记符的格式为： <HR align="对齐方式" size="横线粗细" width="横线长度" align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" color="横线颜色" noshade>
利用HTML处理网页文本 处理网页文本 利用
文本格式处理
4、项目实训 、
案例展示(制作唐诗网站)
项目分析
1、建站准备 建站准备
建立站点文件夹，收集文字、图片及相关素材并分类整理。
2、创建本地站点 创建本地站点 3、站点管理 站点管理
切换、编辑、复制、删除、导出/导入站点
4、管理网站中的文件和文件夹 管理网站中的文件和文件夹
创建文件夹和文件、移动和复制文件、重命名文件夹和文件、 删除文件夹和文件。
3、用HTML处理文本 、 处理文本
利用HTML处理网页文本 处理网页文本 利用
标题处理
标题文字标记符的格式为： <Hn align="对齐方式" > 标题文字 </Hn> align="对齐方式"
段落处理
1、注释标记符
HTML的注释标记符的格式为：<!--注释内容--> HTML的注释标记符的格式为：<!--注释内容--> 注释并不局限于一行，长度不受限制。结束标记符不必与开始标记 符在同一行。注释的内容不在浏览器中显示。 符在同一行。注释的内容不在浏览器中显示。
5、网页文档的基本操作 网页文档的基本操作
创建、打开、保存、预览、关闭网页文档
操作演示
（1）创建一个命名为“XXX唐诗网站”的静态网站， 创建一个命名为“XXX唐诗网站”的静态网站， 唐诗网站 该网站的所有文件存储在本机上E盘的“XXX唐诗 该网站的所有文件存储在本机上E盘的“XXX唐诗 网站”文件夹中。 网站”文件夹中。 （2）在文件夹“唐诗网站”中创建三个子文件夹 在文件夹“唐诗网站” image” music” text” “image”、“music”和“text”。 （3）将所需的图像文件复制到“image”文件夹中。 将所需的图像文件复制到“image”文件夹中。 （4）在文件夹“XXX唐诗网站”中创建一个命名为 在文件夹“XXX唐诗网站” 唐诗网站 index.htm”的网页文档。 “index.htm”的网页文档。 （5）编辑网页、保存并进行预览效果。 编辑网页、保存并进行预览效果。 （6）学生实践操作，并提交作业。 学生实践操作，并提交作业。
利用HTML处理网页文本 利用 处理网页文本
4．显示预排格式标记符
显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE> 显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE>
5．分区显示标记符
分区显示标记符的格式为：
<DIV align="对齐方式"> 文本或图像 </DIV > align="对齐方式"> 6．水平线
1．文字设置
（1）size属性 size属性 size属性是字号属性，用于控制文字的大小，它的取值既可以是 size属性是字号属性，用于控制文字的大小，它的取值既可以是 绝对值，也可以是相对值。 （2）face属性 face属性 face属性是字体标记符，用来指定字体样式 face属性是字体标记符，用来指定字体样式 （3）color属性 color属性 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 颜色名称或十六进制值。
2011年3月15日
学习目标
掌握文本的插入与编辑方法；能够用 Dreamweaver 8软件编辑网页文本. 掌握HTML语言的语法规则；掌握基本 的网页标记符和属性。 能够利用HTML语言处理网页文本
本章主要内容
一、利用Dreamweaver 8编辑网页文本 二、HTML基础 三、 利用HTML处理网页文本 四、项目实践：制作“唐诗”网站
利用HTML处理网页文本 处理网页文本 利用
设置页面属性
（1）设置页面背景颜色 在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 其格式为：<BODY 其格式为：<BODY bgcolor = “#ff0066”> #ff0066” （2）设置页面背景图像 选择特定图案作为页面的背景，使用BODY标记符的background 选择特定图案作为页面的背景，使用BODY标记符的background 属性即可。 HTML语句为：<BODY background="网页背景图案的地址"> HTML语句为：<BODY background="网页背景图案的地址">
利用HTML处理网页文本 处理网页文本 利用
（3）设置文字和超链接的颜色
设置正文和超链接颜色时，可以使用BODY标记符的text、link、 设置正文和超链接颜色时，可以使用BODY标记符的text、link、 vlink和alink属性。 vlink和alink属性。
（4）设置页面背景声音
在HEAD中添加： HEAD中添加： < BODY BGSOUND src=“网页背景声音的地址”> src=“网页背景声音的地址”
常用HTML标记符 常用 标记符
（1）HTML标记符 HTML标记符 （2）HEAD标记 HEAD标记 （3）TITLE标记符 TITLE标记符 （4）BODY标记符 BODY标记符 （5）强制换行标记符<br> 强制换行标记符<br> （6）注释标记符<!--注释内容--> 注释标记符<!--注释内容--> <!--注释内容-（7）强制换段标记符<p> 强制换段标记符<p> （8）显示预排格式标记符<pre> 显示预排格式标记符<pre> （9）水平线标记符<hr> 水平线标记符<hr> （10）分区显示标记符<div> 10）分区显示标记符<div>
2．编辑文本
（1）设置标题文字 （2）添加和删除中文字体 （3）设置字体的颜色 （4）添加项目符号和项目编号
在网页中添加图像 1．插入图像 2、修改图像参数 3、删除图像
2、HTML基础 、 基础
什么是HTML？ 什么是 ？
HTML（ HTML（Hypertext Markup Language，超文本标 Language， 识语言）是一种专门用于Web页制作的编程语言， Web页制作的编程语言 识语言）是一种专门用于Web页制作的编程语言， 用来描述超文本各个部分的内容， 用来描述超文本各个部分的内容，告诉浏览器如 何显示文本，怎样生成与别的文本或图像的链接 何显示文本， 点。