教学步骤、内容:
导入:上节课我们学会了如何创建本地站点、如何在站点中创建所需的文件和文件夹,如何管理网站中的文件及资源。接下来我们就该学习如何编辑具体的网页了,网页部包含众多的网页元素,如文本、图像、表格、多媒体等等,以后我们会慢慢地来学习。文本是网页中最重要的元素,是网站内容的主要载体,我们这一节课就来学习网页中关于文本的一些操作。
任务一:通过让学生观摩一些精典网站的作品,来了解网站中文本不同的色彩和风格的运用。
任务二:让学生学会在网页中添加文本和设置文本格式的方法。
内容:
文本
一、文档的创建和保存
首先启动Dreamweaver后,选择屏幕中的【新建】->【HTML】项,如图3-1所示,这时一个新的网页文档就创建完成了。大家一定要养成一个好习惯:经常保存网页,以防机器故障或软件故障使劳动成果付之东流。执行【文件】->【保存】命令,然后输入要保存的文件名如:daili(扩展名“.html”可以不加,保存时系统会自动加上的),然后单击“保存”按钮。系统会自动保存到上一节创建的站点“mysite”文件夹下。
二、添加文本
1、在Dreamweaver中输入文字可不象Word那样随心所欲,输入文本需要注意以下问题:
换行:按快捷键【Shift 回车】(对应代码为“<br />”),行与行之间没有空行。
分段:直接按快捷键【回车】(对应代码为“<p> 字符串</p>”),段与段之间有一行空行。
输入空格:第一种方法:插入不换行空格,按快捷键【Ctrl Shirt Space】(对应代码为“ ”);
第二种方法:在确保输入法处于“全角”模式时输入空格。
2、复制文本
从word等应用程序中找到内容,采用复制-粘贴方式加入网页中。
三、设置文本格式
使用文本属性面板“文本”菜单或“文本”工具栏,可以方便地进行文本的格式设置。文本属性面板显示文档中被选中文本的格式属性。可以在文本属性面板中更改格式。Dreamweaver默认的属性面板即是文本属性面板,如图3-2所示。如果没有显示属性面板,可以通过执行【窗口】->【属性】命令打开它。
文本属性面板各选项作用:
“格式”下拉列表框:选择属性面板中的“格式”下拉列表框,可以设置选定文本的级别。
“字体”下拉列表框:选择字体。如果是第一次安装Dreamweaver,会发现中文字体非常少,选择字体下拉列表框中的“编辑字体列表…”项,这时弹出“编辑字体列表”对话框,如图3-3所示。在“可用字体”选项中选择一种字体比如“黑体”,单击
按钮,然后单击“确定”按钮,就可以把“黑体”字体加入字体列表中了。
“样式”下拉列表框:设置文本的CSS样式。
“大小”下拉列表框:设置字体大小。
“文本颜色”选择器:设置文字颜色。
文本属性面板还有设置字体粗细、文本对齐方式、文本超级链接等项。当然也可以通过菜单来设置文本属性,比文本属性面板的选项更多。
在文档中选择文本“电脑”,然后在“格式”下拉列表框选择“标题3”,“字体”下拉列表框中选择“黑体”,并单击“ ”按钮使其以粗体显示,类似方法可以设置文字“数码相机”、“投影机”、“办公打印/耗材”;在文档中选择文本“6665¥”,利用“文本颜色”选择器设置文本颜色,比如:#FF0000(红色);在文档中选择文本“6765¥”,单击“ ”按钮使其以斜体显示,再利用菜单【文本】->【样式】->【删除线】设置字体样式为删除线型。
四、文本的操作
1、剪切、复制与粘贴
2、撤消和重做操作
(1)【编辑】->【撤消】
(2)【窗口】->【历史记录】
(3)【编辑】->【重做】
3、检查拼写
【文本】->【检查拼写】
4、查找与替换文本
【编辑】->【查找和替换】
五、插入特殊字符
执行【插入记录】->【HTML】->【特殊字符】命令,来插入所需的字符。最快捷的方法是:在“插入”栏的“文本”类别中单击“字符”按钮上的箭头,然后选择所需的字符。插入的字符可以为:不换行空格(对应代码“ ”)、货币符号(如英镑符号,日元符号等)、版权信息等。当然也可以插入其他字符,或者执行【插入】->【HTML】->【特殊字符】->【其他字符】命令来打开“插入其他字符”对话框。
六、插入水平线
执行【插入记录】->【HTML】->【特殊字符】命令,来插入所需的水平线。
七、添加超链接
第一种方法:【属性面板】->【链接】
第二种方法:右击文本->【创建链接】
八、文本列表
列表可以使网页要显示的结构和内容更加清晰。在Dreamweaver中创建列表非常简单,直接选中文字或在文字前面定位,单击属性面板中的“项目列表”或“编号列表”按钮即可。
但是注意一点:列表项都必须为段落文本格式,不是的话必须进行转换(多数初学者容易在这里出错!),正确方法是直接在“电脑”这一行后面定位光标,然后按回车键就可以实现分段了。
九、作业
做两个简易的网页