《《网页设计》-王移芝-电子教案 网页设计 4》由会员分享，可在线阅读，更多相关《《网页设计》-王移芝-电子教案 网页设计 4（36页珍藏版）》请在金锄头文库上搜索。
1、初识Dreamweaver 8,应用篇,Dreamweaver的工作窗口,作业,创 建 站 点,插入多媒体对象,创建基本页面,Dreamweaver,插入面板,浮动面板组,页面编辑区,属性面板,Dreamweaver 窗口,工作模式,“属性”面板提供的内容会根据文档窗口中选定的对象不同而不同，主要用于查看和设置所选对象或文本的各种属性，达到对所选对象属性的精确调整。 单击属性按钮或左端的 按钮，“属性”面板将折叠起来，再次单击面板即可展开。 通常，“属性”面板集合了“文本”和“修改”菜单中的所有命令。, 属性面板,通过“首选参数”命令可以设置Dreamweaver工作窗口界面的整体外观、面板、
2、字体、状态栏等对象的特征。 例如：可以通过设置“常规”参数来控制是否显示启动页面。 所有设置都是通过“编辑”菜单中的“首选参数”命令实现的。, 设置“首选参数”,注意：窗口的左边是分类区，给出了可以设置的分类选项，右端则根据左边的分类选项给出对应的设置选项，根据需要进行设置即可。设置完成后，单击确定按钮设置生效。,创建本地工作文件夹 创建站点与本地文件夹关联,创建站点,Dreamweaver,“站点/管理站点/新建/站点”命令,根据提示按“下一步”按钮 直到完成,设置页面属性 工作视图环境 文档基本操作 创建文档 设置文档对象属性,创建基本页面,Dreamweaver,创建基本页面,根据需要进
3、行设置即可，特点是创建统一规范的页面。, 设置页面属性,Dreamweaver提供了“代码视图”、“代码视图和设计视图”和“设计视图”3种工作视图环境。,“设计视图”是系统提供的默认网页制作工作环境，也是本文应用的核心。这是一种可视化的工作环境，用户在窗口中创建的内容即是将在网页上显示的内容，就如同Word一样，是一个所见即所得的工作窗口，非常适合于网页制作的新手。 特点：系统自动生成相应的代码。,创建基本页面, 工作视图环境,代码视图：提供直接编写HTML编码的工作区，该工作环境适合于具有一定网页制作基础的用户； 代码视图和设计视图：用户可以在HTML编码工作区和设计文档工作区之间创建文档，
4、该工作环境适合于专业网页制作的新手； 设计视图：用户直接设计文档工作区，该工作环境适合于网页制作的新手。 单击某个按纽即进入该工作视图环境,工作模式,建议用户，在具有一定的网页制作经验后，选择“代码视图和设计视图”工作环境，观察当在页面“设计”区域插入网页素材后“代码”区域产生的代码，通过这种方式用户可以不断掌握和加深对代码的学习，这是初学者学习和掌握代码编写的最佳路径。 作为一名网页制作的高手，必须要掌握HTML的应用。 有关HTML的相关知识参见第2章内容。,创建文档：建立新的文档文件（内存） 保存文档：将文档以文件方式保存在外存上 编辑文档：对文档进行增、删、改操作 关闭文档：结束文档编
5、辑操作 打开文档：将已有的文档文件从外存调到内存,创建基本页面, 文档基本操作,利用编辑软件建立文档文件的过程，此例是运行在Dreamweaver 软件下。,创建文档,进入Dreamweaver窗口主菜单下，选择“文件”菜单的“新建”命令或按“Ctrl+N”组合键，弹出“新建文档”对话框，选择“常规/基本页”；单击创建按钮即进入创建新文档窗口。,选择“文件”菜单的“保存”命令或按“Ctrl+S”组合键，弹出“另存为”对话框。在“保存在”下拉列表中选择保存文件的位置；在“文件名”文本框中输入保存文件的名字；在“保存类型”下拉列表中选择保存文件的类型；单击保存按钮设置有效。,保存文档,Dreamw
6、eaver提供了多种类型的文件，建议用户选择系统当前默认类型或“HTML文档”类型，也可以在输入文件名时直接输入文件扩展名，如“文件名.htm”或“文件名.html”。如果已经创建了站点，系统会自动给出当前保存文档路径为本地站点目录中。,编辑文档,编辑文档是指对已有文档进行增删改操作： 增：在原有基础上添加新内容 删：将已有内容删除掉 改：用新内容替换已有内容,其操作方法都是先选中对象，然后施加命令。,关闭文档即指结束当前页面操作。,关闭文档,打开“文件”菜单，选择“关闭”命令，就可以关闭当前活动窗口的文档。 如果要想关闭当前打开的所有文档，选择“文件/全部关闭”命令即可。,打开文档,打开已有
7、的Web页或基于文本的文档，这些文档可以是在Dreamweaver中创建的，也可以是用其他编辑程序创建的。他们都可以在Dreamweaver的“设计”视图和“代码”视图中进行编辑。,方法是选择“文件/打开”命令弹出“打开”对话框窗口，选择文档所在路径、文件类型及文件名后，单击打开按钮即可。,文档工作区,在文档工作区直接输入或插入内容,创建基本页面, 创建文档,在页面中可以为每个对象设置属性，以产生各种色彩和风格，形成具有个性化的页面。,设置文本属性 设置段落属性 设置行与行之间的间距,创建基本页面, 设置文档对象属性,页面对象,属性设置与插入文本,应用示例,插入图像（JPEG、GIF、PNG）
8、 插入Flash对象（动画、按钮、文本） 动画类型：swf （不能是fla、exe） 插入Fireworks对象（图像文件GIF 、 Fireworks HTML文件） 其它对象（avi、wav、mp3）,Dreamweaver,插入多媒体数据,插入多媒体数据,随着多媒体技术的不断发展，多媒体对象也广泛用在网页中，以增强网页的效果。 在Dreamweaver中，可以添加Flash动画、Shockwave电影、Active X控件和Java程序等多种媒体对象。, 基本概念,插入多媒体数据,GIF格式：可以在各种图形处理软件中编辑，经过无损压缩支持动画。它仅支持8位图像色彩的索引颜色，即256色，
9、适合于对色彩数目要求不高的卡通图像。 PNG格式：能存储32位信息的位图文件，其图像质量要比GIF格式图像的质量好。它也采用无损压缩，速度快，但不支持动画。 JPG/JPEG格式：是24位的图像文件格式，是一种高效率的压缩格式，在打开时会自动解压缩，适合于存储照片之类的色彩丰富的图像。, 插入图像,首先把插入点置于文档窗口中要插入图片的位置，选择“插入/图像”命令；或者单击快捷按钮；或按Ctrl+Alt+I组合键。执行上面的任一操作，都将弹出“选择图像源文件”对话框窗口。,在“查找范围”文本框内选择图像文件所在位置；在列表区选择所要插入的图像文件名，随着选择该图像的文件名自动产生在“文件名”文
10、本框内，这时图像显示在窗口右端“图像预览”区中；确定好要插入的图像文件后，单击确定按钮。,应用示例,插入交互式图像,控制点,设置图像属性,应用示例,插入多媒体数据,在Dreamweaver的文档中可以插入flash影片、flash按钮和flash文本3种flash对象。 Flash影片即是以“swf”为类型的Flash动画文件，它是一种高质量的矢量动画，由Flash动画制作软件创建。, 插入Flash对象,插入Flash动画,首先将光标放到文档要插入Flash动画的位置，选择“插入”菜单中的“媒体/Flash”命令；或单击快捷按钮；或按“Ctrl+Alt+F”组合健；弹出“选择动画文件”对话框
11、。 在“选择文件”对话框选择文件位置、输入或直接双击列表区的Flash文件名；单击确定按钮。 此时系统以Flash图标“ ”的形式展现在文档中，Flash图标的大小，将决定播放Flash动画窗口的大小。,浏览网页即可看到Flash动画效果,应用示例,插入Flash动画,运行,预览,应用示例,插入Flash按钮,插入多媒体数据,在Dreamweaver的文档中可以插入多种媒体对象，插入的对象通过媒体播放插件软件即可以运行。 Shockwave是Macromedia公司网上交互多媒体的标准，它是一种压缩了的媒体格式，在多数浏览器中都可以快速下载并播放。它支持如“avi、wav、mp3”等多种格式的媒体对象。, 插入媒体对象,应用示例,插入音频文件,应用示例,插入视频文件,教学实践： 学习并掌握Dreamweaver基本操作 制作网页，掌握文档操作。 习题四,作 业,
