Dreamweaver CS6实例教程(第3版)(工业和信息化高职高专“十二五”规划教材立项项目)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-03 12:58:44

点击下载

作者:魏三强 李静 杨子燕 主编

出版社:职业教育出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Dreamweaver CS6实例教程(第3版)(工业和信息化高职高专“十二五”规划教材立项项目)

Dreamweaver CS6实例教程(第3版)(工业和信息化高职高专“十二五”规划教材立项项目)试读:

前言 PREFACE

Dreamweaver CS6 是由 Adobe 公司开发的网页设计与制作软件。它功能强大、易学易用,因此深受网页制作爱好者和网页设计师的喜爱,已经成为这一领域最流行的软件之一。目前,我国很多高职院校的数字媒体艺术类专业,都将“Dreamweaver”作为一门重要的专业课程。为了帮助高职院校的教师全面、系统地讲授这门课程,使学生能够熟练地使用 Dreamweaver 进行网页设计,我们组织长期在高职院校从事 Dreamweaver 教学的教师和专业网页设计公司经验丰富的设计师共同编写了本书。

本书按照“课堂案例 → 软件功能解析 → 课堂练习 → 课后习题 → 商业设计实训”的思路进行编排,力求通过课堂案例演练,使学生快速熟悉软件功能和艺术设计思路;通过软件功能解析使学生深入学习软件功能和制作特色;通过课堂练习和课后习题,拓展学生的实际应用能力。在内容方面,力求细致全面、重点突出;在文字叙述方面,做到言简意赅、通俗易懂;在案例选取方面,强调案例的针对性和实用性。

本书配套光盘中包含了书中所有案例的素材及效果文件。另外,为方便教师教学,本书配备了详尽的课堂练习和课后习题的操作步骤以及 PPT 课件、教学大纲等丰富的教学资源,任课教师可到人民邮电出版社教学服务与资源网(www.ptpedu.com.cn)免费下载使用。本书的参考学时为68学时,其中实训环节为31学时,各章的参考学时参见下面的学时分配表。

本书由宿州职业技术学院魏三强、辽宁职业学院李静、江西外语外贸职业学院杨子燕任主编,江西外语外贸职业学院欧阳潘、福建工贸学校陈朝魁任副主编。魏三强编写了第1章~第3章,李静编写了第4章~第6章,杨子燕编写了第7章~第9章,欧阳潘编写了第10章和第11章,陈朝魁编写了第12章和第13章。参加本书编写工作的还有周志平、葛润平、张旭、吕娜、孟娜、张敏娜、张丽丽、邓雯、薛正鹏、王攀、陶玉、陈东生、周亚宁、程磊、房婷婷等。

由于编者水平有限,书中难免存在错误和不妥之处,敬请广大读者批评指正。编者2014年4月《Dreamweaver CS6 实例教程(第3版)》教学辅助资源及配套教辅

第1章 初识Dreamweaver CS6

本章介绍

网页是网站最基本的组成部分,网站之间并不是杂乱无章的,它们通过各种链接相互关联,从而描述相关的主题或实现相同的目的。本章主要讲述 Dreamweaver CS6 的工作界面,创建网站框架,管理站点文件和文件夹,以及管理站点和网页文件头的设置。

学习目标

● 掌握 Dreamweaver CS6的工作界面

● 掌握站点管理器、创建文件夹、定义新站点、创建和保存网页

● 掌握重命名、移动、删除文件和文件夹

● 掌握站点的打开、编辑、复制、删除、导入和导出

● 掌握关键字、作者和版权信息、刷新时间、描述信息等其他文件头的设置

技能目标

● 熟练掌握站点管理器的使用

● 熟练掌握文件的重命名、移动、删除

● 熟练掌握站点的应用和编辑

● 熟练掌握文件头的设置

1.1 Dreamweaver CS6 的工作界面

Dreamweaver CS6 的工作区将多个文档集中到一个窗口中,不仅降低了系统资源的占用,还可以使用户更方便地操作文档。Dreamweaver CS6 的工作窗口由 5 部分组成,分别是“插入”面板、“文档”工具栏、“文档”窗口、面板组和“属性”面板。Dreamweaver CS6的操作环境简洁明快,可大大提高网页的设计效率。

1.1.1 友善的开始页面

启动 Dreamweaver CS6 后首先看到的画面是开始页面,供用户选择新建文件的类型,或打开已有的文档等,如图1-1所示。

老用户如果不太习惯开始页面,可选择“编辑 > 首选参数”命令,或按 Ctrl+U 组合键,弹出“首选参数”对话框,取消选择“显示欢迎屏幕”复选框,如图1-2所示。单击“确定”按钮完成设置。当用户再次启动 Dreamweaver CS6 后,将不再显示开始页面。图1-1图1-2

1.1.2 不同风格的界面

Dreamweaver CS6 的操作界面新颖淡雅、布局紧凑,为用户提供了一个轻松、愉悦的开发环境。

若用户想修改操作界面的风格,切换到自己熟悉的开发环境,可选择 “窗口 > 工作区布局”命令,弹出其子菜单,如图1-3所示,在子菜单中选择“编码器”或“设计器”命令。选择其中一种界面风格,页面会发生相应的改变。图1-3

1.1.3 伸缩自如的功能面板

在浮动面板的右上方单击按钮,可以隐藏或展开面板,如图1-4所示。

如果用户觉得工作区不够大,可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处,当鼠标指针呈双向箭头时拖曳鼠标,调整工作区的大小,如图1-5所示。若用户需要更大的工作区,可以将面板隐藏。图1-4图1-5

1.1.4 多文档的编辑界面

Dreamweaver CS6 提供了多文档的编辑界面,将多个文档整合在一起,方便用户在各个文档之间切换,如图1-6 所示。用户可以单击文档编辑窗口上方的选项卡,切换到相应的文档。通过多文档的编辑界面,用户可以同时编辑多个文档。图1-6

1.1.5 新颖的“插入”面板

Dreamweaver CS6 的“插入”面板在菜单栏的下方,如图1-7所示。图1-7“插入”面板包括“常用”、“布局”、“表单”、“数据”、“Spry”、“jQuery Mobile”、“InContextEditing”、“文本”、“收藏夹”9个选项卡,将不同功能的按钮分门别类地放在不同的选项卡中。在 Dreamweaver CS6 中,“插入”面板可用菜单和选项卡两种方式显示。如果需要菜单样式,用户可用鼠标右键单击“插入”面板的选项卡,在弹出的菜单中选择“显示为菜单”命令,如图1-8所示,更改后效果如图1-9所示。用户如果需要选项卡样式,可单击“常用”按钮上的黑色三角形,在下拉菜单中选择“显示为制表符”命令,如图1-10所示,更改后效果如图1-11所示。图1-8图1-9图1-10图1-11“插入”面板将一些相关的按钮组合成菜单,当按钮右侧有黑色箭头时,表示其为展开式按钮,如图1-12所示。图1-12

1.1.6 更完整的 CSS 功能

传统的HTML所提供的样式及排版功能非常有限,因此,复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多,语法比较复杂,需要用一个很好的工具软件有条不紊地整理复杂的 CSS 源代码,并适时地提供辅助说明。Dreamweaver CS6 就提供了这样方便有效的CSS功能。“属性”面板提供了CSS功能。用户可以通过“属性”面板中“样式”选项的下拉列表,对所选的对象应用样式或创建和编辑样式,如图1-13所示。若某些文字应用了自定义样式,当用户调整这些文字的属性时,会自动生成新的CSS样式。图1-13“页面属性”按钮也提供了CSS功能。单击“页面属性”按钮,或按Ctrl+J组合键,弹出“页面属性”对话框,如图1-14 所示。用户可以在“分类”列表的“链接”选项中的“下划线样式”选项的下拉列表中设置超链接的样式,这个设置会自动转化成CSS样式,如图1-15所示。图1-14图1-15

Dreamweaver CS6除了提供图1-16所示的“CSS样式”面板外,还提供了图1-17所示的“CSS属性”面板。“CSS属性”面板使用户可以轻松查看规则的属性设置,并可快速修改嵌入在当前文档或通过附加的样式表链接的 CSS样式。可编辑的网格使用户可以更改显示的属性值。对选择所作的更改都将立即应用,这使用户可以在操作的同时预览效果。图1-16图1-17

1.2 创建网站框架

所谓站点,可以看作是一系列文档的组合,这些文档通过各种链接建立逻辑关联。用户在建立网站前必须要建立站点,在修改某网页内容时,也必须打开站点,然后修改站点内的网页。在 Dreamweaver CS6 中,站点一词是下列任意一项的简称。

Web 站点:从访问者的角度来看,Web 站点是一组位于服务器上的网页,使用 Web 浏览器访问该站点的访问者可以对其进行浏览。

远程站点:从创作者的角度来看,远程站点是远程站点服务器上组成 Web 站点的文件。

本地站点:即与远程站点上的文件对应的本地磁盘上的文件。通常,先在本地磁盘上编辑文件,然后再将它们上传到远程站点服务器上。

Dreamweaver CS6 站点定义:本地站点的一组定义特性,以及有关本地站点和远程站点对应方式的信息。

在做任何工作之前都应该制订工作计划并画出工作流程,建立网站也是如此。在动手建立站点之前,需要先调查研究,记录客户所需的服务,然后以此规划出网站的功能结构图(即设计草图)及其设计风格,以体现站点的主题。另外,还要规划站点导航系统,避免浏览者在网页上迷失方向,找不到要浏览的内容。

1.2.1 站点管理器

站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。若要管理站点,必须打开“管理站点”对话框。

弹出“管理站点”对话框有以下几种方法。

选择“站点 > 管理站点”命令。

选择“窗口 > 文件”命令,弹出“文件”面板,选择“文件”选项卡,如图1-18 所示。单击面板左侧的下拉列表,选择“管理站点”命令,如图1-19所示。

在“管理站点”对话框中,通过“新建”、“编辑”、“复制”和“删除”按钮,可以新建一个站点,修改选择的站点,复制选择的站点,删除选择的站点。通过对话框的“导出”、“导入”按钮,用户可以将站点导出为 XML 文件,然后再将其导入到 Dreamweaver CS6,这样,用户就可以在不同的计算机和产品版本之间移动站点,或者与其他用户共享了,如图1-20所示。

在“管理站点”对话框中,选择一个具体的站点,然后单击“完成”按钮,就会在“文件”面板的“文件”选项卡中出现站点管理器的缩略图。图1-18图1-19图1-20

1.2.2 创建文件夹

建立站点前,要先在站点管理器中规划站点文件夹。

新建文件夹的具体操作步骤如下。(1)在站点管理器的右侧窗口中单击选择站点。(2)通过以下两种方法新建文件夹。

选择“文件 > 新建文件夹”命令。

用鼠标右键单击站点,在弹出的菜单中选择“新建文件夹”命令。(3)输入新文件夹的名称。

一般情况下,若站点不复杂,可直接将网页存放在站点的根目录下,并在站点根目录中,按照资源的种类建立不同的文件夹,存放不同的资源。例如,“image”文件夹存放站点中的图像文件,“media”文件夹存放站点的多媒体文件等。若站点复杂,需要根据实现不同功能的板块,在站点根目录中按板块创建子文件夹,存放不同的网页,这样可以方便网站设计者修改网站。

1.2.3 定义新站点

建立好站点文件夹后用户就可定义新站点了。在 Dreamweaver CS6 中,站点通常包含两部分,即本地站点和远程站点。本地站点是本地计算机上的一组文件,远程站点是远程 Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点,使公众可以访问它们。在 Dreamweaver CS6 中创建 Web 站点,通常先在本地磁盘上创建本地站点,然后创建远程站点,再将这些网页的副本上传到一个远程 Web 服务器上,使公众可以访问它们。本节只介绍如何创建本地站点。

1.创建本地站点的步骤

● 选择“站点 > 管理站点”命令,弹出“管理站点”对话框,如图1-20 所示。

● 在“管理站点”对话框中单击“新建”按钮,弹出“站点设置对象 未命名站点 3”对话框,在对话框中,设计者通过“站点”选项卡设置站点名称,如图1-21所示,单击“高级设置”选项,在弹出的选项卡中根据需要设置站点,如图1-22所示。图1-21图1-22

2.本地站点主要选项的作用“本地信息”选项:表示定义或修改本地站点。“站点名称”选项:在文本框中输入用户自定的站点名称。“本地站点文件夹”选项:在文本框中输入本地磁盘中存储站点文件、模板和库项目的文件夹的名称,或者单击文件夹图标查找到该文件夹。“默认图像文件夹”选项:在文本框中输入此站点的默认图像文件夹的路径,或者单击文件夹图标查找到该文件夹。例如,将非站点图像添加到网页中时,图像会自动添加到当前站点的默认图像文件夹中。“区分大小写的链接检查”选项:选择此复选框,则对使用区分大小写的链接进行检查。“启用缓存”选项:指定是否创建本地缓存以提高链接和站点管理任务的速度。若选择此复选框,则创建本地缓存。

1.2.4 创建和保存网页

创建站点后,用户需要创建网页来组织要展示的内容。合理的网页名称非常重要,一般网页文件的名称应容易理解,能反映网页的内容。

在网站中有一个特殊的网页,即首页,每个网站必须有一个首页。访问者每当在IE浏览器的地址栏中输入网站地址就会进入该网站的首页。如在 IE 浏览器的地址栏中输入“www.sina.com.cn”时会自动打开新浪网的首页。一般情况下,首页的文件名为“index.htm”、“index.html”、“index.asp”、“default.asp”、“default.htm”或“default.html”。

在标准的 Dreamweaver CS6 环境下,建立和保存网页的操作步骤如下。(1)选择“文件 > 新建”命令,弹出“新建文档”对话框,选择“空白页”选项,在“页面类型”选项框中选择“HTML”选项,在“布局”选项框中选择“无”选项,创建空白网页,设置如图1-23所示。(2)设置完成后,单击“创建”按钮,弹出“文档”窗口,新文档在该窗口中打开。根据需要,在“文档”窗口中选择不同的视图设计网页,如图1-24所示。图1-23图1-24“文档”窗口中有3种视图方式,这3种视图方式的作用如下。“代码”视图:对于有编程经验的网页设计用户而言,可在“代码”视图中查看、修改和编写网页代码,以实现特殊的网页效果。“代码”视图的效果如图1-25所示。“设计”视图:以所见即所得的方式显示所有网页元素,“设计”视图的效果如图1-26所示。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载