大家好,今天我们来学习一门实用而且成就感强的专题–Dreamweaver,就像它的标志图标一样,我们今后可以称它DW。关于DW的知识多且细,市面上的介绍寥寥无几,而且缺少系统性。这个专题我们重点针对DW在网页开发的基础实战功能对DW的应用进行讲解。本文我们先介绍一下Dreamweaver是什么?Dreamweaver主要优势有哪些?DW各版本简介及推荐?DW主干学习路线?
Adobe公司在网页设计的积淀就好比PC界的MicroSoft,汽车圈的Tesla。所以,现在这个在我们面前的Dreamweaver早就已经具备了强大的功能,覆盖你的网页设计的方方面面。或许有同学会觉得,网页设计这个词和时髦的互联网公司里讲的前端/后端工程师比起来是十分老旧?不!Dreamweaver能做目前前端工程师手下的大部分工作,而且绝对能够给你带来眼前一亮出色表现。
我们先来看下官网对Dreamweaver是如何介绍的:
AdobeDreamweaver为网页设计软件提供了一套直观的可视界面,供您创建和编辑HTML网站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版面。在发布前使用多屏幕预览审阅设计。使用更新的“实时视图”和“多屏预览”面板高效创建和测试跨平台、跨浏览器的HTML5内容。利用增强的jQuery和PhoneGap支持构建更出色的移动应用程序。—Adobe公司中国区官网
Tips:这里的HTML5主要指第五代HTML标准,可以理解为更高级的HTML语言。
看过了DW官网的介绍,简单说就是Dreamweaver能够适应各种不同的电脑系统。在DW使用过程中,你看到的就是你制作好的网页,不用编写HTML代码,不用做繁杂的代码检查,只需要发布前使用预览功能检查一下是不是自己心中理想的效果效果就可以。DW还能帮助我们做出现在非常时髦的移动程序—各种APP。
DreamWearver是Dream(梦想)和weaver(编织工)两个单词的组合,直译为梦想编织人。为什么叫梦想编织人?因为有了Dreamweaver,我们不必掌握HTML,CSS,Javascript(一些构成网页的语言)等程序开发技能就可以设计出界面美观大方,交互合理的网页。Dreamweaver贯穿了网页设计,发布,管理的方方面面,描述为网页开发的一站式服务一点儿也不过分。
以上这些群体,都是Dreamweaver最好的受益者,经过各自行业的打磨,目前在现实生活中占比都很高。尤其越来越火的电商,已经有专门为电商从业群体开设的Dreamweaver课程。电商网站精美的网页有很多都是出自Dreamweaver之手。
通过访问Adobe公司中国区官网我们可以看到目前的DW主要有3个突出优势:
借助经过简化的智能编码引擎,轻松地创建、编码和管理动态网站。访问代码提示,用于快速了解并编辑HTML、CSS和其他Web标准。使用视觉辅助功能减少错误并提高网站开发速度。—Adobe公司中国区官网
这里的意思说直白就是:Dreamweaver编写代码功能强大,而且提示代码智能,支持的格式丰富。所见即所得的一个软件,大大提升了你制作网站的成本和速度。
利用起始模板更快地启动并运行您的网站,您可以通过自定义这些模板来构建HTML电子邮件、“关于”页面、博客、电子商务页面、新闻稿和作品集。—Adobe公司中国区官网
这里的意思是说Dreamweaver这个软件本身提供了很多“成熟例子”供你选择使用。这些“例子”不但设计成熟,而且能适应你常见的用途,比如网页、博客、电商网站、新闻页面等。这一点好用到甚至你在刚开始学习Dreamweaver的时候,就能挥手间创造出市面上很成熟的页面,毕竟Dreamweaver自带的模版都是符合当下主流设计风格的网页。
构建可以自动调整以适应任何屏幕尺寸的响应式网站。实时预览网站并进行编辑,确保在进行发布之前网页的外观和工作方式均符合您的需求。—Adobe公司中国区官网
响应式网站的意思是网页可以在各种手机,平板,电脑屏幕上很好地显示。试想一下,现在社会上那么多种尺寸的手机屏幕,如果每一个都要把网页重新做一遍,那得是多大的工作量?也不符合我们使用Dreamweaver便捷高效的初衷。Dreamweaver的出现恰好替我们解决了这一点,它非常智能地在各个设备上调整自己做出来的网页。也就是说,Dreamweaver做出来的网页能够轻松在所有人的手机显示出你预定的样子,为了适应你的手机/平板/电脑它Dreamweaver会智能地自我调整。
使用过Adobe公司其他明星产品的同学会感受到,Adobe公司在创意领域一直独领风骚。DW就是它在网页制作方面的实力证明。Dreamweaver把原来只有代码工程师做的工作简单化,让没有基础的同学也能很快上手掌握,而且功能涵盖一应俱全。从这一点上讲,Dreamweaver胜过了所有同类型竞品软件。
Dreamweaver发源于Macromedia公司,后来被Adobe公司收购。
日常应用中比较常见的版本是DreamweaverCS6,这是一个Dreamweaver经典版本。因为在2013年之前,Adobe公司对Dreamweaver的命名都是以CS加数字作为软件名称。在2013年Adobe推出了Adobe创意协作云平台(CreativeCloud=CC),因此之后的Dreamweaver都改为以DreamweaverCC加发布年份来命名了。
除了DreamweaverCS6之外,目前主流的Dreamweaver版本还包括:
Tips:本教程中会使用DreamweaverCC2018版本来进行演示讲解。
按照Dreamweaver官网的提供的信息,可以把Dreamweaver的学习科学地划分为11个阶段,每个过程对应一系列知识点,大家可以跟着这11个过程来获取学习中的重点: