Dreamweaver8教程

Dreamweaver8网页设计基础3.1Dreamweaver8简介3.2网页文本及媒体的应用3.3表格的应用3.4布局表格的应用3.5超级链接3.6框架的应用3.7CSS样式的应用3.8层和行为的应用3.9时间轴的应用3.10表单的应用3.11模板的应用3.1Dreamweaver8简介本节知识认识Dreamweaver8Dreamweaver8编辑环境介绍创建与管理站点Dreamweaver8是一款功能强大的网页编辑软件，它以其直观的图形界面大大简化了网页的设计和编辑。在具体学习使用Dreamweaver之前，首先应该掌握对网页文档操作的一些基础知识，如网页文档的创建、打开、预览和保存以及页面属性的基本设置等。Dreamweaver是专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论直接编写HTML代码还是在可视化编辑环境中工作，Dreamweaver都提供了专业的编辑工具。3.1.1Dreamweaver8的认识知识要点系统要求在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件：①IntelPentiumIII600MHz或更快的处理器和等效的处理器②Windows2000、WindowsXP或WindowsServer2003③至少128MB的可用内存（建议采用256MB内存或更大内存）④能达到1024×768像素分辨率或更高分辨率的监视器安装Dreamweaver8在Dreamweaver8的系统盘上运行安装程序setup.exe3.1.2Dreamweaver8的基本操作知识要点启动Dreamweaver8新建空白HTML网页保存网页文档预览网页效果退出Dreamweaver8该部分主要介绍Dreamweaver8的基本功能、主窗口和菜单命令。内容包括熟悉主工作区、使用菜单栏、掌握“插入”工具栏、充分利用“属性”面板和灵活使用菜单命令。该部分是学习Dreamweaver8快速入门部分。通过这一部分的学习能够对Dreamweaver8的基础操作和功能有一个全面的掌握和认识，从而为后续章节中能够深入地学习好Dreamweaver8打下坚实的基础。3.1.2Dreamweaver8的基本操作1.启动Dreamweaver8选择“开始”|“程序”|“Macromedia”|“MacromediaDreamweaver8”命令如图所示。选择“创建新项目”|“Html”项。3.1.2Dreamweaver8的基本操作2.新建空白HTML网页进入Dreamweaver8页面后，如图所示。选择“文件”|“新建”菜单命令，打开“新建文档”对话框，在“类别”栏中选择“基本页”选项，在“基本页”栏中选择“HTML”选项，单击“创建”按钮。如图所示。3.1.2Dreamweaver8的基本操作3.保存网页文档选择“文件”|“保存”菜单命令，打开的“另存为”对话框，在“保存在”下拉列表框中选择文件的保存路径，在“文件名”文本框中输入保存的文件名，单击“保存”按钮。如图所示。3.1.2Dreamweaver8的基本操作4.预览网页效果选择“文件”|“在浏览器中预览”|“IExplore6.0”命令在IE浏览器中预览网页文档的效果，如图所示。3.1.2Dreamweaver8的基本操作5.退出Dreamweaver8单击Dreamweaver8窗口右上角的“关闭”按钮。单击Dreamweaver8窗口左上角的图标，在弹出的下拉菜单中选择“关闭”命令。在Dreamweaver8窗口中选择“文件”|“退出”菜单命令。在当前窗口为Dreamweaver8工作界面时，按“Alt+F4”键退出Dreamweaver8。3.1.3Dreamweaver8工作界面介绍知识要点插入栏文档工具栏文档编辑区网页标签扩展按钮浮动面板组属性面板标签选择器水平标尺和垂直标尺3.1.3Dreamweaver8工作界面介绍1.Dreamweaver8的界面元素介绍3.1.3Dreamweaver8工作界面介绍2.创建本地站点Dreamweaver8是一个站点创建和管理的工具，因此使用它不仅可以创建单独的文档，还可以创建完整的Web站点。创建Web站点的第一步是规划。为了达到最佳效果，在创建任何Web站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页面间是如何连接的。所谓的定义网站，就是在自己的计算机中创建一个文件夹，用来放置所有的文件，然后再将这个文件夹定义为站点。建立一个网站，首先要在本地机器上设置站点存储位置。下面主要介绍本地站点的建立，站点文件命名。3.1.3Dreamweaver8工作界面介绍创建站点的步骤：⑴建立本地站点文件夹“wangye”（站点文件夹名称必须是西文的，不能为中文名称）。⑵进入Dreamweaver8的工作界面。⑶选择“站点”|“新建站点”命令，弹出“未命名站点1的站点定义为”对话框，如图所示。3.1.3Dreamweaver8工作界面介绍⑷在“站点名称”中输入站点名称“wangli”，在“本地根文件夹”中点击按钮，找到本地机上站点文件夹的位置，如图所示。⑸单击“确定”，则完成站点的建立，如图所示。3.1.4上机实训实训要求：建立一个学生自己的站点及网页文件创建网页文件，设置网页标题为“网页学习”。保存网页并预览效果。实训目的：学会建立站点及建立站点的用处。创建网页文件并保存。预览网页的方法。返回3.2网页文本及媒体的应用本节知识插入文本、输入空格、特殊字符、日期格式化文本设置文本的属性项目列表的应用插入多媒体对象文本是网页最基本、最常用的元素，因此文本处理是网页设计中最基本的操作。3.2.1案例制作简单的“睡美人”网页制作简单的网页，在页面中插入文本、图像、水平线、日期、背景及空链接。其效果图为如图所示。3.2.1案例制作简单的“睡美人”网页知识要点创建网站站点制作简单网页修改页面、文本属性插入图像设置图像属性（实战步骤详见教材）3.2.2文本的编辑操作1.输入文本⑴插入普通文本将插入点定位在文档编辑区中，直接输入文本即可。在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。导入已有word文档，在Dreamweaver文档中，将光标定位到要导入文本的地方，选择“文件”|“导入”|“word文档”命令，弹出“导入word文档”对话框，在其中选择要导入的word文档，单击该对话框的“打开”命令，就可以导入文本了。3.2.2文本的编辑操作⑵插入特殊字符在Dreamweaver8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号“©”和注册商标符号“®”等，这时可通过Dreamweaver8插入特殊字符的功能进行插入。在需要添加特殊字符的位置单击鼠标，设置插入点。选择插入栏的“文本”类别（如图所示），单击最右边的下三角按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的对话框，可在其中选择要输入的对象。3.2.2文本的编辑操作也可通过软键盘来输入“★、■、※、【】”等特殊字符符号。3.2.2文本的编辑操作⑶在字符之间添加空格Dreamweaver8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver8中无论按多少次空格键都只会输入一个空格。将中文输入法切换到全角模式，按一下空格键则输入一个全角的空格。在“属性”面板的“格式”列表中选择“预先格式化的”选项后（如图所示），则可以按空格键输入空格。插入空格的快捷键方式为Ctrl+Shift+空格键.3.2.2文本的编辑操作⑷文本的换行在Dreamweaver8中，当通过按回车键（Enter）换行时，两段之间的距离比较远。要使两段之间的距离和正常行距一样有如下的操作。将光标定位在需要换行的位置。单击插入栏“文本”类别中的“换行符”按钮，或按快捷键Shift+Enter，即可在该位置插入一个换行符，从而使两段之间的距离和正常行距一样。3.2.2文本的编辑操作⒉插入其他文本⑴插入水平线添加水平线在文档编辑区将插入点定位到所需位置。选择“插入”|“HTML”|“水平线”命令。单击“插入”栏中的“HTML”按钮。修改水平线初次绘制的水平线的格式往往不能满足实际需要，此时可通过“属性”面板对其进行修改，如图所示:3.2.2文本的编辑操作⑵插入日期在制作网页时，有时需要插入当前的日期，Dreamweaver8提供了快速插入日期和时间的功能。将光标定位在需要插入日期的位置。选择“插入”|“日期”命令。单击“插入”栏中“常用”类别上的按钮。在弹出的对话框中选择日期格式，如图所示3.2.2文本的编辑操作⑶插入列表列表就是那些具有相同属性的事物。在Dreamweaver8中，有三种类型的列表：项目列表：编号列表：定义列表：在“列表属性”对话框中可以定义“列表的类型”、“样式”、“开始计数”等设置3.2.2文本的编辑操作⒊格式化文本文本格式一般包括文本的字体、字号、颜色及文本的对齐方式等。通常可通过文本的“属性”面板来设置如图所示，在文档窗口中就可以看到效果。只是在字体的设置时，先要在“字体列表”框中选择“编辑字体列表”，选择要添加的字体。如图所示。3.2.3插入多媒体对象⒈网页图像的基础知识⑴网页图像格式GIF、JPEG和PNG是Web页面中经常用到的图形文件格式。它们的共同特点是：文件小，适合于网页传输。GIF格式是一个8位文件格式，最多只能显示256色，GIF格式文件的扩展名为.gif。GIF格式既支持透明颜色属性，也支持动画。JPEG允许包含超过1600万种颜色，大大超过人眼所能辨别的颜色。JPEG文件一般要比GIF或PNG文件大一些，其扩展名为.jpg或.jpeg。PNG是MacromediaFireworks的源文件格式。PNG格式文件较大，其扩展名为.png。⑵颜色基础在Web页面中，颜色既可以用颜色名称red（红色）、green（绿色）、blue（蓝色）来表示，也可以用十六进制数（例如：#FF00000）来表示，如#000000表示黑色；#FFFFFF表示白色；#FF0000表示红色；#00FF00表示绿色；#0000FF表示蓝色.3.2.3插入多媒体对象⒉插入图像图像可以直接插入在页面中，也可以在表格、表单或层中插入。应用层还可以使图像交迭。插入图像文件必须在当前站点的文件夹中。如果图像文件不在当前站点的文件夹中，Dreamweaver8将询问是否要将文件复制到当前的文件夹内。插入图像常用的几种方式：选择“插入”|“图像”命令。单击“插入”栏中的“常用”按钮。快捷键Ctrl+Alt+I。出现“选择图像源文件”对话框选取所要插入的图像文件即可。如图所示3.2.3插入多媒体对象⑴设置图像属性在文档窗口中可直接选中图像并进行修改，也可用图像的“属性”面板进行设置。例如：为图像设置大小、对齐、链接等操作。如图所示。热点工具图像名称图像宽度与高度浏览文件3.2.3插入多媒体对象⑵鼠标经过图像鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像在文档窗口中，将插入点放置要插入鼠标经过图像的位置。单击“插入”栏的“常用”按钮旁的下三角，在下拉菜单中选择“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图所示。3.2.3插入多媒体对象⒊插入Flash对象⑴插入Flash按钮⑵插入Flash文本对象⑶插入Flash动画3.2.4上机实训实训要求：制作一个简单网页“我的美丽家乡------”在页面上输入文本内容设置标题及文本的格式插入背景颜色或背景图像插入图像、鼠标经过图像、水平线、日期及Flash的动画效果实训