dreamweaver教案31375

《dreamweaver教案31375》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、电子技术部张婷目录1.Dreanweaver的工作界面2.创建Dreamweaver本地站点3.创建主页文件4.基本的页面元素文字的编辑5.超级链接应用6.图像应用7.表格应用8.图层应用9.时间轴应用10.表单应用11.框架应用12.行为应用13.CSS样式应用14.模板应用DreamweaverMX2004Dreamweaver是Macromedia公司研制的网页制作软件，还有Flash动画制作和Fireworks图象处理软件，这三个软件人们称为网页三剑客。Dreamweaver是当今世界最为流行的网页制作工具之一。在网络时代中， Dreamweaver真正起

2、到了网页设计“织梦者”的作用。全球无数个人和企业都在使用 Dreamweaver来架设自己的网络信息空间，编织网络沟通渠道。一、Dreanweaver的工作界面当我们第一次启动Dreamweaver软件时，会弹出一个工作界面选择窗口：可以让用户根据自己的需要设置，可选择的界面包括“DreamweaverMX工作区”和“Dreamweaver4工作区”。（也就是说，DreamweaverMX提供了有二种工作界面的风格：）第一种：将全部元素置于一个窗口的集成布局风格，即“DreamweaverMX工作区”。请看下图示例：-33-电子技术部张婷第二种：非常类似于Drea

3、mweaver4的浮动布局风格，即“Dreamweaver4工作区”。请看下图示例：二、站点管理与应用（创建Dreamweaver本地站点）创建本地站点的方法：1、第一步必须先在本地计算机的磁盘上建立一个文件夹。（作为本地站点的根文件夹）提示：为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：htm、img、others，分别存放网页设计中用到的资源及网页文件。2、建立本地站点，选择主菜单中的“站点/新建站点”命令，在弹出的新建站点对话框进行设置。新建站点的操作步骤：第一步：选择菜单中的“站点”→“新建站点”命令，如图所示：-33-电子技术部张婷在弹出的

4、对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：第二步：单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：如ASP、JavaServerPageJSP）第三步：单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹储存站点文件（包括网页文件及设计网页用到的其它资源）-33-电子技术部张婷第四步：单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。如下图所示：第五步：单击“下一

5、步”按钮，弹出如下图设置概要。单击“完成”按钮，完成设置。三、创建主页文件创建了Dreamweaver本地站点以后，接下来就是要进行网页主页的创建，操作步骤是：方法一：启动了Dreamweaver软件，如同启动Word等其它应用软件一样打开了一个新的空的网页文档，就可以在这个新的文档中进行网页设计编辑；或者单击“文件”菜单中的“新建”命令，或直接按Ctrl+N键，打开一个新页面，在该页面中也可以进行网页的设计编辑。网页设计编辑完毕后，保存网页文件：保存的位置在战点根目录下，新文件取名为“index.html”即建立了主页文件。-33-电子技术部张婷方法二：打开站点

6、管理窗口，在站点管理窗口右边的本地文件夹列表框中建立新文件，新文件取名为“index.html”按回车键，即建立了主页文件。双击“index.html”文件，进入编辑“index.html”的网页文件窗口，进行主页设计。四、基本的页面元素文字的编辑1、输入文字并对文字进行编辑文字是网页的主体，使用Dreamweaver输入文字及对文字进行编辑的方法与我们学过的字处理软件的操作方法非常类似，Dreamweaver系统也提供非常灵活、方便快捷的菜单、命令对文字进行编辑处理。其操作方法非常简单，很容易掌握。采用直接通过键盘输入或者是拷贝粘贴的方法获得文字，还可以导入wo

7、rd文档。注意：·在Dreamweaver中的“空格”是中文全角下按“空格”键。·换段直接按回车键。（出现空一行）。·段落中的换行按Shift+Enter。（不空一行）。添加了文字后，用户可以通过属性面板设置文本的格式、字体、样式、颜色等从而使文本变得丰富多采，文本的属性面板如图所示：2、插入图像要在网页中插入图像，执行以下的操作：（1）、激活页面，将光标置于要插入图像的位置。（2）、单击[插入]面板下的[常用]工具栏中的图像按钮（3）、在弹出的插入图象对话框中输入要插入的图象的地址。插入了图象后，可以使用图象的[属性]面板对图象进行属性设置，图象的[属性]面板如

8、下：3、其