《网页设计与制作》教案-第3讲 文字的操作一

第3讲文字的操作一

1.1教学目标：

◆知识目标

1.掌握在网页中输入文本、文本编辑。

2.掌握网页文本格式化的操作方法。

3.学会在网页中插入其它特殊文本。

◆技能目标

1.在网页设计编辑中熟练引用文本、列表、分段等方法并设置。

2.能够根据页面需要对文本进行编辑设置来美化页面。

3.能够根据页面需要灵活添加其它特殊元素。

◆品质目标

培养学生认真细致、勇于创新的精神

1.2教学重点：

1.掌握在网页中输入文本、文本编辑。

2.掌握网页文本格式化的操作方法。

3.学会在网页中插入其它特殊文本。

1.3 教学难点

掌握在网页中输入文本、文本编辑。掌握网页文本格式化的操作方法。

1.4教学方法：讲练结合，任务驱动、分子任务操练

1.5课时安排：2课时

1.6教学对象分析：

这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：

一、任务目标----任务三文本的操作

本任务是针对网页的基本元素——文本的相关操作的子任务，旨在通过该任务的实施完成，读者能够熟练掌握编辑网页文本的各种方法，对网页文本的格式化处理有一个清晰的认识，使网页的显示效果更加丰富多彩。

◆完成任务关键步骤

?新建一个网页并保存到站点指定目录。

?在页面中输入文字。

?运用Dreamweaver CS6提供的导入功能，把外部文件插入当前页面。

?在拆分视图中显示并修改标记，了解标记功能。

?在页面的指定位置插入水平线。

?在页面的适当位置插入能够自动更新的日期。

?通过页面属性的设置掌握网页格式的整体。

?设置网页中文本的项目列表及缩进方式处理。

?设置网页中文本的格式。

?设置锚点链接。

二、在网页中插入文本

1.进入页面编辑设计视图状态。

在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。

启动中文输入法输入文字，例如可在编辑区中输入标题文字“我的主页”。

2.设置文本的格式

文本的格式包括字体、字号、字型、对齐方式等，可选中文字，即可在文本的属性面板中进行相应的设置。

3.设置文字的颜色

首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

4.特殊文本

网页中的特殊符号一般不能从键盘直接输入，Dreamweaver提供了各种特殊字符和符号，其中特殊字符包括标准7位ASCII码字符集外的字符。

在Dreamweaver中输入特殊字符，是通过[插入]栏中的文本选项卡完成的，将[插入]工具栏毁换到[文本]选项卡，单击[字符]按钮后面的向下箭头，选择一个要插入文档的字符即可。

三、简单页面制作

现在，以下边的简单网页为例，叙述一下制作过程。首先启动Dreamweaver CS6，确保你已经用站点管理器建立好了一个网站（根目录）。

为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。

【插入标题文字】

进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。

【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。

【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

【设置网页的标题和背景颜色】

点击“修改”菜单选“页面属性”。系统弹出页面属性对话框。

请在标题输入框填入标题“我的主页”。

设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。

设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。

【插入图像】选择以下任意一种方法：

（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。

（2）使用插入栏：单击插入栏对象按钮>选按钮，弹出“选择图像源文件”对话框，其余操作同上。

（3）使用面板组“资源”面板：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。

注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。

一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。

【输入欢迎文字】

在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您……”然后，利用属性面板对文字进行设置。

保存页面。一个简单的页面就这样编辑完毕了。

【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。

1.8归纳总结：

本讲主要是让同学们掌握在网页中输入文本、文本编辑。掌握网页文本格式化的操作方法。学会在网页中插入其它特殊文本。

1.9课后作业题：

1.Dreamweaver CS6中如何插入文本，设置文本属性？

2.Dreamweaver CS6中如何插入特殊文本？

3.Dreamweaver CS6中如何导入文本？