dreamweaver制作树状目录
2007-06-04 14:28:00 trip_008 阅读数 2867

dreamweaver制作树状目录 相关内容

2008-09-14 21:55:00 steveyang 阅读数 1544
如果想让站点保持统一的风格或者站点中多个文档包含相同的内容。----对其进行编辑,未免过于麻烦,中文版Dreamweaver 8提供的模板功能可以很方便地帮助用户解决这些难题。
模板由两部分组成:锁定区域和可编辑区域。对于刚创建的模板,所有的区域都是锁定的,在定义模板时,可以在模板文件中定义可编辑的区域。套用该模板的页面,只有可编辑区域是可以被改变的区域。
实践证明,用模板对于网页制作者来说省了很多的麻烦,也可以节约很多时间,同时也能减少连接上的错误。
一、新建模板
在新建模板前,我劝你还是要对你的网站要在纸上画一个草图,再根据你的图纸来定你的模板,我简单画了一个,供参考,样式是你自己设置的,我在这里只是举个例子。如图 14
图14 网站草图
打开 Dreamweaver 8后,可以通过“窗口”下面的“资源”面板创建新的模板。快捷键是F11。如图15
图15 打开资源,新建模板文档
这时你双击才命名的muban文件,便在DW里显示一个空白的文件。当你新建一个模板文档时,Dreamweaver 8 将会在你的站点根目录下自动生成一个Templates文件夹,该文件夹专门用于放置模板文档。如图 16
图16 模板专用文件夹
下一步就是在这个空白的文档中建模板了。(这个空白文档和你做网页一样的)
当然也可以用别的方法来创建模板,如通过“插入”面板或者菜单选项可以完成模板文档的创建,新建模板与创建模板略有不同。创建模板的操作方法哪下:
(1)选择“窗口”面板|“插入”菜单选项,打开“插入”面板。
(2)在“插入”面板中选择“模板对象”向右点“创建模板”。
也可以在一般页面中象平时做网页一样,把页面做好,然后点左上“文件”“另存为模板”等。在这里我就
不一一说了,你肯定能在实践中摸索出来的。
言规正传,下面我们开始在刚才打开的muban文件中建模板啦。
第一步:设置页面属性
(1)选择菜单“修改”向下单击“页面属性”,如图17。在弹出的对话框里设置字体和边距。 Dreamweaver
8默认设置网页都留有间隙,不怎么好看,所以要全部设置为“0”如图18
再选择“链接”根据自己的喜好设置下划线和链接的颜色。如图19
图17 打开页面属性
图18 设置字体和边距
图19 设置下划线和链接颜色,然后点“确定”。
(2)选择菜单“编辑”向下单击“首选参数”,如图 20 在弹出的对话框里将“允许多个连续的空格”打上
钩,否则你在Dreamweaver 8按空格键它是不动的,呵呵,没有象在Word里那么顺手。如图 21
图20 选择“首选参数”
图21 在允许多个连续的空格前打上钩,然后点“确定”。
第二步:使用表格布局网页。
当然也可以用层。表格是网页布局设计的常用工具,它可以使插入页面中的图像和文本等对象被限定在某一固
定位置。相对于没有使用表格的页面,使用表格的页面显得更加整齐有序。
(1)绘制表格
将光标置于需要插入表格的位置,然后选择菜单“插入”,向下单击“表格”,如图 22 在弹出的对话框里
根据以上草图确定行和列的数字,如图 23。
图 22 选择表格
图 23 设置表格行和列,然后点“确定”,在这里我们都设置为1。
注:宽度通常设置在780以内,这可以在800X600、1024X768两种分辨率情况下使你的的网页不变样,如果过大
超过800,那么使用800X600分辨率的电脑看你的网页就会出现下滑块。
(2)设置表格属性
在“对齐”处选“居中”,在“填充”、“间距”、“边框”处全部设置为“0”。如图 25

图 24 设置表格属性

 点击表格中间后发现下面的属性未必是想药的表格属性,可以观察到页面下面有“<body><table><tr><td>”一般都自动选中<td>,补充点Html知识(表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。)

会发现,分别点击<body><table><tr><td>,会有不同的属性显现,可以找到你想找的属性

 

(3)拷贝和粘贴单元格
将鼠标左键对着单元格边框点一下,然后再点右键,选“拷贝”,再将鼠标对着表格下面点右键,选“粘贴”五次。如图 25
图 25 拷贝和粘贴表格
这样做的目的是为了打散表格,能提高打开网页速度。当然也可以用一个整体的表格。
(4)设置单元格属性
表格第一行:我们将用来放置FLASH动画,或者图片。尺寸在780X100,宽度已定下来了,现在确定它的高度 将鼠标对着第一行点一下,然后在下面表格属性里“高”打上“100”按一下回车,要注意所有表格属性栏下面的标题前面有小钩要去掉,如果不去掉,你打出来的字特粗。
表格第二、第三行,是用来放置栏目的,一般高度设置“20”方法同第一行。
表格第四行是主要编辑区,我们暂时设置高为为“200”。再提醒一句,“标题”前面的小钩一定要去掉哟~~
表格第五行是放页脚的,一般高在60以内。 设置方法同上。
到此,插入表格和设置表格属性完成了。
第三步:制作页眉
插入FLASH动画 :鼠标在第一行点一下,然后选择菜单“插入”指向“媒体”向右单击“FLASH”在弹出的对话框里找到你制作的FLASH然后点“确定”。
图 26 插入FLASH
图 27 在站点文件夹里找到FLASH,然后点“确定”
制作导航栏
在第二行里可以用插入表格的方法,根据你的栏目,设置列数,可以在属性里设置颜色,也可以放置背景图片。
第三行,同上。
第四行是主要编辑区,我们暂时不动。
第四步:制作页脚
第五行是页脚,页脚里主要内容是版权、联系地址、电话、网站备案、联系人、网站统计等。所有编辑完成后如图 28
图 28 完成页面编辑
注:栏目我在这里没有列出,但在做模板时要把所有栏目里的地址要做好链接。
第五步:定义可编辑区和重复区
定义重复区:页眉和页脚我们在这里都定义为重复区。
将光标指向页眉目,然后选择菜单“插入”|“模板对象”| “重复区域”单击鼠标左键,这时 会弹出“新建重复区域”RepeatRegion1对话框,点确定。如图 29
图 29 定义重复区域1
图 30 新建重复区域对话框
用同样方法在页脚处设置重复区域2。
导航栏也定义为重复区域3、4。
定义可编辑区域:我们是主要编辑区在第三。用同样方法把它设置为可编辑区。
将光标定在第三行,然后选择菜单“插入”| “模板对象”| 指向“可编辑区域”单击鼠标左键,这时会弹出“新建可编辑区域”对话框,点“确定”。如图
图 31 新建可编辑区域对话框
完成后的模板,如图 32

dreamweaver制作树状目录 相关内容

2009-04-22 13:50:00 bydxyj 阅读数 547

来源:http://www.68design.net/Web-Guide/Dreamweaver/2476-1.html

      弹出菜单在网页制作中是一种非常常用的菜单方式,这种菜单不但制作简单,而且效果也很好。   
  效果说明 本实例所要完成的效果是当鼠标移动到文字上时,就会弹出一个漂亮的菜单,如图 17-1 和图 17-2 所示。  

  创作思想 本实例首先在网页中输入一行文字,并对文字做一个特殊的超链接,然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单。  

  操作步骤  

  ( 1 )输入文字并设置超链接。在网页中输入文字,因为单独的文本文字是无法添加行为的,按照 Dreamweaver 中的约定,将文字的超链接设置为“ javascript:; ”才能够添加行为。所以将文字的超链接设为“ javascript:; ”,并执行【显示弹出式菜单】行为,如图 17-3 所示。  
按此在新窗口浏览图片

按此在新窗口浏览图片

按此在新窗口浏览图片

  ( 2 )设置菜单项和子菜单项,并为菜单设置超链接,然后安排好各个菜单的次序,如图 17-4 所示。

按此在新窗口浏览图片

( 3 )设置页面元素。将菜单设置为垂直菜单,并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态,如图 17-5 所示。

按此在新窗口浏览图片

  ( 4 )设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间,以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮,如图 17-6 所示。

按此在新窗口浏览图片

  注意:【菜单延迟】中时间的单位是毫秒( ms ), 1000 毫秒等于 1 秒,在设置时注意换算。  

  ( 5 )设置的 x 轴和 y 轴参数。在【位置】标签选项中设置弹出菜单的 x 轴和 y 轴参数,这两个参数表示弹出菜单左上角到网页左上角的距离,如图 17-7 所示。

按此在新窗口浏览图片

  ( 6 )保存网页文件,然后在浏览器中打开该网页,将鼠标光标移动到文字上方时即可看到有菜单弹出,本实例操作完毕。通过 Dreamweaver ,可以快速制作出以往只能用复杂代码才能实现的弹出菜单,这样可以实现复杂菜单的弹出和收缩,方便使用又能让页面美观、整洁。

dreamweaver制作树状目录 相关内容

2005-07-28 12:06:00 icerock2000 阅读数 1453
在总目录的前方有一个“+",一按这个“+",即可显示其下子目录,“+"即变成“-",一按“-",即可隐藏其下子目录,就像在资源管理器中一样,这需要做二个页面,一个页面写上总目录,一个页面写上子目录。把总目录的页面上的“+”号设置成超级链接,在“Link”栏中添上子目录页面的地址。把子目录的页面上的“-”号设置成超级链接,在“Link”栏中添上总目录页面的地址。具体效果可看一看Dreamweaver的帮助文档,在这帮助文档里也是按一下总目录,弹出子目录,按下子目录上的总目录则返回到总目录,只是没用“+”、“-”表示而已。你再看一下该文档的源代码就一目了然了。

dreamweaver制作树状目录 相关内容

2009-03-08 18:22:00 possibleonline 阅读数 299

1.插入层

2.往层加入要显示内容

3.打开时间轴

4.记录路径

5.随便托动层

6.OK,运行

dreamweaver制作树状目录 相关内容

没有更多推荐了,返回首页