260 likes | 427 Views
主讲人:湖南铁道职业技术学院 陈承欢. Hunan Railway Professional Technology College. 《 网页设计与制作 》 教学课件. 教学单元 9 : 使用表格布局网页. 一、课程引导. 二、明确知识技能目标. 三、展示网页浏览效果. 主要教学环节. 四、分析操作任务. 五、知识讲解与操作示范. 六、课堂模仿实践. 七、疑难解析. 八、归纳总结. 九、布置习题. (一)课程引导.
E N D
主讲人:湖南铁道职业技术学院 陈承欢 Hunan Railway Professional Technology College 《网页设计与制作》教学课件
教学单元9:使用表格布局网页 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 网页上的信息大多都是通过文字来表达的,文字是网页的主体和构成网页最基本的元素,它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点,其优势很难被其他元素所取代,制作网页时,文本的输入与编辑占了制作工作的很大部分。 本章主要学习文本的各项操作。通过编辑网页文本、对网页文本进行格式化处理,使网页内容更加丰富,网页布局更加美观。
(二)明确知识技能目标 (1)学会在网页中输入文本与编辑文本,掌握输入空格和实现文本换行的方法。 (2)学会在网页中插入水平线和日期。 (3)掌握网页文本格式化操作。
(三)展示网页浏览效果 本章所制作的网页“02.html”浏览效果如图所示。
(四)分析操作任务 (1)打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html,然后在该网页中输入一段文字。 (2)利用按键方式输入一个或多个空格,利用“插入”工具栏插入“不换行空格”。 (3)利用按键方式实现文本换行,利用菜单插入“换行符”。 (4)在标题与正文之间插入一条水平线。 (5)在最后一行插入日期,且要求每次保存网页时自动更新日期。 (6)设置网页中文本的格式。
(五)知识讲解与操作示范(1) 5.1 网页中输入文本 打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html,然后在该网页中输入一段文字。利用按键方式输入一个或多个空格,实现文本换行。 1.输入文字 (1)用鼠标单击网页编辑窗口中的空白区域,窗口中随即出现闪动的光标,标识输入文字的超始位置。 (2)选择适当的输入法输入文字,输入了一行文字作为页面文字的标题。
(五)知识讲解与操作示范(2) 2.输入文本空格 输入法切换到半角状态,按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现: (1)将输入法切换到中文全角状态。 (2)直接按“Ctrl+Shift+Space”组合键。 (3)在“文本”工具栏,选择【不换行空格】命令,可以插入多个连续的空格
(五)知识讲解与操作示范(3) 3.实现文本换行 输入多行文本,要实现换行,可以按Enter键或者按Shift+Enter组合键来实现。按Enter键,换行的行距较大,按Shift+Enter组合键,换行的行距较小。
(五)知识讲解与操作示范(4) 5.2 网页中编辑文本 网页中输入的文本与Word一样,也能进行编辑,常见的文本编辑操作有: (1)拖动鼠标选中一个或多个文字、一行或多行文本,也可以选中网页中的全部文本。 (2)按BackSpace键或Delete键实现删除文本操作。 (3)将光标移动到需要插入文本的位置,输入新的文本。 (4)实现复制、剪切、粘贴等操作。 (5)实现查找与替换操作。 (6)实现撤消或重做操作。
(五)知识讲解与操作示范(5) 5.3 插入相关文本要素 5.3.1 插入特殊字符 (1)通过菜单【插入】→【HTML】→【特殊字符】插入 先将光标放置到需要插入特殊字符的位置,然后展开菜单【插入】→【HTML】→【特殊字符】,在【特殊字符】的级联菜单中选择需要插入的特殊字符“换行符”。
(五)知识讲解与操作示范(6) (2)通过“文本”插入工具栏插入 先在Dreamweaver 8的“插入”工具栏中选择“文本”,显示“文本”插入工具栏。 将光标放置到需要插入特殊字符的位置,然后单击“文本”插入工具栏最右边的按钮,弹出快捷菜单,在快捷菜单中选择所需插入的特殊字符“不换行空格”即可插入到网页中。
(五)知识讲解与操作示范(7) 5.3.2 插入文本列表 在网页中插入文本列表可以使文本内容显得更加工整、直观。Dreamweaver 8中有两种类型:项目列表和编号列表。 设置项目列表的操作过程如下: (1)显示“文本”插入工具栏。 (2)输入多行文本,每一行必须按Enter键换行。 (3)选中需要设置成项目列表的文本。 (4)在“文本”插入工具栏中单击“项目列表”按钮,则选中的文本会被设置成项目列表,并且项目符号为默认的列表标志,也就是圆点。
(5)选中已有的项目列表其中的一项,然后单击属性面板的【列表项目】按钮,弹出“列表属性”对话框。在对话框中“列表类型”下拉列表框中选中“项目列表”,在“样式”下拉列表框中选择“正方形”,则选中列表的列表标志将转换成正方形。 (5)选中已有的项目列表其中的一项,然后单击属性面板的【列表项目】按钮,弹出“列表属性”对话框。在对话框中“列表类型”下拉列表框中选中“项目列表”,在“样式”下拉列表框中选择“正方形”,则选中列表的列表标志将转换成正方形。 (6)保存网页文档,且浏览网页 5.3.3 插入水平线 在标题与正文之间插入一条水平线,要求“对齐”方式设置为“居中对齐”,并且给水平线设置阴影效果。具体操作过程如下: (五)知识讲解与操作示范(8)
(1)将“插入”工具栏切换到“HTML”类型。 (2)将光标放置到标题最后一个字符的右边。 (3)单击HTML插入工具栏的“水平线”按钮,即可向网页中标题与正文之间插入一条水平线。 (4)在文档中单击选中刚插入的水平线。 (5)保存网页文档,浏览网页。 (五)知识讲解与操作示范(9)
5.3.4 插入时间 在01.html文档的最后一行插入形式如“Friday, 2006-07-14 9:47 AM”所示的日期,且要求每次保存网页时自动更新日期。具体操作过程如下: (1)切换到“常用”插入工具栏。 (2)按Enter键,添加一空行,将光标放置在空行与正文对齐的最左端。 (五)知识讲解与操作示范(10)
(3)单击菜单【插入】→【日期】,或者单击“常用”插入栏的【日期】按钮,将弹出 “插入日期”对话框。 (4)在“插入日期”对话框中,“星期格式”下拉表框中选取“Thursday,”,“日期格式”选取“1974-03-07”,在“时间格式”下拉列表框选取“10:18 PM”,选中“储存时自动更新”复选框,然后单击【确定】按钮,最后生成的日期效果为“Friday, 2006-07-14 9:47 AM”的形式。 (5)保存插入的日期,且浏览网页。 (五)知识讲解与操作示范(11)
5.4.1 文本属性面板 在Dreamweaver 8编辑窗口中,单击【窗口】→【属性】命令可以打开属性面板,然后用鼠标选中要格式化的文本,此时属性面板上显示的就是当前文字的属性 (五)知识讲解与操作示范(12) 5.4 文本的格式化
5.4.2 设置网页中文本的格式 对网页02.html中的文本按以下要求设置其格式: (1)将网页02.html中标题“欢迎您光临长沙世界之窗”格式设置为“标题1”,字体设置为“隶书”,大小设置为“36”,文字颜色设置为“#0000FF”,且要求水平居中。 (2)将网页中标题以下的正文,字体设置为“楷体_GB2321”,大小设置为“16”。(3)插入的日期字体设置为“宋体”,大小设置为“18”,文字颜色设置为“#FF6600”,且要求水平居中 (五)知识讲解与操作示范(13)
设置网页文本格式的具体过程如下: (1)选中标题“欢迎您光临长沙世界之窗”。 (2)在属性面板的“格式”下拉列表框中选择“标题1”。 (3)在“字体”列表中选择“隶书”,在“大小”列表中选择“36”,在“颜色”文本框输入“#FF6600”或者单击颜色选取按钮,打开“颜色选择器”自行选择一种合适的颜色即可。 (4)单击“居中对齐”按钮,使标题居中对齐。 (5)保存文本的格式设置。 (五)知识讲解与操作示范(14)
1.操作要求 (1)输入文本 打开“课堂实践”网站中文件夹“02文本操作”中的网页文档“02.html”,输入标题“湘江谷”,然后输入正文内容。这些文字内容存储在文件夹“02文本操作”中子文件夹“text”的文本文件“02.txt”中。 (六)课堂模仿实践
(2)插入一条“水平线”和日期。 (3)设置“主要景点”为列表格式。 (4)设置文本格式 (六)课堂模仿实践
将网页02.html中标题“湘江谷”格式设置为“标题1”,字体设置为“隶书”,大小设置为“36”,文字颜色设置为“aqua”,且要求水平居中。 将网页02.html中标题“湘江谷”格式设置为“标题1”,字体设置为“隶书”,大小设置为“36”,文字颜色设置为“aqua”,且要求水平居中。 将网页中标题以下的正文,字体设置为“华文行楷”,大小设置为“16”。 插入的日期字体设置为“楷体_GB2321”,大小设置为“18”,文字颜色设置为“#FF6600”,且要求水平居中 (六)课堂模仿实践
(六)课堂模仿实践 2.效果展示 课堂实践网页“02.html”的浏览效果如图所示。 • 图5-17 文本操作课堂实践项目展法
3.制作要点提示 (1)插入水平线和日期利用插入工具栏或者插入菜单完成。 (2)设置文本格式利用“属性”面板完成。 (六)课堂模仿实践
通常文本是网页的主要内容,文本的效果对网页整体效果影响很大,应该对文本进行有效的设置。本章主要学习了如何在页面输入文本、编辑文本;如何插入特殊字符、文本列表、水平线、时间和注释;如何对网页中的文本进行格式化,设置不同的字体、大小和颜色;了解了项目列表和编号列表,并能更改列表属性。通过对文本的操作,可以使网页更加美观。通常文本是网页的主要内容,文本的效果对网页整体效果影响很大,应该对文本进行有效的设置。本章主要学习了如何在页面输入文本、编辑文本;如何插入特殊字符、文本列表、水平线、时间和注释;如何对网页中的文本进行格式化,设置不同的字体、大小和颜色;了解了项目列表和编号列表,并能更改列表属性。通过对文本的操作,可以使网页更加美观。 (七)本章总结