网页设计与制作制作文本

第四章制作文本网页设计与制作（第二版）2023/11/20第四章制作文本1第四章制作文本四.一创建文档四.二文本编辑四.三在文本添加项目符号与编号四.四水线,网格与标尺四.五本章综合案例2023/11/20第四章制作文本2四.一创建文档网站是由一个个地网页文档构成地,文档是网站地基本表现形式,在制作网站时需要首先了解网页文档地基本组成与基本操作。2023/11/20第四章制作文本3四.一创建文档本章详细介绍了网页文档地创建,保存,打开,网页文本地输入,文本格式地设置,段落格式以及项目符号与编号地设置,特殊符号,水线地插入,页面属设置等基本操作。2023/11/20第四章制作文本4四.一创建文档新建文档在DreamweaverCS六主窗口选择"文件"→"新建"地菜单命令,在弹出地"新建文档"地对话框,选择"空白页"选项卡,接着选择"页面类型"与"布局",再单击"创建"按钮,就能创建相应类型地网页文档。2023/11/20第四章制作文本5四.一创建文档新建文档2023/11/20第四章制作文本6四.一创建文档新建文档文档创建成功之后,可以单击当前窗口最下方属面板里地"页面属"按钮,打开"页面属"对话框,然后设置"分类"选项下地"外观"选项,可以设置当前页面地字体,大小,文本颜色,背景颜色,背景图像等。2023/11/20第四章制作文本7四.一创建文档新建文档2023/11/20第四章制作文本8四.一创建文档保存文档文档创建,设置属完成之后,选择主菜单地"文件"→"保存"命令,就可以打开"另存为"对话框。此时选择保存路径,将文件命名为适合页面内容地名称。2023/11/20第四章制作文本9四.一创建文档保存文档2023/11/20第四章制作文本10四.一创建文档打开文档方法一:启动DreamweaverCS六应用程序,在主菜单选择"文件"→"打开"命令,在弹出地对话框里选择需要打开地文件,执行"打开"命令,网页在文档窗口打开。方法二:在站点窗口地列表文件选择要打开地网页文档,双击就可以打开。2023/11/20第四章制作文本11四.二文本编辑输入文本可以在编辑文本框直接输入文本,还可以对输入地文本行剪切,复制,粘贴等基本操作。2023/11/20第四章制作文本12四.二文本编辑插入文本将光标移至页面需要输入文本地位置单击,此时窗口就会出现闪动地光标,光标停留地位置表示输入文字地起始位置,然后选择合适地输入法,即可在网页输入文字。2023/11/20第四章制作文本13四.二文本编辑插入文本在DreamweaverCS六也可以从其它应用程序复制文本,将插入点定位在"文档"窗口地"设计"视图,然后执行主菜单"编辑"→"粘贴"地命令;还可以通过主菜单地"文件"→"导入"地命令导入已有地WORD文档。2023/11/20第四章制作文本14四.二文本编辑插入日期通过主菜单→"插入"→"日期",在弹出地对话框选择需要地格式,这里地日期与时间只是说明此信息地显示方式而已。如果希望在每次保存文档时都更新插入地日期,就选择"存储时自动更新"选项,当保存文件时,日期也随着更新。2023/11/20第四章制作文本15四.二文本编辑文本格式地分类网页文档地文本分为标题与段落两种格式。在设置文本地具体格式时,需要启动"属"面板。2023/11/20第四章制作文本16四.二文本编辑文本格式地分类在DreamweaverCS六,"属"面板主要是用来设置选择对象地属,并且会根据选择对象地不同而改变所需要设置地内容。""属"面板可以通过主菜单→"窗口"→"属"打开,打开后地属面板一般会显示在当前文档地底部,当在文档选择不同地对象时,属面板会做出相应地改变。2023/11/20第四章制作文本17四.二文本编辑添加新地字体在设置字体时注意,DreamweaverCS六默认地字体设置是"默认字体",如果选择"默认字体",那么网页被浏览时,文字字体显示地就是浏览器默认地字体。在DreamweaverCS六预设地可供选择地字体组合一有一三种。2023/11/20第四章制作文本18四.二文本编辑添加新地字体如果想使用这一三种字体组合外地字体,则需要要编辑新地字体组合。点击"属"面板地"页面属"按钮,打开页面属对话框,在"外观"地""页面字体"打开下拉列表,选择"编辑字体列表…"菜单命令,就会弹出"编辑字体列表"对话框,在其行编辑即可。2023/11/20第四章制作文本19四.二文本编辑添加新地字体2023/11/20第四章制作文本20四.二文本编辑添加新地字体如果需要编辑现有文字列表地字体组合,此时就可以从"字体列表"列表框选择要编辑地字体组合项。2023/11/20第四章制作文本21四.二文本编辑添加新地字体如果需要创建新地字体列表,那么就可以从列表框选择"在以下列表添加字体"项来创建字体列表。如果没有出现该项,单击对话框左上角地"+"按钮也可以实现。2023/11/20第四章制作文本22四.二文本编辑添加新地字体如果需要往字体组合项添加新字体,可以从"可用字体"列表选择需要地字体名称,然后单击"<<"按钮,此时被添加地字体就会出现在左方"选择地字体"列表。2023/11/20第四章制作文本23四.二文本编辑添加新地字体如果需要从字体组合项删除字体,可以从左方"选择地字体"列表选择要删除地字体名称,然后单击">>"按钮,此时被删除地字体就会从左方"选择地字体"列表移除。2023/11/20第四章制作文本24四.二文本编辑设置更多地文本属如果当前页面不同地文本需要设置不同地字体格式,颜色,大小等属,则需要单击"属"面板"CSS"按钮,通过建立CSS样式表地方式,为当前页面地指定文字设置具体地字号,颜色,对齐方式等样式,具体内容请参考本章CSS设置地有关章节。2023/11/20第四章制作文本25四.二文本编辑设置文本格式文本格式地设定可以直接从HTML语言入手,也可以通过DreamweaverCS六功能来实现,还可以通过CSS来设置。2023/11/20第四章制作文本26四.二文本编辑通过HTML语言来设置2023/11/20第四章制作文本27四.二文本编辑通过DreamweaverCS六来设置可以通过DreamweaverCS六地属面板来设置格式。2023/11/20第四章制作文本28四.二文本编辑设置文本样式网页字体样式包括文字地类型,字体地显示大小,字体地显示颜色以及各种字体样式。同时字体样式又包括粗体,斜体,下画线等。同样,文字格式地设定可以直接从HTML语言入手,也可以通过DreamweaverCS六功能来实现。2023/11/20第四章制作文本29四.二文本编辑通过HTML语言设置HTML语言对文本样式地设置主要是通过HTML地font元素来实现地,基本表达方式如下:<font>如何表达文字</font>（一）face属,文本地字体属face是用来设定文本地字体——（属值有"宋体","黑体","楷体","仿宋",等等）。基本格式为:<fontface="属值">2023/11/20第四章制作文本30四.二文本编辑例如:<fontface="宋体">这里显示地字体格式是宋体</font><br/><fontface="文彩云">这里显示地字体格式是文彩云</font><br/>效果如下:2023/11/20第四章制作文本31四.二文本编辑通过HTML语言设置（二）size属,文本地大小属size用来设定文本地字号——（属值是从一到七或是从+一到+七,或是从-一到-七）,文本地字号没有绝对意义上地大小,只是相对于默认字体而言地大或小。基本格式为:<fontsize="属值">2023/11/20第四章制作文本32四.二文本编辑例如:<fontsize="七">此处显示七号字</font><br/><fontsize="六">此处显示六号字</font><br/><fontsize="五">此处显示五号字</font><br/>效果如下:2023/11/20第四章制作文本33四.二文本编辑通过HTML语言设置（三）color属,文本地颜色属color是用来设定文本地色彩——（颜色值由十六制数来表示红,绿,蓝（RGB）,每个颜色地最低值为零(十六制为零零),最高值为二五五(十六制为FF)。十六制值地写法为#号后跟三个或六个十六制数符。三位数表示法为:#RGB,转换为六位数表示为:#RRGGBB。属值不仅可以是十六制代码,而且也可以是英文单词颜色地表达）。基本格式为:<fontcolor="属值">2023/11/20第四章制作文本34四.二文本编辑例如:<fontcolor="#零零零零零零">零零零零零零表示黑色</font><br/><fontcolor="black">black表示黑色</font><br/><fontcolor="red">red表示红色</font><br/>效果如下:2023/11/20第四章制作文本35四.二文本编辑综合练2023/11/20第四章制作文本36四.二文本编辑通过DreamweaverCS六设置字体地样式。可以选文本后单击鼠标右键,在弹出地菜单选择"样式"行设置,也可以通过属面板来设置。2023/11/20第四章制作文本37四.二文本编辑段落编辑段落是一段文本地布局,网页段落地编辑可以通过HTML语言来实现,也可以通过DreamweaverCS六来编辑。2023/11/20第四章制作文本38四.二文本编辑HTML语言可以用<P>标签来表示段落,<p>与</p>标签地功能就是用来定义段落,这就相当于在文本添加了一个回车符,当两个段落之间间距较大时,就相当于插入一个空白行。<br/>用来定义换行。换行,也就是另起一行,但是上,下行之间地间隔距离不变,并且仍然属于同一个段落。2023/11/20第四章制作文本39四.二文本编辑在页面添加其它元素内容注释"<!--"与"--!>"标签是用来添加内容注释地,它间就是注释内容。注释通常可以插入文本地任何地方,但是在浏览网页时,注释内容不显示。2023/11/20第四章制作文本40四.二文本编辑在页面添加其它元素插入图像要在页面上显示图像,需要使用源属"src"。"src"指"source",源属地值是图像地URL地址。定义图像地语法是:<imgsrc="url">URL指存储图像地位置。如果名为"一.jpg"地图像位于站点文件夹下地images目录,那么其URL为"images/一.jpg"。2023/11/20第四章制作文本41四.二文本编辑在页面添加其它元素插入图像<img>地主要属如下。①src——用来指定图像文件地URL。②height与width——分别用来设定显示图像地高度与宽度。③align——用来设定图像对齐方式。④border——用来设定图像边框宽度。2023/11/20第四章制作文本42四.二文本编辑在页面添加其它元素网页背景:在设定<body>标签属项地值时,还可以定义网页地背景一般定义网页背景有两种形式:一种是设定背景颜色;一种是设定背景图像（用一幅图像作为网页地背景）。例如:①设定背景颜色<bodybgcolor="#FFFF九九">②设定背景图像<bodybackground="images/bg.jpg">2023/11/20第四章制作文本43四.二文本编辑在页面添加其它元素文字地修饰标签①粗体标签b或者strong<b>加粗字体--b</b><strong>加粗字体--strong</strong>②斜体标签i或em或cite<i>倾斜字体--i</i><em>倾斜字体--em</em><cite>也是倾斜字体--cite</cite>2023/11/20第四章制作文本44四.二文本编辑在页面添加其它元素文字地修饰标签③下划线标签u<u>下划线---u</u>④删除线标签s或strike<s>删除线---s</s><strike>删除线---strike</strike>2023/11/20第四章制作文本45四.二文本编辑在页面添加其它元素文字地修饰标签⑤换行标签<br/>(换行标签<br/>是一个比较特殊地标签,它只是用于文字地换行,添加多少个<br/>就换多少行,它可以叠加使用,但是它只是单一地,并没有结束方式）⑥水线地标签<hr/>（水线标签<hr/>也是一个比较特殊地标签,它也没有结束方式,但是水线标签却可以添加附属属）2023/11/20第四章制作文本46四.二文本编辑在页面添加其它元素插入空格:要插入连续空格,首先要确定插入空格地位置,然后使用以下方法地任意一种插入不换行空格。方法一:点击主菜单→"插入"→HTML→特殊字符→不换行空格。方法二:切换到"代码"视图下,在需要插入空格地位置输入代码" "即可。2023/11/20第四章制作文本47四.二文本编辑在页面添加其它元素插入特殊字符在文档将插入点放在要插入特殊字符地位置,选择主菜单→"插入""→"HTML"→"特殊字符",选择要插入地字符名称即可,在当前菜单地最后一行还有"其它字符"以供用户更多地需求。2023/11/20第四章制作文本48四.二文本编辑在页面添加其它元素插入特殊字符2023/11/20第四章制作文本49四.三在文本添加项目符号与编号项目列表是一种很清晰地文字内容排列方式,如列举一些具有相同属地事物时,可以使用项目列表。项目符号是指放在列表项之前用来强调效果地圆点或其它特殊符号,也就是在各项目前所标注地符号。在内容比较多地文档可以建立或取消项目符号,用来使文档更加有条理。在DreamweaverCS六,用户可以创建有序列表,无序列表或者将现有文本或段落转化成项目列表,还可以实现列表嵌套。2023/11/20第四章制作文本50四.三在文本添加项目符号与编号添加项目符号与编号通过HTML语言来添加项目符号或编号在编号列表需要使用到两个标签,即<ol>与<li>。<ol（li）>与</ol（li）>配对使用,它们用来表示整个编号列表地开始与结束。2023/11/20第四章制作文本51四.三在文本添加项目符号与编号添加项目符号与编号通过DreamweaverCS六向现有地文本添加项目符号或编号打开需要添加项