Dreamwaver网页设计的教案.pptxVIP

Dreamwaver网页设计的教案第1页/共73页 3.1 初识Dreamweaver Dreamweaver CS5是Adobe公司于2010年4月必威体育精装版推出的一款集网页制作和网站管理于一身的所见即所得网页编辑器，是Adobe Creative Suite 5设计套装软件的组成之一。第2页/共73页 第3页/共73页 第4页/共73页 3.1.1 Dreamweaver CS5的操作环境第5页/共73页 第6页/共73页 第7页/共73页 3.1.2 本地站点的搭建与管理1．规划站点结构 我们可以通过把文件分门别类地放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。 第8页/共73页 3.1.2 本地站点的搭建与管理2．创建站点 （1）选择“站点”→“管理站点”命令，出现“管理站点”对话框。第9页/共73页 3.1.2 本地站点的搭建与管理2．创建站点 (2)在“管理站点”对话框中，单击“新建”按钮，在打开的“站点设置对象”对话框的“站点”选项卡中为Dreamweaver站点选择本地文件夹和名称。 第10页/共73页 3.1.2 本地站点的搭建与管理3．搭建站点结构第11页/共73页 3.1.2 本地站点的搭建与管理4．文件与文件夹的管理 对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，从弹出的快捷菜单中选择“编辑”命令，即可进行相关操作。 第12页/共73页 3.2 制作文字与图像混排的页面 3.2.1 页面的总体设置1．设置页面的头内容（1）设置标题。 （2）插入关键字。 （3）插入META。 第13页/共73页 3.2 制作文字与图像混排的页面 3.2.1 页面的总体设置2．设置页面属性（1）设置外观。 （2）设置链接。 （3）设置标题。 第14页/共73页 3.2.2 文本的插入与编辑1．插入文本2．编辑文本格式网页的文本分为段落和标题两种格式。3．设置字体组合4．文字的其他设置文本换行、文本空格 、特殊字符 、插入列表 、插入时间 第15页/共73页 第16页/共73页 第17页/共73页 第18页/共73页 第19页/共73页 第20页/共73页 第21页/共73页 第22页/共73页 第23页/共73页 第24页/共73页 第25页/共73页 3.2.3 插入图像1．插入图像 2．设置图像属性3．插入其他图像元素（1）插入图像占位符。 （2）鼠标经过图像。 第26页/共73页 第27页/共73页 第28页/共73页 第29页/共73页 第30页/共73页 第31页/共73页 第32页/共73页 第33页/共73页 第34页/共73页 第35页/共73页 第36页/共73页 第37页/共73页 第38页/共73页 第39页/共73页 第40页/共73页 3.2.4 利用Photoshop处理、设计网页图像 1．使用Photoshop制作网页的优势2．Photoshop在网页制作中的具体应用第41页/共73页 （1）Logo图标的制作（2）网页中按钮的制作第42页/共73页 （3）网页中导航条的设计（4）网页顶部图片制作第43页/共73页 （5）网页背景图片的制作（6）网页底纹处理（7）前景与背景的配合（8）利用Photoshop制作网页中的动画（9）设计简单WEB页面（10）网站改版第44页/共73页 3.3 表格的应用插入并编辑表格第45页/共73页 “表格”对话框中各选项的含义如下：“行数”文本框用来设置表格的行数。“列数”文本框用来设置表格的列数。“表格宽度”文本框用来设置表格的宽度，可以输入数值，紧随其后的下拉列表框用来设置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。“边框粗细”用来设置表格的边框的宽度。“单元格边距”文本框用来设置单元格的内部空白大小。“单元格间距”文本框用来设置单元格与单元格之间的距离。“标题样式”选项区用来定义页眉样式，可以在4种样式中选择一种。“标题”选项区用来定义表格的标题。“摘要”列表框用来对表格进行注释。第46页/共73页 3.3 表格的应用设置表格属性 “填充”文本框用来设置单元格边距，“间距”文本框用来设置单元格间距。“对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。“边框”文本框用来设置表格边框的宽度。第47页/共73页 3.3 表格的应用表格的行和列 拆分与合并单元格 第48页/共73页 3.4 制作多媒体页面3.4.1 利用相关工具制作网页动画1．动画在网页方面的应用2．网页中的动画格式