Dreamweaver网站设计Word文档下载推荐.docx
《Dreamweaver网站设计Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网站设计Word文档下载推荐.docx（19页珍藏版）》请在冰豆网上搜索。
Ctrl+Shift+SpaceC：
编辑——首选参数——常规——允许多个空格——确定
（3）插入日期
插入——插入日期——（设置）
（4）插入水平线
插入——HTML——水平线（可在属性中设置）
如果想把水平线换颜色，可通过代码修改
空格Color=“”
（5）添加特殊字符
插入——HTML——特殊字符——版权
（亦可添加其他字符）
2-3编辑文本
选中、删除、复制、剪切、粘贴、查找与替换、撤销、重做
撤销：
Ctrl+Z
查找与替换：
编辑——查找与替换——查找——点击绿三角——替换
2-4文字样式设置
选中部分文字——属性——CS5——大小、颜色、字体——编辑字体列表（设置）
（尽量选择常用字体，否则别人那可能不能显示，如果很想用就用PS做一张字体图片，这样就不受系统字体影响）
2-5段落样式
粘贴文字：
分段：
回车Enter
换行：
Shift+Enter
缩进：
选中要缩进文字属性——HTML——缩进图标
项目列表：
选中文字属性——HTML——项目图标（或数字列表）
（如果想用别的项目，则列表项目——样式）
部分文字靠右：
选中——属性——CS5——右对齐
右下角日期：
在上一步基础上Shift+Enter
插入——日期——（设置）
编辑标题：
第二种方法，属性——HTML——格式标题
页面属性——标题CS5
标题针对段落设置
日期的颜色课用标题设置
2-6网页中使用的图片类型
GIF可动画、可透明
JPEG色彩丰富
2-7插入图片
常用——图片图标
插入——图片——替换文本（广告条）
C：
拖拉
图片属性设置：
ID可输入号码以便区分
属性里也有替换
边框（可加可删）
2-8图文混排
导航文字标题剧中、光标定位于文字前、属性CS5、居中图标
图片居中，光标定位与图片左侧
文本标题居中，属性CS5，居中，字体、颜色、大小
输入文本内容：
此内容和文本标题格式相同，编辑规则——删除类
图片文字距离
图片边距（水平、垂直）
2-9使用Dreamweaver编辑图片
替换图片属性——源文件——点击文件夹
大的图片变小显示这样打开这个图片会浪费太多时间，应把图片的大小占有空间变小
属性——（边框右边第二个）
裁切属性——裁切
对比度
模糊度
2-10优化图片（为图片瘦身）
属性——编辑PS右邻——分两栏——品质
选下左下角有个图标可以优化到指定大小
格式也可以转换
如果Dreamweaver提供的功能不够，可以用PS
指定图片用某一工具修改：
编辑——首选参数——文件类型/编辑器——扩展名——编辑器——确定
2-11鼠标经过更换图片特效
插入——图像对象——鼠标经过图像——原始图像、鼠标经过图像、文本替换、亦可设置超链接（网址）
第3章建立网页链接
3-1添加超级链接
从一个网页到一个目标
选中——属性——链接右侧文件夹——图片——属性——链接右侧文件夹
目标选项blank新窗口显示
不选默认self
New同一新窗口中显示
3-2内部链接与外部链接
选中——指向图标文件——拖拉指向文件
内部链接：
同一网站中的其他网页
外部链接：
本网站以外
直接在连接中输入相应网络的地址（要完整）
例：
http：
//域名
浏览网页网络协议
3-3设置链接样式
将要用的文件（网页）放到网站文件夹中，打开编辑输入的字为黑色，链接后变为蓝色，浏览网页后变为紫红色，下面看如何改变颜色
点击空白处——属性——页面属性——链接（CSS）——1、链接颜色/已访问链接2、变换图像链接/活动链接3、下划线是否有
3-4锚点链接（本页内）
提供网页阅读便捷性
1、将光标放到要确定地方文字的前面——常用（第三个）命名锚点——锚记名称（如gjb）——选中导航中要链接的标题——属性链接（如#gjb）——保存
2、链接到另外一个网页中的一个确定位置
在被链接的地方命名一个锚点——选中导航中要链接的标题——属性——链接——拉动指向另一网页——再在其后写上#gjb
3-5又见、下载及空连接
1、邮件
选中“联系我们”——常用（第二个）电子邮件链接——电子邮件地址
2、下载（指向目标不是网页）
将一个下载包放在与该网页并列的地方——选中导航文本——属性——链接——拖拉指向下载包
3、空连接
选中导航文字——属性——链接“#”
3-6图像热区域链接
一张网上多个链接
选中图片——属性——地图——点击形状——在图上选中区域——确定——链接（#gjb）
多边形区域用点确定直线画区域
图标冲左上角的箭头可以切换一个图上的几个区域设置
可链接到另外网页，可到本页某个位置
3-7创建图像导航条
准备好图片
插入——图像对象——鼠标经过图像——（填好各项）
3-8跳转菜单
节约版面
插入面板——表单——跳转菜单——本页项目和网址
制作好的跳转菜单的修改——属性——列表值（可以添加可以减少，可以改变顺序）
3-9脚本链接
选中“收藏本站”——将代码输入到链接框中——保存
关闭窗口，弹出提示对话框类似上面
3-10脚本链接（设置主页）
工具——Internet选项可设置主页
选中“设为主页”——链接“#”——代码——在“#”后空一格然后粘贴代码
3-11链接路径
1、绝对路径：
完整URL
2、相对于文档路径：
。
/表示上一文件夹
3、相对于站点根目录（不常用）
3-12链接的更新与检查
1、移动网页位置，路径亦更新
设置默认移动网页路径是否更新：
编辑——首选参数——常规——移动文件时更新链接
2、检查链接
Dreamweaver最下面链接检查器——点击图标检查断掉的链接——检查当前页——在后面修改
第4章了解HTML
4-1认识HTML
<
HTML>
head>
/head>
body>
/body>
一个HTML文件包含很多HTML标记
（新建文本文档.txt，另存为所有文件.tt.html，即为一个网页文件）
4-2常见的HTML标记
P>
<
段落
br>
回车换行
title>
/title>
网页标题
hr>
水平线
img>
图像标记
a>
超链接
4-3学习HTML小结
HTML标注用<
>
标注不分大小写
成对出现（多数）少数单独出现如<
部分标注可以拥有属性
4-4文件头信息
其中的内容不会出现在网页中
（1）插入“刷新”，定时刷新网页
（2）插入“关键字”有利于搜索引擎搜集你的页面，关键字作为搜索的依据。
（3）插入“说明”，对网页进行说明描述，同样会得到搜索引擎的收集。
（1）<
下一行，插入——HTML——文件头标签——刷新——时间.URL
（2）再下一行，插入——HTML——文件头标签——关键字（不多于5个）两个之间用逗号
（3）再下一行，插入——HTML——文件头标签——说明（可以较长）
第5章表格处理
5-1插入表格
表格作用：
（1）存放数据
（2）布局
常用——插入表格（Ctrl+Alt+7）
表格宽度像素（固定）百分比相对于页面
单元格边距默认1
单元格间距默认2
5-2实例：
数据表格
页眉：
设置行列标题
表格标题
摘要不在窗口中显示
5-3实例：
相册页面1
足球明星属性里设置：
字体大小、颜色、居中
插入水平线设置长度
插入表格属性对齐居中选中行背景颜色录入文字设置文字居中对齐选中行水平居中对齐
更改单元格宽度把光标放入其中即可
宽20%
5-4实例：
明星相册页2
网页背景颜色：
页面属性——外观（CSS）——背景颜色
设置边间距居中对齐
设置边框颜色：
选中表格——右击——标签编辑器——浏览器特定的——边框颜色
表格背景颜色——选中表格——右击——标签编辑器——常规——背景颜色
设置行背景颜色：
选中一行，属性背景颜色
插入图片可以一张一张
如果图片多可以打开图片文件夹，全部选中，依次全部拖到窗口中，然后把图片拖拉到格子中
5-5实例：
制作课程表1
合并单元格：
选中要合并的行，属性左下角有合并单元格图标
拆分：
点击把光标放到行里，属性左下角有拆分图标
加入行/列：
把光标放入行中，右击——表格——插入行/列
复制
移动
粘贴
拖动
清除
表格背景颜色：
选中边框右击——编辑标注——常规——表格边框颜色
5-6实例：
制作课程表2
格中文字居中对齐：
属性——CSS——大小——ys01
第一行文字加粗：
属性——HTML——选中——加粗
单元格背景图片：
选中文字——拆分——CTD后一格bordercolor+一种颜色
5-7表格的HTML标记
Tr一行
Td一个单元格
Table表格
5-8实例：
软件下载页1
合并单元格
网页背景颜色
细纹边框：
边框为0——间距1——选中表格——右击——编辑标签——背景颜色
5-9实例：
软件下载页2
五角星：
软键盘——特殊符号
表格嵌套：
一个表格中又一个表格
用来在一个表格中平均存放图片
5-10实例：
个人简历页1
布局——扩展便于观察结构
5-11实例：
个人简历页2
表格的嵌套
表格中表格90%再表格80%
5-12网页的布局
分辨率1024X768设计尺寸980X600
页眉
页脚
导航栏
5-13布局综合实例1（页眉）
表格布局页面
图像占位符相当于一张图片放到网页中，只是图片未定
5-14布局综合实例2（导航栏）
单元格背景图片用代码（图片作背景会平铺）
5-15布局综合实例3（信息栏）
细边框：
边框颜色设为白色（在代码）再设单元格边框颜色，则变得很细
5-16布局综合实例4（页脚）
页脚中有一行用来设置与内容的距离，即（版权与内容的距离）
设置文字大小不可由客户改变：
页面属性——外观CSS——页面字体——大小12px
第6章框架结构
6-1创建框架
每个框架是一个区域，每个区域中可打开一个HTML文档
布局——最右侧图标框架集——然后编辑各区域
如果中间域想去掉则查看——可视化助理——框架边框
6-2框架实例：
电子书1
文件——新建——示例中的也——框架页——确定
顶一个框架宽度，点击中间线居中里设置
完成一个一个区域保存
6-3框架实例：
电子书2
新建HTML，表格80%（限制文本宽度）
选中“1”属性——HTML——链接11.HTML——目标mainframe
窗口——框架——可知各部分名称
6-4框架集合框架属性设置
点击框架集的边框可以进行框架集的属性设置
边框是否显示及其宽度
选中某个框架可以设置某个框架的属性
框架名称——流动自动
6-5自定义框架
拖动窗口边框加一条框
按ALt拖动边框复制一条
不要的则拉出窗口
再设置边框宽高
6-6页中页
布局——iframe图标（会自动到拆分）
第7章插入多媒体元素
7-1插入SWF动画
在单元格中插入背景图片用代码
插入SWF：
插入——媒体——SWF——在属性里设置宽高和透明
7-2插入Flash按钮
CS5没有
CS3有
7-3插入Flashpaper
CS3：
插入记录——媒体——Flashpaper——源
7-4图像播放器
插入——图像查看器——保存Flash元素
右侧Flash元素——imageURLS
Showcontrols是否用控制条
SlideAutoplay是否自动播放
SlideDelay延迟时间
Slideloop是否循环播放
Transition转换效果
7-5插入音频
CS5：
（1）代码<
bgsoundsrc=”sound.mid”autostart=trueloop=”-1”/>
（2）<
设计，插入——媒体插件——选择文件——设置其宽高，参数autostartfalse
7-6插入flv视频
插入——媒体——flv——选择文件——外观
限制高宽比例自动播放
视频下载类型
第8章AP.DW元素
8-1创建APDW元素
AP绝对定位“层”
布局——（第二个）APDW元素，即可在网页中画一个层
可在层中录入文字和插入图片
层也可以移动
布局——（第一个）APDW标签
（此种无定位信息）
8-2编辑APDW元素
新建一个层，在属性里可定位位置可调节大小，往里可插入东西
如果要建立多个层，且大小相同可用shift把这些层选中——修改——排列顺序——设成宽度相同设成高度相同
层的上下也可调节，属性，Z轴
直接拉动层的图标到网页中，则新建一个层也可调节默认的层的属性，编辑——首选参数——AP元素——大小背景
几个层的对齐：
同时选中——修改——排列顺序——对齐方式
8-3层的可见性设置
层可以控制其显示与否
窗口——AP元素——可更改层次关系，可修改名字
名字前有眼睛可调节其可见性
窗口——行为——选中一个层——显示——隐藏元素——选中一个层——显示——onclick
要想那个层上出现小手可添加一个空链接
8-4层的溢出及剪辑
溢出：
在层属性中——溢出——auto
剪切：
左上即切掉多少
右下是切掉之后剩下多少，从左上开始计
（层可视面积的大小）
8-5APDW的嵌套
在一个层中再点击新建层即可
而非一个在另一个之上
文动子动文不可见子不可见
为明确定位可用查看——标尺——显示
按住Ctrl可算出文子间距离
8-6APDW与表格的转换
为更好定位，查看——网格设置——显示
APDW转换成表格：
修改——转换——将APDW转换为表格
第9章行为特效
9-1晃动的图片
选择要晃动的图片——窗口——行为——+——效果——晃动——onclick
9-2弹出窗口行为
打开行为面板——选中body——+——弹出信息——消息——onload（网页打开时）
新建一个网页——body——打开浏览器窗口——URL——选中文件——窗口大小等各属性
9-3设置文本行为
选中body——打开行为面板——设置文本——设置状态栏文本——消息——选择一个事件触发
（网页最下方状态栏）
设置文本域文字：
（例：
登录表单）
（注意文本输入框必须有名字）
把光标定到文本域中——行为——设置文本——设置文本域文字——（例请输入用户名字）——选择一个触发事件onmouseover——再设置一个空的文字——选择一个触发事件onfause
9-4交换图像实例
设置背景为黑色——插入表格——插入图片
屏幕上图片：
新建一个层——在层上插入图片——给该图命名.ID——选中一张图——行为——+——交换图像——选中——浏览（把下面两个对号打上）——保存即可
9-5AP元素拖动效果
例如公告，可拖动到任何位置，是层的拖动，在层中写内容，给层加一个可拖动行为。
点击网页主体——行为——+——拖动AP元素——AP元素（设置名属性）——确定
9-6拼图游戏1
新建页面——背景图片——新建层
设置层的边框——代码——border：
/pxsolid再新建几个层存放小块图
9-7拼图游戏2
设置另外几个层与第一个层一样大小，就用shift把几个层选中然后再选中第一个——修改——排列顺序——同宽同高——然后插入图片
补（如果辅助线没有吸附作用：
查看——辅助线——靠齐辅助线）
用辅助线把层均分，把各小层放入其中，然后把各小层设置可拖动
行为——拖动AP元素——AP元素获取目前位置（一个一个设置）靠边距离自己设
最后将各小层拖出大层外保存
9-8修改属性特效
新建页面——设背景颜色——插表格——插图片——给该图命名ID——选中图片——行为——改变属性——元素ID.属性输入（height、width）新的值，再设置鼠标离开时的还原。
（同样）
9-9动态菜单
新建页面——层——插入表格作导航栏——输入文字——给层起名ID.再画层，设置其属性——插入表格——输入文字——设置链接——给层命名.ID，将其隐藏，选中一个单元格——行为——显示隐藏元素——cd1——onmouseover，再设置显示隐藏——cd1——onmouseout，将cd1与主层挨紧，选中cd1行为——显示隐藏——cd1——onmouseover和onmouseout
修改导航文字颜色改变：
代码<
tdid=”cc”设计——行为——改变属性——TD——colour，新的值——onmouseover再onmouseout
9-10效果行为应用1
新建一个层放到合适位置——写入内容——命名ID——选中body——行为——效果——通常——目标元素等属性
在层中嵌入子层——命名ID——里面写X——移到合适位置——行为——效果——显示/渐隐设置各属性——onclick
9-11效果行为应用2
挤压：
选中图片——行为——效果——挤压
文字颜色变化提示：
文字外围加DV标签命名ID，选中——行为——效果——高亮颜色——设置各属性——onclick
图片放大缩小效果：
选中图片——行为——效果——增大/收缩——设置各属性
9-12跑马灯文字
CS5自带的行为有限，互联网提供很多特效XX“网页特效代码”
把代码加入其中，亦可对代码进行更改
9-13鼠标特效
XX代码插入body中
9-14图片展播特效1
9-15图片展播特效2
任意修改代码
第10章应用CSS样式
10-1认识CSS
（1）
层叠样式表标准化对页面样式进行控制
例段分文字换颜色，<
p>
后加<
fontcolor=””>
10-2认识CSS
（2）
如果好多段都要换颜色，则用HTML会很麻烦。
则可用CSS，在head中加<
styletype=”text/CSS”>
P{color:
#oFo}
/style>
则所有的段都会变成要的颜色
10-3编辑CSS样式
（1）
1、属性——CSS束操作
选择器类型，选择器名称
2、使用CSS样式面板
右侧CSS面板右下角有新建规则，修改，删除
10-4编辑CSS样式
（2）
CSS左下角有以类显示，显示所有，显示当前
3、可在代码中修改，添加属性手工输入
10-5CSS选择器
1、CSS样式中有类型选择器
不同段落要不同颜色会用到CSS选择器
新建CSS规则——选择器类型（类）——选择器名称（.ys01），名字自己起“.”不能省
把要改为ys01的段选中在属性HTML中类上选择
2、ID选择器
只对于一个HTML，只能用一次
类可以多次使用
新建CSS规则——ID选择器——选择器名称“#one”（“#”不可省），这样在属性HTML中就可使用ID了
10-6使用CSS美化页面
（1）
1、设置页面属性
2、创建表格边框样式，line
先定义在应用
10-7使用CSS美化页面
（2）
3、设置底部文字的样式，white
亦是定义类后再使用
4、美化输入文本框样式，input
定义类
10-8样式的复合声明
选择器本身也可以同时声明多个
pclass=”sp”>
类
pid=”one”>
ID
新建CSS规则——复合内容——h2,h3,h4
即同时声明h2,h3,h4
亦可同时声明不同类型
10-9嵌套与继承
1、选择器的嵌套，（对某一元素中某一部分内容进行控制）
em>
使用<
/em>
“使用”斜体
嵌套，例#abcem
2、继承
即文字关系，可对子层设置属性
但对文层设置属性，则子层也有
10-10应用CSS到网页中
（1）
用CSS全方位控制页面
设置背景颜色用标签选择器
内嵌式，写到head
行内样式，写到HTML（少用）
链接式，适合多个网页使用
新建CSS规则下侧规则定义
10-11应用CSS到网页中
（2）
定义了样式后点击子页——CSS面板——链接各种方式的优先级
行内——内嵌——链接
如果想对定义的样式进行修改可以对ys01.CSS进行修改
10-12综合实例——类型样式
定义CSS样式
10-13综合实例——背景样式
表格的背景可以定义背景然后应用
10-14综合实例——区块样式
字的间距可以用CSS中区块设置
段落的缩进可用CSS中的区块
10-15综合实例——边框与方框
亦在CSS中设置
10-16综合实例——导航栏
CSS规则定义
10-17综合实例——超链接样式
扩大高亮区域用方框
10-18综合实例——设置技巧
有些不想要用超链接样式的做法：
利用样式的继承嵌套即在超链接前加上范围
10-19综合实例——滤镜
CSS
升级会员 