你的位置:首页>>Dreamweaver教程>>Dreamweaver 8.0学习教程 - 制作文字与图像混排的页面
浏览次数：第二节 制作文字与图像混排的页面
我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。打开01.html，制作一个图文混排的简单页面。
一、页面的总体设置
1、设置页面的头内容
设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。
插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。
2、设置页面属性
单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
设置外观，“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。我们设置页面的所有边距为0。
设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。“下划线样式”可以定义链接的下划线样式。
设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字逖剑ù痔濉⑿碧濉⒋笮『脱丈０醋约旱南不兜姆绺裆柚冒伞?/p>
二、文本的插入与编辑
1、插入文本
要向 Dreamweaver 文档添加文本，可以直接在Dreamweaver“文档”窗口中键入文本，也可以剪切并粘贴，还可以从word文档导入文本。
用鼠标在文档编辑窗口的空白区域点一下，窗口中出现闪动的光标，提示文字的起始位置，将01.rar中的文字素材复制/粘贴进来。
2、编辑文本格式
网页的文本分为段落和标题两种格式。
在文档编辑窗口中选中一段文本，在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。
“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。
另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。
3、设置字体组合
Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合，要想使用中文字体，必须重新编辑新的字体组合，在“字体”后的下拉列表框中选择“编辑字体列表”，弹出“编辑字体列表”对话框：
4、文字的其它设置
文本换行，按Enter键换行的行距较大（在代码区生成<p></p>标签），按Enter＋Shift键换行的行间距较小（在代码区生成<br>标签）。
文本空格，我们选择编辑/首选参数，在弹出得对话框中左侧的分类列表中选择“常规”项，然后在右边选“允许多个连续的空格”项，我们就可以直接按“空格”键给文本添加空格了。
特殊字符，要向网页中插入特殊字符，需要在快捷工具栏选择“文本”，切换到字符插入栏，单击文本插入栏的最后一个按钮，可以向网页中插入相应的特殊符号。
插入列表，列表分为两种，有序列表和无序列表，无序列表没有顺序，每一项前边都以同样的符号显示，有序列表前边的每一项有序号引导。在文档编辑窗口中选中需要设置的文本，在属性面板中单击
，则选中的文本被设置成无序列表，单击
则被设置成有序列表。
插入水平线，水平线起到分隔文本的排版作用，选择快捷工具栏的“HTML”项，单击HTML栏的第一个按钮
，即可向网页中插入水平线。选中插入的这条水平线，可以在属性面板对它的属性进行设置。
插入时间，在文档编辑窗口中，将鼠标光标移动到要插入日期的位置，单击常用插入栏的“日期”按钮，在弹出的“插入日期”对话框中选择相应的格式即可。
三、插入图像
目前互联网上支持的图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。
1、插入图像
在制作网页时，先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹里。
插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮。
弹出的“选择图像源文件”对话框，选择img/001.jpg，单击“确定”按钮就把图像001.jpg插入到了网页中。
注意：如果我们在插入图片的时候，没有将图片保存在站点根目录下，会弹出下图所示的对话框，提醒我们要把图片保存在站点内部，这时单击“是”按钮，
然后选择本地站点的路径将图片保存，图像也可以被插入到网页中。
2、设置图像属性
选中图像后，在属性面板中显示出了图像的属性，如下如所示。
在属性面板的左上角，显示当前图像的缩略图，同时显示图像的大小。在缩略图右侧有一个文本框，在其中可以输入图像标记的名称。
图像的大小是可以改变的，但是在DW里更改是极不好的习惯，如果我们的电脑安装了FW软件，单击属性面板的“编辑”旁边的
，即可启动FW对图像进行缩放等处理。当图像的大小改变时，属性栏中“宽”和“高”的数值会以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。
“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。
“边框”文本框时用来设置图像边框的宽度，默认的边框宽度为0。
“替代”文本框用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将显示这段文字。
单击属性面板中的
对齐按钮，可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。
在属性面板中，“对齐”下拉列表框时设置图像与文本的相互对齐方式，共有10个选项。通过它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。
3、插入其它图像元素
在我们单击常用插入栏的“图像”按钮时，可以看到，除了第1项“图像”外，还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。
插入图像占位符，在我们布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图片位置。单击下拉列表中的“图像占位符”，打开“图像占位符”对话框。按设计需要设置图片的宽度和高度，输入呆插入图像的名称，即可。
鼠标经过图像，鼠标经过图像实际上由两个图像组成，主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两张图片要大小相等，如果不相等，DW自动调整次图片的大小跟主图像大小一致。
图片与文本一样，是网页中最常用到的内容，其变化相对较少，要想排出精致美观的网页，下一节课的内容可是必不可少的哦，继续努力吧^_^
打印本文
推荐本文 
加入收藏
返回顶部
关闭窗口