web前端页面制造基本领导材料三
主 题:第三章 文字段落、图像的利用(课件)
进修时光:2021年10月11日-10月17日
内 容:
我们这周重要进修第三章文字段落、图像的利用等。盼望经由过程下面的内容对能使同窗们加深对文字段落、图像的利用等相干知识的懂得。
知识要点:
文字跟段落
图像的利用
重点难点:
1、图像的利用
文字、图像、动画、声响跟视频是网页中罕见的东西,它们构成了网页的基本内容。Dreamweaver供给了功能富强的可视化计划东西,可能对这些网页东西停止编辑跟处理。
一、文字跟段落在网页中的利用
文字是网页的主体,传达各种百般的信息,浏览者重要经由过程文字懂得网页的内容。本节介绍在网页中利用文字、设置文字跟段落格局的方法。
1、拔出文字
在网页中拔出文字有3种方法:直接输入、粘贴剪贴板中的文字、导入Word文档。
直接经由过程键盘输入
粘贴剪贴板中的文字
导入Word文档
2、设置文本格局
当在网页中拔出文本后,可能对这些文本的属性停止相干的设置,如许网页将变化更美丽。
对于设置文本格局
默许情况下,Dreamweaver利用层叠款式表(CSS)设置文本格局。CSS使Web计划人员跟开辟人员能更好地把持网页计划。当利用 Dreamweaver的格局设置命令设置文本格局跟对齐文本时,CSS规矩将嵌入到以后文档中。
假如乐意,可能利用HTML标签在网页中设置文本格局跟对齐方法。若要利用HTML标签而不是CSS,则必须变动Dreamweaver的默许文本格局设置首选参数。具体方法如下所述。
(1)抉择【编辑】|【首选参数】命令,打开【首选参数】对话框。
(2)在【首选参数】对话框的【惯例】类别中,在【编辑】选项部分,撤消选中“利用CSS 而不是HTML标签”复选框。如图3-3所示。单击【断定】按钮。
设置文本字体
第一次打开Dreamweaver CS3的字体列表,表面只有多少种汉字字体,须要用户本人增加其他字体,具体的编辑字体列表跟设置文本字体的方法如下。
(1)在Dreamweaver的文档编辑区拔出一些文字。
(2)选中须要改变字体的文本。在【属性】面板中开展【字体】前面的下拉列表,抉择【编辑字体列表】,如图3-4所示。
(3)这时将弹出【编辑字体列表】对话框,在【可用字体】列表框中,抉择Verdana,单击按钮 ,将其增加到左侧的【抉择的字体】列表中,用同样的方法再将“宋体”也参加【抉择的字体】中,如许将掉掉落一个新的字体列表“Verdana,宋体”,实现设置后单击【断定】按钮,如图3-5所示。
(4)再次开展【字体】前面的列表,抉择方才新建的字体列表“Verdana,宋体”,如图3-6所示。如许所抉择的字体格局就被设置到所选文本上了。
设置文字大小
输入到网页中的文字都是按照默许的大小表现的,可能对这些文本的大小停止变动。具体操纵步调如下所述。
(1)选中须要变动文字大小的文本,在【属性】面板中单击“大小”选项框旁边的按钮,在弹出的文字大小列表框中,抉择一个类别,如图3-7所示。
(2)在“大小”选项框左边另有一个选项框,是设置文字大小的单位的,表面包含像素(px)、点数(pt)、厘米(cm)等9个单位选项,如图3-8所示。可能根据须要抉择文字大小的单位。默许情况下,平日用像素(px)为单位。
奥鹏大工答案请进:opzy.net或请联系微信:1095258436
(3)假如在“大小”列表框中,不须要的字体大小,可能将光标定位在“大小”文本框中,直接输入文字大小的数字,然后按Enter键即可。
设置文本色彩
一般默许情况下,输入到网页中的文字都是黑色,可能经由过程文本属性设置文本的色彩。选中须要变动文字色彩的文本,在【属性】面板中单击“文本色彩”按钮,弹出调色板,在其中抉择一种须要的色彩即可。
3、设置段落格局
网页中的文章段落明显,有档次感,才干让浏览者更好地浏览。也使得页面看起来整洁、美不雅大方。下面介绍设置段落格局的方法。
设置文本标题
在一个网站的网页中或许一篇独破的文章中,平日都会有一个夺目标标题,告诉浏览者这个网站的名字或该文章的主题。
HTML的标题标签重要用来疾速设置文本标题标格局,典范的情势是
,它用来设置第一层标题,
设置第二层标题,以此类推。
可能在计划视图中,经由过程“属性”面板停止文字标题标设置。
设置段落对齐
段落的对齐方法,分辨有居左对齐、居右对齐、居中对齐跟两头对齐。在“属性”面板中可能单击“左对齐”、“右对齐”、“居中对齐”跟“两头对齐”按钮设置段落的对齐方法。如图3-12所示。
4、设置文本款式
利用【属性】面板设置文本格局时,Dreamweaver将跟踪操纵者为每个文本元素指定的格局设置属性,并利用如下命名商定为每个元素指定一个标识:Style1、Style2、Style3、Stylen。假如为两个或更多文本元素指定雷同的格局属性,Dreamweaver将利用雷同的标识标记这些元素,从而增加了不须要的款式称号。这些被Dreamweaver主动跟踪所创建的标识都会表现在【属性】面板的“款式”列表框中,如图3-18所示。
假如在网页的编辑过程中,利用到了雷同的文本属性设置,只有抉择页面中的文本元素,从“款式”列表框中抉择一个款式,即可利用这些雷同的款式。
其余还可能抉择“款式”列表框中的“重命名”命令,利用更存在意思的标识符重命名这些款式,比方Heading1、Heading2、TableBody等。
专家点拨:这里的Style1、Style2、Style3等标识现实上就是CSS款式名,有关CSS的具体内容会在前面的章节停止介绍。
二、图像在网页中的利用
图像是网页中最常用的元素,要想制造美丽的网页是离不开图像这个元素的。网页中的图像一般都是利用Fireworks或Photoshop如许的专业图像处理软件停止编辑,然后将这些图像拔出到Dreamweaver中对网页停止润饰跟美化。
1、设置图像属性
在网页中拔出图像以后,可能利用“属性”面板设置图像的属性,如图3-33所示。
下面对“属性”面板中的各个选项停止阐明。
“图像”文本框:在图像缩略图旁边的文本框中,输入一个称号,以便在利用Dreamweaver行动(比方“交换图像”)或编写剧本言语(比方JavaScript或VBScript)时可能引用该图像。
“宽”跟“高”文本框:以像素为单位指定图像的宽度跟高度。在页面中拔出图像时,Dreamweaver会主动用图像的原始尺寸更新这些文本框。假如设置的“宽”跟“高”的值与图像的现实宽度跟高度不符合,则该图像在浏览器中可能不会正确表现。若要恢复原始值,请单击“宽”跟“高”文本框标签,或单击用于输入新值的“宽”跟“高”文本框右侧的“重设大小”按钮。
“源文件”文本框:指定图像的源文件。单击文件夹图标可能浏览找到图像的源文件,也可能直接键入图像源文件地点道路。
“链接”文本框:指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件,单击文件夹图标浏览到站点上的某个文档,也可能直接手动键入URL。
“调换”文本框:指定在只表现文本的浏览器或已设置为手动下载图像的浏览器中代替图像表现的调换文本。在某些浏览器中,当鼠标指针滑过图像时也会表现该文本。
“对齐”下拉列表:在其中抉择一个选项,对齐同一行上的图像跟文本。
“地图”文本框跟热点东西:容许用户标注跟创建客户端图像地图。
“垂直边距”跟“程度边距”文本框:沿图像的边增加边距,以像素表示。垂直边距摂沿图像的顶部跟底部增加边距。“程度边距”沿图像的左侧跟右侧增加边距。
“目标”下拉列表:指定链接的页应当在其中载入的框架或窗口。当图像不链接到其余文件时,此选项弗成用。以后框架会合全部框架的称号都表现在“目标”列表中。
“边框”文本框:是以像素为单位的图像边框的宽度,默许情况下为无边框。
“编辑”按钮:启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。
“优化”按钮:打开“优化”对话框,在其中可对图像停止优化设置。
“裁剪”按钮:修剪图像的大小,从所选图像中删除不须要的地区。
“重新取样”按钮:重新取样已调剂大小的图像,进步图片在新的大小跟外形下的品德。
“亮度跟对比度”按钮:调剂图像的亮度跟对比度设置。
“锐化”按钮:调剂图像的清楚度。
“重设大小”按钮:当改变了图像尺寸后,“宽”跟“高”文本框左边会呈现这个按钮,单击它可能将“宽”跟“高”的值重设为图像的原始大小。
2、利用外部图像编辑器
Dreamweaver容许利用外部图像编辑器对页面上的图像停止编辑。在【首选参数】对话框中,利用“文件范例/编辑器”首选参数抉择用于启动跟编辑图形文件的图像编辑器。可能设置编辑器打开哪些文件范例;并且可能抉择多个图像编辑器。
例题
下列元素,哪些是罕见的网页东西()。
A. 文字 B. 图像 C. 声响 D. 视频
Dreamweaver容许利用外部图像编辑器对页面上的图像停止编辑。()
在网页中拔出文字有3种方法:()、()、()。
答案
ABCD
对
直接输入、粘贴剪切板中的文字、导入word文档