DW使用教程.docx
- 文档编号:9613116
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:27
- 大小:27.04KB
DW使用教程.docx
《DW使用教程.docx》由会员分享,可在线阅读,更多相关《DW使用教程.docx(27页珍藏版)》请在冰豆网上搜索。
DW使用教程
Adobe DreamweaverCS6课程笔记
第一节、Dreamweaver CS6软件简介和安装
一、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
二、为了保让能够正常安装,在安装时,请断开网络。
第二节、DWCS6软件界面的简介
一、软件界面组成
1、菜单栏
2、工作区
3、属性栏
4、浮动面板(文件、资源、CSS样式、行为等)
二、界面的切换:
为满足不同人群的需求。
三、界面的恢复:
窗口——工作区——重置设计器
四、插入面板的调用。
第三节、网页相关知识
一、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
二、什么是网页(网页的概念):
在互联网上基于http协议传播信息的页面。
三、什么是网站 :
反应同一主题的多个网页的集合。
四、网页内容的组成(网页元素)
1、文字
2、图片(jpg,gif,png)
3、动画(swf,gif)
4、多媒体
5、超链接
6、表单
7、网页特效
8、其它元素
第四节、网页制作方法与站点建立
一、网页的制作方法
1、代码法:
html
2、软件制作:
Dreamweaver 、frontpage(所见即所得)。
二、制作网站前准备工作:
建立站点。
三、站点:
用来存放网站中所有元素的文件夹,为了制作方便需要将这个文件夹和制作软件相链接。
四、站点的建立(链接)
1、站点——建立
2、文件面板
3、应用程序栏(窗口——应用程序栏)
五、站点的分类(按照网站的位置)
1、本地站点
2、远程站点
第五节、规划本地站点目录结构
一、规划本地站点目录结构
1、images(图片)
2、swf(动画)
3、css(CSS样式)
4、script(存放网页特效)JS
5、other(其它)
二、网站主页名称
1、index.htm
2、index.html
3、default.htm
4、default.html
注:
主页必须放在网站的根目录下面,同时名称也有特殊的要求。
第六、七节、网页中文字的输入1-2
一、网页的四个视图
1、设计视图
2、代码视图
3、拆分视图
4、实时视图
二、网页中的文字
1、文字直接输入就可以了。
2、回车表示换段。
3、shift+回车:
表示换行。
4、输入空格时要在全角输入法状态下输入。
5、特殊字符的插入:
“插入——html——特殊字符”
6、文字也可以从网站中复制,但是在复制时需要将网页中文字的格式去掉。
(注:
如何去除复制来的文字格式,只需要将文字粘贴到记事本中,然后从记事本中再复制文字就可以了。
)
三、预览网页:
文件——在浏览器中预览——IExplore(快捷键:
F12)
第八、九节、页面属性1-2
一、页面属性
1、修改——页面属性
2、或通过属性栏
二、属性
1、左边距、右边距、上边距、下边距。
2、文字字体、大小、颜色。
(注:
A、字体:
选择常用字体。
如:
宋体
B、大小:
正文文字一般设置为12-16px。
)
3、页面背景。
4、背景图片。
(默认情况自动填充、平铺)
(注:
A、图片要放在站点内。
(有关网站中的所有元素都必须放在站点内)。
B、图片名称不能为中文。
)
(注:
如果同时设置背景颜色和背景图片,以背景图片为准。
)
第十节、Html网页基本代码格式
一、网页基本代码
(注:
1、head:
开头部分
2、title:
标题
3、body:
正文部分 )
二、常用代码
1、:
换段
2、
:
换行
注:
多数html代码都有对称性的特点。
第十一节、图片的插入
一、图片
1、图片格式
(1)JPG:
图片质量较高,一般用于较大的图片。
如:
人物、风景。
(不支持透明)
(2)gif:
用于制用按钮、动画、导航条等,图片较小,只有256种颜色。
(支持透明)
(3)png:
兼有两种格式的特点。
(支持透明) 注:
图片的大小一般尽量控制在200K以下。
2、链接
(1)_blank:
在新的网页打工。
(2)_self:
在自身网页打开。
第十二节、图片热点
一、热点
1、矩形热点
2、圆形热点
3、多边形热点
注:
编辑——首选参数——辅助功能——图像
二、替换
1、用于图片的注释。
2、当图片无法显示的时候用此内容代替。
三、宽度和高度的设置
四、相关html代码
1、Img:
图片。
2、Src:
位置。
3、热点:
第十三节、图片的编辑
一、裁剪、亮度对比度、锐化
注:
使用Dreamweaver编辑图像是个不好的习惯,如果要编辑图像,最好使用专门的图像编辑软件(如:
Fireworks、photoshop),编辑好了以后,再重新插入进来。
二、插入——图像对象——鼠标经过图像
三、水平线的插入
插入——html——水平线
四、背景颜色的代码:
bgcolor
第十四节、超链接
一、超链接指的是通过点击一个对象可以链接打开另外一个对象(网页、图片、程序等)。
二、链接的代码(即链接的标签)
三、超链接的状态(修改——页面属性——链接)
1、链接:
链接默认颜色。
2、变换图像:
鼠标移上去时的颜色。
3、已访问:
访问以后链接的颜色。
4、活动:
鼠标点下去时的颜色。
第十五节、超链接打开方式
一、链接页面打开的目标:
_blank:
新窗口打开网页
New:
新窗口打开网页
_parent:
父窗口(框架结构)
_self:
自身窗口、原窗口
_top:
顶窗口(框架结构)
第十六、十七、十八、十九节、超链接对象
一、超链接的对象
1、文字
2、图片
3、热点
4、空链接(#)
5、邮件链接:
mailto:
邮箱地址(可以利用菜单命令直接插入)
6、下载链接(浏览器打不开的内容即为下载链接)
7、锚点链接(链接到网页的具体位置)
步骤:
(1)创建锚点
(2)制作链接(#锚记)
隐藏锚点:
编辑——首选参数——不可见元素
注:
锚点链接不但可以链接本页面中的锚点,也可以链接到其它页面中的锚点。
8、脚本链接(实现特殊功能)
Javascript:
window.close()——关闭窗口
Javascript:
window.print()——打印文字
第二十节、表格
一、表格的作用
1、制作表格
2、定位布局
二、表格的建立
1、插入——表格
2、常用面板
三、表格的元素及代码
1、
单元格
2、
行
3、
表格
四、元素的选择
1、单元格
2、行
3、表格
第二十一节、表格属性
一 、表格参数
1、行数和列数
2、宽度
单位:
(1)象素表示绝对值(固定值)。
(2)用%表示相对值。
3、填充:
单元格中的内容与边框的距离。
4、间距:
表示单元格与单元格之间的距离。
5、边框:
设置表格是否留有边线。
6、对齐
7、清除行高和列宽
8、将宽度转换为象素
9、将宽度转换为百分比
第二十二节、行和单元格属性
1、水平:
单元格内容水平对齐方式。
2、垂直:
单元格内容垂直对齐方式。
3、宽:
单元格宽度。
4、高:
单元格高度。
5、背景颜色:
单元格背景颜色。
6、拆分和合并单元格。
注:
在利用表格排版时网页中各种元素都是放入单元格内进行排版的。
第二十三节、网页布局和大小
一、网页布局分类
1、“同”字式
2、“厂”字式或反“厂”字式
二、网页大小(宽度大小)
1、800*600分辨率宽度设为778象素
2、1024*768分辨率宽度设为950象素或1002象素
注:
滚动条一般占有22个象素
第二十四、二十五、二十六节、实例——网页制作1
一、制作网站时的步骤:
1、设置页面边距(0,0,0,0)即上、下、左、右边距都为0。
2、先整体后局部:
先插入一个大表格用来定位和决定网页宽度,然后再插入小表格来定位每一个部分。
注:
(1)大表格尽量不拆分。
(即一行一列)
(2)表格与表格之间可以嵌套。
3、插入表格(0,0,0)即填充、边框、间距为0。
4、表格大小和居中
(1)800*600分辨率宽度设为778象素
(2)1024*768分辨率宽度高为950象素或1002象素
5、将单元格内光标定位到左上角(选单元格设置)
6、将单元格的高度设置和图片高度一样(作为背景时)
第二十七——三十一节、实例——网页制作1-8
一、图片可以直接插入到表格中、也可以作为背景插入。
注:
什么时候直接插入到表格、什么时候作为背景插入呢?
(1)当需要在单元格内添加文字时就必须使用背景插入。
(2)如果需要做超链接时就必须作为图片插入。
二、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。
三、插入——图像对象——图像占位符
注:
插入图像占位符后就可以任意设置表格的宽度和高度。
第三十二、三十三节、实例——网页制作9-10
一、添加行和列
1、插入——插入表格对象
2、布局标签
3、Tab键(光标定位在最后一个单元格内按tab键)
第三十四节、参数的优先级
一、参数优先级:
单元格>>行>>表格
注:
表格间距部分的颜色取决于表格背景颜色。
二、图像大于颜色且自动复制
1、背景颜色:
bgcolor
2、背景图像:
background
第三十五节、表格中单元格大小的设置
一、宽度要根据实际大小来进行设置。
二、在设置表格单元格宽度时,可以保留某一列单元格的宽度不设置。
第三十六——三十八节、细线边框表格的制作1-3
一、利用表格的间距属性来制作。
二、利用表格的填充属性来制作。
第三十九节、实例——简单导航条
一、利用表格的间距属性来制作。
第四十节、实例——水平细线与标题栏
一、插入图像占位符
二、删除单元格中的空格占位符:
第四十一节、实例——圆角表格1
第四十二节、实例——圆角表格2
一、height="100%":
表示高度为100%。
第四十三节、网页平面效果图
一、网站在制作前首先要做网页效果平面图。
二、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。
三、切片做好后并进行保存。
四、删除不要的部分,保留需要的部分并进行重命名。
第四十四节、滚动效果代码
一、
1、direction:
方向
2、scrollamount:
速度(一般设为3)
3、on mouseover=“this.stop()”:
鼠标移上去停止
4、on mouseout=”this.start()”:
鼠标离开时开始。
第四十五节、层
一、什么是层
层是网页中比较特殊的对象,它可以自由移动、显示或隐藏,同时还可以相互嵌套、叠加,所以很大程度上弥补了表格排版的不足。
但是层的定位比较难处理;同一个网页在不同版本的浏览器中显示的位置有差别,因此完全使用层排版的网页较少,它主要被用来完成一些动态效果。
二、层的作用
1、可以灵活定位
2、层可以嵌套层
3、可以制作特效
三、层的创建
1、布局面板
2、按住ctrl键表示连续绘制层。
3、层标的html标签是:
第四十六节、层的相关属性1
一、层的属性
1、左/上:
表示层距离页面的左边或上边的距离。
2、宽/高:
层的大小。
二、Z轴:
代表层的次序,数值越大越在上面。
三、可见性
1、default:
默认
2、inherit:
继承
3、visible:
可见
4、hidden:
隐藏
第四十七、四十八节、层的相关属性2-3
一、背景图像
二、溢出
1、visible:
可见,表示根据内容的多少来决定显示区域大小。
2、hidden:
隐藏,如果内容超过规定的区域将会被隐藏。
3、scroll:
滚动条(右边和下边都会出现滚动条)
4、auto:
自动,根据内容多少和层的大小来决定是否出现滚动条。
第四十九节、行为
一、很多网站在页面上添加了用JavaScript来实现的动态特效,这些效果在Dreamweaver中也可以通过行为来实现。
由此可见行为主要是用来做一些动态效果、是网页中设置好的脚本特效。
二、窗口——行为
三、行为组成
行为由3个部分组成:
它们分别是对象、事件、动作。
1、对象:
指的是可以添加行为的对象。
(如图像,文字等)
2、事件:
触发添加在对象上的动态特效条件。
3、动作:
动态特效。
四、常用事件包括有:
1、onclick:
按下。
2、onmouseup:
释放。
3、onmouseout:
离开。
4、onmouseover:
经过。
第五十——五十二节、实例——菜单1-3
一、菜单的制作方法
1、主菜单:
选中对应的单元格,加入“显示/隐藏层”显示自己,隐藏其它层。
2、子菜单:
选中子菜单所在的层,加入“显示/隐藏层”行为。
当鼠标移上去显示自己,隐藏其它层,当离开时隐藏所有层。
二、窗口——AP元素
注:
防止重叠主要是避免绘制的层产生重叠。
第五十三节、行为2
一、行为
1、弹出信息:
弹出一个信息窗口。
2、打开浏览器窗口。
3、设置文件——设置状态栏文本
4、转到URL
第五十四节、网页背景音乐的添加
一、背景音乐(可以放在网页的任何一个位置,只要不破坏其它代码的结构。
) 插入媒体插件
1、Hidden:
隐藏播放器。
第五十五——六十一节、表单
一、什么是表单
在申请E-mail邮箱、注册会员时,网站往往会要求用户填写一些个人信息。
(如:
姓名,年龄、联系方式等)。
在填写信息的页面上往往会包括很多表单元素,如:
用户名,密码,单选框或多选框等。
所有这些表单元素合在一起,我们称之为表单。
二、表单的作用
表单的主要作用是让浏览者能够有地方填写数据,然后再利用程序来收集并处理这些数据。
程序可以是:
ASP、PHP、.NET、JSP等。
三、表单的创建
1、在制作表单时,首先要插入表单然后再插入表单域。
2、在制作表单时,如果要用表格来定位,一定要将表格放在表单内。
3、文本域
(1)字符宽度:
文本域的长度
(2)最多字符数:
文本域中可以输入的最多字符数。
4、文本区域
5、复选框
6、复选框组:
一次性可以创建多个复选框按钮。
7、单选按钮
8、单选按钮组:
一次性可以创建多个单选按钮。
9、菜单或列表域(菜单只能是单选,列表可以多选)
10、跳转菜单(是特殊的超链接)
11、按钮:
按钮有三种情况:
“提交”“重置”“无”
四:
表单提交后有两种处理方式
1、提交到邮箱
2、提交到指定程序处理
第六十二节、框架
一、什么是框架
所谓框架网页指的是具有一定版式的网页集合(是有多个网页组成),框架用来拆分浏览器窗口,在不同的区域显示不同的网页。
框架的使用让网页的组织变得更加有序。
(框架网页一般应用于网站后台页面比较多。
)
三、框架网页的制作方法
1、新建一个网页
2、插入——html——框架
(1)左对齐
(2)左侧及上方嵌套
(3)上方及左侧嵌套
三、框架网页的保存
文件——保存全部
第六十三节、框架页面属性设置1
一、框架管理面板 窗口——框架
二、框架属性
1、列值单位:
象素(绝对值)和百分比(相对值)。
2、相对:
其它框架设置了高度或宽度以后,剩余的高度或宽度都会分配给单位设置为“相对”的框架。
通常将值设为1。
第六十四节、框架页面属性设置2
第六十五节、实例——音乐天堂1
第六十六节、实例——音乐天堂2
一、框架网页标题的设置
整体框架代码:
frameset
第六十七——六十八节、库
一、什么是库
库是可以实现网页同步变化的元素。
二、创建库
1、修改——库——增加对象到库
三、使用库
在要使用的地方直接插入就可以了。
四、修改库
五、窗口——资源——库(在资源面板中)
注:
库是以单独的页面存储的,如果要调用库,要从资源面板中应用。
应用库以后的文件也可以脱离联系和关联(在属性面板改)。
第六十九节、模板
一、什么是模板
库可以将部分的页面内容作为一个对象插入到新的页面中,这种方法主要用于不同网页间共用相同内容的情况。
但是假如是在多个网页中,页面大部分的内容都是相同的,只有一个区域或几个域区是不同的,像这种情况用库显然不太方便,此时就希望有一种方式能将这个页面的整体结构保存,只让其中的部分区域可以进行修改就可以了。
这就是模板。
二、保存为模板
文件——另存为模板
注:
模板一定要存放在Templates文件夹中,其他文件不要存放在Templates文件夹中,Templates文件夹必须位于站点的文件夹根目录下。
第七十节、新建可编辑区域
一、建立可编辑区域
右键——模板——新建可编辑区域
第七十一节、模板的修改
一、修改模板
窗口——资源——模板
第七十二节、定义可编辑标签
一、定义可编辑标签
修改——模板——令属性可编辑
1、文本:
如果需要用户在修改时输入文本,选择这项。
2、URL:
即链接地址,如果要修改网页中插入的图片、链接等,可以使用这一项。
3、颜色:
修改时要选择颜色,要设定网页、表格、行、列等颜色的时候,需要选择这一项。
4、真/假:
极少使用。
5、数字:
设置网页边界宽度、高度、表格高度、宽度,单元格高度、宽度等需要输入数值的属性时,就选择这项。
二、修改定义的标签属性 修改——模板属性
第七十三节、新建可选区域
一、可选区域指的是让指定的区域在网页中可以显示也可以不显示。
二、新建可选区域
1、插入——模板对象——可选区域
2、通过常用选项栏
三、设置可选区域属性
修改——模板属性
四、删除模板标记
修改——模板——删除模板标记
第七十四节、可编辑的可选区域
一、可编辑的可选区域指的是让指定的区域在网页中既可以编辑也可以设置显示或不显示。
二、可编辑的可选区域
1、插入——模板对象——可编辑的可选区域
2、通过常用选项栏
三、设置可选区域属性 修改——模板属性
四、删除模板标记
修改——模板——删除模板标记
第七十五节、重复区域
一、重复区域指的是让指定的区域在网页中重复显示。
注:
重复区域不是可编辑区域,如果希望重复区域可以编辑,需要在重复区域内再新建可编辑区域。
第七十六节、将模板应用于已存在的网页
一、将模板应用于已存在的网页指的是将模板嵌套在当前网页中,让当前网页的内容显示在模板中新建的可编辑区域。
如果模板中存有多个可编辑区域,可以控制当前网页的内容嵌套在哪一个可编辑区域内。
二、修改——模板——应用模板到页
第七十七节、分离模板(脱离模板)
一、分离模板指的是将应用模板的网页和原模板进行分离,从而使网页和模板之间没有关联。
修改——模板——从模板中分离
第七十八节、CSS样式
一、什么是CSS样式
CSS样式的全称是:
Cascading Style Sheet(层叠样式表),利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制,甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。
更为重要的是,CSS真正实现了网页内容和格式定义的分离,通过修改CSS样式表文件就可以修改整个站点文件的风格,大大减小了更新站点的工作量。
二、CSS样式和html的区别
三、CSS样式的作用
1、对文字进行格式
2、制作特殊效果
注:
简单的说,CSS样式就是用来定义网页格式的代码。
代码一般不需要手动去编写。
因为我们可以使用dreamweaver自动生成代码。
即使学员不熟悉CSS的语法也没有任何困难。
第七十九节、CSS样式的分类
一、CSS样式的分类
1、类(可应用于任何html元素):
自定义样式
2、ID(仅应用于一个html元素):
自定义样式
3、标签(重新定义html元素):
针对代码来设置的。
4、复合内容(基于选择的内容):
超链接样式
(1)链接:
a:
link:
默认。
(2)点击过:
a:
visited:
点击过。
(3)悬停:
a:
hover :
鼠标移上去。
(4)点击:
a:
active:
点下去。
二、各种CSS样式的特点
1、类:
定义样式以后必须在需要用样式的地方手动应用它,否则就不起作用。
2、ID:
同上(只能应用一次)
3、标签:
不需要手动应用,页面中有该定义标签会自动应用。
4、复合内容:
可以为不同的链接定义不同的链接样式。
三、CSS样式保存的位置
1、仅限该文档
2、新建样式表文件
第八十节、CSS样式表的汉化
一、下载汉化文件
二、将文件“Resources.dll”拷贝到Adobe Dreamweaver CS6安装目录中zh_CN\Resources文件夹下面替换原文件即可。
第八十一节、CSS样式的主要参数
一、类型:
文本的大小、字体、颜色、样式、修饰等。
(相当于文字格式化)
二、背景:
背景颜色、背景图片的设定。
三、区块:
文本区域的整体效果,如行间距、字符间距、文本缩进等。
(文字进一步格式化)
四、方框:
设定对象在网页上的位置,如间距、边界等。
(设置对象大小)
五、边框:
添加不同类型宽度的边框。
(设置表格边框线)
六、列表:
创建不同类型的列表,包括创建图片、列表符号等。
(相当于项目符号和编码)
七、定位:
用于层的属性定义。
包括层的类型、位置等,但因为直接在属性面板中设置层的属性更方便,因此并不常用。
(就是以前所讲的层效果)
八、扩展:
实现一些扩展的功能,包括换行符、鼠标形式和通过CSS样式给图片添加滤镜效果等。
九、过渡:
新增功能。
第八十二、八十三节、类型参数1
一、类型:
文本的大小、字体、颜色、样式、修饰等。
(相当于文字格式化)
1、字体(设置常用字体,如:
宋体)
2、大小:
正文一般为12象素。
第八十四节、背景参数
一、背景:
背景颜色、背景图片的设定。
1、附件
(1)固定(fixed):
背景图片固定不动
(2)滚动(scroll):
背景图片随着
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DW 使用 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)