首页 > 教程 > 关键词  > Dreamweaver最新资讯  > 正文

分析:Dreamweaver网页制作秘诀之一

2007-04-05 10:30 · 稿源:中关村在线

  一、背景分析

  对想要在视觉化环境下制作复杂网页的专业网页制作者来说,Dreamweaver已经渐渐在网页编辑工具中展露头角,成为专业人士编写网页的最佳选择。

  根据Macromedia公司的调查,Dreamweaver目前已累积有超过七十万名的使用者,占有率在网页编辑工具中居冠,像“Adobe GoLive”和“NetObjects Fusion”等竞争者都被遥遥抛在后头。因此一般地预估Dreamweaver的使用群体将会持续的增加。

  在这种势不可挡的普及率席卷之下,可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全。在这次我们的介绍中,就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能。

  事不宜迟,以下我们介绍如何善用Dreamweaver里的一些功能。以下密技共有十二项,可分成四个主题。分别是:设计网页页面(Dreamweaver里具有弹性的页面设计功能)、搭配Macromedia其它产品一起使用Dreamweaver(制作动画和图片不求人)、自订使用界面(享受个性化的使用经验)和最后的加入Dreamweaver扩充程序(在网页中载入扩充高级功能 )。

  二、设计网页页面的秘诀

  不管你是要运用HTML原始语法逐字逐字来编写网页,或是运用标准化窗口来进行网页的视觉设计,以下的小秘诀都可以派得上用场。

  秘诀1:让网页页面大小更有弹性

  有些网页开发者称以下要介绍的这种技巧为“liquid”,在这儿则把这种技巧叫做是“弹性延伸的技巧”。这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此如果窗口过大就不会有空白处;窗口过小边缘就不会跑出上下移动的拉条。

  其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是如果是网页里用到很多不同的框架及表格,网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定宽度的框架,和GIF图片作为间隔来设计网页页面,这样一来不论是用Internet Explorer或是用Netscape Navigator,页面大小都会固定而不会跑掉。用Dreamweaver 4.0可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢?

  具体做法:用工具面板(Object palette)上的按钮打开网页,并且转换到“格式查看”(Layout vIEw)。这时可以看到文字方块的栏度,每一栏的方框上方中间还有一个小小的下拉式箭头,点选想要设置弹性显示的栏上方的小箭头,接着选择“将栏设为弹性显示”(Make Column Autostretch)。(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线,而不是原本表示栏度的数字。

  Dreamweaver会自动制作出固定版面的空格图片,这个空白图片是以栏上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设置。(在第一次增加空白图片时会跳出一个对话框问你是否要使用内置图片,为求效果,我们建议你让Dreamweaver自动产生一个,不然就不用使用空白图片来填充版面。)

  秘诀2:创造个人调色板

  Dreamweaver新的“Assets panel”(属性控制面板)是一种可以在编辑网站时根据文件格式,例如图片、样式等来管理文件的新工具。

  具体做法:当你定义新站点时(点选Site New Site),所有类型的物体会自动增加到“Asset panel” 里的适当表框中。这个新加入的“Assets panel”属性控制面板里也有颜色框,储存你网站里所用到的所有色彩,包含文字的颜色、背景的颜色,以及超链接的颜色等。

  这是一个为使用者量身定做的网站导航颜色盘。只要启动“Assets panel”(先选 “Window”再点“Assets”),接着点左方那个小小的色彩卷轴,就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时,画面上会出现这种颜色的十六进位值的色彩淡浓度,和三原色对照码(RGB)。

  如果想将调色板工具栏缩小一点,甚至可以仅加入某些颜色到调色板的“我的最爱”里。只需将选取的颜色反白、点选窗口里一个叫做“新增到我的最爱的”按钮(最下方靠右的按钮),就可以完成了。
  
  秘诀3:制作弹出式菜单导航系统
  
  原本要制作弹出式菜单导航系统(Pop-up Menu Navigation System)要用到很多的一些JavaScript的语法和技巧,但是如果你有Dreamweaver、Fireworks Studio,即可轻轻松松快速办到。

  具体做法:首先在“Fireworks”里开始,选择某个图片,然后在“Set Pop-Up Menu”的对话框里点选“ Insert  Pop-Up Menu”,你可以输入项目(items)的名称并点“PLUS”(加入)按钮,来新增该项目。你可以继续在跳出来的信息框里进行细项设置,例如设置该项目所要用的文字及超链接,当然也可以新增子菜单,并重新安排下一层的设置。

  完成时,点选“Next”(下一步),继续设置各种参数值,例如颜色、字体等等。这时菜单完成后,既可以预览HTML语法,也可预览图象。再点“ Finish”(完成)。这时当鼠标移动到原来的图片时,会出现菜单系统的内容一览。接着将制作好的文件导出时,“Fireworks”会自动生产出所有 Dreamweaver 需要用到的HTML、JavaScript,以及图象文件。

  秘诀4:让图片动起来

  如果你同时安装有Dreamweaver、Fireworks Studio,这两种软件搭配的完美程度将使你赞不绝口。即使你不是专业的图片设计者,在设计网页时也多多少少想把一些GIF图片修改得活灵活现。Dreamweaver可以让你制作动画不求人。

  具体做法:在标准窗口里选择要进行修改的图片,然后在“Property Inspector”里点选“编辑”(Edit)。如果你安装的Dreamweaver里附有“Fireworks”,“Fireworks”就是Dreamweaver预设图片编辑器,这时图片就会自动载入到“Fireworks”。(如果仔细看,你会发现Fireworks的画面会出现“Editing From Dreamweaver”这样的文字和图样,指示你可以在Dreamweaver里进行图片编辑。)

  好了,现在在“Fireworks”里点选要编辑的图片,选择“ Modify Animate Animate Selection”。 接下来完成“Animate dialog box”里的设置,选定动画的帧数,动画移动的方向、透明度等等设置。你也可以点选“Frames”工具设置移动速度,选择“Object”面板来改变设置。

  要导出文件时,只要点选“ Optimize ”工具栏,在文件类型的地方选择“Animated GIF”。完成以后,“Fireworks”就会自动将图片以最佳化设置导出,并且自动将 GIF 图片更新,还会在Dreamweaver里将更新过的图片显示出来。点选“File Preview in Browser”,这样就可以在浏览器里预览刚刚制作完成的可爱图片。

  秘诀5:让按钮有闪动效果

  在Dreamweaver中,不用有Flashs,也可以制作有闪动效果的Flash按钮物体。Dreamweaver内置有好几个 Flash按钮物体,可以制作好几个不同形式的按钮。

  具体做法:点选“Insert Interactive Images Flash Button”就可看到有那些内置按钮。在对话框内甚至可以用鼠标指到想要使用的按钮形式,然后看看在浏览器里的效果如何。

  用鼠标指针把要用的按钮形式选定,再依顺序输入参数,例如按钮上的文字、字形、颜色、超链接等,或是自设文件名字。按下OK。接下来就会有一个“SWF”格式的文件产生,文件并会自动导入你的网页中。按一下这个做好的文件,会看到“Property Inspector”(属性明细)中会显示出文件的属性。将文件属性显示出来时,如果扩展文件属性明细表,会出现“Play”(播放),点选之后可以不用打开浏览器来预览按钮的闪动效果。

  秘诀6:制作流动文字

  在网页中增加流动文字就像增加我们刚刚介绍的Flash按钮一样简单。相同地,不用安装Flash,用 Dreamweaver提供的新功能就可以轻松办到。常用HTML语法写网页、没有互动式媒体经验的网页制作者也可以轻松制作出小巧的Flash形式的流动文字。这项新功能可以在不添加相兼容性麻烦的情况下为网页增添一些浏览上与访客的互动性。

  具体做法:点选“Insert Interactive Images Flash Text”,再将参数设置一一填入(例如要更改效果的文字、字形、字体颜色及字体大小等等)。

举报

  • 相关推荐
  • AI日报:扣子空间网页设计功能上线;阿里Wan 2.2即将上线;​OpenAI即将发布 GPT-5

    【AI日报】今日AI领域重要动态:1)Coze推出网页AI设计功能,5分钟生成网页;2)通义千问发布Qwen-MT翻译模型,支持92种语言;3)ChatGPT全面推出Agent功能;4)阿里云Wan2.2视频生成AI即将上线;5)Anthropic推出审计Agent提升AI对齐测试;6)OpenAI计划8月发布GPT-5;7)谷歌发布无代码AI应用开发工具Opal;8)南洋理工与上海AI Lab推出PhysX-3D项目,为3D模型添加物理属性;9)快手开源KAT-V1大模型,40B版本性能接近DeepSeek-R1;10)讯飞星火X1升级版上线,在多语言和语音处理方面显著提升。(140字)

  • 跨境卖家如何用AI“偷懒”还多赚钱?揭秘卖家精灵AI功能矩阵的躺赢秘诀

    文章介绍了AI在跨境电商运营中的重要作用,重点推荐了"卖家精灵"AI工具。该工具提供三大核心功能:1)AI市场洞察,3分钟生成包含市场规模、竞争格局等9大模块的深度分析报告;2)AI-Keepa分析,自动识别竞品价格策略、断货情况等关键数据;3)AI评论分析,从海量评论中提炼6大维度消费者需求。此外还有AI Listing生成器,能快速产出高转化率的产品描述。这些AI工具能帮助卖家节省时间,将精力集中在发现商机、制定策略等高价值事务上。目前注册用户每天可免费使用10次分析功能。

  • B站支持绑定Steam:Steam账号绑定功能上线

    近日,哔哩哔哩(B站)官方账号“小站助手”宣布推出Steam账号绑定服务,目前该功能处于内测阶段,用户可通过加入任意B站“小站”社区获取测试权限。未加入小站的用户完成加入流程后,即可在App端进入小站页面,通过右上角侧边栏选择“我的游戏数据”开启绑定操作,网页端同步支持该功能。

  • 微信对讲机上热搜:微信能自动发消息了 喊over over自动发消息

    今日上午,"微信对讲机"空降微博热搜榜首,网友纷纷化身"数字特工",用"over over"暗号解锁社交新玩法。这项正在灰度测试的语音交互功能,通过模拟传统对讲机操作模式,在年轻用户群体中引发传播热潮。 据参与内测的用户演示,在微信聊天界面长按语音输入按钮约 2 秒,界面即切换为醒目的绿色对讲模式。此时用户说出的话语会实时转化为文字显示

  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • 击剑世界冠军的清凉秘诀!孙一文助阵至本清润经典茶馆

    7月19日,击剑世界冠军孙一文现身广州万菱汇,助阵至本清润"经典茶馆"主题活动。作为品牌特邀嘉宾,孙一文现场分享夏日清凉秘诀,示范击剑动作并与观众互动。她特别推荐至本清润菊花茶,称其清凉回甘适合夏季饮用。活动现场设置四大体验区:经典游戏区唤起80、90后童年回忆,漆扇DIY吸引年轻人,试饮区供品尝招牌菊花茶,拍照打卡区成为社交达人的热门选择。孙一文表示,至本清润选用优质原料保留传统滋味,为消费者带来熟悉信赖感。此次活动既呈现经典滋味与现代生活方式的创新结合,也展现了品牌的价值主张。

  • 分析:Dreamweaver网页制作秘诀之二

    不管你是要运用HTML原始语法逐字逐字来编写网页,或是运用标准化窗口来进行网页的视觉设计,以下的小秘诀都可以派得上用场。

  • 硬刚小米SU7 何小鹏:全新小鹏P7一定不便宜 是Dream Car

    全新小鹏P7明晚就要正式首秀了。 何小鹏今晚通过微博释放重磅信号:全新小鹏P7绝非走低价路线,一定不会是部分鹏友期待的那种便宜”。 到了这个档位配置,它的确不太可能是为所有人打造的一辆车,它应该是极致的科技理想主义者的Dream Car。 在他看来,全新P7的使命是探索未来科技边界,既要成为技术集大成者,也要作为时尚经典潮品存在。

  • steam账号注册教程——全网最新最全的方法

    本文介绍了Steam平台注册及下载安装的完整教程。主要内容包括:1.使用迅 游加速器优化网络环境,解决注册过程中的错误提示;2.详细说明客户端下载安装步骤,强调要选择简体中文和避开中文路径;3.分步指导账户注册流程,包括邮箱验证、地区选择和人机验证;4.提醒全程使用加速器保持网络稳定,避免注册中断。教程旨在帮助新手玩家顺利注册Steam账号并下载游戏,提升�

  • 网友质疑网红“秀才”复出 曾被誉为“中老年妇女收割机”遭抖音封禁

    近日,2023年被封禁的千万抖音网红秀才”疑似借壳复出”,延续以往相似的风格在他人账号出镜,合拍多条视频总获赞量超百万。 其中在7月23日,一个名为王老四”的抖音号在发的视频中表示:与秀才老师合拍了一下”。 而面对借壳复出”质疑,王老四”澄清称秀才是出差来玩的朋友”,合拍仅为搞笑短视频”。 争议发酵后,该账号迅速删除所有疑似秀才出镜的视频。 �

热文

  • 3 天
  • 7天