dream weaver网页设计

1、输入文本直接输入文本直接输入文本复制添加文本复制添加文本插入特殊文本插入特殊文本输入文本段落换行(Enter)手动换行(shift+Enter)自动换行输入多个空格（trl+Shift+Spqce）&nbsp编辑选择性粘贴仅文本插入文本字符区别？创建列表创建列表创建列表创建列表无序列表无序列表有序列表有序列表定义列表定义列表 列表项列表项 列表项列表项 列表项列表项 列表项列表项 列表项列表项 列表项列表项 标题标题1 列表项列表项 列表项列表项 标题标题2 列表项列表项 列表项列表项【插入】【图像】插入图像网页图像文件格式GIFJPGPNG【插入】（常用）面板单击【图像】按钮 设置图

2、像属性【选择图像源文件】GIF动画图像为图像添加替换文本修改图像大小图像的对齐方式（P66）插入图像点位符插入鼠标经过图像插入多媒体插入多媒体插入Flash插入Shockwave动画ShockwaveFlashPaper插入Flv插入FlashPaperFlv设置属性设置属性声音声音添加背景音乐添加背景音乐添加音频添加音频添加背景音乐输入标签代码输入标签代码 插入视频插入视频累进式下载视频累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。 流视频流视频将 Flas

3、h 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。Flv创建站点及网站规划创建站点及网站规划为何要建立站点？为何要建立站点？新建站点实质新建站点实质就是给网页和网页元素建立一个共同就是给网页和网页元素建立一个共同的目录（文件夹），网页元素链接使用相对路径。的目录（文件夹），网页元素链接使用相对路径。只要把整个目录拷贝到别的电脑上就可以正常运行。只要把整个目录拷贝到别的电脑上就可以正常运行。网页元素并没有真正

4、嵌网页元素并没有真正嵌入网页，而是以入网页，而是以链接方链接方式式来展示在网页中。来展示在网页中。图片视频Flash相关程序CSS链接插件图片之类的网页元素文件在非站点目录，生成绝对图片之类的网页元素文件在非站点目录，生成绝对路径。网页不能移动到别的电脑上去运行，到别的路径。网页不能移动到别的电脑上去运行，到别的电脑上，网页元素电脑上，网页元素因找不到绝对路径因找不到绝对路径而无法显示。而无法显示。创建站点创建站点【站点站点】 【新建站点新建站点】依据对话提示设置依据对话提示设置站点属性参数站点属性参数 站点名字站点名字是否使用服务器技术是否使用服务器技术（否）（否）编辑本地副本编辑本地副本网

5、站建立的位置网站建立的位置如何连接到远程服务器如何连接到远程服务器（无）（无）完成完成管理站点管理站点【管理站点】【站点】管理站点对话框导出导出编辑编辑新建新建复制复制删除删除导入导入规划站点结构规划站点结构为站点创建一个根文件夹（根目录）为站点创建一个根文件夹（根目录）创建多级子文件夹创建多级子文件夹采用英文或拼音采用英文或拼音+数字数字语义性语义性文件夹名、文件夹名、文件名文件名分类存放网页、网页元素分类存放网页、网页元素u要预先将网页素材存放到相应的目录画出网站地图画出网站地图主页链接1导航链接1链接1链接1S-03S-05S-04S-02S-01首页设计与布局首页设计与布局表格的应用表

6、格的应用表格在网页中的作用表格在网页中的作用整体布局整体布局局部排版局部排版网页元素的定位网页元素的定位显示数据显示数据文字文字图片图片动画动画音频音频视频视频创建表格创建表格填充大小背景边框行列间距表格的嵌套表格的嵌套在单元格中插入表格表表格格的的基基本本操操作作合并拆分单元格添加删除行列单元格DIVCSS布局布局http:/ div+css模板下载http:/ Style Sheet，通常称为，通常称为“层叠样式表层叠样式表”Div可定义文档中的分区或节（可定义文档中的分区或节（division/section） 是一个块级元素是一个块级元素 解决内容与表现样式分离的问题解决内容与表现样式

7、分离的问题 hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif); 外部外部样式表样式表内部内部样式表样式表三种样式规则的层叠三种样式规则的层叠Web设计者设计者用户用户浏览器浏览器CSS 规则规则构成构成选择器选择器CSS 语法语法声明声明属性属性属性值属性值ID（元素的（元素的唯一标识）唯一标识）#table_1 color : #f60 ;font-size:14px ; border:1pt #999 solid; 标签标签(元素元素)群选择符群选择符单个选择符单个选择符

8、p, td, li td 通用选择符通用选择符* background-color: #0C6;复合内容复合内容派生选择符派生选择符伪类伪类a:link 超级链接的默认样式超级链接的默认样式a:visited 访问过的链接样式访问过的链接样式a:hover 鼠标经过的链接样式鼠标经过的链接样式a:active 鼠标按下的链接样式鼠标按下的链接样式#ssd table tr td 类（类（class）.red color : #ff0000; 可应用于任何元素可应用于任何元素 创建创建CSS样式样式 菜单菜单创建创建【新建新建CSS规规则则】对话框对话框面板面板创建创建【格式格式】【CSS样式样

9、式】【新建新建】【窗口窗口】【CSS样式样式】点击点击【新建新建】按钮按钮【CSS样式面板样式面板】仅限于仅限于该文档该文档（内部）（内部）样式表样式表文件文件(外部外部)选择选择“选择选择器类型器类型”输入输入“选择选择器器”名称名称保存规则的保存规则的位置位置【确定确定】【CSS规则定义规则定义】对话框对话框应用应用CSS样式样式 只有选择器为类（只有选择器为类（Class）时，才需要应用（套用）。）时，才需要应用（套用）。其它类型，是针对于标签或其它类型，是针对于标签或ID，只要名字对应，就直接应用。，只要名字对应，就直接应用。选择器为类（选择器为类（Class）时，样式应用（套用）方法

10、）时，样式应用（套用）方法选择网页元素在属性面板选定类名在CSS面板选定类名【右击】快捷菜单【套用】margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-rightborder-topborder-bottompadding-leftpadding-rightpadding-toppadding-bottomwidthheightCSS盒模型盒模型DIVCSS布局实例布局实例HeadNav(navigation ) Left_contain Right_contain contain footer 外框超级链接超级链接被

11、链接内容被链接内容 超级链接载体超级链接载体超级链接目标超级链接目标目标网页显示位置目标网页显示位置网页链接路径网页链接路径创建超级链接创建超级链接选中超级链接载体选中超级链接载体拖动至目标网页拖动至目标网页锚点链接设置锚点链接设置电子邮件链接设置电子邮件链接设置图像热区链接设置图像热区链接设置当点击该链接时，页面会默认跳当点击该链接时，页面会默认跳到网页头部到网页头部-默认的锚点。默认的锚点。不会出现上面情况不会出现上面情况带警告提示的空链接带警告提示的空链接空链接设置空链接设置CSS美化链接美化链接伪类：伪类：CSS链接样式链接样式a:visiteda:linka:hovera:activ

12、e 初始状态初始状态访问过的状态访问过的状态鼠标悬停的状态鼠标悬停的状态鼠标点击的状态鼠标点击的状态u四个伪类可以省略不必要的伪类。如：四个伪类可以省略不必要的伪类。如：visited、active.u排列顺序固定排列顺序固定（LVHA）: LoVe and HAte 。 否则就会有某些状态的样式失效。否则就会有某些状态的样式失效。u对对a标签样式加标签样式加display:block;或者或者display:inline-block; 实现成块状属性实现成块状属性 ,加宽点击面。加宽点击面。acolor:#333;text-decoration:none; a:hover color:#CC

13、3300;text-decoration:underline;全站超链接样式化全站超链接样式化A内控制内控制a.yangshicolor:#333;text-decoration:none; a.yangshi:hover color:#CC3300;text-decoration:underline;链接内设置类链接内设置类控制超链接样式控制超链接样式父级控制父级控制.yangshi acolor:#333;text-decoration:none; .yangshi a:hover color:#CC3300;text-decoration:underline; 链接外父级的链接外父级的c

14、ss类或类或ID控制超链接样式控制超链接样式内部内部CSS样式移至外部样式文件样式移至外部样式文件CSS面板面板全选全选CSS规则规则移动移动CSS规则规则右击弹出快捷菜单右击弹出快捷菜单新建样式表新建样式表样式表样式表移至外部样式表对话框移至外部样式表对话框连接外部样式连接外部样式CSS文件文件【格式格式】【CSS样式样式】【附加样式表附加样式表】CSS属性面板属性面板附加样式表按钮附加样式表按钮选择附加样式表文件选择附加样式表文件DW菜单导航介绍菜单导航介绍浮动框架浮动框架浮动框架浮动框架 在网页中选定位置在网页中选定位置插入浮动框架插入浮动框架插入插入布局布局选择选择“Iframe”设定浮动框架设定浮动框架的属性的属性nameheightwidthsrc scrollingclass在浮动框架中显示网页在浮动框架中显示网页target= myframeAPDIVAbsolu