新書推薦:
《
第三帝国:一部新的历史(纳粹主义具有何种魔力?纳粹运动会卷土重来吗?一部全面揭示希特勒及其罪恶帝国黑暗的历史)
》
售價:NT$
490.0
《
强迫症的历史:德国人的犹太恐惧症与大屠杀(德国历史上的反犹文化源自哪里?如何演化为战争对犹太人灭绝性的种族杀戮?德国历史研究专家克劳斯·费舍尔叙述德国反犹史及其极端形态的典范之作)
》
售價:NT$
440.0
《
粤港澳大湾区舆论引导与舆情应对精品案例:基于媒介化治理的思考
》
售價:NT$
445.0
《
大地的勇士
》
售價:NT$
340.0
《
中华老学·第十一辑
》
售價:NT$
380.0
《
债务之网:瑞士民商法的发展历史(1800-1900)
》
售價:NT$
345.0
《
ARM嵌入式Linux系统开发详解(第3版)
》
售價:NT$
595.0
《
长寿时代:做自己人生的CFO
》
售價:NT$
310.0
|
編輯推薦: |
因印刷批次不同,图书封面可能与实际展示有所区别,增值服务也可能会有所不同,以读者收到实物为准。
《中公版·实用Web前端开发:零基础学Dreamweaver》一书立足于Dreamweaver 软件本身,结合工作中常用的操作进行示例讲解,便于初学者掌握Dreamweaver 软件的使用技巧,从而具备从业能力。本书采用双色印刷,图文并茂,操作步骤详细明确,而且每章都配有二维码视频进行重难点讲解,使读者在掌握Dreamweaver 软件基础知识的基础上,具备较强的实际操作能力,读者扫描二维码即可实现在线学习,操作便捷高效。
|
內容簡介: |
《中公版·实用Web前端开发:零基础学Dreamweaver》主要针对网页制作领域的初学者,从Dreamweaver工作界面开始介绍,逐步深入,以综合实例讲解结尾。具体内容包括DreamweaverCC入门、站点的创建与管理、HTML基础知识、CSS样式、DIV+CSS网页布局、文字和段落等在网页中的应用、使用表格布局网页、创建超链接、使用图片修饰网页、创建多媒体对象、表单应用、模板和库等的应用、使用行为创建网页特效、网站的发布与推广、综合实例。同时,本书每一章都配有二维码视频进行重难点讲解,力求让读者轻松掌握并学以致用。
|
目錄:
|
第1章DreamweaverCC入门1.1DreamweaverCC功能概述1.1.1主要功能1.1.2新增功能1.2DreamweaverCC的工作界面1.2.1菜单栏1.2.2工具栏1.2.3文档窗口1.2.4“属性”面板1.2.5面板组1.2.6文档状态栏1.3自定义工作区1.3.1浏览工作区1.3.2视图切换1.3.3处理面板1.3.4选择工作区布局1.3.5调整工具栏1.3.6个性化首选参数1.3.7创建自定义的快捷键1.3.8使用“属性”检查器1.4网页的管理1.4.1创建网页1.4.2保存网页与关闭网页1.4.3打开网页1.4.4利用文件面板管理网页文档或文件夹1.5可视化辅助工具1.5.1标尺工具1.5.2网格工具1.5.3辅助线工具1.6首选项设置1.6.1常规参数1.6.2代码格式1.6.3复制粘贴1.6.4代码颜色1.6.5在浏览器中预览1.6.6字体1.6.7自定义代码视图第2章站点创建与管理2.1站点规划2.1.1文件分类保存2.1.2合理命名文件2.1.3本地站点与远程站点2.2认识“站点”面板2.2.1“站点”面板详解2.2.2创建站点2.3设置远程站点服务器2.3.1设置服务器2.3.2设置版本控制2.3.3站点的高级设置2.4导出和导入站点2.4.1导出站点2.4.2导入站点2.5维护站点2.5.1编辑站点2.5.2复制站点2.5.3删除站点2.5.4切换站点第3章HTML的基础知识3.1HTML概述3.2HTML的语法结构3.3HTML中的常用标签3.3.1文档结构标签3.3.2字符格式标签3.3.3区段格式标签3.3.4列表格式标签3.3.5超链接标签3.3.6多媒体标签3.3.7表单标签3.4HTML3.4.1HTML5概述3.4.2HTML5标签3.5设置头部信息3.5.1设置网页标题3.5.2设置网页META信息3.5.3添加网页关键字3.5.4添加网页说明3.5.5设置视口3.6“页面属性”对话框3.6.1设置“外观(CSS)”选项3.6.2设置“外观(HTML)”选项3.6.3设置“链接(CSS)”选项3.6.4设置“标题(CSS)”选项3.6.5设置“标题编码”选项3.6.6设置“跟踪图像”选项第4章CSS样式4.1CSS样式基础4.1.1CSS样式概述4.1.2CSS样式的基础语法4.2选择符4.2.1通配选择符4.2.2类型选择符4.2.3包含选择符4.2.4id选择符4.2.5class选择符4.3使用CSS设置颜色4.4百分比值4.5设置URL的相对路径和绝对路径?4.5.1相对路径?4.5.2绝对路径?4.5.3应用实例?4.6调用CSS文件?4.6.1在页面内部调用?4.6.2调用外部CSS文件?4.7设置CSS属性4.7.1布局属性4.7.2文本属性4.7.3边框属性4.7.4背景属性4.7.5自定义属性第5章DIV+CSS网页布局5.1初识DIV5.1.1DIV概述5.1.2DIV与Span的区别5.1.3DIV+CSS布局优势5.2CSS定位5.2.1盒子模型的概念5.2.2float定位5.2.3position定位5.3CSS布局理念5.3.1用DIV将页面分块5.3.2设计各块的位置5.3.3用CSS定位5.4常见的布局类型5.4.1列固定宽度5.4.2列自适应5.4.3两列固定宽度5.4.4两列宽度自适应5.4.5两列右列宽度自适应5.4.6三列浮动中间列宽度自适应第6章网页中文字、段落和列表的应用6.1文字和段落6.1.1设置标题文字6.1.2设置文本的字体、字号和颜色6.1.3文本的加粗与倾斜?6.1.4分段处理6.1.5插入水平线6.1.6文字排版处理?6.2列表应用6.2.1无序列表6.2.2有序列表?6.2.3定义列表第7章使用表格布局网页7.1创建表格7.2应用表格7.2.1输入表格内容7.2.2选定表格元素7.2.3设置表格与单元格属性7.2.4像素和百分比的使用7.2.5添加和删除行或列7.2.6单元格的合并及拆分7.2.7表格排序7.2.8嵌套表格7.3扩展表格模式7.4导入和导出表格数据7.4.1导入表格数据7.4.2导出表格数据7.5表格实战7.5.1制作细线表格7.5.2制作分割线7.5.3制作隔距边框表格7.5.4网页布局7.5.5网页的构形设计第8章创建网页中的超链接8.1超级链接8.1.1URL简介8.1.2超级链接路径8.1.3网站内部链接8.1.4链接到网站内部图像8.1.5网站外部链接8.1.6创建空链接8.1.7为网页添加空链接8.2电子邮件链接8.3下载链接8.3.1创建下载链接8.3.2制作音乐下载网页8.4锚记链接8.4.1创建锚记链接8.4.2跳转到网页顶部8.5创建脚本链接8.6制作多彩链接网页第9章使用图片修饰网页9.1网页图片的格式9.1.1GIF格式图片9.1.2JPEG格式图片9.1.3PNG格式图片9.2图像占位符9.2.1插入图像占位符9.2.2将图像占位符替换为图像9.2.3预览网页时不显示图像的问题9.3交互式图像9.3.1插入交互式图像9.3.2交互式图像示例9.4网页背景9.4.1设置网页背景颜色9.4.2设置网页背景图像9.4.3使网页背景呈条纹状显示9.5图片相关的其他操作9.5.1外部图像编辑器9.5.2设置外部图像编辑器9.5.3制作个性图像网页9.5.4图像与文字的搭配9.5.5图像映射第10章创建网页中的多媒体对象10.1插入Flash动画10.1.1在网页中插入Flash动画10.1.2设置Flash动画属性10.2为网页添加背景音乐10.2.1网页中常用的音乐格式10.2.2使用标签添加背景音乐10.2.3使用插件嵌入音频10.3在网页中插入视频10.3.1网页中常用的视频格式10.3.2插入视频10.4在网页中插入特殊多媒体元素10.4.1插入EdgeAnimate动画10.4.2插入HTML5Video与HTML5Audio第11章用表单实现页面交互性11.1表单概述11.1.1什么是表单11.1.2表单的工作流程11.2表单的创建及设置11.2.1创建表单11.2.2设置表单属性11.3表单元素在网页中的应用11.3.1插入文本11.3.2插入密码11.3.3插入文本区域11.3.4插入隐藏11.3.5插入复选框11.3.6插入单选按钮组11.3.7插入选择菜单11.3.8插入图像按钮11.3.9插入文件11.3.10插入按钮11.4表单应用11.4.1制作在线调查表11.4.2制作下拉菜单11.4.3制作登录网页11.4.4制作注册网页11.4.5创建友情链接网页第12章框架、模板和库的应用12.1框架12.1.1框架的组成12.1.2框架的优点12.1.3框架的缺点12.2IFRAME框架12.3模板12.3.1创建模板12.3.2定义可编辑区域12.3.3定义可选区域12.3.4定义可编辑可选区域12.3.5定义重复区域12.4基于模板的页面12.4.1新建基于模板的页面12.4.2更新基于模板的页面12.4.3删除页面中使用的模板12.5使用库项目12.5.1新建库项目12.5.2插入库项目12.5.3编辑库项目12.5.4更新库项目12.5.5库项目的属性面板第13章使用行为创建网页特效13.1了解DreamweaverCC中的行为13.1.1行为的概念13.1.2“行为”面板13.1.3常见的动作类型13.1.4事件13.2使用DreamweaverCC内置行为13.2.1交换图像13.2.2弹出信息13.2.3打开浏览器窗口13.2.4转到URL13.2.5预先载入图像13.2.6设置容器的文本13.2.7设置状态栏文本13.2.8显示-隐藏元素13.2.9检查插件13.2.10检查表单13.3行为技巧13.3.1制作滚动公告13.3.2制作自动关闭网页13.3.3显示当前日期和时间13.3.4将站点加入收藏夹13.3.5将站点设为首页13.3.6实现定时关闭窗口13.3.7为页面设置访问口令第14章网站的发布与推广14.1测试站点14.1.1检查链接14.1.2站点报告14.1.3清理文档14.2发布网站14.3维护网站14.4网站的推广14.4.1登录搜索引擎14.4.2交换广告条14.4.3使用meta标签14.4.4使用传统方式推广14.4.5借助网络广告14.4.6登录网址导航站点14.4.7通过论坛宣传第15章综合实例15.1个人博客网站15.1.1网站规划15.1.2切图分析15.1.3页面实现15.2企业网站15.2.1网站规划15.2.2切图分析15.2.3页面实现255
|
內容試閱:
|
第1章DreamweaverCC入门DreamweaverCC是Adobe公司推出的一款拥有可视化编辑界面的网页制作与管理软件的最新版本,其提供了强大的可视化布局工具、应用开发功能和代码编辑支持,使设计和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。本章将带领读者认识DreamweaverCC。1.1DreamweaverCC功能概述DreamweaverCC使用所见即所得的接口,亦有HTML(HyperTextMarkupLanguage,超文本标记语言)编辑的功能,其目前有Mac和Windows系统的版本。DreamweaverCC提供了功能强大的站点管理工具,通过它可以轻松实现站点名称及所在路径定义、远程服务器连接、版本控制等功能,并且可以在这个基础上实现文件管理等功能。1.1.1主要功能DreamweaverCC是一款功能强大的可视化网页编辑与管理软件。利用它,不仅可以轻松地创建跨平台和跨浏览器的页面,还可以直接创建具有动态效果的网页而不用自己编写源代码。DreamweaverCC最主要的优势在于能够进行多任务工作,并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式,重新排列面板和面板组,自定义工作区。1.1.2新增功能DreamweaverCC包含新增功能预览和新功能操作视频,视频讲解了新功能的操作方法。该版本也提供选项,让用户略过预览,直接开始工作。新功能视频解说是在用户安装或更新DreamweaverCC时,或删除偏好设置并重新启动DreamweaverCC时显示,也可以通过执行“帮助”“新增功能视频”菜单命令随时查看。相较于以前的版本,DreamweaverCC新增了以下功能。(1)实时视图编辑功能用户可以直接在实时视图中编辑并查看设计,连接或退出浏览器的时间会更短。实时视图可以使用全新的基于Chromium的渲染引擎,因此在DreamweaverCC和常用浏览器中显示的内容看起来一样。实时视图编辑功能包括快速属性检查器、元素的显示方式、现场查看属性检查器等。(2)元素快速视图借助新的“元素快速视图”,用户可以在单个列表视图中查看HTML元素,并能轻松地重新排列、复制和删除。(3)使用“CSS设计器”面板用户可以使用新的“CSS设计器”面板应用和创建基于标准的CSS布局、颜色、字体、文本以及快速响应的设计。“CSS设计器”面板的边框控制项界面增强,标签控制项可帮助用户以简单而直接的方式,设置四面边框属性,可避免同时看到所有值,以减少混淆的情形。新的面板支持从一个选择器复制样式并贴入另一个选择器中,用户可以复制所有样式,也可以仅复制特定样式类别,支持快速编辑文字块。用户还可以在其中指定属性的速记代码,如边界、间距、边框和边框半径。(4)使用jQueryWidget用户可以使用jQueryUI将Widget从“插入”面板拖放到Web项目以制作进度条、滑块、菜单和其他有用的组件。(5)从PSD中提取资源和CSS用户可以复制PSD复合元素中的所有或特定CSS属性,并直接将这些样式粘贴到CSS设计器、实时视图的元素显示中,或直接粘贴到用户的代码(CSS源或HTML文档)中,然后在PSD复合中选择的元素的CSS属性会自动填充到代码提示。如果希望使用编码,则可以使用这些代码提示将CSS属性提取到代码中。Extract提供了完整独立的解决方案,可供从PSD复合中提取样式信息和资源,无须频繁地在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-11.2.1菜单栏菜单栏包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单,如图1-2所示。菜单栏上的每个菜单选项下面都有多个子菜单,每一个菜单命令都可以进行一些相关的命令执行或属性的设置。图1-21.2.2工具栏工具栏中包含一些按钮,用来在“代码”视图、“拆分”视图以及“设计”视图、“实时视图”间进行切换。此外,工具栏还包含一些与文档操作有关的常用命令和选项,如图1-3所示。图1-3●“代码”视图的按钮为,用于只在文档窗口中显示“代码”视图。●同时显示“代码”视图和“设计”视图的按钮为,选中后文档窗口将拆分为“代码视图”和“设计视图”。其中文档窗口中左侧为“代码”视图,右侧为“设计”视图。●“设计”视图的按钮为,用于只在文档窗口中显示“设计”视图。●“实时视图”的按钮为,其中显示的内容与用户在浏览器中预览的效果一样。●“在浏览器中预览调试”按钮为,可根据用户需求,在用户选择的浏览器中进行预览或调试文档。●“标题文本框”图标为,用于为文档输入一个标题,该标题将显示在浏览器的标题栏中。如果文档已有标题,则该标题将显示于该区域中。●“文件管理”按钮为,用于对文件进行管理,如对文件进行获取、取出、上传、存回等操作。1.2.3文档窗口文档窗口用于显示当前的文档,包括“设计”视图、“代码”视图、“拆分”视图、“实时视图”。●“设计”视图:是一个用于可视化页面布局、可视化编辑以及快速进行应用程序开发的设计环境。在该视图中,DreamweaverCC显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图,以在处理文档时显示动态内容。●“代码”视图:一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。●“拆分”视图:该视图使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。●实时视图:该视图使用户可以直接在文档窗口预览设计效果。1.2.4“属性”面板“属性”面板主要用于查看和更改所选对象的各种属性,每种对象都具有不同的属性。在“属性”面板中包括两种选项,一种是“HTML”选项,将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项,单击属性面板中的“CSS”选项,可以在“CSS”选项中设置各种属性。“属性”面板显示当前选定的对象或文本的属性,也可以在这里直接修改属性。如图1-4所示。图1-41.2.5面板组DreamweaverCC中的面板可以自由组合成面板组。每个面板组都可以展开和折叠,并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板,而不会使工作区变得混乱,如图1-5所示。图1-51.2.6文档状态栏文档状态栏可以提供与正在创建的文档有关的其他信息,如图1-6所示。图1-6●“标签选择器”图标为,单击图标可以选择文档中属于该标签的整个正文。图标为“元素快速视图”,用于显示环绕当前选定内容的标签的层次结构。通过单击该层次结构中的标签,可以选择该标签及其全部内容。●“窗口大小”图标为,可以调整文档窗口的大小,使其达到预定义或自定义的尺寸。1.3自定义工作区DreamweaverCC包括两个主要的工作区,用于适应多种不同的计算机配置和各种工作流程。用户可以根据自己的喜好,调整DreamweaverCC中的编码环境,使之适合自己的习惯。如果任何预设的工作区都不能完全满足用户需要,则可以自定义工作区。1.3.1浏览工作区DreamweaverCC是行业领先的HTML编辑器,其功能十分强大。不论是编码人员、开发人员还是设计人员,都可以根据自己的喜好来自定义工作区,使其满足自己的需求。DreamweaverCC中用户可配置的面板和工具箱如图1-7所示。
|
|