1 / 26

Hunan Railway Professional Technology College

主讲人：湖南铁道职业技术学院　陈承欢. Hunan Railway Professional Technology College. 《 网页设计与制作 》 教学课件. 教学单元 9 ： 使用表格布局网页. 一、课程引导. 二、明确知识技能目标. 三、展示网页浏览效果. 主要教学环节. 四、分析操作任务. 五、知识讲解与操作示范. 六、课堂模仿实践. 七、疑难解析. 八、归纳总结. 九、布置习题. （一）课程引导.

norris
Download Presentation

Hunan Railway Professional Technology College

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 主讲人：湖南铁道职业技术学院　陈承欢 Hunan Railway Professional Technology College 《网页设计与制作》教学课件

  2. 教学单元9：使用表格布局网页 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

  3. （一）课程引导 网页上的信息大多都是通过文字来表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代，制作网页时，文本的输入与编辑占了制作工作的很大部分。 　　本章主要学习文本的各项操作。通过编辑网页文本、对网页文本进行格式化处理，使网页内容更加丰富，网页布局更加美观。

  4. （二）明确知识技能目标 （1）学会在网页中输入文本与编辑文本，掌握输入空格和实现文本换行的方法。 （2）学会在网页中插入水平线和日期。 （3）掌握网页文本格式化操作。

  5. （三）展示网页浏览效果 　本章所制作的网页“02.html”浏览效果如图所示。

  6. （四）分析操作任务 （1）打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html，然后在该网页中输入一段文字。 （2）利用按键方式输入一个或多个空格，利用“插入”工具栏插入“不换行空格”。 （3）利用按键方式实现文本换行，利用菜单插入“换行符”。 （4）在标题与正文之间插入一条水平线。 （5）在最后一行插入日期，且要求每次保存网页时自动更新日期。 （6）设置网页中文本的格式。

  7. （五）知识讲解与操作示范（1） 5.1　网页中输入文本 打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html，然后在该网页中输入一段文字。利用按键方式输入一个或多个空格，实现文本换行。 1．输入文字 　　（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的超始位置。 　　（2）选择适当的输入法输入文字，输入了一行文字作为页面文字的标题。

  8. （五）知识讲解与操作示范（2） 2．输入文本空格 输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现： 　（1）将输入法切换到中文全角状态。 　（2）直接按“Ctrl+Shift+Space”组合键。 　（3）在“文本”工具栏，选择【不换行空格】命令，可以插入多个连续的空格

  9. （五）知识讲解与操作示范（3） 3．实现文本换行 输入多行文本，要实现换行，可以按Enter键或者按Shift＋Enter组合键来实现。按Enter键，换行的行距较大，按Shift＋Enter组合键，换行的行距较小。

  10. （五）知识讲解与操作示范（4） 5.2　网页中编辑文本 网页中输入的文本与Word一样，也能进行编辑，常见的文本编辑操作有： 　（1）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 　（2）按BackSpace键或Delete键实现删除文本操作。 　（3）将光标移动到需要插入文本的位置，输入新的文本。 　（4）实现复制、剪切、粘贴等操作。 　（5）实现查找与替换操作。 　（6）实现撤消或重做操作。

  11. （五）知识讲解与操作示范（5） 5.3　插入相关文本要素 5.3.1　插入特殊字符 　（1）通过菜单【插入】→【HTML】→【特殊字符】插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符“换行符”。

  12. （五）知识讲解与操作示范（6） （2）通过“文本”插入工具栏插入 先在Dreamweaver 8的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。 　　将光标放置到需要插入特殊字符的位置，然后单击“文本”插入工具栏最右边的按钮，弹出快捷菜单，在快捷菜单中选择所需插入的特殊字符“不换行空格”即可插入到网页中。

  13. （五）知识讲解与操作示范（7） 5.3.2　插入文本列表 　 在网页中插入文本列表可以使文本内容显得更加工整、直观。Dreamweaver 8中有两种类型：项目列表和编号列表。 　设置项目列表的操作过程如下: （1）显示“文本”插入工具栏。 （2）输入多行文本，每一行必须按Enter键换行。 （3）选中需要设置成项目列表的文本。 （4）在“文本”插入工具栏中单击“项目列表”按钮,则选中的文本会被设置成项目列表，并且项目符号为默认的列表标志，也就是圆点。

  14. 　　（5）选中已有的项目列表其中的一项，然后单击属性面板的【列表项目】按钮，弹出“列表属性”对话框。在对话框中“列表类型”下拉列表框中选中“项目列表”，在“样式”下拉列表框中选择“正方形”，则选中列表的列表标志将转换成正方形。　　（5）选中已有的项目列表其中的一项，然后单击属性面板的【列表项目】按钮，弹出“列表属性”对话框。在对话框中“列表类型”下拉列表框中选中“项目列表”，在“样式”下拉列表框中选择“正方形”，则选中列表的列表标志将转换成正方形。 　　（6）保存网页文档，且浏览网页 5.3.3　插入水平线 　　　在标题与正文之间插入一条水平线，要求“对齐”方式设置为“居中对齐”，并且给水平线设置阴影效果。具体操作过程如下： （五）知识讲解与操作示范（8）

  15. （1）将“插入”工具栏切换到“HTML”类型。 （2）将光标放置到标题最后一个字符的右边。 （3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。 （4）在文档中单击选中刚插入的水平线。 （5）保存网页文档，浏览网页。 （五）知识讲解与操作示范（9）

  16. 5.3.4　插入时间 　　在01.html文档的最后一行插入形式如“Friday, 2006-07-14 9:47 AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下： 　　（1）切换到“常用”插入工具栏。 　　（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。 （五）知识讲解与操作示范（10）

  17. （3）单击菜单【插入】→【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。 （4）在“插入日期”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“1974-03-07”，在“时间格式”下拉列表框选取“10:18 PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday, 2006-07-14 9:47 AM”的形式。 （5）保存插入的日期，且浏览网页。 （五）知识讲解与操作示范（11）

  18. 5.4.1　文本属性面板 　　　在Dreamweaver 8编辑窗口中，单击【窗口】→【属性】命令可以打开属性面板，然后用鼠标选中要格式化的文本，此时属性面板上显示的就是当前文字的属性 （五）知识讲解与操作示范（12） 5.4　文本的格式化

  19. 5.4.2　设置网页中文本的格式 　　对网页02.html中的文本按以下要求设置其格式： 　　（1）将网页02.html中标题“欢迎您光临长沙世界之窗”格式设置为“标题1”，字体设置为“隶书”，大小设置为“36”，文字颜色设置为“#0000FF”，且要求水平居中。 　　（2）将网页中标题以下的正文，字体设置为“楷体_GB2321”，大小设置为“16”。（3）插入的日期字体设置为“宋体”，大小设置为“18”，文字颜色设置为“#FF6600”，且要求水平居中 （五）知识讲解与操作示范（13）

  20. 设置网页文本格式的具体过程如下： （1）选中标题“欢迎您光临长沙世界之窗”。 （2）在属性面板的“格式”下拉列表框中选择“标题1”。 （3）在“字体”列表中选择“隶书”，在“大小”列表中选择“36”，在“颜色”文本框输入“#FF6600”或者单击颜色选取按钮，打开“颜色选择器”自行选择一种合适的颜色即可。 （4）单击“居中对齐”按钮，使标题居中对齐。 （5）保存文本的格式设置。 （五）知识讲解与操作示范（14）

  21. 1．操作要求 （1）输入文本 打开“课堂实践”网站中文件夹“02文本操作”中的网页文档“02.html”，输入标题“湘江谷”，然后输入正文内容。这些文字内容存储在文件夹“02文本操作”中子文件夹“text”的文本文件“02.txt”中。 （六）课堂模仿实践

  22. （2）插入一条“水平线”和日期。 （3）设置“主要景点”为列表格式。 （4）设置文本格式 （六）课堂模仿实践

  23. 　　　将网页02.html中标题“湘江谷”格式设置为“标题1”，字体设置为“隶书”，大小设置为“36”，文字颜色设置为“aqua”，且要求水平居中。　　　将网页02.html中标题“湘江谷”格式设置为“标题1”，字体设置为“隶书”，大小设置为“36”，文字颜色设置为“aqua”，且要求水平居中。 　　　将网页中标题以下的正文，字体设置为“华文行楷”，大小设置为“16”。 　　　插入的日期字体设置为“楷体_GB2321”，大小设置为“18”，文字颜色设置为“#FF6600”，且要求水平居中 （六）课堂模仿实践

  24. （六）课堂模仿实践 2．效果展示 课堂实践网页“02.html”的浏览效果如图所示。 • 图5-17　　文本操作课堂实践项目展法

  25. 3．制作要点提示 （1）插入水平线和日期利用插入工具栏或者插入菜单完成。 （2）设置文本格式利用“属性”面板完成。 （六）课堂模仿实践

  26. 通常文本是网页的主要内容，文本的效果对网页整体效果影响很大，应该对文本进行有效的设置。本章主要学习了如何在页面输入文本、编辑文本；如何插入特殊字符、文本列表、水平线、时间和注释；如何对网页中的文本进行格式化，设置不同的字体、大小和颜色；了解了项目列表和编号列表，并能更改列表属性。通过对文本的操作，可以使网页更加美观。通常文本是网页的主要内容，文本的效果对网页整体效果影响很大，应该对文本进行有效的设置。本章主要学习了如何在页面输入文本、编辑文本；如何插入特殊字符、文本列表、水平线、时间和注释；如何对网页中的文本进行格式化，设置不同的字体、大小和颜色；了解了项目列表和编号列表，并能更改列表属性。通过对文本的操作，可以使网页更加美观。 （七）本章总结

More Related