职业教育“十三五”改革创新规划教材Dreamweaver CS6+HTML 5+CSS 3网页制作基础教程(微课版)

第3章 Dreamweaver基础与CSS入门【本章导读】 在工作中，常用Adobe Dreamweaver工具软件构建网站和应用程序，该工具提供可视化布局功能，开发者能够快速创建站点。本章除了介绍该款软件的使用方法外，还将向读者详细介绍工作中必不可少的CSS内容。 【学习目标】 熟悉Dreamweaver的工作环境； 了解站点及其相关知识，能够使用Dreamweaver创建和管理站点； 掌握CSS的基本语法，理解盒模型的内涵； 熟练掌握常用的CSS选择器，能够通过选择器修改指定对象的CSS规则。 3.1工作环境 Adobe Dreamweaver CS6是一个全面的专业工具集，可用于设计并部署极具吸引力的网站和Web应用程序。在编辑文档的状态下，Dreamweaver CS6的工作环境如图31所示，其中常用的区域含义如下。 图31Dreamweaver CS6的工作环境 (1) 文档工具栏: 该工具栏提供各种文档窗口视图，以及各种查看选项和方法。 (2) 代码视图: 用于编辑和查看当前编辑状态下的网页源代码。 (3) 设计视图: 用于可视化页面布局、可视化编辑，提供快速应用程序开发的设计环境。在该视图中，Dreamweaver显示的文档内容类似于在浏览器中查看页面时的效果。 (4) 属性面板: 用于查看和更改所选对象或文本的各种属性，每种对象都具有不同的属性，默认状态下该面板是折叠状态。 (5) 标签选择器: 用于显示环绕当前选定内容所在标签的层次结构。单击该层次结构中的任何标签，可以选择该标签及其全部内容。 (6) “文件”面板: 用于管理当前站点和本地的文件，类似于Windows资源管理器。 (7) “CSS样式”面板: 用于管理和编辑选定对象的CSS样式规则。 3.1.1文档和编码工具栏 Dreamweaver CS6包含了4种工具栏: 样式呈现、文档、标准、编码。用户可以通过执行“查看”→“工具栏”命令，打开或关闭某个工具栏。这里文档工具栏和编码工具栏较为常用，下面进行简单介绍。 Dreamweaver CS6+HTML 5+CSS 3网页制作基础教程(微课版)第3章Dreamweaver基础与CSS入门1. 文档工具栏 使用文档工具栏所包含的按钮可以在文档的不同视图之间进行快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令与选项，如图32所示。 图32文档工具栏 (显示代码视图): 单击该按钮后，文档窗口中仅显示页面的代码。 (显示代码视图和设计视图): 单击该按钮后，将文档窗口拆分为代码视图和设计视图。 (显示设计视图): 单击该按钮后，文档窗口中仅显示页面的设计界面，用户可以在此窗口中对网页元素直接编辑。 (实时视图): 显示不可编辑的、交互式的、基于浏览器的文档视图。 (多屏幕): 可以使设计师在多个设备屏幕大小不同的状态下预览当前页面。 (浏览器调试/预览): 在浏览器中预览或调试文档。 (文件管理): 弹出文件管理菜单。 (W3C验证): 方便设计师对当前页面在线验证是否符合W3C的标准。 (检查浏览器兼容性): 用于检查用户的CSS是否对于各种浏览器均兼容。 (可视化助理): 可以使用各种可视化助理来设计页面。 (刷新设计视图): 在代码视图中对文档进行更改后刷新文档的设计视图，可以使更改内容显示在设计视图中。 (文档标题): 在此输入的文字内容，将会作为网站标题出现在浏览器左上角。 2. 编码工具栏 编码工具栏垂直显示在文档窗口的左侧，它包含可用于执行多种标准编码操作的按钮，如图33所示。图33编码工具栏 (打开的文档): 显示当前打开的文档。 (显示代码导航): 显示代码导航器。 (折叠整个标签): 折叠一组标签之间的内容。 (折叠所选): 折叠所选代码。 (扩展全部): 还原所有折叠的代码。 (选择父标签): 选择当前标签的父标签。 (选取当前代码段): 选取当前代码段。 (行号): 显示或隐藏代码的行号。 (高亮无效代码): 用黄色显示无效代码。 (自动换行): 自动换行。 (语法错误警报): 启用或禁用语法错误警报。 (应用注释): 在所选代码两侧添加注释标签。 (删除注释): 删除注释。 (环绕标签): 在所选代码两侧自动添加某个标签。 (*近的代码片段): 从“代码片段”面板中插入代码。 (移动或转换CSS): 移动CSS位置，或转换CSS类别。 (缩进代码): 将选定内容向右移动。 (凸出代码): 将选定内容向左移动。 (格式化源代码): 将代码赋予标准格式。 3.1.2属性面板 显示属性面板的快捷键是Ctrl+F3，用户可以通过该面板检查和编辑当前选定页面元素(如文本和插入的对象)*常用的属性。根据选定元素的不同，属性面板所呈现的属性也不尽相同，如图34和图35所示。 图34属性面板(选定对象为图像) 图35属性面板(选定对象为文本) 通过属性面板，用户能够快捷地修改、应用对象的基本属性，使用频率较高。 3.1.3常用面板介绍 Dreamweaver CS6为用户提供了可自由组合的多功能面板，大量操作可以快捷地通过面板迅速完成。 1. “插入”面板 显示或隐藏“插入”面板的快捷键是Ctrl+F2。该面板包含用于创建和插入对象(如表格、图像和链接)，其中包含多种按钮。 这些按钮按9种类别进行组织。 （1） “常用”类别: 用于创建和插入*常用的对象，如图像和表格。 （2） “布局”类别: 用于插入表格、表格元素、标签、框架和Spry构件。 （3） “表单”类别: 包含一些按钮，用于创建表单和插入表单元素。 （4） “数据”类别: 用于插入Spry数据对象和其他动态元素，例如，记录集、重复区域以及插入记录表单和更新记录表单。 （5） Spry 类别: 包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。 （6） jQuery Mobile类别: 可帮助用户快速设计出适合大多数移动设备的Web应用程序，同时可使其自身适应设备的各种尺寸。 （7） InContext Editing类别: 包含供生成InContext编辑页面的按钮，包括用于可编辑区域、重复区域和管理CSS类的按钮。 （8） “文本”类别: 用于插入各种文本格式和列表格式的标签。 （9） “收藏夹”类别: 用于将“插入”面板中*常用的按钮分组和组织到某一公共位置。 部分类别如图36～图38所示。 图36“常用”类别 图37“表单”类别 图38jQuery Mobile类别 “常用”类别是“插入”面板中使用率非常高的类别，其中各按钮的含义如下。 (超链接): 在网页中插入超链接。 (电子邮件链接): 插入电子邮件链接。 (命名锚记): 用于页面内定位。 (水平线): 在光标处插入水平线。 (表格): 插入表格。 (插入标签): 插入标签。 (图像): 可插入图像、占位符、热点等对象。 (媒体): 可插入Flash、FLV等多媒体对象。 (构件): 由HTML、CSS和JavaScript组成的网页组件。 (日期): 可插入多种格式的日期。 (服务器端包括): 选择一个网页文件，将其添加到当前站点中。 (注释): 插入HTML注释。 (文件头): 设置文件头不同的属性。 (脚本): 插入脚本。 (模板): 创建和编辑模板。 (标签): 插入置标语言的标签，方便编辑代码。 2. “CSS样式”面板 “CSS样式”面板的作用在于跟踪影响当前所选页面元素的CSS规则和属性，打开或隐藏该面板的快捷键是Shift+F11，如图39所示。对于初学图39“CSS样式”面板 者来讲，“CSS样式”面板可以用于查看和修改CSS规则，而随着对CSS的熟悉，笔者建议读者手动书写CSS规则，这样不但对各种属性有进一步了解，而且编写代码的效率会大幅提升。 3.1.4常规设置〖*2〗1. 首选参数设置执行“编辑”→“首选参数”命令，或按Ctrl+U键，即可打开“首选参数”对话框，如图310所示。 图310“首选参数”对话框 在该设置界面中，包含“文档选项”和“编辑选项”两类设置，部分主要的设置含义如下。 (1) 启用相关文件: 用于查看哪些文件与当前文档相关(如CSS或JavaScript文件)。Dreamweaver在文档顶部为每个相关文件显示了一个按钮，单击该按钮可打开相应文件。 (2) 移动文件时更新链接: 当移动、重命名或删除站点中的文档时所发生的操作，系 查看全部↓ 前言/序言 Dreamweaver CS6+HTML 5+CSS 3网页制作基础教程(微课版)目前，针对移动互联网开发领域的“Web前端工程师”可谓是热门抢手的岗位，通过仔细分析岗位描述可知，该岗位大多要求应聘者拥有“精通W3C规范，熟练掌握CSS、HTML等Web技术”“能够手写符合W3C标准的前端页面代码”等岗位技能。本书在紧密结合市场需求的前提下，以HTML 5和CSS 3的基础知识作为重点讲解对象，在W3C规范的指导下，将前端的思维模式融入每个知识点中，再配合免费的微课视频，使读者完全能够自主学习。 全书共分为12章，根据知识的难易程度和学习者的学习习惯，对HTML 5和CSS 3知识进行无缝衔接，使每章有理论，堂堂有案例，课后有实训。本书主要内容包括: 网页设计基础，HTML语言基础，Dreamweaver基础与CSS入门，文本与图像，浮动、定位和列表，表格与表单，框架、模板与CSS 3新增布局，行为与Spry构件，CSS进阶，站点测试、上传与维护，综合案例解析——电子商务网站以及实训指导。 本书具有以下特色。  微课视频: 所有知识点均包含在许多短小的视频中，不受时空限制，扫描二维码就能预习或复习所学知识。  贴近岗位: 本书涉及的内容均是互联网类岗位中必不可少的知识，通过学习读者能够获得岗位需求的基本能力。  精选案例: 每章包含“过程指导”环节，通过精心挑选的实战案例，以及详略得当的过程指导，读者在学习过程中能够直观、清晰地看到操作过程和效果。  自主任务: 每章包含“自主任务”环节，留出时间让读者参照“过程指导”进行实训练习。  配套资源: 本书提供全套源文件、微课视频、PPT课件、课时授课计划和学期授课计划，读者可以从清华大学出版社网站（http: //www.tup.tsinghua.edu.cn）下载。 本书既可作为应用型本科以及各层次职业院校计算机相关专业的教材，也可作为IT类培训机构的网页设计培训教程。 本书的参考学时为60学时，为了方便教学，这里提供各章任务的学时分配，详见下表。第1章网页设计基础112第2章HTML语言基础246第3章Dreamweaver基础与CSS入门246第4章文本与图像246第5章浮动、定位和列表246第6章表格与表单224第7章框架、模板与CSS 3新增布局448第8章行为与Spry构件112第9章CSS进阶246第10章站点测试、上传与维护112第11章综合案例解析——电子商务网站134第12章实训指导0.57.58合计60本书由吴丰编著，在编写过程中，许多同仁给予了很大的帮助和支持，提出了许多中肯的建议，在此表示感谢。同时，还要感谢清华大学出版社的所有编审人员为本书的出版所付出的辛勤劳动。*后，还要感谢家人的理解和支持。本书的成功出版是大家共同努力的结果，谢谢你们！ 另外，由于编著者水平有限，书中难免有不足之处，敬请广大读者批评、指正，以便修订时使之更加完善。诚心希望与读者共同交流、共同成长！ 编著者联系方式: 413101130@qq.com。 编著者 2018年3月Dreamweaver CS6+HTML 5+CSS 3网页制作基础教程(微课版) 查看全部↓