Photoshop Flash网页制作三合一案例教程2

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
步骤5: 双击某个面板组名称或名称右侧的空白处,可以展开或折叠面板组。
步骤6: 单击面板组标题栏并拖动,可将面板组变为浮动状态。此时可 拖动面板组标题栏,将其置于屏幕上的任意位置。要还原面板 组到文档窗口右侧的面板区域,可将其重新拖动至面板区域。
步骤7: 单击面板组右上角的 符号,在弹出的菜单中选择“关闭标 签组”,可关闭面板组,如图2-12所示。
15
步骤2: 启动Dreamweaver CC,在菜单栏中选择“站点”>“新建站点”选项,如图2-13所示。
图2-13 选择菜单
步骤3: 弹出“站点设置对象”对话框,默认显示“站点”选项,在“站点名称”文本框中输入站点名称,此处为“test”,
单击“本地站点文件夹”编辑框右侧的“浏览文件夹”按钮,在打开的“选择根文件夹”对话框中选择前面创建的文 件夹“test”,然后单击“选择文件夹”按钮,设置网站根文件夹,如图2-14所示。
文档窗口

Dreamweaver CC工作界面,如 图2-2所示。
标签选择器
状态栏
板 组
由图2-2可以看出,
Dreamweaver CC的工作界面由应
用程序栏、文档标签栏、文档工
具栏、文档窗口、状态栏、“属
性”面板和面板组等组成,下面
分别介绍。
“属性”面板
图2-2 Dreamweaver CC工作界面
(a)
图2-20 复制站点
(b)
20
3.删除站点 在“管理站点”对话框中单击选中要删除的站点名,单击“删
除当前选定的站点”按钮 ,在弹出的对话框中单击“是”按钮 确认删除,单击“否”按钮则取消删除。
删除站点操作仅将站点信息从Dreamweaver中删除,而站点文 件还保留在硬盘原来的位置上,并没有被删除。
步骤3: 若要折叠窗口右侧的面板区域,可单击该面板区域右上方的 按钮,此时 按钮
将变成 按钮,再次单击可展开面板区域,如图2-10所示。当面板区域处于折叠 状态时,单击某个面板按钮可展开该面板,再次单击可将面板恢复为按钮状态。
图2-10 展开/折叠面板区域 12
步骤4: 如果面板组包含了多个面板,可以在展开面板组后,通过单击面板标签在各面板之间切换。例如,展开“文 件”面板组后,可以通过单击“文件”“插入”标签在两个面板之间切换,如图2-11所示。
图2-22 “导出站点”对话 框
23
在了解了站点的基本操作后,接下来通过 创建“企业网站”本地站点,进一步加强和巩 固前面的学习。
步骤2:
新建站点。启动Dreamweaver CC,选择“站点”>“新建 站点”菜单命令,在弹出的“站点设置对象”对话框中设置 站点名称和本地站点文件夹,如图2-23所示。
图2-21 导出站点 22
步骤2:
在弹出的“导出站点”对话框中为导出的站点文件设置保存 位置和名称,然后单击“保存”按钮即可,如图2-22所示。
步骤3:
导出的站点文件扩展名为“.ste”,本例实现将“test”导出 至D盘根目录下,命名为testcopy.ste。
2)导入站点
在“管理站点”对话框中单击“导入站点”按钮,在弹出 的“导入站点”对话框中选择要导入的站点文件(后缀为.ste 的文件),单击“打开”按钮,站点文件将导入到站点中。
4
应用程序栏位于工作区顶部,左侧显示菜单栏,右侧包含工作区切换器(可在其下拉列表
中选择不同的工作区模式)和程序窗口控制按钮

文档标签栏位于应用程序栏下方,左侧显示当前打开的所有网页文档的标签(标签上显示
相应网页文档的名称)及其关闭按钮;右侧显示当前文档在本地磁盘中的保存路径以及向下还
原按钮 ;文档标签下方显示当前文档中包含的文档以及链接的文档。当用户打开多个网页
(a)
(b)
图2-7 “属性”面板
9
默认状态下,面板组位于文档窗口右侧。面板组中包含各种类型的面 板,Dreamweaver中的大多数操作都需要在面板中实现。其中最常用的 有“插入”面板、“文件”面板和“CSS设计器”面板。下面以“插入”面板
为例,简单介绍一下面板组中的面板。
“插入”面板包含用于创建和插入对象(如表格、图像和链接)的按钮, 这些按钮按几个类别进行组织,默认显示“常用”类别,如图2-8(a)所 示;也可以单击其右侧的下拉三角按钮,从弹出的列表中选择其他类别, 如图2-8(b)所示。例如,要在页面中插入图像,可先定位插入点,然后 单击“插入”面板“常用”类别中的“图像:图像”按钮。
如图2-1(b)所示。
(a)
(b)
图2-1 启动Dreamweaver CC
3
应用程序栏
工作区切换器
在如图2-1(b)所示的起始页中
单击“新建”列中的任一项,将 会创建一个相应格式的新文档,
文档标签栏
文档工具栏
并进入Dreamweaver CC工作界
面。此处单击“HTML”项,创 建一个.html格式的文档并进入
步骤2: 要打开或关闭某个面板,可选择“窗口”菜单下的
相应菜单项。例如,可选择“窗口”>“文件”菜
单,打开或关闭“文件”面板,如图2-9所示。
步骤1:
默认状态下,文档窗口的右侧和下方分别是面板 组和“属性”面板。要关 闭“属性”面板和面板组,可按【F4】键;再次 按【F4】键可恢复原来的状态。
图2-9 使用“窗口”菜单打开或关闭面板 11
步骤8: 如果用户在更改面板组布局后又想恢复其原始布局,可选择“窗 口”>“工作区布局”>“重置‘压缩’”(或“重置‘扩 展’”)菜单。
图2-11 在面板之间切换
图2-12 关闭面板组
13
目录
Contents
第2章 Dreamweaver CC基本操作
案例一 调整Dreamweaver CC工作界面——初识Dreamweaver CC 案例二 创建企业网站本地站点——站点基本操作 案例三 为企业网站制作欢迎页面——网页文档基本操作
14
一般在Dreamweaver中制作网页之前,最好先定义站点,然后在站点中创建网页。本节主要介绍 在Dreamweaver CC中创建和打开站点的方法。
1.创建本地站点
站点一般包括本地站点(本地计算机上的一组文件)和远程站点(远程Web服务器上的一组文件)。下面 以本地站点为例说明创建过程。
步骤1: 首先在本地磁盘创建一个新文件夹作为本地站点根文件夹,以便存放相关文档。此处在D盘新建一个名为“test” 的文件夹,并在其中嵌套一个名为“images”的文件夹。
时,通过单击文档标签可在各网页之间切换。另外,单击下方的包含文档或链接文档,同样可
打开相应文档,如图2-3所示。
图2-3 文档标签栏 5
文档工具栏位于文档标签栏下方,包括各种可对文档进行操作的按钮,如图2-4所示。
在浏览器中预览/调试
文件管理
图2-4 文档工具栏
代码:在文档窗口中显示代码视图。代码视图是一个用 于编写HTML、CSS、JavaScript、服务器语言(如PHP 或ColdFusion标记语言(CFML))以及其他任何类型 代码的手工编码环境,如图2-5所示。在Dreamweaver 的设计视图中对网页文档进行的操作,也将自动转换为 相应的网页代码。
标签选择器
图2-6 状态栏
手机大小 窗口大小 平板电脑大小
桌面电脑大小
8
使用“属性”面板可以检查和编辑当前选定网页元素(如文本和插入的对象)的最常用属性。“属 性”面板的内容会根据选定元素的变化而变化。例如,如果选择页面中的图像,则“属性”面板将显示 图像属性(如图像的文件路径、图像的宽度和高度等),如图2-7(a)所示;如果选择文本,则“属性” 面板又会显示文本的相关属性,如图2-7(b)所示。
2
安装Dreamweaver CC后,
单击桌面左下角的“开始”按钮,
选择“所有程序”>“Adobe
Dreamweaver CC”,就可以启
动Dreamweaver CC了,如图2-
1(a)所示。
启动Dreamweaver CC后,
首先显示起始页。通过起始页可
以直接打开最近使用过的文档或
其他文档,也可以创建新文档,
标题:可为文档设置标题。浏览网页时,该标题将显示在浏览器的标题栏中。 文件管理:用于与远程服务器同步文件,上传或下载当前文档。
7
状态栏位于文档窗口底部,它提供了与当前文档相关的一些信息,如图2-6所示。 其中,标签选择器的作用很大,它显示了当前光标所在位置或当前选定内容的标签层次结构(HTML网 页文档就是由一个个标签组成的),单击某个标签可以选中网页中该标签所代表的内容,如单击<table>标 签,可选中网页中与之对应的表格。
拆分:在文档窗口中同时显示代码视图和设计视图。这 样当用户在代码视图中编辑网页源代码后,单击设计视 图中的任意位置,会立刻在设计视图中看到相应的编辑 结果。
在代码视图中以不同颜色显示不同 类型的代码。此外,利用左侧的工 具按钮可以对代码进行相应的操作, 如折叠、展开代码,选择标签,检 查代码,缩进代码等。
步骤1:
创建本地站点文件夹。将本书附赠素材“素材与实 例\ch02”目录下的文件夹“ydjt”(案例一中创 建好目录结构的网站文件夹)拷贝至本地磁盘,作 为网站根文件夹。
常用类别 结构类别 媒体类别 表单类别 jQuery Mobile jQuery UI 模板类别
(a)
(b)
图2-8 “插入”面板
10
使用Dreamweaver制作或编辑网页时,经常 需要打开、关闭某个面板,或对其工作界面进行各 种调整。下面学习调整Dreamweaver CC工作界面 的常见操作。
图2-16 “管理站点”对话框
图2-17 “文件”面板 18
管理本地站点的操作主要包括编辑站点、复制站点、删除站点和导出导入站点等,下面分别介绍。
1.编辑站点
编辑站点的方法有以下两种:
方法1:选择“站点”>“管理站点”菜单命令, 在“管理站点”对话框中双击要编辑的站点,即 可弹出此站点相关信息进行编辑,如图2-18所示。 方法2:在“文件”面板中选择站点列表中的“管 理站点”选项,也可打开“管理站点”对话框, 如图2-19所示。
21
4.导出和导入站点
在Dreamweaver CC中,可以将现有站点导出为一 个站点文件,也可以将站点文件导入为一个站点。导 出、导入的作用在于保存及恢复站点和本地文件的链 接关系。
1)导出站点
步骤1:
在“管理站点”对话框的站点列表中单击选中要导 出的站点,单击“导出当前选定的站点”按钮,如 图2-21所示。
LOGO
计算机精品教材
简明薪酬设计
专业
专注 布衣公专子心作品 1
目录
Contents
第2章 Dreamweaver CC基本操作
案例一 调整Dreamweaver CC工作界面——初识Dreamweaver CC 案例二 创建企业网站本地站点——站点基本操作 案例三 为企业网站制作欢迎页面——网页文档基本操作
图2-5 代码视图
6
பைடு நூலகம்
设计:在文档窗口中显示设计视图。在设计视图中看到的网页效果类似于在浏览器中看到 的效果,用户可在该视图中直接编辑网页中的各个对象。
实时视图:与设计视图类似,但实时视图能更逼真地显示文档在浏览器中的效果,还可以 像在浏览器中一样与文档进行交互。
在浏览器中预览/调试:在浏览器中预览或调试文档。单击该按钮后可在弹出的列表中选 择一个浏览器版本。
图2-15 设置“本地信息” 17
2.打开本地站 点
打开本地站点的方法有以下两种:
步骤1:
在菜单栏中选择“站点”>“管理站点”菜单 命令,弹出如图2-16所示的“管理站点”对 话框,选择要打开的站点,单击“完成”按 钮即可。
步骤2: 在“文件”面板的“站点”下拉列表中选择已创建的某
个站点,也可将其打开,如图2-17所示。
16 图2-14 设置站点信息
步骤4:
设置服务器信息。在左侧列表中单击“服务器”选项,对话 框右侧将显示服务器相关信息。站点服务器信息可以暂时不 填写,在上传网站时再添加。
步骤5:
设置“版本控制”信息。在左侧列表中单击“版本控制”选 项,此项一般设置访问对象为“无”。
步骤6:
高级设置。对“高级设置”部分,仅设定“本地信息”即可, 如图2-15所示。设定好后,直接单击“保存”按钮,新的站 点就创建完成了。
图2-18 编辑站点方法1
图2-19 编辑站点方法2
19
2.复制站点
首先在“管理站点”对话框中选择要复制的站点,此处选择“test”,如图2-20(a)所示,单击“复 制当前选定的站点”按钮,在站点列表中即增加一个新的站点“test 复制”,表示这个站点是“test”的 复制,如图2-20(b)所示。双击复制产生的站点,可以对其进行编辑操作。
相关文档
最新文档