第6讲文本及图像设置

《第6讲文本及图像设置》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、学时数：2教案序号：6本讲课题：1在网页中插入文本2在网页中插入图像教学目标：［知识口标］掌握网页中的文木和段落的设置方法掌握图像的插入及其属性的设置方法［能力口标］掌握文木和段落属性设置的操作掌握图像的插入及图像属性设置的操作内容提要：本讲主要教学内容有：插入文本、设置文本格式、段落格式的编辑、设置列表、简单的CSS样式应用、插入图像、设置图像属性、编辑图像、图像外部编辑、鼠标经过图像和创建导航条。重点难点：本讲重点是段落格式的编辑、简单的CSS样式应用、设置图像屈性和创建导航条；难点是css样式应用。解决的办法是采用“老师演示一学生演练一老师总结”教

2、学模式。教学用具：投影机教学过程：【课程导入】一个网罚企“易殳字，僅嬴的网頁也鑫不內囹像。殳本昱阿頁中釆基本的走奏，殳本的红理也昱网頁锻皆的基砒。囹像昱网©申仗次孑殳本的墓本走麦。迫一褂烤金诣层网頁中筋入殳本和囹像的方怙2孩坯。4.1在网页屮插入文本【板述预设】4.1.1插入文本【一般介绍】（一）插入普通文本:添加文本有以下三种方法：1.在接在文档窗口中输入文木。2.拷贝文木。3.从其他文档导入文本。（二）插入特殊字符1.将光标定位在要插入特殊字符的位置。2.在“插入”栏的“文本“类别中,选择要插入的符号,如图。文本▼歸BZS颐可MP肛hlh2h3ulo

3、llidldtddabbrmi3C腿］▼【板述预设】4.1.2设置文本格式【一般讲解】1.选择要设置的文本。2.在“属性检杳器”，设置文木格式。【板述预设】4.1.3段落格式的编辑主要包括设置对齐方式和设置段落缩进。【重点讲解】（一）应用己有的标题格式（二）口定义设置段落格式1.设置对齐方式2.设置段落缩进【板述预设】4.1.4设置列表【一般讲述】列表包括项H列表和编号列表两种。创建项冃列表或编号列表的操作为:1.选择要创建列表的文木。2.在“属性检查器”屮单击按钮，可以创建项目列表；单击按钮，可以创建编号列表。3.单击“属性检査器”中的按钮，以弹出的“

4、列表属性”对■话框中可以重新设置列表的属性。【板述预设】4.1.5简单的CSS样式应用CSS是CascadingStyleSheets（层魂样式表单）的简称。【难点讲解】使用CSS样式改变行距的操作为：K教师演示》1.按组合键Shift+Fll,打开CSS面板如左图所示。1.点击CSS面板上的按钮，打开“新建CSS规则”対话框并设置如图右，单击确定。2.单击“确定”按钮,打开“hangju的CSS规则定义，对话框。设置如图,单击“确定''退出。3.选择要应用样式的两段文木或光标定位在段落中，在“属性检查器"中“样式"下拉列表中，选择“hangju”，则文

5、木的行距发生了改变，如图所示。K学生演练》请学主上台演练一遍。K教师总结』由演示过程可知，使用样式进行段落的设證，比直接进行段落的设置效率更高。尤其适用于相同格式的多个段落的设置。4.2在网页插入图像【板述预设】4.2J插入图像【一般讲述】在网页中插入图像的操作为：1.将光标定位在耍插入图像的位置。2.执行以下操作之一：•单击菜单栏设置图像大小：可以直接在“宽''和“高''两个文本框内输入新的数值即可。还可以直接用鼠标拖动来改变图像的大小。K操作演示》(1)选屮要改变的图像，图像四周岀现控制点。(2)拖动任一个控制点则可改变图像人小设置图像对齐方式其他图

6、像属性•“源文件S指定图像的源文件。单击“浏览”按钮或者直接键入文件的路径，可以重新定义源文件。•“替代S用于指定在图像不能正常显示吋，显示的关于图像的文本提示信息。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。•“垂自边距和水平边距S以像素为单位设定图像与周围的网页元素间的距离。•“边框S是以像素为单位的图像边框的宽度。默认为无边框。【板述预设】1啲“插入”1“图像”命令。•在“插入”栏的“常用啖别中,单击“图像"按钮3.打开“选择图像源文件”对话框，选择需要的文件名称。4.在“相对于”下拉列表中选择“站点”o5.单击“确定”按钮，图像则插入到网

7、页中。【板述预设】1.2.2设置图像属性【重点讲解】在文档窗口选中图像时，在“属性检查器中就可以显示该图像的属性，并可对其进行修改。4.2.3编辑图像在Dreamweaver8中提供了基木图像编辑功能。【一般讲解】各编辑按钮如下：°——优化。单击此按钮可以打开"Fireworks^程序对图像进行优化。囚—裁剪。可让修剪图像的大小，从所选图像中删除不需要的区域。龟——垂新取样。可对已调整人小的图像进行重新取样，提高图片在新尺寸和形状下的品质。o——亮度和对比度。可让调整图像的亮度和对比度设置。A——锐化可调整图像的清晰度。管理本地站点主要包括：【板述预设】

8、4.2.4图像外部编辑【一般讲述】启动外部图像编辑辭执行以卜•操作之一：•双击要