关闭

关闭

封号提示

内容

首页 DreamweaverCS4教学与自学经典教程.ppt

DreamweaverCS4教学与自学经典教程.ppt

DreamweaverCS4教学与自学经典教程.ppt

上传者: ivan8686lazy 2011-04-23 评分 3 0 20 3 92 暂无简介 简介 举报

简介:本文档为《DreamweaverCS4教学与自学经典教程ppt》,可适用于IT/计算机领域,主题内容包含DreamweaverCSDreamweaverCS此章节均为DreamweaverCS的学习以便于教学及自学者使用概述DreamweaverCS的符等。

DreamweaverCSDreamweaverCS此章节均为DreamweaverCS的学习以便于教学及自学者使用概述DreamweaverCS的工作界面建立教学站点编辑教学网页网页的布局方法表单教学站点的发布  多媒体CAI课件的特点是集文本、图形图像、声音、动画及数字电影于一体可谓声光电并存、声情画并茂。正因为如此课件的体积往往很大这与网络传输是相互矛盾的。因为网络传输速度的“瓶颈”严重制约了大体积的“信息文件”的传播与发送。所以网络课件的制作原则应该区别于其它形式的课件以短小精悍为最高原则其次由于网络课件的使用对象具有不可预知性因此要求网络课件在语言上必须更规范、更精确同时必须具有更好的引导性和交互性。  多媒体CAI课件的特点是集文本、图形图像、声音、动画及数字电影于一体可谓声光电并存、声情画并茂。正因为如此课件的体积往往很大这与网络传输是相互矛盾的。因为网络传输速度的“瓶颈”严重制约了大体积的“信息文件”的传播与发送。所以网络课件的制作原则应该区别于其它形式的课件以短小精悍为最高原则其次由于网络课件的使用对象具有不可预知性因此要求网络课件在语言上必须更规范、更精确同时必须具有更好的引导性和交互性。概述  牢固掌握了网络课件的制作原则以后接下来就是选择网络课件的制作工具了。目前可以用于制作网络课件的工具很多几乎所有的网页制作软件都可以用于制作网络课件例如FrontPage、Dreamweaver等本章主要介绍DreamweaverCS的应用技术。  制作网络课件实质上就是建立教学站点DreamweaverCS是目前最流行的一款所见即所得的网站开发与网页制作软件在制作网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具具有功能强大、界面简洁、简单实用等特点是最好的网页制作软件也是制作网络课件的首选软件。  牢固掌握了网络课件的制作原则以后接下来就是选择网络课件的制作工具了。目前可以用于制作网络课件的工具很多几乎所有的网页制作软件都可以用于制作网络课件例如FrontPage、Dreamweaver等本章主要介绍DreamweaverCS的应用技术。  制作网络课件实质上就是建立教学站点DreamweaverCS是目前最流行的一款所见即所得的网站开发与网页制作软件在制作网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具具有功能强大、界面简洁、简单实用等特点是最好的网页制作软件也是制作网络课件的首选软件。  DreamweaverCS提供了多种工作界面以适合不同的工作人员。第一次安装该软件并启动后出现的工作界面如图所示该工作界面称为“设计器”界面。  对于老用户而言如果不适应这种工作界面可以通过界面切换菜单进行切换选择适合自己的界面模式。本章将以“经典”界面模式介绍DreamweaverCS在网络课件中的应用如图所示。  DreamweaverCS提供了多种工作界面以适合不同的工作人员。第一次安装该软件并启动后出现的工作界面如图所示该工作界面称为“设计器”界面。  对于老用户而言如果不适应这种工作界面可以通过界面切换菜单进行切换选择适合自己的界面模式。本章将以“经典”界面模式介绍DreamweaverCS在网络课件中的应用如图所示。DreamweaverCS的工作界面  由上图可以看出DreamweaverCS的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成下面简单介绍各主要组成部分。  由上图可以看出DreamweaverCS的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成下面简单介绍各主要组成部分。【插入】工具栏  DreamweaverCS的【插入】工具栏中包含了个标签分别为:常用、布局、表单、数据、Spry、InContextEditing、文本、收藏夹如图所示。  单击【插入】工具栏中的不同标签可以进行切换每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内即可将相应的对象添加到网页文件中并可在网页中编辑添加的对象。【插入】工具栏  DreamweaverCS的【插入】工具栏中包含了个标签分别为:常用、布局、表单、数据、Spry、InContextEditing、文本、收藏夹如图所示。  单击【插入】工具栏中的不同标签可以进行切换每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内即可将相应的对象添加到网页文件中并可在网页中编辑添加的对象。【文档】工具栏  【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮如图所示。【文档】工具栏  【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮如图所示。  【文档】工具栏中的前三个按钮用于切换视图模式。单击  按钮可以进入代码视图这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击   按钮可以进入代码视图与设计视图在该视图中窗口被分成上、下两部分顶部窗口用于编写HTML代码底部窗口用于可视化编辑网页。单击   按钮可以进入设计视图这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中Dreamweaver中显示的文档处于可视化编辑状态页面效果类似于在浏览器中查看页面时看到的内容。  【文档】工具栏中的前三个按钮用于切换视图模式。单击  按钮可以进入代码视图这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击   按钮可以进入代码视图与设计视图在该视图中窗口被分成上、下两部分顶部窗口用于编写HTML代码底部窗口用于可视化编辑网页。单击   按钮可以进入设计视图这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中Dreamweaver中显示的文档处于可视化编辑状态页面效果类似于在浏览器中查看页面时看到的内容。状态栏  在DreamweaverCS状态栏中可以显示当前光标所在位置的HTML标记通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度如图所示。  另外DreamweaverCS的状态栏上新增了视图控制工具其中选取工具用于选择页面中的操作对象手形工具  用于平移视图缩放工具  用于放大或缩小视图显示而设置缩放比率选项框    可以通过确切的数值控制视图的缩放。状态栏  在DreamweaverCS状态栏中可以显示当前光标所在位置的HTML标记通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度如图所示。  另外DreamweaverCS的状态栏上新增了视图控制工具其中选取工具用于选择页面中的操作对象手形工具  用于平移视图缩放工具  用于放大或缩小视图显示而设置缩放比率选项框    可以通过确切的数值控制视图的缩放。【属性】面板  【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时【属性】面板中将显示出不同对象的属性。例如选择了文字在【属性】面板中显示的是文字的属性如果选择了图像则【属性】面板中将显示图像的属性。另外还可以直接在【属性】面板中修改所选对象的属性修改后的效果可以在编辑窗口中反映出来。如图所示为选择表格时的【属性】面板。  在【属性】面板的右下角单击三角形的切换按钮可以将【属性】面板切换为常用属性或全部属性模式如图所示。【属性】面板  【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时【属性】面板中将显示出不同对象的属性。例如选择了文字在【属性】面板中显示的是文字的属性如果选择了图像则【属性】面板中将显示图像的属性。另外还可以直接在【属性】面板中修改所选对象的属性修改后的效果可以在编辑窗口中反映出来。如图所示为选择表格时的【属性】面板。  在【属性】面板的右下角单击三角形的切换按钮可以将【属性】面板切换为常用属性或全部属性模式如图所示。面板组  面板组是指组合在一起的面板集合它为我们编辑网页提供了既直观又快速的操作方法是设计制作网页时不可缺少的工具。  单击【窗口】菜单下的相应命令可以打开或关闭面板。当我们打开一个面板时与其成组的面板会同时出现如图所示。面板组  面板组是指组合在一起的面板集合它为我们编辑网页提供了既直观又快速的操作方法是设计制作网页时不可缺少的工具。  单击【窗口】菜单下的相应命令可以打开或关闭面板。当我们打开一个面板时与其成组的面板会同时出现如图所示。  单击面板组中的标签可以在不同的面板之间切换。另外将光标指向面板标签按住鼠标左键向外拖动可以把该面板从面板组中分离出来分离出来的面板组还可以再放回去只需拖动面板标签到面板组中即可。  单击面板组中的标签可以在不同的面板之间切换。另外将光标指向面板标签按住鼠标左键向外拖动可以把该面板从面板组中分离出来分离出来的面板组还可以再放回去只需拖动面板标签到面板组中即可。规划站点  规划站点是建立站点的前期准备工作主要包括规划站点主题、规划站点结构、设计网页版面、收集站点素材等。例如要建立一个教学网站该网站主要介绍语文、历史、地理等学科的教学内容。我们首先要考虑站点的服务对象确定主题内容同样是介绍语文、历史、地理等学科的站点我们是侧重课外辅导还是侧重考试指南?这就是主题问题只有确定了主题才能有的放矢地进行工作。规划站点  规划站点是建立站点的前期准备工作主要包括规划站点主题、规划站点结构、设计网页版面、收集站点素材等。例如要建立一个教学网站该网站主要介绍语文、历史、地理等学科的教学内容。我们首先要考虑站点的服务对象确定主题内容同样是介绍语文、历史、地理等学科的站点我们是侧重课外辅导还是侧重考试指南?这就是主题问题只有确定了主题才能有的放矢地进行工作。建立教学站点  确定了站点主题以后需要进行站点结构的规划同一个网站要介绍三个学科的内容如何组织才能脉络清晰这是动手制作站点之前必须做好的一项工作。当确定了站点主题、组织结构以后接下来的工作就是设计网页版面网页作为一种视觉语言应十分注重其版式的设计其中主要包括色彩、构图两大方面的内容这完全取决于制作者的综合水平包括审美能力、设计能力、文字能力等多方面的素质。  确定了站点主题以后需要进行站点结构的规划同一个网站要介绍三个学科的内容如何组织才能脉络清晰这是动手制作站点之前必须做好的一项工作。当确定了站点主题、组织结构以后接下来的工作就是设计网页版面网页作为一种视觉语言应十分注重其版式的设计其中主要包括色彩、构图两大方面的内容这完全取决于制作者的综合水平包括审美能力、设计能力、文字能力等多方面的素质。  以上三项工作完成以后接下来需要收集与整理站点素材这是一项费时费力的工作需要精心组织与筹备。例如为了使教学站点具有生动性、吸引性达到生动简洁、便于教学的目的要求每一部分都要有内容文字、相关图像甚至还要有动画、声音等装饰。因此在前期的准备工作中搜集素材的工作量最大。  以上三项工作完成以后接下来需要收集与整理站点素材这是一项费时费力的工作需要精心组织与筹备。例如为了使教学站点具有生动性、吸引性达到生动简洁、便于教学的目的要求每一部分都要有内容文字、相关图像甚至还要有动画、声音等装饰。因此在前期的准备工作中搜集素材的工作量最大。  准备好素材后需要确定站点在本地计算机上的存放位置。通常情况下首先根据站点结构在本地计算机上建立一个站点文件夹如在C盘根目录下建立一个文件夹作为站点文件夹命名为“教学站点”用于存放站点的所有文件。其次为了更好地管理站点内容便于以后的站点更新与维护工作需要在站点文件夹下分别建立用于存放站点文件和素材的子文件夹如用于存放图像、动画、应用程序、插件等的文件夹文件夹的命名最好与所存放的内容相关以便查找。  准备好素材后需要确定站点在本地计算机上的存放位置。通常情况下首先根据站点结构在本地计算机上建立一个站点文件夹如在C盘根目录下建立一个文件夹作为站点文件夹命名为“教学站点”用于存放站点的所有文件。其次为了更好地管理站点内容便于以后的站点更新与维护工作需要在站点文件夹下分别建立用于存放站点文件和素材的子文件夹如用于存放图像、动画、应用程序、插件等的文件夹文件夹的命名最好与所存放的内容相关以便查找。创建站点的基本结构  创建站点的基本结构是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的   站点其次是添加网页文件与站点文件夹。  .创建站点  DreamweaverCS提供了两种创建站点的方法:一是在启动Dreamweaver时通过欢迎画面创建二是在Dreamweaver工作环境下单击菜单栏中的【站点】【新建站点】命令。这两种创建站点的方法都是通过向导完成的非常直观。  〖例〗建立kejian站点。  )启动DreamweaverCS则弹出欢迎画面如图所示。创建站点的基本结构  创建站点的基本结构是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的   站点其次是添加网页文件与站点文件夹。  .创建站点  DreamweaverCS提供了两种创建站点的方法:一是在启动Dreamweaver时通过欢迎画面创建二是在Dreamweaver工作环境下单击菜单栏中的【站点】【新建站点】命令。这两种创建站点的方法都是通过向导完成的非常直观。  〖例〗建立kejian站点。  )启动DreamweaverCS则弹出欢迎画面如图所示。  )单击【Dreamweaver站点】选项则弹出【……的站点定义为】对话框在该对话框中有两个标签其中【基本】标签就是站点定义向导第一个对话框如图所示这里有两个选项第一个选项要求输入站点名称以便在Dreamweaver中标识该站点这里输入“kejian”。第二个选项要求输入站点的http地址如果还没有域名可以暂时不填。  )单击【Dreamweaver站点】选项则弹出【……的站点定义为】对话框在该对话框中有两个标签其中【基本】标签就是站点定义向导第一个对话框如图所示这里有两个选项第一个选项要求输入站点名称以便在Dreamweaver中标识该站点这里输入“kejian”。第二个选项要求输入站点的http地址如果还没有域名可以暂时不填。  )单击    按钮进入站点定义向导的第二个对话框如图所示。该对话框询问用户是否要使用服务器技术选择【否我不想使用服务器技术】选项表示该站点是一个静态站点没有动态页。  )单击    按钮进入站点定义向导的第二个对话框如图所示。该对话框询问用户是否要使用服务器技术选择【否我不想使用服务器技术】选项表示该站点是一个静态站点没有动态页。  )单击    按钮进入站点定义向导的第三个对话框如图所示。该对话框询问用户如何使用文件这里选择第一个选项然后在下面的文本框中指定一个文件夹Dreamweaver将在其中存储站点文件。  )单击    按钮进入站点定义向导的第四个对话框如图所示。该对话框询问用户如何连接到远程服务器这里从下拉列表中选择“无”。  )单击    按钮进入站点定义向导的第三个对话框如图所示。该对话框询问用户如何使用文件这里选择第一个选项然后在下面的文本框中指定一个文件夹Dreamweaver将在其中存储站点文件。  )单击    按钮进入站点定义向导的第四个对话框如图所示。该对话框询问用户如何连接到远程服务器这里从下拉列表中选择“无”。  )单击    按钮进入站点定义向导的第五个对话框其中显示了用户的设置概要如图所示。  )单击    按钮则通过向导建立了一个本地教学站点。  )单击    按钮进入站点定义向导的第五个对话框其中显示了用户的设置概要如图所示。  )单击    按钮则通过向导建立了一个本地教学站点。  建立了本地站点以后新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】【文件】命令或者按下F键可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项如图所示。  现在我们已经创建了一个教学站点不过目前为止这个站点还是空的没有实际内容因此必须向站点中添加相关的内容。  建立了本地站点以后新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】【文件】命令或者按下F键可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项如图所示。  现在我们已经创建了一个教学站点不过目前为止这个站点还是空的没有实际内容因此必须向站点中添加相关的内容。  .添加网页文件与站点文件夹  新建的站点是空白的其中没有任何内容。根据站点的规划需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件站点文件夹则用于管理站点内容因为站点中会有很多文件为了有效地管理文件可以将它们分门别类地存放在文件夹中如图像文件夹可以专门用于存放图像、动画等。    .添加网页文件与站点文件夹  新建的站点是空白的其中没有任何内容。根据站点的规划需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件站点文件夹则用于管理站点内容因为站点中会有很多文件为了有效地管理文件可以将它们分门别类地存放在文件夹中如图像文件夹可以专门用于存放图像、动画等。    在站点中添加网页文件与文件夹的方法基本一致操作步骤如下:  )在【文件】面板中单击鼠标右键则弹出一个快捷菜  单。  )选择快捷菜单中的【新建文件】命令则新建了一个网页文件如图所示。  )在光标位置处输入网页的名称然后按下Enter键确认则完成了网页文件的添加。  )同样的方法如果在弹出的快捷菜单中选择【新建文件夹】命令则可以在站点中添加一个文件夹。  )在光标位置处输入网页的名称然后按下Enter键确认则完成了网页文件的添加。  )同样的方法如果在弹出的快捷菜单中选择【新建文件夹】命令则可以在站点中添加一个文件夹。  〖例〗为kejian站点添加内容。  )在【文件】面板中的“kejian”文件夹上单击鼠标右键则弹出一个快捷菜单。  )选择快捷菜单中的【新建文件夹】命令则在“kejian”文件夹下新建了一个文件夹。  )在光标位置处输入文件夹的名称如“Images”按下Enter键确认。  )根据“kejian”站点的要求用同样的方法再新建三个文件夹分别命名为“Chinese”、“English”和“Geography”用于存放关于语文、英语和地理等方面的内容如图所示。  )在“kejian”文件夹上单击鼠标右键从弹出的快捷菜单中选择【新建文件】命令则添加了一个网页文件。  )在光标位置处输入网页文件的名称如“indexhtml”按下Enter键确认如图所示。  )用同样的方法分别在新建的文件夹上单击鼠标右键选择快捷菜单中的【新建文件】命令则可以在该文件夹中建立新的网页文件。如图所示为在每个文件夹中建立的网页“Chinesehtml”、“Englishhtml”和“Geographyhtml”。  )在“kejian”文件夹上单击鼠标右键从弹出的快捷菜单中选择【新建文件】命令则添加了一个网页文件。  )在光标位置处输入网页文件的名称如“indexhtml”按下Enter键确认如图所示。  )用同样的方法分别在新建的文件夹上单击鼠标右键选择快捷菜单中的【新建文件】命令则可以在该文件夹中建立新的网页文件。如图所示为在每个文件夹中建立的网页“Chinesehtml”、“Englishhtml”和“Geographyhtml”。文本的编辑  文本在网页中具有举足轻重的地位。文本内容充实可以吸引众多的浏览者文本编辑处理得当可以使浏览者在获得信息的同时感到赏心悦目这对于提高站点的浏览次数极为重要。向网页中输入文本以后可以进行文本的格式、对齐方式等的设置。输入文本的方法如下:文本的编辑  文本在网页中具有举足轻重的地位。文本内容充实可以吸引众多的浏览者文本编辑处理得当可以使浏览者在获得信息的同时感到赏心悦目这对于提高站点的浏览次数极为重要。向网页中输入文本以后可以进行文本的格式、对齐方式等的设置。输入文本的方法如下:编辑教学网页  在编辑窗口中输入所需的文本。如需换行分段可以按下Enter键如需换行但不分段可以按住Shift键的同时按下Enter键。  对于大量的文本可以使用“复制粘贴”的方法将其它文件中的文本复制到当前网页中。  在网页中输入文本以后可以根据需要设置文本属性。选择要编辑的文本此时的【属性】面板如图所示在这里可以设置文本的各种格式。  在编辑窗口中输入所需的文本。如需换行分段可以按下Enter键如需换行但不分段可以按住Shift键的同时按下Enter键。  对于大量的文本可以使用“复制粘贴”的方法将其它文件中的文本复制到当前网页中。  在网页中输入文本以后可以根据需要设置文本属性。选择要编辑的文本此时的【属性】面板如图所示在这里可以设置文本的各种格式。  【格式】:选择其中的选项可以对所选文本应用系统预设的格式。  【ID】:用于为所选内容分配一个ID号。  【类】:显示当前应用于文本的类样式如果没有对所选内容应用过任何样式则显示“无”。  单击  按钮和  按钮可以将所选文本加粗和倾斜。  单击  或  按钮可以为光标所在的段落或所选择的段落添加无序或有序项目列表。  【格式】:选择其中的选项可以对所选文本应用系统预设的格式。  【ID】:用于为所选内容分配一个ID号。  【类】:显示当前应用于文本的类样式如果没有对所选内容应用过任何样式则显示“无”。  单击  按钮和  按钮可以将所选文本加粗和倾斜。  单击  或  按钮可以为光标所在的段落或所选择的段落添加无序或有序项目列表。  单击  或  按钮可以使光标所在的段落向右或向左缩进。  【链接】:用于为所选的文本建立超链接。可以在其后面的文本框中输入要链接文档的路径名称也可以单击右侧的  图标在弹出的对话框中选择链接的文档或者按住  图标指向要链接的文档建立超链接。  【标题】:用于设置超链接的文本提示。  单击  或  按钮可以使光标所在的段落向右或向左缩进。  【链接】:用于为所选的文本建立超链接。可以在其后面的文本框中输入要链接文档的路径名称也可以单击右侧的  图标在弹出的对话框中选择链接的文档或者按住  图标指向要链接的文档建立超链接。  【标题】:用于设置超链接的文本提示。  【目标】:用于选择链接文档在窗口中的打开方式。选择“blank”选项表示将在新的浏览器窗口中打开链接的文档选择“parent”选项表示将在当前文档的父级框架或包含该链接的框架窗口中打开链接文档选择“self”选项表示将在当前文档所在的窗口中打开链接的文档选择“top”选项表示将在整个浏览器窗口中打开链接的文档。  DreamweaverCS将CSS属性面板与HTML属性面板集成在一起在【属性】面板中单击    按钮可以切换到CSS属性面板如图所示。  【目标】:用于选择链接文档在窗口中的打开方式。选择“blank”选项表示将在新的浏览器窗口中打开链接的文档选择“parent”选项表示将在当前文档的父级框架或包含该链接的框架窗口中打开链接文档选择“self”选项表示将在当前文档所在的窗口中打开链接的文档选择“top”选项表示将在整个浏览器窗口中打开链接的文档。  DreamweaverCS将CSS属性面板与HTML属性面板集成在一起在【属性】面板中单击    按钮可以切换到CSS属性面板如图所示。  【目标规则】:用于显示页面中所选文本使用的规则也可以通过该选项创建新的CSS规则、新的内联样式等。  单击    按钮则打开【CSS规则定义】对话框用于设置CSS的各项属性如果从【目标规则】列表中选择“新CSS规则”选项并单击    按钮则可以新建CSS规则。  【目标规则】:用于显示页面中所选文本使用的规则也可以通过该选项创建新的CSS规则、新的内联样式等。  单击    按钮则打开【CSS规则定义】对话框用于设置CSS的各项属性如果从【目标规则】列表中选择“新CSS规则”选项并单击    按钮则可以新建CSS规则。  单击  按钮可以打开【CSS样式】面板。  【字体】:用于选择所需的字体。如果字体列表中没有所需的字体可以选择列表中的【编辑字体列表】选项这时将打开【编辑字体列表】对话框如图所示。在对话框的【可用字体】列表框中选择所需的字体后单击 按钮将其添加到【字体列表】中单击    按钮则该字体将出现在【属性】面板的字体列表中。  单击  按钮可以打开【CSS样式】面板。  【字体】:用于选择所需的字体。如果字体列表中没有所需的字体可以选择列表中的【编辑字体列表】选项这时将打开【编辑字体列表】对话框如图所示。在对话框的【可用字体】列表框中选择所需的字体后单击 按钮将其添加到【字体列表】中单击    按钮则该字体将出现在【属性】面板的字体列表中。  【大小】:用于设置文本的字号大小。  单击文本颜色块  在弹出的颜色列表中可以选择文本的颜色。  单击  按钮和  按钮可以将所选文本加粗和倾斜。  分别单击      按钮可以使光标所在的段落或所选择的段落实现左对齐、居中对齐、右对齐和两端对齐。  【大小】:用于设置文本的字号大小。  单击文本颜色块  在弹出的颜色列表中可以选择文本的颜色。  单击  按钮和  按钮可以将所选文本加粗和倾斜。  分别单击      按钮可以使光标所在的段落或所选择的段落实现左对齐、居中对齐、右对齐和两端对齐。  在Dreamweaver的编辑窗口中输入文本之后系统将自动生成与其对应的HTML代码。值得注意的是输入文本时按下空格键并不能移动文字这是因为在HTML代码中不能输入多个空格。要解决这个问题可以在【属性】面板的【格式】下拉列表中选择“预先格式化的”命令然后再按下空格键。  在Dreamweaver的编辑窗口中输入文本之后系统将自动生成与其对应的HTML代码。值得注意的是输入文本时按下空格键并不能移动文字这是因为在HTML代码中不能输入多个空格。要解决这个问题可以在【属性】面板的【格式】下拉列表中选择“预先格式化的”命令然后再按下空格键。  〖例〗制作一个纯文字网页。  )在【文件】面板中双击“Chinesehtml”网页文件打开该网页进行编辑。  )在【属性】面板中单击       按钮在弹出的【页面属性】对话框中切换到【外观(HTML)】分类如图所示。  〖例〗制作一个纯文字网页。  )在【文件】面板中双击“Chinesehtml”网页文件打开该网页进行编辑。  )在【属性】面板中单击       按钮在弹出的【页面属性】对话框中切换到【外观(HTML)】分类如图所示。  )单击【背景图像】文本框右侧的    按钮选择一幅图片作为网页背景然后切换到【标题编码】分类在【标题】文本框中输入“唐诗欣赏”作为网页的标题栏文字如图所示。  )单击对话框中的    按钮完成页面属性的设置则为网页设置了标题栏文字与背景图像如图所示。  )单击【背景图像】文本框右侧的    按钮选择一幅图片作为网页背景然后切换到【标题编码】分类在【标题】文本框中输入“唐诗欣赏”作为网页的标题栏文字如图所示。  )单击对话框中的    按钮完成页面属性的设置则为网页设置了标题栏文字与背景图像如图所示。  )在编辑窗口中输入文字“唐诗欣赏”并将其选中。  )在【属性】面板的【格式】列表中选择“标题”选项设置网页的标题。然后切换到CSS属性面板单击居中对齐按钮设置文字居中对齐  结果如图所示。  )将光标定位在标题文字后面在【插入】工具栏的【常用】标签中单击  按钮在页面中插入一条水平线如图所示。  )在编辑窗口中输入文字“唐诗欣赏”并将其选中。  )在【属性】面板的【格式】列表中选择“标题”选项设置网页的标题。然后切换到CSS属性面板单击居中对齐按钮设置文字居中对齐  结果如图所示。  )将光标定位在标题文字后面在【插入】工具栏的【常用】标签中单击  按钮在页面中插入一条水平线如图所示。  )将光标定位在水平线的后面按下Enter键产生一个新段落在新的段落中输入如图所示的文本内容。  )在【属性】面板中切换到CSS属性面板设置文字的相关格式也可以建立CSS规则格式化文本。  )将光标定位在水平线的后面按下Enter键产生一个新段落在新的段落中输入如图所示的文本内容。  )在【属性】面板中切换到CSS属性面板设置文字的相关格式也可以建立CSS规则格式化文本。在网页中使用图像  在网页中除了文本以外应用最广泛的就是图像了使用图像不但可以美化网页还可以作为超链接的源端点可谓一举两得。在Dreamweaver中既可以使用动态图像也可以使用静态图像但无论使用哪种图像首先要考虑文件的大小例如使用静态图像时最好使用GIF、JPG或PNG格式的图像因为这些图像的体积相对较小。在网页中使用图像  在网页中除了文本以外应用最广泛的就是图像了使用图像不但可以美化网页还可以作为超链接的源端点可谓一举两得。在Dreamweaver中既可以使用动态图像也可以使用静态图像但无论使用哪种图像首先要考虑文件的大小例如使用静态图像时最好使用GIF、JPG或PNG格式的图像因为这些图像的体积相对较小。  .插入图像  在网页中插入图像时有两种情况:一种情况是图像已经规划在站点中另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内插入图像时将弹出一个提示框如图所示提示用户将图像复制到站点中。  插入图像的操作比较简单只要单击菜单栏中的【插入】【图像】命令或者在【插入】工具栏的【常用】标签中单击  按钮即可。  .插入图像  在网页中插入图像时有两种情况:一种情况是图像已经规划在站点中另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内插入图像时将弹出一个提示框如图所示提示用户将图像复制到站点中。  插入图像的操作比较简单只要单击菜单栏中的【插入】【图像】命令或者在【插入】工具栏的【常用】标签中单击  按钮即可。  〖例〗在网页中插入图像。  )在【文件】面板中双击要编辑的网页文件将其打开将光标定位在要插入图像的位置处。  )在【插入】工具栏中选择【常用】标签单击其中的  按钮在弹出的【选择图像源文件】对话框中选择要插入的图像文件这里选择一幅站点之外的图像如图所示。  〖例〗在网页中插入图像。  )在【文件】面板中双击要编辑的网页文件将其打开将光标定位在要插入图像的位置处。  )在【插入】工具栏中选择【常用】标签单击其中的  按钮在弹出的【选择图像源文件】对话框中选择要插入的图像文件这里选择一幅站点之外的图像如图所示。  )单击   按钮将弹出一个系统提示框如图所示。提示所选的图像文件不在站点中发布时可能会出现错误。询问用户是否将所选文件复制到站点文件夹中。  )单击   按钮在弹出的【复制文件为】对话框中将所选图像文件保存在当前站点中。  )单击   按钮将弹出一个系统提示框如图所示。提示所选的图像文件不在站点中发布时可能会出现错误。询问用户是否将所选文件复制到站点文件夹中。  )单击   按钮在弹出的【复制文件为】对话框中将所选图像文件保存在当前站点中。  )单击    按钮则弹出【图像标签辅助功能属性】对话框用于输入图像的替换文本如图所示。  )单击   按钮则将所选图像插入到网页中如图所示。  )单击    按钮则弹出【图像标签辅助功能属性】对话框用于输入图像的替换文本如图所示。  )单击   按钮则将所选图像插入到网页中如图所示。  .设置图像属性  插入到网页中的图像可以通过【属性】面板设置其属性如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性首先要选择网页中的图像这时【属性】面板将显示图像的属性如图所示。  .设置图像属性  插入到网页中的图像可以通过【属性】面板设置其属性如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性首先要选择网页中的图像这时【属性】面板将显示图像的属性如图所示。  【图像】:用于显示图像文件的大小。在其下方的【ID】文本框中可以为图像文件命名该名称可以用于脚本的调用。  【宽】和【高】:用于显示或修改图像的宽度和高度单位为像素。  【源文件】:用于显示该图像文件的URL地址。  【链接】:用于为图像建立超链接。  【替换】:用于输入图像的说明性文字。浏览网页时当光标指向图像上时将出现该文字。  【图像】:用于显示图像文件的大小。在其下方的【ID】文本框中可以为图像文件命名该名称可以用于脚本的调用。  【宽】和【高】:用于显示或修改图像的宽度和高度单位为像素。  【源文件】:用于显示该图像文件的URL地址。  【链接】:用于为图像建立超链接。  【替换】:用于输入图像的说明性文字。浏览网页时当光标指向图像上时将出现该文字。  【编辑】:这里提供了编辑图像的功能既可以在源程序中编辑图像也可以在图像浏览器中优化图像。  【垂直边距】:用于设置图像与其周围对象在垂直方向的空白距离。  【水平边距】:用于设置图像与其周围对象在水平方向的空白距离。  【目标】:用于设置打开目标文档的目标窗口该选项只有在图像建立了超链接时才可用。  【编辑】:这里提供了编辑图像的功能既可以在源程序中编辑图像也可以在图像浏览器中优化图像。  【垂直边距】:用于设置图像与其周围对象在垂直方向的空白距离。  【水平边距】:用于设置图像与其周围对象在水平方向的空白距离。  【目标】:用于设置打开目标文档的目标窗口该选项只有在图像建立了超链接时才可用。  【原始】:用于显示图像被载入之前预先载入的低品质图像的URL地址以便缩短用户的等待时间。  【边框】:在其后面的文本框中输入数值可以为图像添加相应宽度的边框。取值为时图像没有边框。另外其右侧的按钮可以对图像裁剪、重新取样、调整亮度对比度、锐化等。  【对齐】:用于设置图像与其周围对象之间的对齐方式。  【原始】:用于显示图像被载入之前预先载入的低品质图像的URL地址以便缩短用户的等待时间。  【边框】:在其后面的文本框中输入数值可以为图像添加相应宽度的边框。取值为时图像没有边框。另外其右侧的按钮可以对图像裁剪、重新取样、调整亮度对比度、锐化等。  【对齐】:用于设置图像与其周围对象之间的对齐方式。  .为图像建立超链接  在DreamweaverCS中用户可以为图像建立超链接浏览网页时单击图像可以打开链接的目标文档。为整个图像建立链接的方法比较简单只需选择要建立超链接的图像在【属性】面板的【链接】文本框中输入要链接的目标文档的URL地址或者利用  和  图标选择要链接的目标文档即可。  〖例〗为图像建立链接。  )在【文件】面板中双击“indexhtml”网页文件将其打开然后插入三幅图像作为导航按钮如图所示。  .为图像建立超链接  在DreamweaverCS中用户可以为图像建立超链接浏览网页时单击图像可以打开链接的目标文档。为整个图像建立链接的方法比较简单只需选择要建立超链接的图像在【属性】面板的【链接】文本框中输入要链接的目标文档的URL地址或者利用  和  图标选择要链接的目标文档即可。  〖例〗为图像建立链接。  )在【文件】面板中双击“indexhtml”网页文件将其打开然后插入三幅图像作为导航按钮如图所示。  )选择“语文天地”图像在【属性】面板中单击【链接】右侧的  按钮在弹出的【选择文件】对话框中选择本站点内的“Chinesehtml”文件如图所示。  )单击    按钮则为“语文天地”图像建立了链接。  )选择“英语之家”图像在【属性】面板中按住【链接】右侧的  按钮将其拖动到【文件】面板中的“Englishhtml”文件上则为图像建立了链接如图所示。  )选择“语文天地”图像在【属性】面板中单击【链接】右侧的  按钮在弹出的【选择文件】对话框中选择本站点内的“Chinesehtml”文件如图所示。  )单击    按钮则为“语文天地”图像建立了链接。  )选择“英语之家”图像在【属性】面板中按住【链接】右侧的  按钮将其拖动到【文件】面板中的“Englishhtml”文件上则为图像建立了链接如图所示。  )选择“地理知识”图像在【属性】面板中的【链接】文本框中输入“GeographyGeographyhtml”则为该图像建立了链接。  在上面的实例中我们列出了三种创建链接的方法。工作的时候哪一种方法方便就使用哪一种方法。另外实例中建立的链接都是站点内部的链接如果要建立站点与站点之间的链接可以直接输入网址如http:wwwcom。  )选择“地理知识”图像在【属性】面板中的【链接】文本框中输入“GeographyGeographyhtml”则为该图像建立了链接。  在上面的实例中我们列出了三种创建链接的方法。工作的时候哪一种方法方便就使用哪一种方法。另外实例中建立的链接都是站点内部的链接如果要建立站点与站点之间的链接可以直接输入网址如http:wwwcom。  除此之外在Dreamweaver中也可以为图像的某一部分建立超链接浏览网页时单击该部分图像可以打开链接的目标文档。如果要为图像的某一部分建立超链接需要先在图像上建立热点然后再为热点建立超链接。具体操作步骤如下:  )选择网页中要建立热点超链接的图像。  )在【属性】面板中选择建立热点的工具在图像上建立热点如图所示。  除此之外在Dreamweaver中也可以为图像的某一部分建立超链接浏览网页时单击该部分图像可以打开链接的目标文档。如果要为图像的某一部分建立超链接需要先在图像上建立热点然后再为热点建立超链接。具体操作步骤如下:  )选择网页中要建立热点超链接的图像。  )在【属性】面板中选择建立热点的工具在图像上建立热点如图所示。  选择工具  后在图像上拖曳鼠标可以建立矩形热点。按住Shift键的同时拖曳鼠标可以建立正方形热点。  选择工具  后在图像上拖曳鼠标可以建立圆形热点。  选择工具  后在图像上移动并单击鼠标可以建立多边形热点。  选择工具  可以选择并移动建立的热点。  选择工具  后在图像上拖曳鼠标可以建立矩形热点。按住Shift键的同时拖曳鼠标可以建立正方形热点。  选择工具  后在图像上拖曳鼠标可以建立圆形热点。  选择工具  后在图像上移动并单击鼠标可以建立多边形热点。  选择工具  可以选择并移动建立的热点。  )使用工具  选择建立的热点在【属性】面板中为其建立超链接如图所示。  在【链接】文本框中输入要链接的目标文档的URL地址。  在【目标】下拉列表中选择打开链接文档的目标窗口。  在【替换】文本框中输入热点的说明性文字。  .插入鼠标经过图像  所谓鼠标经过图像是指浏览网页时当光标指向图像上时该图像将被其它图像替代从而产生动态效果。下面以实例的形式介绍如何在网页中插入鼠标经过图像。  )使用工具  选择建立的热点在【属性】面板中为其建立超链接如图所示。  在【链接】文本框中输入要链接的目标文档的URL地址。  在【目标】下拉列表中选择打开链接文档的目标窗口。  在【替换】文本框中输入热点的说明性文字。  .插入鼠标经过图像  所谓鼠标经过图像是指浏览网页时当光标指向图像上时该图像将被其它图像替代从而产生动态效果。下面以实例的形式介绍如何在网页中插入鼠标经过图像。  〖例〗制作动态按钮。  )在【文件】面板中双击要编辑的网页将其打开。  )在网页中要插入鼠标经过图像的位置处定位光标。  )在【插入】工具栏中选择【常用】标签单击  右侧的小箭头在打开的菜单中选择【鼠标经过图像】命令则弹出【插入鼠标经过图像】对话框如图所示。  〖例〗制作动态按钮。  )在【文件】面板中双击要编辑的网页将其打开。  )在网页中要插入鼠标经过图像的位置处定位光标。  )在【插入】工具栏中选择【常用】标签单击  右侧的小箭头在打开的菜单中选择【鼠标经过图像】命令则弹出【插入鼠标经过图像】对话框如图所示。  )在对话框中选择原始图像和鼠标经过图像并可为鼠标经过图像建立超链接。  【图像名称】:用于输入图像名称。  【原始图像】:用于选择原始显示的图像。  【鼠标经过图像】:用于选择替代原始图像的图像。  【替换文本】:用于输入鼠标经过图像时的替代文本。  【按下时前往的URL】:用于为鼠标经过图像建立超链接。  )单击    按钮即可插入鼠标经过图像如图所示为鼠标经过图像的浏览效果。  )在对话框中选择原始图像和鼠标经过图像并可为鼠标经过图像建立超链接。  【图像名称】:用于输入图像名称。  【原始图像】:用于选择原始显示的图像。  【鼠标经过图像】:用于选择替代原始图像的图像。  【替换文本】:用于输入鼠标经过图像时的替代文本。  【按下时前往的URL】:用于为鼠标经过图像建立超链接。  )单击    按钮即可插入鼠标经过图像如图所示为鼠标经过图像的浏览效果。  .创建导航条  在网页中导航条的作用不可忽视使用它可以在站点的网页之间自由跳转。正如它的名称一样导航条为浏览者提供了导航作用。制作导航条之前必须先制作每一个导航按钮的四种状态准备好了四种状态的图片以后就可以向网页中插入导航条了。  .创建导航条  在网页中导航条的作用不可忽视使用它可以在站点的网页之间自由跳转。正如它的名称一样导航条为浏览者提供了导航作用。制作导航条之前必须先制作每一个导航按钮的四种状态准备好了四种状态的图片以后就可以向网页中插入导航条了。  在网页中创建导航条的基本操作步骤如下:  )在网页中要创建导航条的位置处定位光标。  )在【插入】工具栏中选择【常用】标签单击其中的、  按钮在打开的菜单中选择【导航条】命令则弹出【插入导航条】对话框如图所示。  在网页中创建导航条的基本操作步骤如下:  )在网页中要创建导航条的位置处定位光标。  )在【插入】工具栏中选择【常用】标签单击其中的、  按钮在打开的菜单中选择【导航条】命令则弹出【插入导航条】对话框如图所示。  ) 在对话框中进行选项设置。  【导航条元件】:用于显示所有的导航元件。单击其上方的按钮或按钮可以增加或减少列表中的导航元件。单击其右上角的按钮或按钮可以调整导航元件的排列顺序。  【项目名称】:用于输入导航元件的名称所输入的名称将在上面的【导航条元件】中显示出来。  ) 在对话框中进行选项设置。  【导航条元件】:用于显示所有的导航元件。单击其上方的按钮或按钮可以增加或减少列表中的导航元件。单击其右上角的按钮或按钮可以调整导航元件的排列顺序。  【项目名称】:用于输入导航元件的名称所输入的名称将在上面的【导航条元件】中显示出来。  【状态图像】:用于输入一般状态下要显示的图像的路径和文件名。  【鼠标经

类似资料

编辑推荐

中国古代兵器与兵书.神州文化集成丛书.pdf

中国古代兵器_陆敬严.pdf

[文学史][英国文艺复兴时期文学史(.pdf

欧洲民族概论.pdf

当男人背叛女人:婚外情真相大剖析.pdf

职业精品

精彩专题

上传我的资料

精选资料

热门资料排行换一换

  • 增值税申报表(小规模申报表).d…

  • 趋势为王 股票趋势技术分析(贾秋…

  • 线性代数 (第二版).pdf

  • 中国秘密战 中共情报、保卫工作纪…

  • 生命轮回 超越时空的前世疗法.p…

  • 交际口才训练教程第二册(共5册)…

  • 红色后代.pdf

  • 实战操盘之二:稳定盈利的秘诀 邹…

  • Tyvek_特卫强介绍.doc

  • 资料评价:

    / 217
    所需积分:1 立即下载

    意见
    反馈

    返回
    顶部