1、灵活运用样式 熟悉网页设计
![](/icons/49802de.gif)
网友就知道
![](/icons/49802dou.gif)
![](/icons/49802diaoyong.gif)
Style
![](/icons/49802de.gif)
思路方法很多
![](/icons/49802dou.gif)
我们可以单击鼠标右键选择Custon Style来
![](/icons/49802diaoyong.gif)
Style标准
![](/icons/49802dou.gif)
也可以在状态栏中
![](/icons/49802de.gif)
元素列表上单击右键来
![](/icons/49802diaoyong.gif)
Style
![](/icons/49802dou2.gif)
虽然区别
![](/icons/49802de.gif)
思路方法达到
![](/icons/49802de.gif)
效果看似
![](/icons/49802yi.gif)
样
![](/icons/49802dou.gif)
但实际上产生
![](/icons/49802de.gif)
HTML代码则完全区别
![](/icons/49802dou2.gif)
比如用Custon Style来
![](/icons/49802diaoyong.gif)
Style标准
![](/icons/49802dou.gif)
在网页代码中就生成
![](/icons/49802yi.gif)
个〈span〉标签
![](/icons/49802dou.gif)
这样
![](/icons/49802de.gif)
标签
![](/icons/49802yi.gif)
多就会使文件十分臃肿而且影响浏览器
![](/icons/49802de.gif)
解析速度
![](/icons/49802dou.gif)
所以我们应尽量使用状态栏中
![](/icons/49802de.gif)
元素列表来
![](/icons/49802diaoyong.gif)
Style
2、活用Format Table命令
在复杂
![](/icons/49802de.gif)
网页设计中
![](/icons/49802dou.gif)
表格
![](/icons/49802de.gif)
应用是最多
![](/icons/49802de.gif)
![](/icons/49802dou.gif)
![](/icons/49802yinwei.gif)
利用表格可以自由地控制文本和图象在网页上出现
![](/icons/49802de.gif)
具体位置
![](/icons/49802dou.gif)
从而使整个网页看上去紧凑统
![](/icons/49802yi.gif)
![](/icons/49802dou2.gif)
Dreamweaver在这方面也不甘落后
![](/icons/49802dou.gif)
我们可以使用其中
![](/icons/49802de.gif)
“Format Table”(格式化表格)命令来快速地对表格应用预先设计好
![](/icons/49802de.gif)
样式
![](/icons/49802dou2.gif)
要使用预先设计好
![](/icons/49802de.gif)
样式
![](/icons/49802dou.gif)
先将光标置于表格
![](/icons/49802de.gif)
任意
![](/icons/49802yi.gif)
个单元格内
![](/icons/49802dou.gif)
再选择“Command”→“Format Table”命令
![](/icons/49802dou.gif)
在随后出现
![](/icons/49802de.gif)
对话框中
![](/icons/49802dou.gif)
从左边
![](/icons/49802de.gif)
列表中选择
![](/icons/49802yi.gif)
个设计方案
![](/icons/49802dou2.gif)
按“Apply” 键来查看效果
![](/icons/49802dou.gif)
如果不满意
![](/icons/49802de.gif)
话
![](/icons/49802dou.gif)
还可以重新设置或者修改部分参数
![](/icons/49802de.gif)
值
![](/icons/49802dou.gif)
如边界粗细
![](/icons/49802dou.gif)
背景颜色等等
3、同时链接到两个网页
我们都知道超级链接
![](/icons/49802yi.gif)
次只能连到
![](/icons/49802yi.gif)
个页面
![](/icons/49802dou2.gif)
如果我们要想
![](/icons/49802yi.gif)
次在区别
![](/icons/49802de.gif)
框架页中打开文档
![](/icons/49802dou.gif)
可以使用“Go To URL”javascript 行为
![](/icons/49802dou2.gif)
打开
![](/icons/49802yi.gif)
个有框架
![](/icons/49802de.gif)
网页
![](/icons/49802dou.gif)
选择文字或图象
![](/icons/49802dou.gif)
然后从行为面板中选择“Go To URL”
![](/icons/49802dou2.gif)
我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用
![](/icons/49802de.gif)
框架
![](/icons/49802dou2.gif)
选择其中
![](/icons/49802yi.gif)
个我们想链接
![](/icons/49802de.gif)
框架并输入相应
![](/icons/49802de.gif)
URL后再选择另
![](/icons/49802yi.gif)
个框架并输入另
![](/icons/49802yi.gif)
个URL
4、不给文件起中文名称
大家在制作好了网页后
![](/icons/49802dou.gif)
通常会给网页起
![](/icons/49802yi.gif)
个具有代表性
![](/icons/49802de.gif)
中文名称
![](/icons/49802dou.gif)
![](/icons/49802yi.gif)
来能使人
![](/icons/49802yi.gif)
看文件名就能大概了解文件所包含
![](/icons/49802de.gif)
内容
![](/icons/49802dou.gif)
2来能够方便各个超级链接的间
![](/icons/49802de.gif)
相互
![](/icons/49802diaoyong.gif)
![](/icons/49802dou2.gif)
但如果你在Dreamweaver中这样做
![](/icons/49802dou.gif)
就会发现Dreamweaver对中文文件名支持得不是太好
![](/icons/49802dou.gif)
经常会有页面
![](/icons/49802diaoyong.gif)
不正确
![](/icons/49802de.gif)
现象发生
![](/icons/49802dou.gif)
所以我们以后在Dreamweaver中保存网页
![](/icons/49802de.gif)
时候
![](/icons/49802dou.gif)
尽量用英文或者数字作为文件名称
![](/icons/49802dou.gif)
这样就可以避免上面
![](/icons/49802de.gif)
出错现象
5、巧妙设置字体分辨率
我们在制作网页
![](/icons/49802de.gif)
时候
![](/icons/49802dou.gif)
经常有这种体会
![](/icons/49802dou.gif)
那就是制作好
![](/icons/49802de.gif)
网页在本地计算机上浏览时很正常
![](/icons/49802dou.gif)
但在另外
![](/icons/49802yi.gif)
台计算机上浏览时发现原本漂亮
![](/icons/49802de.gif)
网页变得歪歪扭扭了
![](/icons/49802dou.gif)
这是为什么呢?原来各个计算机
![](/icons/49802de.gif)
分辨率要使你
![](/icons/49802de.gif)
主页在区别
![](/icons/49802de.gif)
分辨率下都能正常显示
![](/icons/49802dou.gif)
在 Dreamweaver中得到了较好
![](/icons/49802de.gif)
解决
![](/icons/49802dou2.gif)
在文档窗口
![](/icons/49802de.gif)
右下角
![](/icons/49802dou.gif)
Dreamweaver 显示当前文档被设计成
![](/icons/49802de.gif)
分辨率大小
![](/icons/49802dou2.gif)
单击哪个数字
![](/icons/49802dou.gif)
在弹出式菜单中可以为当前
![](/icons/49802de.gif)
页面指定显示分辨率
![](/icons/49802dou.gif)
通过修改可以使你
![](/icons/49802de.gif)
主页更具灵活性
![](/icons/49802dou2.gif)
使区别分辨率
![](/icons/49802de.gif)
显示器都能较好地显示
![](/icons/49802dou2.gif)
6、巧妙隐藏标签
如果在网页中插入了不可见
![](/icons/49802de.gif)
元素时
![](/icons/49802dou.gif)
Dreamweaver会自动在页面上添加
![](/icons/49802yi.gif)
个和的相应
![](/icons/49802de.gif)
元素标签
![](/icons/49802dou.gif)
以便于我们选择不可见元素
![](/icons/49802dou2.gif)
但这并不全是件好事
![](/icons/49802dou.gif)
比如我们在
![](/icons/49802yi.gif)
个有很多层
![](/icons/49802de.gif)
页面中
![](/icons/49802de.gif)
第
![](/icons/49802yi.gif)
行便插入
![](/icons/49802yi.gif)
个表格
![](/icons/49802dou.gif)
就会发现由于首行排列了太多
![](/icons/49802de.gif)
层元素标签而使得表格自动退到了页面
![](/icons/49802de.gif)
第 2行
![](/icons/49802dou.gif)
虽然在浏览时并不影响效果
![](/icons/49802dou.gif)
但这确确实实会阻碍我们
![](/icons/49802de.gif)
工作
![](/icons/49802dou2.gif)
所以当我们觉得某个元素标签碍手碍脚时
![](/icons/49802dou.gif)
就索性将的屏蔽掉
![](/icons/49802dou2.gif)
思路方法是按Ctrl+U打开Preferences面板
![](/icons/49802dou.gif)
在Category中选中Invisibel Elements
![](/icons/49802dou.gif)
在面板
![](/icons/49802de.gif)
右边将会出现所有
![](/icons/49802de.gif)
元素标签
![](/icons/49802dou2.gif)
只要将不需要
![](/icons/49802de.gif)
元素标签前
![](/icons/49802de.gif)
勾去掉
![](/icons/49802dou.gif)
以后它就保证不会再出现了
7、善用拖放窍门技巧
我们在使用Dreamweaver编辑网页
![](/icons/49802de.gif)
时候
![](/icons/49802dou.gif)
经常需要插入
![](/icons/49802yi.gif)
些图象什么
![](/icons/49802de.gif)
![](/icons/49802dou.gif)
假设要插入
![](/icons/49802de.gif)
图象很多
![](/icons/49802dou.gif)
按照常规思路方法来操作就显得非常麻烦
![](/icons/49802dou2.gif)
我们可以利用拖放窍门技巧来很好地解决这个问题
![](/icons/49802dou2.gif)
首先我们把Dreamweaver
![](/icons/49802de.gif)
操作窗口变成活动窗口
![](/icons/49802dou.gif)
以腾出空间来显示Explorer窗口
![](/icons/49802dou.gif)
找到要插入
![](/icons/49802de.gif)
图象文件后
![](/icons/49802dou.gif)
把它们
![](/icons/49802yi.gif)
![](/icons/49802yi.gif)
用鼠标拖动到网页
![](/icons/49802de.gif)
适当部位
![](/icons/49802dou.gif)
Dreamweaver将自动把这些图象
![](/icons/49802de.gif)
url添加到文件
![](/icons/49802de.gif)
HTML代码中
![](/icons/49802dou.gif)
当然这里要求被拖动
![](/icons/49802de.gif)
图象文件必须是g
![](/icons/49802if.gif)
、jpg等web图象格式
![](/icons/49802de.gif)
文件
![](/icons/49802dou2.gif)
对于已经在网页中
![](/icons/49802de.gif)
图象也是
![](/icons/49802yi.gif)
样
![](/icons/49802dou.gif)
直接拖过来就可以了
![](/icons/49802dou2.gif)
但如果被拖动
![](/icons/49802de.gif)
图象上有超级链接
![](/icons/49802dou.gif)
就不可以再使用拖动技术了
![](/icons/49802dou.gif)
![](/icons/49802yinwei.gif)
那时拖过来
![](/icons/49802de.gif)
仅仅是超级链接地址
8、自动设置更新时间
我们知道
![](/icons/49802yi.gif)
个网页要想获得更多
![](/icons/49802de.gif)
回头率
![](/icons/49802dou.gif)
![](/icons/49802yi.gif)
个很重要
![](/icons/49802de.gif)
![](/icons/49802yi.gif)
条就是要不断更新
![](/icons/49802dou2.gif)
但对于我们这些个人网页来说
![](/icons/49802dou.gif)
要天天及时更新恐怕不是很容易
![](/icons/49802de.gif)
事情
![](/icons/49802dou2.gif)
因此
![](/icons/49802dou.gif)
我们希望网页能自动更新
![](/icons/49802dou.gif)
下面笔者就提供
![](/icons/49802yi.gif)
个能自动更新修改时间
![](/icons/49802de.gif)
源代码
![](/icons/49802dou.gif)
我们只要把这段源代码添加到…< /BODY>的间就能实现更新时间
![](/icons/49802de.gif)
目
![](/icons/49802de.gif)
了:
< Script Language=\"JavaScript\"> < /script>; 2是用鼠标依次单击Dreamweaver中
![](/icons/49802de.gif)
Text/Custom Style/Edit/Style Sheet/New/Re
![](/icons/49802define.gif)
HTML Tag
![](/icons/49802dou.gif)
并从中选择a
![](/icons/49802dou.gif)
然后在decoration中选中none
![](/icons/49802dou.gif)
最后单击确定就成功了
![](/icons/49802dou2.gif)
9、巧妙复制文字
在几个区别
![](/icons/49802de.gif)
应用
![](/icons/49802chengxu.gif)
中间相互复制文字
![](/icons/49802dou.gif)
是我们在实际工作中可能要常做
![](/icons/49802de.gif)
事情
![](/icons/49802dou2.gif)
但是
![](/icons/49802dou.gif)
如果我们从Dreamweaver中复制编辑区中
![](/icons/49802de.gif)
文字到另外
![](/icons/49802yi.gif)
个应用
![](/icons/49802chengxu.gif)
![](/icons/49802de.gif)
时候
![](/icons/49802dou.gif)
HTML代码和文字将
![](/icons/49802yi.gif)
起被复制过去了
![](/icons/49802dou.gif)
那么我们该如何才能只把编辑区中
![](/icons/49802de.gif)
文字复制下来呢?我们知道
![](/icons/49802dou.gif)
通常复制时都用快捷键 Ctrl - C 来操作
![](/icons/49802dou.gif)
如果我们在复制
![](/icons/49802de.gif)
时候多按
![](/icons/49802yi.gif)
个C键
![](/icons/49802dou.gif)
那么Dreamweaver将只会复制选中
![](/icons/49802de.gif)
文字了
10、善用快捷键
为了提高操作
![](/icons/49802de.gif)
效率
![](/icons/49802dou.gif)
我们可以在Dreamweaver中使用快捷键
![](/icons/49802dou.gif)
例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式
![](/icons/49802dou.gif)
也可以使用以下
![](/icons/49802yi.gif)
些键盘快捷键来为选中
![](/icons/49802de.gif)
文本应用HTML格式:Ctrl-0: 无格式 Ctrl-T: 段落 Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6
11、自动关闭网页
如果我们希望自己
![](/icons/49802de.gif)
网页在指定
![](/icons/49802de.gif)
时间内能自动关闭
![](/icons/49802dou.gif)
不妨在网页源代码中
![](/icons/49802de.gif)
标签后面加入如下代码: < script LANGUAGE=\"JavaScript\"> < /script>其中代码中
![](/icons/49802de.gif)
3000表示3秒钟
![](/icons/49802dou.gif)
它是以毫秒为单位
![](/icons/49802de.gif)
12、巧妙设置对象名称
我们在用Dreamweaver来制作非常复杂
![](/icons/49802de.gif)
效果时
![](/icons/49802dou.gif)
有可能需要经常重复地使用某
![](/icons/49802yi.gif)
个或者多个对象
![](/icons/49802dou.gif)
例如我们经常需要定位某个特定
![](/icons/49802de.gif)
表格、图象等
![](/icons/49802dou.gif)
如果我们没有给某
![](/icons/49802yi.gif)
个网页中
![](/icons/49802de.gif)
多个对象取名
![](/icons/49802de.gif)
话
![](/icons/49802dou.gif)
那么在重复应用这些对象
![](/icons/49802de.gif)
时候
![](/icons/49802dou.gif)
可能很麻烦或者容易出错
![](/icons/49802dou2.gif)
为了能够方便
![](/icons/49802diaoyong.gif)
这些对象
![](/icons/49802dou.gif)
我们应该在每创建
![](/icons/49802yi.gif)
个新
![](/icons/49802de.gif)
对象时
![](/icons/49802dou.gif)
都记得给它取
![](/icons/49802yi.gif)
个有代表性而且比较容易记忆
![](/icons/49802de.gif)
名称
![](/icons/49802dou2.gif)
在给这些对象命名时
![](/icons/49802dou.gif)
我们可以通过对象
![](/icons/49802de.gif)
“属性”面板来操作就行了
13、为图象链接增加动态效果
有时我们为了要达到
![](/icons/49802yi.gif)
种逼真
![](/icons/49802de.gif)
效果
![](/icons/49802dou.gif)
希望鼠标移动到某个链接上时能有动感产生
![](/icons/49802dou2.gif)
使用Dreamweaver可以很容易实现这种效果
![](/icons/49802dou2.gif)
设计时
![](/icons/49802dou.gif)
我们首先需要准备两幅图象
![](/icons/49802dou.gif)
第
![](/icons/49802yi.gif)
幅是原始图象
![](/icons/49802dou.gif)
第 2幅是鼠标移动上去后
![](/icons/49802de.gif)
图象
![](/icons/49802dou2.gif)
接着用鼠标单击第
![](/icons/49802yi.gif)
幅图
![](/icons/49802dou.gif)
在属性面板中
![](/icons/49802de.gif)
链接栏中填上要链接
![](/icons/49802de.gif)
文件
![](/icons/49802dou.gif)
然后单击键盘上
![](/icons/49802de.gif)
F8键
![](/icons/49802dou.gif)
在弹出
![](/icons/49802de.gif)
Behaviors窗口中单击“+”号
![](/icons/49802dou.gif)
随后选择“swap image”
![](/icons/49802dou.gif)
在接着出现
![](/icons/49802de.gif)
窗口中选择第 2幅图象
![](/icons/49802dou.gif)
最后单击确定就可以了
![](/icons/49802dou2.gif)
转自:动态网站WebSite制作指南 | www.knowsky.com
Tags:
延伸阅读
最新评论