ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> Dreamweaver >> Dreamweaver架设网站终极教程

Dreamweaver架设网站终极教程 (2)

来源:中国设计秀    作者:straw    点击:361     加入收藏
十二、在页面中运用flash动画

  1、点击插入中的Flash按钮,即可为页面插入一个动画。也可以选菜单插入/媒体/Flash来完成这一步。
  2、选中已插入的动画,看属性面板。这里可以设置它的宽、高,也可以通过拖动来改变大小。
  3、可以在这里点击“播放”来预览动画。

  十三、让插入的flash动画变透明

  1、当网页上已经有背景,或是想要在一张图片上再插入flash动画,而flash动画本身也有背景色,所以会影响美观,这时我们要把它做成透明动画。
  2、如在页面上插入一张图像。
  3、在图像上插入一个层,在层中插入好所需要的flash动画。
  4、选中flash动画,在属性面板中点击“参数”按钮。
  5、在“参数”的左面一格输入“wmode”。在右面“值”一格输入“transparent”。

  十四、在页面中播放声音

  1、在完成全页面以后,如果要为该页添加背景音乐,注意背景音乐一般是*.midi文件,这样的声音文件十分小,易于快速下载,其他格式不适合作为背景音乐。
  2、在页面中所有表格之外,(注意此时编辑窗口左下方的标签选择栏中仅显示这一项,或是在左下角点一下,这样才能保证这个行为是添加在整个页面上的)。点击行为窗口上的“+”按钮,(或用菜单 窗口/行为,打开行为窗口。)
  3、从弹出菜单中选择“播放声音”。打开一个对话框。
  4、在这个对话框里用“浏览”选择要播放的声音,并确定。
  5、这时行为面板上自动显示了事件为onload,动作为播放声音。点击这一行,中间出现一个按钮。点击按钮,可以设置这个声音在什么事件下播放。可以选择“显示事件”/“IE5.0。
  6、我们常用的如Onload(当页面载入时)、OnClick(单击鼠标)、OnMouseOver(鼠标移到对象上)、OnUnload(当关闭页面时)等。
  7、该行为也可以设置在图片上、文字链接上。在文字链接上播放声音之前,先为文字添加一个空链接,即选中文字,在链接一格里输入一个“#”符号。

  十五、弹出窗口

  1、首先制作一个准备在小窗口中显示的页面(比如a.htm),由于这个弹出窗口不能太大,所以内容要少一些。
  2、打开一个制作好的页面,把光标移到页面中所有我表格以外,点击行为窗口上的“+”按钮,从弹出菜单中选择“打开浏览器窗口”一项。
  3、在对话框中里输入相应的设置。要显示的URL即a.htm,窗口宽度和高度自己定,单位为像素。属性中的各项参数需要就打勾。
  4、设置完毕后,点“确定”。此时行为窗口中将显示打开浏览窗口这个行为,触发条件为Onload,如果不是要这项,就自己设置。
  5、该行为也可以设置在图片上、文字链接上。。
  6、可以用这个方法来表示对浏览者的打开时的欢迎、网站公告、离开时的告别语等。

  十六、控制状态栏信息

  1、打开页面,选中一张图片。
  2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本。
  3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍。
  4、可以设置行为的触发条件为OnMouseOver(鼠标移到对象上),这样当鼠标经过这张图片的时候,状态栏将出现相关的信息。
  5、如果需要鼠标在移开后,这个信息消失,那么再次使用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMouseOut(鼠标移开)。
  6、同样可以在一段文字上设置该行为。或是设置在整个页面上也可以。

  十七、弹出信息

  1、打开一个制作好的页面,点左下角项。点击行为窗口上的“+”按钮,从弹出菜单中选择“弹出信息”一项。
  2、在设置窗口中“消息”一栏里输入想显示的消息即可。
  3、触发条件设置为Onload(当页面载入时),就可以用来作为打开页面的欢迎信息。如设为OnUnload(当关闭页面时),就可以作为用户关闭页面时送别信息。
  4、也可以在某一段文字上设置弹出信息。比如一段文字不愿让人复制,就选中整段文字,注意此时左下角显示〈P〉,即段落。
  5、然后同样操作,消息可以输入版权之类的语句。只是设置触发条件为OnBeforeCopy(按右键时触发),或OnCopy(按右键选复制时触发)。

  十八、动态图片按钮

  1、准备好两张同样大小的图片,常用的方法是如一张为灰度照片,一张为彩色照片。或一张是按钮凹下的样式,一张是按钮凸起的样式。
  2、举例:插入一个3行1列的表格,设置宽度为180像素。
  3、将光标置于第一行,插入一张灰度的图片。
  4、在属性面板中“链接”一栏里输入需要链接的地址,并给图片加上名称,如tu1.
  5、点击行为窗口上的“+”按钮,从弹出菜单中选择“交换图像”。
  6、此时在“图像”一栏中已显示要交换的图像,然后在“庙宇原始档为”一栏里选择好交换后的那张图。
  7、下面有两个参数,“预先载入图像”和“鼠标滑开时恢复图像”,都要选中。
  8、同样方法创建另外两个动态按钮。

  十九、用框架布局页面

  框架由两个主要部分组成——框架集和单个框架。
  1、 点击插入中的框架,即显示出已定义的13种框架的样式。我们上—中—下结构为例。
  2、 点击“上—中—下”框架结构的图标,此时在页上插入上下两个框架,将整个页面分割成了3部分。我们分别在上面输入“上”,在中间输入“中”,在下面输入“下”。
  3、 先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候,该部分会以虚线框起来,这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。
  4、 至此,我们保存了四个页面,分别是框架集,和组成框架集的上、中、下三个页面。所以,其实这个框架是由四个页面组成的,所以用框架会降低一点用户浏览的速度。
  5、 点击窗口/其他/框架,打开框架的面板。在这里单击某个框架,即可选中该框架。当框架被选中时,编辑窗口中对应的框架出现虚线。
  6、 如:选中上面topframe,此时属性面板上显示的是上面这个框架的属性。同样选中中间框架和下面框架,也可以分别设置它们的属性。
  7、 在编辑窗口中,将鼠标放在两框架之间的边框上,光标将变成上下箭头形,此时点击边框,选中的是整个框架集。
  8、 此时属性面板上出现的是整个框架组的属性。可以在此设置框架集是否有边框、宽度及颜色等。不过最为重要的是可以在这里设置框架集中各个框架的大小。
  9、 在属性面板的右面的图示上选中上面框架,设置它的行为80像素,边框为0。
  10、选中下面框架,设置行高为30像素,边框为0。
  11、选中中间框架,设置行高为1,单位为相对。(相对的意思是:当前行相对于其他行所占的比例。设为1就是指占据除上和下以后的所有浏览窗口剩余空间。
  12、举例:将光标置于上面框架topFrame上,右键选页面属性,设置背景色为#FF6600。然后插入/表格,插入一个1行2列,边框边距都为0的表格。设置第1个单元格的宽度为116像素,然后插入一张图片。将第2个单元格设置为水平对齐方式为居中,垂直排列方式为底部,然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。
  13、将光标置于中部框架mainFrame中,右键选页面属性,设置背景色为#FFFFCC。然后插入一张大图像。
  14、将光标置于下面框架bottomFrame中,右键选页面属性,设置一个背景图像。
  15、另外做好三个页面,作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。
  16、选中“狮子座”,在属性中为它设置好要链接的页面,然后在“目标”里选“mainframe”,即该内容在中间那个框架中显示。
  17、同样设置“魔蝎座”、“双子座”的链接。

  二十、跳转菜单

  1、 点击主菜单中的插入/表单对象/跳转菜单,也可以用插入/表单,中的跳转菜单图标,来调出跳转菜单设置窗口。
  2、 首先在“文本”一栏里输入“请选择相关网站”字样。然后点击窗口上的“+”号按钮。这时菜单里多了一个选项,这个选项没有链接,仅作为跳转菜单的说明文字。
  3、 在文一栏里输入需要的网站,如“新浪”,然后在“选择时,前往URL”一栏里输入网站链接地址http://www.sina.com.cn,此时,菜单项一栏里又多了一个选项,这个选项对应一个网的链接地址。
  4、 使用同样方法,在菜单中添加其他一些选项及对应的链接。还可以用“上”“下”的按钮,来调整它们的顺序。
  5、 设置窗口的“菜单之后插入前往按钮”一项先不要选择。选中“更改URL后选择第一个项目”一项,这样当使用跳转菜单到某个页面后,如果返回到跳转菜单页面,此时页面中的跳转菜单默认显示的依旧是第1项内容。
  6、 设置完毕后点击“确定”即可。
  ****因为跳转菜单是一个表单,所以其实是先插入了表单(红色虚线区域),然后在表单中再插入了下拉菜单。
  7、 想修改选项,可以选中页面上的下拦菜单,此时点击属性面板中的“列表值”,即可修改各项内容了。

  8、 当选中跳转菜单时,行为窗口中也出现行为。双击该行为,也可以进入设置窗口,可以重新对其进行设置。
  9、 如果“菜单项”里的第一项就是链接,而不是上面所说的一句提示的话,那么就要选中“选项“中的“菜单之后插入前往按钮”。添加一个“前往”按钮。

  二十一、运用插件(Dreamweaver功能扩展)

  1、 首先下载好需要的插件,此处举例用的是Animate Browser Window。这是一个动态改变窗口的大小的插件。打开Dreamweaver Extension Manager,安装下载好的插件。
  2、 启动Dreamweaver,在做好的页面上,右击左下角〈body>,然后点击行为窗口中的“+”号按钮,在其中选择“Animate Browser Window”,然后在其中做相应的设置。这里设置窗口打开之前高宽均为0,打开后为填满屏幕。触发条件为onLoad。

  二十二、滚动字幕

  1、把光标插入点放在需要插入滚动字幕的地方。
  2、点击插入面板的“标签选择器 ”。
  3、选择 marquee标签,点击“插入”按钮。然后关闭“标签选择器 ”。
  4、转换到代码视图。把光标插入点放在 两个marquee标签之间。
  5、选择“窗口”/“标签检查器”。可以在“标签检查器”中设置标签的各种用法。
  6、点击behavior设置项右边的下拉箭头,选择滚动字幕内容的运动方式。其中三个选项意思分别是:Alternate:内容在相反两个方向滚来滚去。Scroll:内容向同一个方向滚动。Slide:内容接触到字幕边框就停止滚动。
  7、direction属性设置字幕内容的滚动方向。四个选项意思为:down:向下运动。Left:向左运动。Right:向右运动。Up:向上运动。
  8、scrollamount属性设置字幕滚动的速度。一般设为1。
  9、scrolldelay属性设置字幕内容滚动时停顿的时间,单位为毫秒。如果要让滚动看起来流畅,数值应该尽量小。实例中设置为1毫秒。
  10、width属性设置滚动字幕的宽度。这个任意,比如设置为300。
  11、onMouseOver事件设置鼠标移动到滚动字幕时的动作,常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作,常设置为开始滚动。这个两项不能选,只能手工输入。在onMouseOver后面输入“this.stop();” 在onMouseOut后面输入“this.start();”
  12、style属性设置字幕内容的样式。实例中设置字幕文字大小,也要手工输入“font:12px;”。
  13、loop属性设置字幕内容滚动次数,默认值为无限。“-1”也为无限。
  14、全部代码: 滚动字幕内容

  二十三、创建CSS样式表

  1、在网页上输入一些文字。
  2、打开“CSS样式”面板,也可以用“窗口/CSS样式”打开。
  3、面板下方有四个按钮,分别是附加样式、新建样式、编辑样式、删除样式。
  4、点击“新建样式”,打开对话框。输入名称,注意名称前有一个点号。如取名为.zi(中文名不行)。类型:创建自定义样式,定义在:仅对该文档。
  5、此时再打开一个对话框,在左边的分类里选择“类型”,然后在右面设置字体为宋体,大小为14像素,颜色任意。然后确定。
  6、选中页面上的文字,然后点击窗口里的样式.zi。此时这段文字就应用了CSS样式。
  7、如要对刚才定义的CSS样式进行修改,可以点中它,然后点下面的编辑样式按钮。

  二十四、创建动态链接样式表

  1、点击“新建CSS样式”对话框,在“定义在”一栏选择“仅对该文档”,在“类型”一栏里选择“使用CSS选择器”。
  2、当样式表类型选择“使用CSS选择器”时,下拉菜单的名字变成了“选择器”,表示输入内容为CSS选择符,单击下拉按钮,可以看到动态链接的4种状态。
  a:link——超级链接的正常状态; a:visited——访问过的超级链接状态。
  a:hover——光标移至超级链接上时的状态; a:active——选中超级链接的状态。
  3、 接下来对这几种状态分别设定,首先从下拉菜单中选择a:link,点击“确定”按钮后弹出样式表设置窗口,设定该样式无下划线,颜色为#FF6600(橙色)。
  4、 用同样方法设定a:visited,设定其为无下划线,颜色为#FFFF00(黄色)。
  5、 接下来设定a:hover,设定其为有划线,颜色为#FF6600(橙色)。
  6、 a:active不用设置,它会自动依照a:hover而定。
  7、 在网页上输入一句话,在属性面板中设定它的链接为“#”。即可。
  ****注意:必须按照这样a:link、 a:visited 、a:hover 、a:active的顺序来设置,否则不会出现预期的效果。

  如果我们需要一个页面上有两个或更多的链接效果,可以用以下方法:
  1、 点击新建样式按钮,样式类型选“使用CSS选择器”,在“选择器”一栏里,直接输入a.link2:link,接着设置a.link2:link为红色无下划线。
  2、 继续定义下面两个样式。名称都直接输入,分别设定它们为a.link2:visited,紫色无下划线。 a.link2:hover,蓝色有下划线。
  3、 此时在“CSS样式”选项下多了一个名称为link2的自定义样式。
  4、 在页面中输入一段话,为它添加一个#链接,选中这个链接,然后点击样式表窗口中的样式link2,将此样式应用在该链接上。
  5、 同样方法可以制作同一页面上的不同链接格式。
  ****为保持一种风格,同一页面上不宜建立过多的链接样式。

  二十五、外部样式表

  ***在不同的页面中应用相同的样式表。
  1、 新建样式表,取名,然后类型选“创建自定义样式”,定义在选“新建样式表文件”。
  2、 确定后,打开保存外部样式表的窗口。然后把它保存到本地站点中即可。
  3、 此时,可以看到样式表窗口中新增了一个样式表文件,文件的后缀名为css
  4、 如果当前页面中的一个内部样式表要导出为外部样式表文件,以便供其他页面使用,可以点击样式表窗口右上角的灰色的图标,选“导出样式表”,此时可以为样式取名和保存为一个外部文件。
  5、 当其他页面需要使用外部样式表时,可以点样式表窗口中的第一个按钮“附加样式表”,打开窗口,然后选择外部样式表文件,在添加为里选“链接”,确定即可。

  二十六、其他CSS

  ****CSS里的背景,是设置文字背景、表格背景图等。
  ****CSS里的区块,是指设置文本的文字间距、对齐方式、下标、上标、排列方式等。
  ****CSS里的盒子,是指设置图片和文本内容之间的空白距离,以及图文混排的方法。
  ****CSS里的边框,是指设置表格文本区、按钮等的美化。
  ****CSS里的列表,是指设置列表项样式。即那种提纲式的一段话。
  ****CSS里的定位,是指设置页面中图片的相对和绝对定位。
  ****CSS里的扩展,其中的光标,可以设置光标的样式,可以设置为hand(手型)、crosshair(十字型)、text(“I”型)、wait(等待型)、default(默认型)、help(帮助型),还有各种方向的箭头型。
  ****CSS里的扩展,其中的过滤器,可以用来做CSS滤镜特效,即用来加工图片的透明、发光等。但效果不太明显,还是用专门加工图片的软件来完成比较好。

 

0
顶一下
[1] [2] [3]
2008-07-18 11:37:00    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口