Dreamwaver网页设计第3章

1、第3章 网页的基本操作第3章网网页页的基本本操作3.1初初识Dreamweaver3.2制制作文字字与图像像混排的的页面3.3表表格的应应用3.4制制作多媒媒体页面面3.5创创建超链链接3.1初初识识DreamweaverDreamweaverCS5是是Adobe公公司于2010年4月月最新推推出的一一款集网网页制作作和网站站管理于于一身的的所见即即所得网网页编辑辑器，是是AdobeCreativeSuite5设计计套装软软件的组组成之一一。3.1.1DreamweaverCS5的操作作环境3.1.2本本地站站点的搭搭建与管管理1规划划站点结结构我们可以以通过把把文件分分门别类类地放置置在各自

2、自的文件件夹里，使网站站的结构构清晰明明了，便便于管理理和查找找。3.1.2本本地站站点的搭搭建与管管理2创建建站点（1）选选择“站站点”“管理理站点”命令，出现“管理站站点”对对话框。3.1.2本本地站站点的搭搭建与管管理2创建建站点(2)在在“管理理站点”对话框框中，单单击“新新建”按按钮，在在打开的的“站点点设置对对象”对对话框的的“站点点”选项项卡中为为Dreamweaver站站点选择择本地文文件夹和和名称。3.1.2本本地站站点的搭搭建与管管理3搭建建站点结结构3.1.2本本地站站点的搭搭建与管管理4文件件与文件件夹的管管理对建立的的文件和和文件夹夹，可以以进行移移动、复复制、重重命

3、名和和删除等等基本的的管理操操作。单单击鼠标标左键选选中需要要管理的的文件或或文件夹夹，然后后单击鼠鼠标右键键，从弹弹出的快快捷菜单单中选择择“编辑辑”命令令，即可可进行相相关操作作。3.2制制作作文字与与图像混混排的页页面3.2.1页页面的的总体设设置1设置置页面的的头内容容（1）设设置标题题。（2）插插入关键键字。（3）插插入META。3.2制制作作文字与与图像混混排的页页面3.2.1页页面的的总体设设置2设置置页面属属性（1）设设置外观观。（2）设设置链接接。（3）设设置标题题。3.2.2文文本的的插入与与编辑1插入入文本2编辑辑文本格格式网网页的文文本分为为段落和和标题两两种格式式。3

4、设置置字体组组合4文字字的其他他设置文本换行行、文本本空格、特特殊字符符 、插插入列表表 、插插入时间间3.2.3插插入图图像1插入入图像2设置置图像属属性3插入入其他图图像元素素（1）插入入图像占占位符。（2）鼠鼠标经过过图像。3.2.4利利用Photoshop处处理、设设计网页页图像1使用用Photoshop制作网网页的优优势2Photoshop在网网页制作作中的具具体应用用（1）Logo图标的的制作（2）网网页中按按钮的制制作（3）网网页中导导航条的的设计（4）网网页顶部部图片制制作（5）网网页背景景图片的的制作（6）网网页底纹纹处理（7）前前景与背背景的配配合（8）利利用Photosh

5、op制作作网页中中的动画画（9）设设计简单单WEB页面（10）网站改改版3.3表表格格的应用用插入并编编辑表格格“表格”对话框框中各选选项的含含义如下下：“行数”文本框框用来设设置表格格的行数数。“列数”文本框框用来设设置表格格的列数数。“表格宽宽度”文文本框用用来设置置表格的的宽度，可以输输入数值值，紧随随其后的的下拉列列表框用用来设置置宽度的的单位，有两个个选项百分分比和像像素。当当宽度的的单位选选择百分分比时，表格的的宽度会会随浏览览器窗口口的大小小而改变变。“边框粗粗细”用用来设置置表格的的边框的的宽度。“单元格格边距”文本框框用来设设置单元元格的内内部空白白大小。“单元格格间距”文本

6、框框用来设设置单元元格与单单元格之之间的距距离。“标题样样式”选选项区用用来定义义页眉样样式，可可以在4种样式式中选择择一种。“标题”选项区区用来定定义表格格的标题题。“摘要”列表框框用来对对表格进进行注释释。3.3表表格格的应用用设置表格格属性“填充”文本框框用来设设置单元元格边距距，“间间距”文文本框用用来设置置单元格格间距。“对齐”下拉列列表框用用来设置置表格的的对齐方方式，默默认的对对齐方式式一般为为左对齐齐。“边框”文本框框用来设设置表格格边框的的宽度。3.3表表格格的应用用表格的行行和列拆分与合合并单元元格3.4制制作作多媒体体页面3.4.1利利用相相关工具具制作网网页动画画1动画

7、在在网页方方面的应应用2网页页中的动动画格式式网页页中的动动画多数数是以GIF和和FLASH的的格式来来呈现的的。3网页页动画制制作软件件Ulead GIFAnimator、Photoshop 、Cool 3D 、Flash3.4.2插插入Flash动画画把光标定定位在要要插入动动画的位位置，然然后单击击菜单“插入”“媒媒体”“swf”。3.4.3插插入FLV文文件把光标定定位在要要插入Flash视频频的位置置，然后后单击菜菜单“插插入”“媒体体”“FLV”，打开“插入FLV”对话框框。3.4.4插插入Shockwave动动画把光标定定位在需需插入Shockwave的的位置，然后单单击菜单单“

8、插入入”“媒体”“Shockwave”。3.4.5制制作Flashpaper（1）安安装Flash Paper；（2）在在Word中编编辑文章章，设置置好大纲纲结构；（3）转转换为SWF。3.4.7插插入声声音1添加加背景音音乐2嵌入入音乐3.5创创建建超链接接文本/图图像链接接：为文文本或图图像创建建的链接接。图像热点点链接：一幅图图像不同同热点区区域的链链接。电子邮件件链接：发送电电子邮件件的链接接。锚点链接接：同一一网页或或不同网网页中指指定位置置的链接接。3.5.1创创建文文本/图图像链接接_blank：将被链链接文档档加载到到新的未未命名浏浏览器窗窗口中。_parent：将被被链接文

9、文档加载载到父框框架集或或包含该该链接的的框架窗窗口中。_self：将将被链接接文档加加载到与与该链接接文字相相同的框框架或窗窗口中。_top：将被被链接文文档加载载到整个个浏览器器窗口并并删除所所有框架架。3.5.2创创建图像热点点链接3.5.3创建电子子邮件链链接在网页中中将光标标放置于于要实现现电子邮邮件链接接的位置置，执行行“插入入”菜单单，选择择“电子子邮件链链接”命命令，打打开“电电子邮件件链接”对话框框。3.5.4创建锚点点链接所谓锚点点链接，是指在在同一个个页面中中的不同同位置的的链接。在制作作网页时时，有些些页面内内容较多多，页面面就可能能变长。为了方方便浏览览，可以以在页面面中创建建锚点链链接。表格布局局表格布局局表格布局局实验思考与练练习1如何何使用Dreamweaver搭搭建本地地站点？2在Dreamweaver中