网页电子教案-第3章课件

$

[知识目标]

掌握在网页中的文本和段落的设置方法掌握图像的插入及其属性的设置的方法熟悉页面属性的设置熟悉各种超级链接及设置8

[能力目标]

掌握文本和段落属性设置的操作掌握图像的插入及图像属性设置的操作掌握页面属性的设置操作掌握各种超级链接的设置及编辑操作第3章网页中的基础元素3.1在网页中插入文本3.2在网页插入图像3.3插入其他网页元素3.4设置网页的页面属性3.5设置超级链接本章小结第3章网页中的基础元素3.1在网页中插入文本3.1.1插入文本3.1.2设置文本格式3.1.3段落格式的编辑3.1.4设置列表3.1.5简单的CSS样式应用

（一）插入普通文本:添加文本有以下三种方法：1．直接在文档窗口中输入文本。2．拷贝文本。3．从其他文档导入文本。（二）插入特殊字符1．将光标定位在要插入特殊字符的位置。2．在“插入”栏的“文本”类别中，选择要插入的符号，如图。3.1.1插入文本

3.1在网页中插入文本

1．选择要设置的文本。2．在“属性检查器”，设置文本格式。3.1.2设置文本格式3.1在网页中插入文本

（一）应用己有的标题格式（二）自定义设置段落格式1．设置对齐方式2．设置段落缩进3.1.3段落格式的编辑3.1在网页中插入文本列表包括项目列表和编号列表两种。创建项目列表或编号列表的操作为：1.选择要创建列表的文本。2.在“属性检查器”中单击按钮，可以创建项目列表；单击按钮，可以创建编号列表。3.单击“属性检查器”中的按钮，以弹出的“列表属性”对话框中可以重新设置列表的属性。3.1.4设置列表3.1在网页中插入文本CSS是CascadingStyleSheets（层叠样式表单）的简称。使用CSS样式改变行距的操作为：1．按组合键Shift+F11，打开CSS面板如所示。2．点击CSS面板上的按钮，打开“新建CSS规则”对话框并设置如图右，单击确定。3.1.5简单的CSS样式应用3.1在网页中插入文本３．单击“确定”按钮，打开“.hangju的CSS规则定义”对话框。设置如图，单击“确定”退出。3.1.5简单的CSS样式应用3.1在网页中插入文本４．选择要应用样式的两段文本或光标定位在段落中，在“属性检查器”中“样式”下拉列表中，选择“hangju”，则文本的行距发生了改变，如图所示。3.1.5简单的CSS样式应用3.1在网页中插入文本3.2在网页插入图像3.2.1插入图像3.2.2设置图像属性3.2.3编辑图像3.2.4图像外部编辑3.2.5鼠标经过图像3.2.6创建导航条

在网页中插入图像的操作为：1.将光标定位在要插入图像的位置。2.执行以下操作之一：•单击菜单栏中的“插入”|“图像”命令。•在“插入”栏的“常用”类别中，单击“图像”按钮3．打开“选择图像源文件”对话框，选择需要的文件名称。6．在“相对于”下拉列表中选择“站点”。7．单击“确定”按钮，图像则插入到网页中。3.2.1插入图像3.2在网页插入图像

在文档窗口选中图像时，在“属性检查器中就可以显示该图像的属性，并可对其进行修改。1．设置图像大小：可以直接在“宽”和“高”两个文本框内输入新的数值即可。还可以直接用鼠标拖动来改变图像的大小。具体操作为：（1）选中要改变的图像，图像四周出现控制点。（2）拖动任一个控制点则可改变图像大小3.2.2设置图像属性3.2在网页插入图像

3．设置图像对齐方式4．其他图像属性•“源文件”：指定图像的源文件。单击“浏览”按钮或者直接键入文件的路径，可以重新定义源文件。•“替代”：用于指定在图像不能正常显示时，显示的关于图像的文本提示信息。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。•“垂直边距和水平边距”：以像素为单位设定图像与周围的网页元素间的距离。•“边框”：是以像素为单位的图像边框的宽度。默认为无边框。3.2.2设置图像属性3.2在网页插入图像在Dreamweaver8中提供了基本图像编辑功能，各编辑按钮如下：——优化。单击此按钮可以打开“Fireworks”程序对图像进行优化。——裁剪。可让修剪图像的大小，从所选图像中删除不需要的区域。——重新取样。可对已调整大小的图像进行重新取样，提高图片在新尺寸和形状下的品质。——亮度和对比度。可让调整图像的亮度和对比度设置。——锐化可调整图像的清晰度。3.2.3编辑图像

3.2在网页插入图像启动外部图像编辑器执行以下操作之一：•双击要编辑的图像。•选择要编辑的图像，然后在属性检查器中单击“编辑”。•在“站点”面板中双击图像文件，启动主图像编辑器。如果尚未指定图像编辑器，Dreamweaver8将启动该文件类型的默认编辑器。3.2.4图像外部编辑3.2在网页插入图像设置鼠标经过图像的操作为：1．在“文档”窗口中,将光标定位在要显示鼠标经过图像的位置。2．执行以下操作之一，打开插入鼠标经过图像对话框：•单击菜单栏中“插入|图像对象|鼠标经过图像”命令。•在“插入”栏的“常用”类别中，单击“图像”按钮右侧的箭头，在弹出的菜

单中，选择“鼠标

经过图像”，如图

所示。3.2.5鼠标经过图像3.2在网页插入图像3．打开“鼠标经过图像”对话框。4．单击“确定”，在网页中插入了鼠标经过图像。5．保存并在浏览器中预览网页。3.2.5鼠标经过图像3.2在网页插入图像1．准备好用于制作导航条的图像,这些图像最好大小尺寸一样。2．在文档窗口中，将光标定位在要显示导航条的位置。一般导航条位网页的顶部或两侧。3．单击菜单栏中“插入”|“图像对象”|“导航条”。4．打开对话框，在对话框中设置。在导航条中，每一个项目都对应一个按钮，该按钮具有一组状态图像，最多可达四个。项目名称在“导航条项目”列表中显示。用箭头按钮排列项目在导航条中的位置。单击“+”按钮，添加另一个项目，单击“-”可以删除选中的项目。向上和向下的箭头按钮，用于调整项目在导航条中排序。3.2.6创建导航条3.2在网页插入图像5．设置完成一个项目后，单击加号“+”按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。6．完成设置后，单击“确定”按钮，在网页中插入了导航条。3.2.6创建导航条3.2在网页插入图像3.3插入其他网页元素3.3.1水平线3.3.2日期和时间（一）插入水平线:在网页中插入水平线的操作为：1．在“文档”窗口中，将光标定位在要插入水平线的位置。2．执行下列操作之一：•单击菜单栏中“插入”|“HTML”|“水平线”命令。•在“插入”栏的“HTML”类别中，单击“水平线”按钮，如图。3．水平线插入在网页中如图3.3.1水平线3.3插入其他网页元素（二）设置水平线属性：1．选择水平线2．打开“水平线属性”，如图所示。•“宽”：用于设置水平线的宽度。•“高”：以像素为单位，设置水平线的高度。•“对齐”：设置水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。•“阴影”：指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。3.3.1水平线3.3插入其他网页元素（三）.增添颜色1．选择水平线2．在“属性检查器”上，单击打开快速标签编辑器如图。3．插入color="？"，颜色取值可以是英语（如yellow）也可用十六进制代码（如#FFFF00）.3.3.1水平线3.3插入其他网页元素（一）将当前日期插入到文档中1在“文档”窗口中，定位光标在要插入日期的位置。在图4.34的网页中的图像下面输入文本“本网页制作于：”。2执行下列操作之一：•单击菜单栏中“插入”|“日期”命令。•在“插入”栏的“常用”类别中，单击“日期”按钮3．打开“插入日期”对话框如图。3.3.2日期和时间3.3插入其他网页元素4．在对话框中，选择星期格式、日期格式和时间格式。5．如选择“储存时自动更新”，在每次保存文档时都会更新插入的日期。取消选择，日期在插入后变成纯文本并永远不自动更新。6．单击“确定”插入日期，效果如图所示。3.3.2日期和时间3.3插入其他网页元素3.4设置网页的页面属性3.4.1打开页面属性对话框3.4.2设置网页的标题3.4.3设置网页的背景3.4.4设置网页的文本3.4.5设置网页的边界1．要打开页面属性对话框可以执行以下操作之一：•单击菜单栏中“修改”|“页面属性”命令。•单击文本“属性检查器”中的“页面属性”按钮。2．打开页面属性对话框，如图所示。3.4.1打开页面属性对话框3.4设置网页的页面属性1．在页面属性对话框中，选择“标题/编码”分类，如图所示。2．在“标题”文本框内输入网页的标题内容，如“长春游游网”。3．点击“确定”退出页面属性对话框。4．保存并在浏览器中预览网页,则标题出现在浏览器的左上角3.4.2设置网页的标题3.4设置网页的页面属性（一）设置网页的背景颜色1．在页面属性对话框中，选择“外观”分类。2．执行以下操作之一：•在“背景颜色”对话框中输入颜色的十六进制代码如“#66CCFF”•点背景颜色后的按钮，打开调色板选择颜色。3．点击“确定”退出页面属性对话框。4．保存并在浏览器中预览网页。3.4.3设置网页的背景3.4设置网页的页面属性（二）设置网页的背景图像1．在页面属性对话中，选择“外观”分类。2．点击“背景图像”后的“浏览”按钮，打开选择图像源对话框。3．查找并选择作为网页背景的图像，单击“确定”退出页面属性对话框。4．保存并在浏览器中预览网页。5.重复选项：确定是否以及如何重复背景图像。有四个选项：“不重复”只在开始处显示一次图像。“重复”在水平和垂直方向平铺图像。“横向重复”和“纵向重复”，分别在水平和垂直方向重复排列背景图像。3.4.3设置网页的背景3.4设置网页的页面属性在页面属性对话框架可以对网页的文本进行统一的字体、字号及文本颜色的设置1．在页面属性对话框中，选择“外观”分类。2．在“页面字体”的下拉菜单中，选择字体。3．在“大小”下拉菜单中，选择字号。4．单击“文本颜色”右侧的调色板，可以设置文本的颜色。3.4.4设置网页的文本3.4设置网页的页面属性页面属性中“左边距”、“右边距”、“上边距”和“下边距”四个选项，用于设置网页页面元素与页面边界的宽度或高度。其右侧下拉列表为宽度或高度的单位，默认为“像素”。3.4.5设置网页的边界3.5设置超级链接3.5.1超链接的路径3.5.2创建基本超链接3.5.3锚点链接3.5.4热区链接3.5.5电子邮件链接①绝对路径。是提供所链接文档的完整路径，且包含其应用协议（如http://）。主要用于创建站外具有固定地址的链接，如要建立到中央电视台的链接就可以使用。②文档相对路径。是以当前文档所在位置为起点到被链接文档经由的路径，省略对于当前文档和所链接的文档都相同的绝对路径部分，而只提供不同的路径部分，如：gerenwenjian/jiangli.html。具有可移植性，是网页制作的首选。③根目录相对路径（又称服务器路径）：使用多个服务器的大型站点会要用到这种文档路径。如："/image/button.gif”即是连接网络服务器根目录下的image文件夹中的button.gif文件，必须在网络环境之下才能使用这种路径。3.5.1超链接的路径3.5设置超级链接1、在网页中，选择要超链接的载体（文字或者图）像，选择“净月潭国家森林公园”。2．在属性检查器中，单击“链接”后的“浏览”按钮，打开“选择文件”对话框。3．选择链接的目标文件，单击“确认”按钮。4．在“属性检查器”中的“目标”下拉菜单中,选择目标文件打开的位置,如图。5．保存并在浏览器中预览网页，建立了超链接的文字变为蓝色并带有下划线。6．单击创建超链接的文字，测试链接的完好性。3.5.2创建基本超链接3.5设置超级链接1．创建命名锚记（1）光标定位在要创建命名锚记的位置，如在图4.49网页中的标题“长春介绍”前定位光标。（2）执行以下操作之一：•单击菜单栏中的“插入”|“命名锚记”命令•在“插入”栏中的“常用”类别中，单击“命名锚记”。（3）打开“命名锚记”对话框，如图。

3.5.3锚点链接3.5设置超级链接（4）在“锚记名称”文本框中输入锚记名称，如“top”。（5）单击“确定”按钮退出，则在文档的相应位置出现一个图标这就是命名锚记的符号。3.5.3锚点链接3.5设置超级链接

1、在网页中插入图片。2．单击选中图片，“属性检查器”出现热区工具按钮。3．单击“矩形”热区按钮，将光标移到图