Dreamwaver网页设计第3章

人民邮电出版社2012.2第3章网页的基本操作《网页设计与制作》课件2012.2第3章网页的基本操作3.1初识Dreamweaver3.2制作文字与图像混排的页面3.3表格的应用3.4制作多媒体页面3.5创建超链接《网页设计与制作》课件2012.23.1初识DreamweaverDreamweaverCS5是Adobe公司于2010年4月最新推出的一款集网页制作和网站管理于一身的所见即所得网页编辑器，是AdobeCreativeSuite5设计套装软件的组成之一。《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.23.1.1DreamweaverCS5的操作环境《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.23.1.2本地站点的搭建与管理1．规划站点结构我们可以通过把文件分门别类地放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。《网页设计与制作》课件2012.23.1.2本地站点的搭建与管理2．创建站点（1）选择“站点”→“管理站点”命令，出现“管理站点”对话框。《网页设计与制作》课件2012.23.1.2本地站点的搭建与管理2．创建站点(2)在“管理站点”对话框中，单击“新建”按钮，在打开的“站点设置对象”对话框的“站点”选项卡中为Dreamweaver站点选择本地文件夹和名称。《网页设计与制作》课件2012.23.1.2本地站点的搭建与管理3．搭建站点结构《网页设计与制作》课件2012.23.1.2本地站点的搭建与管理4．文件与文件夹的管理对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，从弹出的快捷菜单中选择“编辑”命令，即可进行相关操作。《网页设计与制作》课件2012.23.2制作文字与图像混排的页面3.2.1页面的总体设置1．设置页面的头内容（1）设置标题。（2）插入关键字。（3）插入META。《网页设计与制作》课件2012.23.2制作文字与图像混排的页面3.2.1页面的总体设置2．设置页面属性（1）设置外观。（2）设置链接。（3）设置标题。《网页设计与制作》课件2012.23.2.2文本的插入与编辑1．插入文本2．编辑文本格式网页的文本分为段落和标题两种格式。3．设置字体组合4．文字的其他设置文本换行、文本空格、特殊字符、插入列表、插入时间《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.23.2.3插入图像1．插入图像2．设置图像属性3．插入其他图像元素（1）插入图像占位符。（2）鼠标经过图像。《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.23.2.4利用Photoshop处理、设计网页图像1．使用Photoshop制作网页的优势2．Photoshop在网页制作中的具体应用《网页设计与制作》课件2012.2（1）Logo图标的制作（2）网页中按钮的制作《网页设计与制作》课件2012.2（3）网页中导航条的设计（4）网页顶部图片制作《网页设计与制作》课件2012.2（5）网页背景图片的制作（6）网页底纹处理（7）前景与背景的配合（8）利用Photoshop制作网页中的动画（9）设计简单WEB页面（10）网站改版《网页设计与制作》课件2012.23.3表格的应用插入并编辑表格《网页设计与制作》课件2012.2“表格”对话框中各选项的含义如下：“行数”文本框用来设置表格的行数。“列数”文本框用来设置表格的列数。“表格宽度”文本框用来设置表格的宽度，可以输入数值，紧随其后的下拉列表框用来设置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。“边框粗细”用来设置表格的边框的宽度。“单元格边距”文本框用来设置单元格的内部空白大小。“单元格间距”文本框用来设置单元格与单元格之间的距离。“标题样式”选项区用来定义页眉样式，可以在4种样式中选择一种。“标题”选项区用来定义表格的标题。“摘要”列表框用来对表格进行注释。《网页设计与制作》课件2012.23.3表格的应用设置表格属性“填充”文本框用来设置单元格边距，“间距”文本框用来设置单元格间距。“对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。“边框”文本框用来设置表格边框的宽度。《网页设计与制作》课件2012.23.3表格的应用表格的行和列拆分与合并单元格《网页设计与制作》课件2012.23.4制作多媒体页面3.4.1利用相关工具制作网页动画1．动画在网页方面的应用2．网页中的动画格式网页中的动画多数是以GIF和FLASH的格式来呈现的。3．网页动画制作软件UleadGIFAnimator、Photoshop、Cool3D、Flash《网页设计与制作》课件2012.23.4.2插入Flash动画把光标定位在要插入动画的位置，然后单击菜单“插入”→“媒体”→“swf”。《网页设计与制作》课件2012.23.4.3插入FLV文件把光标定位在要插入Flash视频的位置，然后单击菜单“插入”→“媒体”→“FLV…”，打开“插入FLV”对话框。《网页设计与制作》课件2012.23.4.4插入Shockwave动画把光标定位在需插入Shockwave的位置，然后单击菜单“插入”→“媒体”→“Shockwave”。《网页设计与制作》课件2012.23.4.5制作Flashpaper（1）安装FlashPaper；（2）在Word中编辑文章，设置好大纲结构；（3）转换为SWF。《网页设计与制作》课件2012.23.4.7插入声音1．添加背景音乐2．嵌入音乐《网页设计与制作》课件2012.23.5创建超链接文本/图像链接：为文本或图像创建的链接。图像热点链接：一幅图像不同热点区域的链接。电子邮件链接：发送电子邮件的链接。锚点链接：同一网页或不同网页中指定位置的链接。《网页设计与制作》课件2012.23.5.1创建文本/图像链接_blank：将被链接文档加载到新的未命名浏览器窗口中。_parent：将被链接文档加载到父框架集或包含该链接的框架窗口中。_self：将被链接文档加载到与该链接文字相同的框架或窗口中。_top：将被链接文档加载到整个浏览器窗口并删除所有框架。《网页设计与制作》课件2012.23.5.2创建图像热点链接《网页设计与制作》课件2012.2《网页设计与制作》课件2012.23.5.3创建电子邮件链接在网页中将光标放置于要实现电子邮件链接的位置，执行“插入”菜单，选择“电子邮件链接”命令，打开“电子邮件链接”对话框。《网页设计与制作》课件2012.23.5.4创建锚点链接所谓锚点链接，是指在同一个页面中的不同位置的链接。在制作网页时，有些页面内容较多，页面就可能变长。为了方便浏览，可以在页面中创建锚点链接。《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2表格布局《网页设计与制作》课件2012.2表格布局《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2表格布局实验《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2思考与练习1．如何使用Dreamweaver搭建本地站点？2．在Dreamweaver中实现文本的插入与编辑应注意哪些事项？3．在Dreamweaver中使用图像和声音等元素应该注意哪些细节？4．为什么网页中的字体要采用组合字体？5．如何在网页中插入多个连续空格?6.简述什么是布局表格，以及布局表格和布局单元格的关系？