《dream weaver网页设计》由会员分享,可在线阅读,更多相关《dream weaver网页设计(43页珍藏版)》请在金锄头文库上搜索。
1、输入文本直接输入文本直接输入文本复制添加文本复制添加文本插入特殊文本插入特殊文本输入文本段落换行(Enter)手动换行(shift+Enter)自动换行输入多个空格(trl+Shift+Spqce) 编辑选择性粘贴仅文本插入文本字符区别?创建列表创建列表创建列表创建列表无序列表无序列表有序列表有序列表定义列表定义列表列表项列表项列表项列表项列表项列表项列表项列表项列表项列表项列表项列表项标题标题1列表项列表项列表项列表项标题标题2列表项列表项列表项列表项【插入】【图像】插入图像网页图像文件格式GIFJPGPNG【插入】(常用)面板单击【图像】按钮 设置图像属性【选择图像源文件】GIF动
2、画图像为图像添加替换文本修改图像大小图像的对齐方式(P66)插入图像点位符插入鼠标经过图像插入多媒体插入多媒体插入Flash插入Shockwave动画SWFSWFShockwaveFlashPaper插入Flv插入FlashPaperFlv设置属性设置属性【插入插入插入插入】“ “媒体媒体媒体媒体” ”声音声音添加背景音乐【插入插入插入插入】“ “媒体媒体媒体媒体” ”“ “插件插件插件插件” ”添加背景音乐添加音频添加音频添加背景音乐输入标签代码输入标签代码插入视频插入视频【插入插入插入插入】“ “媒体媒体媒体媒体” ”“ “插件插件插件插件” ”累进式下载视频累进式下载视频将 Flash
3、视频 (FLV) 文件下载到站点访问者的硬盘上,然后播放。但是,与传统的“下载并播放”视频传送方法不同,累进式下载允许在下载完成之前就开始播放视频文件。 流视频流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频,您必须具有对Macromedia Flash Communication Server 的访问权限,这是唯一可对 Flash 视频内容进行流处理的服务器。Flv创建站点及网站规划创建站点及网站规划为何要建立站点?为何要建立站点?新建站点实质新建站点实质就是给网页和网页元素建立一个共同就是给网页和网页元素建立一个共同的目录(文件夹),网
4、页元素链接使用相对路径。的目录(文件夹),网页元素链接使用相对路径。只要把整个目录拷贝到别的电脑上就可以正常运行。只要把整个目录拷贝到别的电脑上就可以正常运行。网页元素并没有真正嵌网页元素并没有真正嵌入网页,而是以入网页,而是以链接方链接方式式来展示在网页中。来展示在网页中。图片视频Flash相关程序CSS链接插件图片之类的网页元素文件在非站点目录,生成绝对图片之类的网页元素文件在非站点目录,生成绝对路径。网页不能移动到别的电脑上去运行,到别的路径。网页不能移动到别的电脑上去运行,到别的电脑上,网页元素电脑上,网页元素因找不到绝对路径因找不到绝对路径而无法显示。而无法显示。创建站点创建站点【站
5、点站点】【新建站点新建站点】依据对话提示设置依据对话提示设置站点属性参数站点属性参数站点名字站点名字是否使用服务器技术是否使用服务器技术(否)(否)编辑本地副本编辑本地副本网站建立的位置网站建立的位置如何连接到远程服务器如何连接到远程服务器(无)(无)完成完成管理站点管理站点【管理站点】【站点】管理站点对话框导出导出编辑编辑新建新建复制复制删除删除导入导入规划站点结构规划站点结构为站点创建一个根文件夹(根目录)为站点创建一个根文件夹(根目录)创建多级子文件夹创建多级子文件夹采用英文或拼音采用英文或拼音+数字数字语义性语义性文件夹名、文件夹名、文件名文件名分类存放网页、网页元素分类存放网页、网页
6、元素u要预先将网页素材存放到相应的目录画出网站地图画出网站地图主页链接1导航链接1链接1链接1S-03S-05S-04S-02S-01首页设计与布局首页设计与布局表格的应用表格的应用表格在网页中的作用表格在网页中的作用整体布局整体布局局部排版局部排版网页元素的定位网页元素的定位显示数据显示数据文字文字图片图片动画动画音频音频视频视频创建表格创建表格弹出弹出弹出弹出【表格表格表格表格】对话框对话框对话框对话框【表格表格表格表格】【插入插入插入插入】【插入插入插入插入】面板面板面板面板【表格表格表格表格】按钮按钮按钮按钮设定表格设定表格设定表格设定表格基本属性基本属性基本属性基本属性【确定确定确定
7、确定】插入表格插入表格插入表格插入表格填充大小背景边框行列间距表格的嵌套表格的嵌套在单元格中插入表格表表格格的的基基本本操操作作合并拆分单元格添加删除行列单元格DIVCSS布局布局http:/ div+css模板下载http:/ hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif); 外部外部样式表样式表内部内部样式表样式表三种样式规则的层叠三种样式规则的层叠Web设计者设计者用户用户浏览器浏览器CSS规则规则构成构成选择器选择器CSS语法语法声明声明属性属性属性值属性值ID(元
8、素的(元素的唯一标识)唯一标识)#table_1color:#f60;font-size:14px;border:1pt#999solid;标签标签(元素元素)群选择符群选择符单个选择符单个选择符p,td,litd通用选择符通用选择符* background-color: #0C6;复合内容复合内容派生选择符派生选择符伪类伪类a:link超级链接的默认样式超级链接的默认样式a:visited访问过的链接样式访问过的链接样式a:hover鼠标经过的链接样式鼠标经过的链接样式a:active鼠标按下的链接样式鼠标按下的链接样式#ssdtabletrtd类类(class).redcolor:#ff0
9、000;可应用于任何元素可应用于任何元素创建创建CSS样式样式菜单菜单创建创建【新建新建CSS规规则则】对话框对话框面板面板创建创建【格式格式】【CSS样式样式】【新建新建】【窗口窗口】【CSS样式样式】点击点击【新建新建】按钮按钮【CSS样式面板样式面板】仅限于仅限于该文档该文档(内部)(内部)样式表样式表文件文件(外部外部)选择选择“选择选择器类型器类型”输入输入“选择选择器器”名称名称保存规则的保存规则的位置位置【确定确定】【CSS规则定义规则定义】对话框对话框应用应用CSS样式样式只有选择器为类(只有选择器为类(Class)时,才需要应用(套用)。)时,才需要应用(套用)。其它类型,是
10、针对于标签或其它类型,是针对于标签或ID,只要名字对应,就直接应用。,只要名字对应,就直接应用。选择器为类(选择器为类(Class)时,样式应用(套用)方法)时,样式应用(套用)方法选择网页元素在属性面板选定类名在CSS面板选定类名【右击】快捷菜单【套用】margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-rightborder-topborder-bottompadding-leftpadding-rightpadding-toppadding-bottomwidthheightCSS盒模型盒模型DIVCSS布局实例
11、布局实例HeadNav(navigation ) Left_contain Right_contain contain footer 外框超级链接超级链接超链接是指从一个网页指向一个目标的连接关系。超链接是指从一个网页指向一个目标的连接关系。超链接是指从一个网页指向一个目标的连接关系。超链接是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页这个目标可以是另一个网页这个目标可以是另一个网页这个目标可以是另一个网页, ,也可以是相同网页上也可以是相同网页上也可以是相同网页上也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地的不同位置,还可以是一个图片,一个电子邮件地的不同位
12、置,还可以是一个图片,一个电子邮件地的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序等。而在一个址,一个文件,甚至是一个应用程序等。而在一个址,一个文件,甚至是一个应用程序等。而在一个址,一个文件,甚至是一个应用程序等。而在一个网页中用来超链接的对象,可以是网页中用来超链接的对象,可以是网页中用来超链接的对象,可以是网页中用来超链接的对象,可以是一段文本或者是一段文本或者是一段文本或者是一段文本或者是一个图片。一个图片。一个图片。一个图片。被链接内容被链接内容超级链接载体超级链接载体超级链接目标超级链接目标空链接空链接空链接空链接锚点链接锚点链接锚点链接锚点链接电子
13、邮件链接电子邮件链接电子邮件链接电子邮件链接文件(包括应用程序)文件(包括应用程序)文件(包括应用程序)文件(包括应用程序)文件夹文件夹文件夹文件夹网页网页网页网页文本链接文本链接文本链接文本链接图像链接图像链接图像链接图像链接图像热区图像热区图像热区图像热区链接链接链接链接_blank_blank:超链接的网页:超链接的网页:超链接的网页:超链接的网页会在另外一个窗口中打开会在另外一个窗口中打开会在另外一个窗口中打开会在另外一个窗口中打开显示。显示。显示。显示。_parent_parent:超链接的网页:超链接的网页:超链接的网页:超链接的网页会显示在父框架或父窗会显示在父框架或父窗会显示在
14、父框架或父窗会显示在父框架或父窗口中。口中。口中。口中。_self_self:超链接的网页会:超链接的网页会:超链接的网页会:超链接的网页会显示在当前网页的同一显示在当前网页的同一显示在当前网页的同一显示在当前网页的同一窗口或框架中,这是默窗口或框架中,这是默窗口或框架中,这是默窗口或框架中,这是默认设置。认设置。认设置。认设置。_top_top:超链接的网页会显:超链接的网页会显:超链接的网页会显:超链接的网页会显示在父窗口中。示在父窗口中。示在父窗口中。示在父窗口中。目标网页显示位置目标网页显示位置网页链接路径网页链接路径绝对路径绝对路径绝对路径绝对路径相对路径相对路径相对路径相对路径站点
15、根目录相对路径站点根目录相对路径站点根目录相对路径站点根目录相对路径D:/mysite/music/123.mp3D:/mysite/music/123.mp3http:/ a au四个伪类可以省略不必要的伪类。如:四个伪类可以省略不必要的伪类。如:visited、active.u排列顺序固定排列顺序固定(LVHA):LoVeandHAte。否则就会有某些状态的样式失效。否则就会有某些状态的样式失效。u对对a标签样式加标签样式加display:block;或者或者display:inline-block;实现成块状属性实现成块状属性,加宽点击面。加宽点击面。设置样式与一般设置样式与一般设置样式
16、与一般设置样式与一般文字相同文字相同文字相同文字相同acolor:#333;text-decoration:none; a:hover color:#CC3300;text-decoration:underline;全站超链接样式化全站超链接样式化A内控制内控制a.yangshicolor:#333;text-decoration:none; a.yangshi:hover color:#CC3300;text-decoration:underline;链接内设置类链接内设置类控制超链接样式控制超链接样式父级控制父级控制.yangshi acolor:#333;text-decoration:
17、none; .yangshi a:hover color:#CC3300;text-decoration:underline; 链接外父级的链接外父级的css类或类或ID控制超链接样式控制超链接样式内部内部CSS样式移至外部样式文件样式移至外部样式文件CSS面板面板全选全选CSS规则规则移动移动CSS规则规则右击弹出快捷菜单右击弹出快捷菜单新建样式表新建样式表样式表样式表移至外部样式表对话框移至外部样式表对话框连接外部样式连接外部样式CSS文件文件【格式格式】【CSS样式样式】【附加样式表附加样式表】CSS属性面板属性面板附加样式表按钮附加样式表按钮选择附加样式表文件选择附加样式表文件DW菜单
18、导航介绍菜单导航介绍浮动框架浮动框架浮动框架浮动框架 在网页中选定位置在网页中选定位置插入浮动框架插入浮动框架插入插入布局布局选择选择“Iframe”设定浮动框架设定浮动框架的属性的属性nameheightwidthsrc scrollingclass在浮动框架中显示网页在浮动框架中显示网页target= myframeAPDIVAbsolutePositionDivision插入插入APDIV【插入插入】【布局对象布局对象】【APDIV】插入面板插入面板【布局对象布局对象】绘制绘制APDIVposition:absolute;APDIVDIV标签标签CSS属性DIV标签转换为标签转换为APDIVAPDIV父级定位法父级定位法position: relative;position:absolute;父级元素父级元素APDIV多个多个APDIV对齐对齐【修改修改】【排列顺序排列顺序】