dreamweaver文本.docx
- 文档编号:20099125
- 上传时间:2023-04-24
- 格式:DOCX
- 页数:11
- 大小:451.51KB
dreamweaver文本.docx
《dreamweaver文本.docx》由会员分享,可在线阅读,更多相关《dreamweaver文本.docx(11页珍藏版)》请在冰豆网上搜索。
dreamweaver文本
文本
Dreamweaver的“所见即所得”功能,在进行文字与图片的插入时非常直观,它们在编辑器中的样式,基本上跟在浏览器中的最终效果是一致的,因此,我们说只要你会使用Word,就能很快掌握Dreamweaver的网页制作技术。
一.文本:
文本是网页中最基本的元素,既可以手工逐字逐句地输入,也可以把别的应用程序中文本直接粘贴到网页编辑窗口中。
提示:
Dreamweaver4.0与以前版本相比,其对中文的支持略有不同。
在4.0版中,直接从其他应用程序粘贴复制过来的文本的换行符也能被区别出来,也就是说继承了原来文本的排版格式,这个特点,是以前版本所不具备的;但Dreamweaver4.0不支持中文五笔字型输入法,因此在进行中文输入时建议采用其他输入法,或者可以在其他应用程序(如写字板)先输入中文,再直接粘贴复制到Dreamweaver4.0的编辑页面中;对源代码的支持,Dreamweaver4.0的感觉也不是很方便。
在网页中插入文本非常简单,但要对其进行精确的控制,就不是那么简单的了。
Dreamweaver4.0主要提供了两种方法对文本信息进行精确控制,一种是文本的属性标记,另外一种是层叠样式表(CSS)。
(一).文本属性标记:
1.分段与强制折行:
在Dreamweaver中,回车键的功能在于分段;按住Shift键同时按回车键,则代表强制折行。
两者的区别在于,前者前后的内容属于不同的段落,因此行间距较大;后者同处于一段,只是另起一行,因此行间距比较小。
如图一中,左图的文字强制折行,右图文字以回车键分段:
图一
2.文字属性设置:
对文本的属性设置,可以通过属性面板完成。
(Window/Properties)
Format:
设置文字大小,Paragraph属性可以使选中文字独自成为一个段落,Heading1——Heading6用来控制文本大小。
在HTML源代码中,Heading被简化为H,Heading1就写成H1,在这几种格式中,H1字体最大,H6字体最小。
它们的区别如图二:
图二
Size:
也是设置字体大小,不过与Format不同的是,Heading标记通常赋予标题,字体改变大小的同时变为粗体;如果只想改变文字大小,而不想让字体变为粗体,可以用Size属性。
另外,Size只对选中文本起作用,而Format对整段文字起作用。
它们的区别如图三:
图三
Font:
设置字体类型。
下拉框中有多种字体可供选择,如图四:
图四
提示:
为什么下拉框中每一行选项都罗列了好几种字体呢?
这种设置其实是非常有用的,因为我们做出来的网页是要拿给别人看的,但不同的计算机用户,其系统字体也可能不同,为了保证大家都能清楚明了地识别网页上的字体,因此有必要对字体进行多种类型的设置,当用户机器上没有第一种字体时,我们还提供了第二种字体;第二种字体通过不了,那还有第三种......如果都识别不了,那么它就使用浏览器的默认字体。
颜色:
选中文字,然后在弹出的色板中进行颜色选择。
也可以直接在颜色输入栏中输入颜色的十六进制代码,如常见的红色(#ff0000),绿色(#00ff00),蓝色(#0000ff)。
如图五:
图五
加粗、倾斜:
使文字变为粗体字、斜体字。
如图六:
图六
居左、居中、居右:
使整段文本居左、居中、居右排列。
注意:
这里的整段,针对的是Dreamweaver的段落概念,也就是用回车键隔开的文本。
如果是用Shift+回车键分出的段落,无论其间空距有多大,由于逻辑上属于一段,这个居中或居左居右命令会同时作用于它的所有内容。
列表清单:
分为无序列表与有序列表。
所谓有序列表就是有数字顺序的清单列表,无序列表则是用专门的非数字列表符号作为各个项目的区分。
如图七:
图七
(二).层叠样式表(CSS)
层叠样式表(CascadingStyleSheets)是W3C组织制定的一种网页规范,有利于对网页进一步进行精确控制。
由于它的内容比较多,而且网上这方面的资料不少,因此我们在这里只是简单地谈一下它在Dreamweaver中的文本控制功能。
提示:
前面我们讲到了很多Dreamweaver的文本控制功能,为何还要加以CSS的辅助?
很简单,Dreamweaver的文本控制功能不足,无论是字体大小,排列方式,还是行间距,等等,它所提供的选择并不多,为了让我们的网页更加美观,更加规范,有必要使用CSS。
1.样式表的创建:
Window/CSSStyles,弹出的面板如图八:
图八
单击面板右上角向右的箭头,在弹出的菜单中选择"NewStyle",如图九:
图九
选定后弹出如图十的窗口:
图十
Name:
样式表的名字,注意名称前有个点号,其作用在于告诉浏览器这是一个样式类标记,而不是HTML标记符号。
默认名称为.unamed,你也可以自己起一个名字(仅适用于自定义样式表)。
Type:
样式表类型,共有三种,它们是:
自定义样式表(MakeCustomStyle),重新定义HTML标记(RedefineHTMLTag),使用CSS选择器(UsingCSSSelector)。
提示:
自定义样式表就是自己创建一个新的样式出来;重新定义HTML标记,就是用样式表将HTML中默认的标记属性改成新属性,凡是网页中用到该已被修改的标记,都会继承新的属性,而原来的属性就不管用了;CSS选择器主要提供了链接内容的样式修改。
Define:
定义作用的范围,NewStyleSheetFile,即创建一个新的样式表文件;如果该网页已套用样式表文件,还可以在下拉框中找到文件,将新的样式应用到该文件中(也就是改变改文件中的相关设置);ThisDocumentOnly,则该样式表仅作用于本网页。
这里我们是创建新的样式表,因此选择Type中自定义样式表选项,然后点按OK,弹出如图十一的面板:
图十一
在此面板上,可以对多种网页元素进行精确控制,如文字类型(Type),背景(Background),区域设置(Block),边界设置(Border),列表设置(List),等等。
由于篇幅有限,仅在此列出一些比较常用的设置。
*Type:
Size:
文字大小,从下拉框中进行选择。
大家可以明显看出,这里提供了对文字大小的更多控制选项。
另外,如果你对所有下拉选项都不满意,还可以通过输入数字,自己定义文字大小。
如图十二:
图十二
Line:
行间高度,可以是默认的Normal,也可以自定义(选择Value,然后在输入框中输入数字)。
如图十三:
图十三
Decoration:
文本修饰属性,包括添加下划线(Underline),上划线(Overline),删除线(Line-through),闪烁(Blink),右边还可以进行颜色的选择。
提示:
带"*"号的选项表示不能直接在Dreamweaver编辑器中显示,只能在浏览器中才能看到它的效果。
*List:
Type中提供了多种类型可供选择,如图十四:
图十四
2.样式表的引用:
样式表的引用有多种方法,这里我们只列出一种最简单的方法以便于大家掌握。
假设我们已经建立了两个新的自定义样式表,名字分别为:
.unamed1与.unamed2,如图十五:
图十五
.unamed1将字体大小设为36,斜型,红色,如图十六:
图十六
.unamed2将字体大小设为16,蓝色,如图十七:
图十七
在Dreamweaver的文档编辑窗口中输入"WelcometoMyHomepage
Thisismyhomepage,it'sverypoor,Now,becauseit'smyfirsthomepage。
"字样。
结果如图十八:
图十八
用鼠标将光标位置移动到第一行文字处,然后点选样式面板上的.unamed1,这时你将看到样式表自动套用到文字上了!
如图一十九:
图一十九
同理,光标位置移动到第二行,然后点选样式面板上的.unamed2,第二个样式表又套用上了!
结果如图二十:
图二十
提示:
Dreamweaver4.0在样式表的套用上较以前版本方便多了,既可以直接用于某个段落,也可以直接用于某行对象,而不需再如以前般要在选择下拉单中选择套用了。
Dreamweaver中对样式表的套用有多种方式,如刚才这种方式我们称为“内嵌式样式表”,除此之外,还有内联式样式,链接式样式表,等等。
为了不让大家觉得太难,我们就省却了这些内容的介绍,当你在掌握了本教程后,可以再专门就CSS进行学习。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver 文本