Dreamweaver网站设计Word文档下载推荐.docx

1、Ctrl+Shift+Space C：编辑首选参数常规允许多个空格确定（3）插入日期插入插入日期（设置）（4）插入水平线插入HTML水平线（可在属性中设置）如果想把水平线换颜色，可通过代码修改空格 Color=“”（5）添加特殊字符插入HTML特殊字符版权（亦可添加其他字符）2-3 编辑文本选中、删除、复制、剪切、粘贴、查找与替换、撤销、重做撤销：Ctrl+Z查找与替换：编辑查找与替换查找点击绿三角替换2-4 文字样式设置选中部分文字属性CS5大小、颜色、字体编辑字体列表（设置）（尽量选择常用字体，否则别人那可能不能显示，如果很想用就用PS做一张字体图片，这样就不受系统字体影响）2-5 段落样

2、式粘贴文字：分段：回车 Enter换行：Shift+Enter缩进：选中要缩进文字 属性HTML缩进图标项目列表：选中文字 属性HTML项目图标（或数字列表）（如果想用别的项目，则列表项目样式）部分文字靠右：选中属性CS5右对齐右下角日期：在上一步基础上Shift+Enter插入日期（设置）编辑标题：第二种方法，属性HTML格式标题页面属性标题CS5标题针对段落设置日期的颜色课用标题设置2-6 网页中使用的图片类型GIF 可动画、可透明JPEG 色彩丰富2-7 插入图片常用图片图标插入图片替换文本（广告条）C：拖拉图片属性设置：ID可输入号码以便区分属性里也有替换边框（可加可删）2-8 图文混

3、排导航文字标题剧中、光标定位于文字前、属性CS5、居中图标图片居中，光标定位与图片左侧文本标题居中，属性CS5，居中，字体、颜色、大小输入文本内容：此内容和文本标题格式相同，编辑规则删除类图片文字距离图片边距（水平、垂直）2-9 使用Dreamweaver编辑图片替换图片 属性源文件点击文件夹大的图片变小显示 这样打开这个图片会浪费太多时间，应把图片的大小占有空间变小属性（边框右边第二个）裁切 属性裁切对比度模糊度2-10 优化图片（为图片瘦身）属性编辑PS右邻分两栏品质选下左下角有个图标可以优化到指定大小格式也可以转换如果Dreamweaver提供的功能不够，可以用PS指定图片用某一工具修改

4、：编辑首选参数文件类型/编辑器扩展名编辑器确定2-11 鼠标经过更换图片特效插入图像对象鼠标经过图像原始图像、鼠标经过图像、文本替换、亦可设置超链接（网址）第3章 建立网页链接3-1 添加超级链接从一个网页到一个目标选中属性链接右侧文件夹图片属性链接右侧文件夹目标选项 blank 新窗口显示不选默认selfNew 同一新窗口中显示3-2 内部链接与外部链接选中指向图标文件拖拉指向文件内部链接：同一网站中的其他网页外部链接：本网站以外直接在连接中输入相应网络的地址（要完整）例：http：/ 域名浏览网页网络协议3-3 设置链接样式将要用的文件（网页）放到网站文件夹中，打开编辑输入的字为黑色，链接

5、后变为蓝色，浏览网页后变为紫红色，下面看如何改变颜色点击空白处属性页面属性链接（CSS）1、链接颜色/已访问链接 2、变换图像链接/活动链接 3、下划线是否有3-4 锚点链接（本页内）提供网页阅读便捷性1、将光标放到要确定地方文字的前面常用（第三个）命名锚点锚记名称（如gjb）选中导航中要链接的标题属性链接（如#gjb）保存2、链接到另外一个网页中的一个确定位置在被链接的地方命名一个锚点选中导航中要链接的标题属性链接拉动指向另一网页再在其后写上#gjb3-5 又见、下载及空连接1、邮件选中“联系我们”常用（第二个）电子邮件链接电子邮件地址2、下载（指向目标不是网页）将一个下载包放在与该网页并列

6、的地方选中导航文本属性链接拖拉指向下载包3、空连接选中导航文字属性链接“#”3-6 图像热区域链接一张网上多个链接选中图片属性地图点击形状在图上选中区域确定链接（#gjb）多边形区域 用点确定直线画区域图标冲左上角的箭头可以切换一个图上的几个区域设置可链接到另外网页，可到本页某个位置3-7 创建图像导航条准备好图片插入图像对象鼠标经过图像（填好各项）3-8 跳转菜单节约版面插入面板表单跳转菜单本页项目和网址制作好的跳转菜单的修改属性列表值（可以添加可以减少，可以改变顺序）3-9 脚本链接选中“收藏本站”将代码输入到链接框中保存关闭窗口，弹出提示对话框类似上面3-10 脚本链接（设置主页）工具I

7、nternet选项可设置主页选中“设为主页”链接“#”代码在“#”后空一格然后粘贴代码3-11 链接路径1、绝对路径：完整URL2、相对于文档路径：。/表示上一文件夹3、相对于站点根目录（不常用）3-12 链接的更新与检查1、移动网页位置，路径亦更新设置默认移动网页路径是否更新：编辑首选参数常规移动文件时更新链接2、检查链接Dreamweaver最下面链接检查器点击图标检查断掉的链接检查当前页在后面修改第4章 了解HTML4-1 认识HTMLhead/headbody/body一个HTML文件包含很多HTML标记（新建文本文档.txt，另存为所有文件.tt.html，即为一个网页文件）4-2

8、常见的HTML标记P 回车换行title/title 网页标题hr 水平线img 图像标记a 超链接4-3 学习HTML小结HTML标注用标注 不分大小写成对出现（多数） 少数单独出现 如部分标注可以拥有属性4-4 文件头信息 其中的内容不会出现在网页中（1）插入“刷新”，定时刷新网页（2）插入“关键字”有利于搜索引擎搜集你的页面，关键字作为搜索的依据。（3）插入“说明”，对网页进行说明描述，同样会得到搜索引擎的收集。（1） 下一行，插入HTML文件头标签刷新时间.URL（2）再下一行，插入HTML文件头标签关键字（不多于5个）两个之间用逗号（3）再下一行，插入HTML文件头标签说明（可以较长

9、）第5章 表格处理5-1 插入表格表格作用：（1）存放数据（2）布局常用插入表格（Ctrl+Alt+7）表格宽度像素（固定）百分比相对于页面单元格边距 默认1单元格间距 默认25-2 实例：数据表格页眉：设置行列标题表格标题摘要不在窗口中显示5-3 实例：相册页面1足球明星 属性里设置：字体大小、颜色、居中插入水平线 设置长度插入表格 属性 对齐居中 选中行 背景颜色 录入文字 设置文字居中对齐 选中行 水平居中对齐更改单元格宽度 把光标放入其中即可宽 20% 5-4 实例：明星相册页2网页背景颜色：页面属性外观（CSS）背景颜色设置边间距 居中对齐设置边框颜色：选中表格右击标签编辑器浏览器特

10、定的边框颜色表格背景颜色选中表格右击标签编辑器常规背景颜色设置行背景颜色：选中一行，属性 背景颜色 插入图片可以一张一张如果图片多可以打开图片文件夹，全部选中，依次全部拖到窗口中，然后把图片拖拉到格子中5-5 实例：制作课程表1合并单元格：选中要合并的行，属性左下角有合并单元格图标拆分：点击把光标放到行里，属性左下角有拆分图标加入行/列：把光标放入行中，右击表格插入行/列复制移动粘贴拖动清除表格背景颜色：选中边框右击编辑标注常规表格边框颜色5-6 实例：制作课程表2格中文字居中对齐：属性CSS大小ys01第一行文字加粗：属性HTML选中加粗单元格背景图片：选中文字拆分CTD后一格borderc

11、olor+一种颜色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

12、 布局综合实例2（导航栏）单元格背景图片用代码（图片作背景会平铺）5-15 布局综合实例3（信息栏）细边框：边框颜色设为白色（在代码）再设单元格边框颜色，则变得很细5-16 布局综合实例4（页脚）页脚中有一行用来设置与内容的距离，即（版权与内容的距离）设置文字大小不可由客户改变：页面属性外观CSS页面字体大小12px第6章 框架结构6-1 创建框架每个框架是一个区域，每个区域中可打开一个HTML文档布局最右侧图标框架集然后编辑各区域如果中间域想去掉则查看可视化助理框架边框6-2 框架实例：电子书1文件新建示例中的也框架页确定顶一个框架宽度，点击中间线 居中里设置完成一个一个区域保存6-3 框架

13、实例：电子书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 插

14、入FlashpaperCS3：插入记录媒体Flashpaper源7-4 图像播放器插入图像查看器保存Flash元素右侧Flash元素imageURLSShow controls 是否用控制条Slide Autoplay 是否自动播放Slide Delay 延迟时间Slide loop 是否循环播放Transition 转换效果7-5 插入音频CS5：（1）代码（2）设计，插入媒体插件选择文件设置其宽高，参数auto start false7-6 插入flv视频插入媒体flv选择文件外观限制高宽比例 自动播放视频下载类型第8章 AP.DW元素8-1 创建 AP DW元素AP绝对定位“层”布局（第

15、二个）AP DW元素，即可在网页中画一个层可在层中录入文字和插入图片层也可以移动布局（第一个）AP DW标签（此种无定位信息）8-2 编辑AP DW元素新建一个层，在属性里可定位位置可调节大小，往里可插入东西如果要建立多个层，且大小相同可用shift把这些层选中修改排列顺序设成宽度相同设成高度相同层的上下也可调节，属性，Z轴直接拉动层的图标到网页中，则新建一个层也可调节默认的层的属性，编辑首选参数AP元素大小背景几个层的对齐：同时选中修改排列顺序对齐方式8-3 层的可见性设置层可以控制其显示与否窗口AP元素可更改层次关系，可修改名字名字前有眼睛可调节其可见性窗口行为选中一个层显示隐藏元素选中一

16、个层显示onclick要想那个层上出现小手可添加一个空链接8-4 层的溢出及剪辑溢出：在层属性中溢出auto剪切：左 上 即 切掉多少 右 下 是 切掉之后剩下多少，从左上开始计（层可视面积的大小）8-5 AP DW的嵌套在一个层中再点击新建层即可而非一个在另一个之上文动子动 文不可见子不可见为明确定位可用查看标尺显示按住Ctrl可算出文子间距离8-6 AP DW与表格的转换为更好定位，查看网格设置显示AP DW转换成表格：修改转换将AP DW转换为表格第9章 行为特效9-1 晃动的图片选择要晃动的图片窗口行为+效果晃动onclick9-2 弹出窗口行为打开行为面板选中body+弹出信息消息o

17、nload（网页打开时）新建一个网页body打开浏览器窗口URL选中文件窗口大小等各属性9-3 设置文本行为选中body打开行为面板设置文本设置状态栏文本消息选择一个事件触发（网页最下方状态栏）设置文本域文字：（例：登录表单）（注意文本输入框必须有名字）把光标定到文本域中行为设置文本设置文本域文字（例请输入用户名字）选择一个触发事件on mouse over 再设置一个空的文字选择一个触发事件 onfause9-4 交换图像实例设置背景为黑色插入表格插入图片屏幕上图片：新建一个层在层上插入图片给该图命名.ID选中一张图行为+交换图像选中浏览（把下面两个对号打上）保存即可9-5 AP元素拖动效果

18、例如公告，可拖动到任何位置，是层的拖动，在层中写内容，给层加一个可拖动行为。点击网页主体行为+拖动AP元素AP元素（设置名属性）确定9-6 拼图游戏1新建页面背景图片新建层设置层的边框代码border：/px solid 再新建几个层存放小块图9-7 拼图游戏2设置另外几个层与第一个层一样大小，就用shift把几个层选中然后再选中第一个修改排列顺序同宽同高然后插入图片补（如果辅助线没有吸附作用：查看辅助线靠齐辅助线）用辅助线把层均分，把各小层放入其中，然后把各小层设置可拖动行为拖动AP元素AP元素 获取目前位置（一个一个设置） 靠边距离自己设最后将各小层拖出大层外保存9-8 修改属性特效新建页

19、面设背景颜色插表格插图片给该图命名ID选中图片行为改变属性元素ID.属性输入（height、width）新的值，再设置鼠标离开时的还原。（同样）9-9 动态菜单新建页面层插入表格作导航栏输入文字给层起名ID.再画层，设置其属性插入表格输入文字设置链接给层命名.ID，将其隐藏，选中一个单元格行为显示隐藏元素cd1on mouse over，再设置显示隐藏cd1on mouse out，将cd1与主层挨紧，选中cd1行为显示隐藏cd1on mouse over和on mouse out修改导航文字颜色改变：代码td id=”cc”设计行为改变属性TDcolour，新的值on mouse over再

20、on mouse out9-10 效果行为应用1新建一个层放到合适位置写入内容命名ID选中body行为效果通常目标元素等属性在层中嵌入子层命名ID里面写X移到合适位置行为效果显示/渐隐设置各属性on click9-11 效果行为应用2挤压：选中图片行为效果挤压文字颜色变化提示：文字外围加DV标签命名ID，选中行为效果高亮颜色设置各属性on click图片放大缩小效果：选中图片行为效果增大/收缩设置各属性9-12 跑马灯文字CS5自带的行为有限，互联网提供很多特效 XX“网页特效代码”把代码加入其中，亦可对代码进行更改9-13 鼠标特效XX代码插入body中9-14 图片展播特效19-15 图片

21、展播特效2任意修改代码第10章 应用CSS样式10-1 认识CSS（1）层叠样式表 标准化对页面样式进行控制例段分文字换颜色，后加10-2 认识CSS（2）如果好多段都要换颜色，则用HTML会很麻烦。则可用CSS，在head中加Pcolor:#oFo/style则所有的段都会变成要的颜色10-3 编辑CSS样式（1）1、属性CSS束操作选择器类型，选择器名称2、使用CSS样式面板右侧CSS面板 右下角有新建规则，修改，删除10-4 编辑CSS样式（2）CSS左下角有以类显示，显示所有，显示当前3、可在代码中修改，添加属性 手工输入10-5 CSS选择器1、CSS样式中有类型选择器不同段落要不同

22、颜色会用到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 样式的复合声明选择器本身也可以同时声明多个p class=”sp”类

23、p id =”one”ID新建CSS规则复合内容h2,h3,h4即同时声明h2,h3,h4亦可同时声明不同类型10-9 嵌套与继承1、选择器的嵌套，（对某一元素中某一部分内容进行控制）em使用“使用”斜体嵌套，例#abc em2、继承即文字关系，可对子层设置属性但对文层设置属性，则子层也有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