上海麻将小游戏2|哈灵上海麻将辅助2018最新版功能
技能学历提升
400-650-7353

精品课程

您所在的位置:首页 > 学院动态 > IT图书:《中公版·实用Web前端开发:零基础学Dreamweaver》精彩书摘

IT图书:《中公版·实用Web前端开发:零基础学Dreamweaver》精彩书摘

  • 发布: 优就业it培训
  • 来源:优就业
  • 2017-10-26 13:51:32
  • 阅读()
  • 分享
  • 手机端入口

《中公版·实用Web前端开发:零基础学Dreamweaver》主要针对网页制作领域的初学者,从Dreamweaver工作界面开始介绍,逐步深入,以综合实例?#27493;?#32467;尾。具体内容包括DreamweaverCC入门、站点的创建与管理、HTML基础知识、CSS样式、DIV+CSS网页布局、文字和段落等在网页中的应用、使用表格布局网页、创建超链接、使用图片修饰网页、创建多媒体对象、表单应用、模板和库等的应用、使用行为创建网页特效、网站的发布与推广、综合实例。同时,本书每一章都配有二维码视频进行重难点?#27493;猓?#21147;求让读者轻松掌握并学以致用。

IT图书:《中公版·实用Web前端开发:零基础学Dreamweaver》精彩书摘

第1章DreamweaverCC入门

DreamweaverCC是Adobe公?#23601;?#20986;的一款拥有可视化编辑界面的网页制作与管理软件的最新版本,其提供了强大的可视化布局工具、应用开发功能和代码编辑支持,?#32929;?#35745;和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。本章将带领读者认识DreamweaverCC。

1.1DreamweaverCC功能概述

DreamweaverCC使用所见即所得的接口,亦有HTML(HyperTextMarkupLanguage,超文本标记语言)编辑的功能,其目前有Mac和Windows系统的版本。

DreamweaverCC提供了功能强大的站点管理工具,通过它可以轻松实现站点名称及所在路径定义、远程服务器连接、版本控制等功能,并且可以在这个基础上实现文件管理等功能。

1.1.1主要功能

DreamweaverCC是一款功能强大的可视化网页编辑与管理软件。利用它,不仅可以轻松地创建跨?#25945;?#21644;跨浏览器的页面,还可以直接创建具有动态效果的网页而不用自己编写?#21019;?#30721;。DreamweaverCC最主要的优势在于能够进行多任务工作,并?#20197;?#25805;作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式,重新排列面板和面板组,自定义工作区。

1.1.2新增功能

DreamweaverCC包含新增功能预览和新功能操作视频,视频?#27493;?#20102;新功能的操作方法。该版本也提供选项,让用户略过预览,直接开始工作。

新功能视频解说是在用户安装或更新DreamweaverCC时,或?#22659;?#20559;好设置并重新启动DreamweaverCC时显示,也可以通过执行“帮助”>“新增功能视频”菜单命令随时查?#30784;?/p>

相较于以前的版本,DreamweaverCC新增了以下功能。

(1)实时视图编辑功能

用户可以直接在实时视图中编辑并查看设计,连接或退出浏览器的时间会更短。实时视图可以使用全新的基于Chromium的渲染引擎,因此在DreamweaverCC?#32479;?#29992;浏览器中显示的内容看起来一样。实时视图编辑功能包括快速属性检查器、元素的显示方式、现场查看属性检查器?#21462;?/p>

(2)元素快速视图

借助新的“元素快速视图”,用户可以在单个列表视图中查看HTML元素,并能轻松地重新排?#23567;?#22797;制和?#22659;?/p>

(3)使用“CSS设计器”面板

用户可以使用新的“CSS设计器”面板应用和创建基于标准的CSS布局、颜色、字体、文本以及快速响应的设计。“CSS设计器”面板的边框控制项界面增强,标签控制项可帮助用户以简单而直接的方式,设置四面边框属性,可避免同时看到所有值,以减少混淆的情形。新的面板支持从一个选择器复制样?#35762;?#36148;入另一个选择器中,用户可以复制所有样式,也可以仅复制特定样式类别,支持快速编辑文字块。用户还可以在其中指定属性的速记代码,如边界、间距、边框和边框半径。

(4)使用jQueryWidget

用户可以使用jQueryUI将Widget从“插入”面板?#25103;?#21040;Web项目以制作进度条、滑块、菜单?#25512;?#20182;有用的组件。

(5)从PSD中提取?#35797;?#21644;CSS

用户可以复制PSD复合元素中的所有或特定CSS属性,并直接将这些样式?#31243;?#21040;CSS设计器、实时视图的元素显示中,或直接?#31243;?#21040;用户的代码(CSS源或HTML文档)中,然后在PSD复合中选择的元素的CSS属性会自动填充到代码提示。如果希望使用编码,则可以使用这些代码提示将CSS属性提取到代码中。Extract提供了完整独立的解决方案,可供从PSD复合中提取样式信息和?#35797;矗?#26080;须频繁地在Photoshop和DreamweaverCC之间来回切换。

(6)使用Typekit设计高品质字体

在网页中能够使用的默认字体并不多,如果需要使用特殊的字体效果,通常都是将特殊文字制作成图片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能,在网页中可以加载Adobe提供的EdgeWeb字体,从而在网页中实现特殊字体效果。执行“修改”>“管理字体”命令,在弹出的“管理字体”对话框中选择AdobeEdgeWebFonts选项卡,即可使用Adobe提供的EdgeWeb字体。

(7)新增EdgeAnimate插入动画

在全新的DreamweaverCC中可以插入AdobeEdgeAnimate动画(OAM文件),默认情况下,用户在DreamweaverCC中插入AdobeEdgeAnimate动画后,会自动在当前站点的根目录中生成一个名为edgeanimate_assets的文件夹,将AdobeEdgeAnimate动画的提取内容放入该文件夹中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate动画,可以单击“插入”面板“媒体”选项卡中的“EdgeAnimate作品”按钮。

(8)在Behance上分享作品

用户可以在Behance上分享项目,并得到来自世界各地的即时反馈。

(9)使用CreativeCloud存储作品

用户可以通过CreativeCloud随时随地保存并访问自己的作品,也可以使用AdobeCreativeCloud,检查并安装DreamweaverCC扩展功能。

1.2DreamweaverCC的工作界面

DreamweaverCC的工作界面主要由菜单栏、自定义快捷键、工具栏、文档窗口、属性面板、面板组、文档状态栏等构成,如图1-1所示。

图1-1

1.2.1菜单栏

菜单栏包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单,如图1-2所示。菜单栏上的每个菜单选项下面都有多个子菜单,每一个菜单命令都可以进行一些相关的命令执行或属性的设置。

图1-2

1.2.2工具栏

工具栏中包含一些按钮,用来在“代码”视图、“拆分”视图以及“设计”视图、“实时视图”间进?#26143;?#25442;。此外,工具栏还包含一些与文档操作有关的常用命令和选项,如图1-3所示。

图1-3

●“代码”视图的按钮为,用于只在文档窗口中显示“代码”视图。

●同时显示“代码”视图和“设计”视图的按钮为,选中后文档窗口将拆分为“代码视图”和“设计视图”。其中文档窗口中左侧为“代码”视图,?#20063;?#20026;“设计”视图。

●“设计”视图的按钮为,用于只在文档窗口中显示“设计”视图。

●“实时视图”的按钮为,其中显示的内容与用户在浏览器中预览的效果一样。

●“在浏览器中预览/调试”按钮为,可根据用户需求,在用户选择的浏览器中进?#24615;?#35272;或调试文档。

●“标题文本框”图标为,用于为文档输入一个标题,该标题将显示在浏览器的标题栏中。如果文档已有标题,则该标题将显示于?#20204;?#22495;中。

●“文件管理”按钮为,用于对文件进行管理,如对文件进行获取、取出、上传、存回等操作。

1.2.3文档窗口

文档窗口用于显示当前的文档,包括“设计”视图、“代码”视图、“拆分”视图、“实时视图”。

●“设计”视图:是一个用于可视化页面布局、可视化编辑以及快速进行应用程序开发的设计环境。在该视图中,DreamweaverCC显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图,以在处理文档时显示动态内容。

●“代码”视图:一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

●“拆分”视图:该视图使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。

●实时视图:该视图使用户可以直接在文档窗口预览设计效果。

1.2.4“属性”面板

“属性”面板主要用于查看和更改所选对象的各种属性,每种对象都具有不同的属性。在“属性”面板中包括两种选项,一种是“HTML”选项,将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项,单击属性面板中的“CSS”选项,可以在“CSS”选项中设置各种属性。“属性”面板显示当前选定的对象或文本的属性,也可以在这里直接修改属性。如图1-4所示。

图1-4

1.2.5面板组

DreamweaverCC中的面板可以自由组合成面板组。每个面板组都可以展开和折叠,并且可以?#25512;?#20182;面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板,而不会使工作区变得混乱,如图1-5所示。

图1-5

1.2.6文档状态栏

文档状态栏可以提供与正在创建的文档有关的其他信息,如图1-6所示。

图1-6

●“标签选择器”图标为,单击图标可以选择文档中属于该标签的整个正文。图标为“元素快速视图”,用于显示环?#39057;?#21069;选定内容的标签的层次结构。通过单击该层次结构中的标签,可以选择该标签及其全部内容。

●“窗口大小”图标为,可以调整文档窗口的大小,使其达到预定义或自定义的尺寸。

1.3自定义工作区

DreamweaverCC包括两个主要的工作区,用于适应多种不同的计算机配置和各种工作流程。用户可以根据自己的喜好,调整DreamweaverCC中的编码环境,使之适合自己的习惯。如果任何预设的工作区都不能完全满足用户需要,则可以自定义工作区。

1.3.1浏览工作区

DreamweaverCC是行业领先的HTML编辑器,其功能十分强大。不论是编码人员、开发人员还是设计人员,都可以根据自己的喜好来自定义工作区,使其满足自己的需求。DreamweaverCC中用户可配置的面板和工具箱如图1-7所示。

推荐阅读

IT图书:《中公版·UI设计师养成记:零基础学Illustrator》精彩书摘

IT图书:《中公版·网络营销实战派:零基础学SEO/SEM》精彩书摘

IT图书:《中公版·UI设计师养成记:零基础学Photoshop》精彩书摘

IT图书:《中公版·网络营销实战派?#21644;?#36716;新媒体营销》精彩书摘

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

申请免费试听课程
课程干货资料
 

相关推荐

从入门到进阶
免费干货资料

进群即领(备注“500G?#20445;?/span>
进群即领
(备注“500G?#20445;?/span>
 
 
上海麻将小游戏2 炒股如何开户 上证指数000001 股票融资100万一天多少利息 股票分析报告ppt 好股票推荐2018 九江股票配资 股票推荐排名ie=utf-8 指南针炒股软件 腾讯股票行情 北京股票融资贷款 炒股如何开户 上证指数000001 股票融资100万一天多少利息 股票分析报告ppt 好股票推荐2018 九江股票配资 股票推荐排名ie=utf-8 指南针炒股软件 腾讯股票行情 北京股票融资贷款