《Dreamweaver教程》word版.doc

Dreamweaver教程Dreamweaver教程2010-06-04 22：21什么是网页英文web page也称为html文件，是一种可以在www网上传输，并被浏览器认识和翻译而显示出来的文件。www,全称world wide web简称web中文译为全球资讯网，万维网，也叫因特网。html,Hypertext Markup Language中文译为超文本标识语言。超文本，就是指页面内可以包含图片，链接，音乐，程序等非文字元素。也可以理解为，含有超链接的文本，就是超文本。什么是网站网站英文是web site，技术点说，就是若干个相关网页的集合，比如，个人网站。企业网站，政府网站等。当你在网上冲浪时，会欣赏到很多制作精美的网站，在羡慕的同时，你想亲手制作网页吗?你想让自己制作的网页功能更强大吗?好，那我们就一起学习Dreamweaver吧，这可是制作主页的好工具呀！Dreamweaver是可视化的网页制作工具，很容易上手，可以让你轻松地制作出自己的网页。什么是可视化?可视化的意思就是你在Dreamweaver中制作成什么样，在浏览器中就能看到什么样，也就是常说的所见即所得。什么是Dreamweaver工欲善其事，必先利其器。Dreamweaver是一款可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。Dreamweave字面意思为梦幻编织，这一软件有着不断变化的丰富内涵和经久不衰的设计思维，它能充分展现你的创意，实现你的想法，锻炼你的能力，使你成为真正的网页设计大师。好吧，未来的网页设计大师们，让我们一起在Dreamweaver的空间驰骋，在网上编织我们的梦想吧！1、站点结构规划网站，是多个网页集合，包括一个首页和多个分页。创建页面之前，要对站点结构进行设计和规划，决定要创建多少页，每页显示什么内容，页面布局外观以及各页之间如何链接。2、要制作被浏览的网站，首先要在本地制作，然后再上传到互联网web服务器，放置在本地磁盘的网站称为本地站点，位于互联网web服务器上的网站称为远程站点。3、定义本地站点作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。这个文件夹将作为我们的站点文件夹，以后所有的网页文件都放在这个文件夹下，相当于先选块地方以便盖房子。文本的插入与编辑在dw中添加文本，可直接输入文本，也可以从其它应用程序中剪贴或粘贴。还可以从word中导入。编辑文本：选中文本，在属性格式下拉菜单中选中段落，把文件设置成段落格式，另外可定义字号、颜色、加粗、倾斜、水平对齐等设置字体组合：在字体下拉列表中，选编辑字体列表，弹出字体列表对话框。文本换行：直接按回车，生成段落标签，换行间距大。按换档键+回车，生成换行标签，换行间距小。文本空格：编辑-首选参数-允许多个连续空格项打勾，就可以按空格键输入连续空格了。我们还可以切换到全角状态，这样也可以连续输入空格。特殊字符的输入：插入-html-特殊字符插入-文本-最后一个标签有序列表和无序列表：插入水平线插入-html-水平线插入-文本-第一个标签插入日期和时间插入-插入日期常用-日期二、插入图像在网上支持图像有三种格式、*.gif、*.jpg、*.png,其中最常用的是前两种。制作网页时，我们要在站点下建立一个图像文件夹img，将网页中的图片文件都放在这个文件夹中，以方便我们使用。插入图像：将光标定位在插入图像的位置，单击常用内插入图像按钮，或插入菜单中图像命令，单击确定。注意：如果我们要插入的图片文件不在站点目录中，会弹出对话框，让我们把图片保存在站点目录。单击是。设置图片属性：我们可以在属性面板改变图片尺寸，但这样不好，我们单击fireworks图像，启动fireworks进行编辑。文字与图片排列：选择图片，选择对齐下拉列表中的左对齐或右对齐。一共是10项图片的水平间距和垂直间距：直接输入数值。图片加边框：输入边框尺寸插入其它图像元素：1、图像占位符：布局页面时，如果要插入的图片还没制作好，可使用占位符代替图片的位置。2、鼠标经过图像：由两个图像组成，即载入页面显示图像和鼠标指针经过显示图像，这两张图片大小要相等。如果不相等，dreamweaver会自动调整图片大小和主图保持一致。3、插入导航条三、创建链接链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。链接是指站点不同网页之间，站点与web之间的的链接关系。它可以使站点内页面成为有机整体，还能使不同站点之间建立联系。链接由两部分组成：链接载体和链接目标链接载体：文本、图像、热区、动画等链接目标：页面、图像、声音、程序、其它站点、页面内锚点、电子邮件等。链接按目标分为五种类型：内部链接：同一网站文档之间的链接外部链接：不同网站之间的链接锚点链接：(书签链接)同一网页或不同网页指定位置的链接。链接路径：绝对路径和相对路径相对路径：适用于网站内部的链接。绝对路径：适用于远程链接，为文件提供完全路径，包括适用的协议。外部链接，选中文字或图片，直接输入网址。内部链接，选中文字或图片，选中链接后的文件夹，选择浏览文件。也可以直接链接后的圆形按钮到站点面板相应的网页文件中。锚点链接：将光标定位在插入锚点的地方，单击命名标记插入锚点，选中文字或图片，拖动链接后的圆形按钮到锚点，或是直接输入#锚点名称。空链接：直接在链接输入框中输入#号制作图像映射平时，我们一张图片只能加一个链接，如果一张图片做多个链接，我们可以在图像上创建热区。我们可以通过拖动鼠标创建热区，选中部分叫热点，选中热点可在属性面板给这个热点加链接。插入flash动画单击常用下媒体按钮，或是插入下媒体命令，选中flash，确定。插入动画后，并不会在文档中显示内容，而是显示一个带有字母的灰色框。勾选循环复选框影片连续播放，否则播放一次自动停止勾选自动播放复选框，可设定flash是否在页面加载时播放。在品质下拉列表中，可选择flash品质，以最佳状态显示选择高品质。对齐下拉列表中设置flash对齐方式flash背景透明单击参数按钮，设置参数为wmode,值为transparent,这样在任何背景下，flash透明显示。插入声音1、添加背景音乐我们在页面中可以嵌入背景音乐，格式主要为mp3,midi我们可以使用代码方式实现，如果我们把背景音乐放在站点的music文件夹下，那么我们应写入bgsound src=music/*.midi放在body/body之间。如果循环播放，那么写成bgsound src=music/*.midiloop=true表格插入和编辑表格是网页设计不可缺少的元素，网站的页面都是以表格为框架制作的。选择常用表格按钮或插入表格命令，设置表格的行数，列数，表格的宽度，表格宽度可用像素或百分比表示。填充：单元格内容与边框之间的距离间距：单元格与单元格边线之间的距离。页眉：表示页眉样式，可以四选一标题：定义表格标题对齐标题：标题的对齐方式摘要：对表格进行注释。选中整个表格：将鼠标放在边框任意处，出现双箭头时单击可选中整个表格或在表格内任意处单击，然后选中状态栏中的table标签或在单元格任意处单击，点右键表格-选择表格单元格选取用鼠标单击单元格，或选中状态栏上的td标签按ctrl键单击鼠标，可选中不连续单元格。选中行或列：将光标移动到行左或列上方，指针变为向右或向下箭头时，单击表格属性设置：单元格属性设置：不换行复选框，可防止单元格文本较长自动换行标题复选框，使选择的单元格成标题单元格，单元格内文字以标题格式显示出来。表格可以嵌套使用最外层表格，一般都是用绝对像素，里面的表格，可根据情况用像素或百分比。层的使用文本、图像、表格等元素只能固定位置，不能相互叠加。层可放在网页中任何一个位置，可自由移动。插入层：插入布局对象-层命令由光标所在位置决定。也可以绘制层：使用布局按钮绘制层选中层以后，出现八个手柄，拖动可调节层的大小。层的属性：层编号，这是层的名称。左上：指层左上角相对于页面左上角的位置宽高：层的宽度和高度，如果层内容超过大小会延伸Z轴：设置层的层次属性，编号大层出现在编号小层的前面，值可为正，也可为负。层的可见性default：不指明层的可见性inherit：继承父层可见性visible：显示层及所包含内容，无论父层是否可见hidden：隐藏层及所包含内容，无论父层是否可见层的溢出：层内容超过层大小时处理方式visible：(显示)层内容超出层范围时，可自动增加尺寸。hidden：(隐藏)当层内容超出层范围时，保持层尺寸保持不变，隐藏超出的内容。scroll(滚动条)无论层内容超出层范围，都会自动增加滚动条。auto(自动)层内容超出层范围时，自动增加滚动条(默认)剪辑：设置层的可视区域，层经过剪辑后，只有指定的矩形区域是可见的。层和表格之间转换在转换为表格之前，请确保层没有重叠。请执行以下操作：选择修改转换层到表格。即可显示转换层为表格对话框。选择所需的选项。单击确定时间轴的应用：打开时间轴面板，建一个新层，在层中加入一个图像，选中图层，拖动到时间轴的第一层，拖动后面的关键帧，向后移动至需要的帧数。在中间的位置添加关键帧，在每个关键帧上分别移动层到不同的位置。同时选中自动播放和循环复选框。注意：时间轴只能移动分层对象，如果想移动文本或图像，请放在层中。框架框架在网页中的作用就是把一个浏览窗口下分割成几个不同区域，实现在一个浏览器窗口显示多个html页面。1、一个框架结构有两部分网页文件构成，框架和框架集。2、保存框架时，选择文件-保存全部，很关键。3、只有将总框架集和各个框架页保存在本地站点根目录下，才能保证浏览页面时显示正常。4、每一个框架都有一个框架名称，可使用默认名称，也可以在属性面板中修改名称。5、在创建链接时，要用到框架名称，我们必须要清楚每一个框架对应的名称。6、框架是不可以合并的。表单标记form表单在Web网页中用来给访问者填写信息，从而能采集和提交用户输入的信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的ASP或CGI等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。form与/form之间的内容属于表单。form本身有四个属性1、action属性：设定表单在填写完成后要送给服务器的哪一个程序处理，有可能是cgi程序，asp程序，php程序，或是其它程序。2、method属性这个属性设定传送数据的方法，有两种，一种是get,将所填入的变量名称及数据加在一个属性所指定的url之后，将数据传送出去。这种方法送出的数据不超过512bytes。另一种是post，把用户所填的数据变成一个数据包，传到属性所指定的位置url上去，这样数据无限制。3、enctype属性设定要送出的数据使用何种编码方式，我们填写的表单大多都是用浏览器预设的编码方式application/X-www-form-urlencoded,但是也有其他种类的编码方式，如文件上传程序就是用其他的编码方式。4、name属性给予这个form元素一个名称，将来在应用程序vbscript或是其它程序沟通时，才能指定特定的form元素。input标签在html语言中,标记input具有重要的地位，它能够将浏览器中的控件加载到html文档中，该标记是单个标记，没有结束标记。input type=标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在form/form标志对之间。input type=1、input type=textsize=maxlength=单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数(1)name定义控件名称(2)value指定控件初始值,该值就是浏览器被打开时在文本框中的内容(3)size指定控件宽度,表示该文本输入框所能显示的最大字符数。(4)maxlength表示该文本输入框允许用户输入的最大字符数。(5)onchang当文本改变时要执行的函数(6)onselect当控件被选中时要执行的函数(7)onfocus当文本接受焦点时要执行的函数2、input type=password输入密码的区域,当用户输入密码时,区域内将会显示*号password口令控件表示该输入项的输入信息是密码,在文本输入框中显示*,属性有：(1)name定义控件名称(2)value指定控件初始值,该值就是浏览器被打开时在文本框中的内容(3)size指定控件宽度,表示该文本输入框所能显示的最大字符数。(4)maxlegnth表示该文本输入框允许用户输入的最大字符数。3、单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,radio用于单选，有以下属性：input name=type=radiovalue=/(1)name定义控件名称(2)value定义控件的值(3)checked设定控件初始状态是被选中的(4)onclick定义控件被选中时要执行的函数(5)onfocus定义控件为焦点时要执行的函数当为单选项时,所有按钮的name属性必需相同,如：都设置为my_radio。4、input type=checkboxchecked一个复选框,checked属性用来设置该复选框缺省时是否被选中checkbox用于多选,有以下属性：(1)name定义控件名称(2)value定义控件的值(3)checked设定控件初始状态是被选中的(4)onclick定义控件被选中时要执行的函数(5)onfocus定义控件为焦点时要执行的函数5、input type=imagesrc=url使用图像来代替Submit按钮,图像的源文件名由