第3章 Dreamweaver基础2ppt课件.ppt
《第3章 Dreamweaver基础2ppt课件.ppt》由会员分享,可在线阅读,更多相关《第3章 Dreamweaver基础2ppt课件.ppt(69页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、在此输入您的封面副标题第3章 Dreamweaver基础2中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著:编著:李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲:主讲: 第3章 Dreamweaver基础中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 熟悉熟悉Dreamweaver CCDreamweaver CC的工作环境;掌握运用的工作环境;掌握运用DreamweaverDreamwea
2、ver建立本建立本地站点与管理站点文件的基本方法;掌握在网页中添加文字、图像、地站点与管理站点文件的基本方法;掌握在网页中添加文字、图像、多媒体等网页元素,并实现页面间的跳转链接;能使用多媒体等网页元素,并实现页面间的跳转链接;能使用CSSCSS对页面进对页面进行美化。行美化。技能目标:技能目标: 综合运用综合运用Dreamweaver的各项功能结合的各项功能结合HTML和和CSS语语法进行网页设计。法进行网页设计。能力目标:能力目标: 培养和提升自身的审美观,合理的组织网页元素美化页面。培养和提升自身的审美观,合理的组织网页元素美化页面。中国铁道出版社电子商务网页设计(第2版)课件 2016
3、.12 B 网页文档的基本操作网页文档的基本操作使用超链接使用超链接 3.6 站点管理和网页管理站点管理和网页管理3.5 使用使用CSS美化网页美化网页中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 网页编辑工具Dreamweaver介绍 本节要点中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B CC的界面 首次启动首次启动Dreamweaver CC后就可以看到图后就可以看到图3-1所示的界所示的界面,此时的工作环境主要用于设置网站,操作内容有菜单面,此时的工作环境主要用于设置网站,操作内容有菜单栏和浮动面板组的文件面板。栏和浮动面板组的文件面板。菜单栏中国
4、铁道出版社电子商务网页设计(第2版)课件 2016.12 B 菜单栏:由文件、编辑、查看、插入、修改、格式、命令菜单栏:由文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助等菜单组成,每个菜单中都包含有一、站点、窗口、帮助等菜单组成,每个菜单中都包含有一系列命令。其中的系列命令。其中的“站点站点”菜单下的菜单下的“新建站点新建站点”命令主命令主要用于新建站点;要用于新建站点;“窗口窗口”菜单主要用于打开文件面板和菜单主要用于打开文件面板和插入面板等。插入面板等。 文件面板:是常用的浮动功能面板之一,文件面板默认显文件面板:是常用的浮动功能面板之一,文件面板默认显示上次编辑的站点,如图示
5、上次编辑的站点,如图3-3。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B CC的工作环境由菜单栏、文档窗口、插入面板、属的工作环境由菜单栏、文档窗口、插入面板、属性面板和面板组等多部分组成。性面板和面板组等多部分组成。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 文档标签:文档标签:文档窗口的左上角显示网页文档的名称,如文档窗口的左上角显示网页文档的名称,如Untitle.html,当有多个文档进行编辑时,网页文档名称以标签形,当有多个文档进行编辑时,网页文档名称以标签形式排列,以便于在各网页文件之间快速的进行切换。式排列,以便于在各网页文件之间快速的进
6、行切换。 工作视图按钮:工作视图按钮:文档标签下方提供了文档标签下方提供了3种工作视图,分别是代码视种工作视图,分别是代码视图、拆分视图和设计视图。代码视图是一种直接编写图、拆分视图和设计视图。代码视图是一种直接编写HTML代码代码的工作环境,相当于记事本;设计视图是一种可视化的工作环境的工作环境,相当于记事本;设计视图是一种可视化的工作环境,通过界面操作完成网页元素的编辑,适合于初学者使用;拆分,通过界面操作完成网页元素的编辑,适合于初学者使用;拆分视图则将工作区分成了两个区域,一半是代码视图,一半是设计视图则将工作区分成了两个区域,一半是代码视图,一半是设计视图,图视图,图3-2显示的是拆
7、分视图下的文档编辑窗口。在一个区域中显示的是拆分视图下的文档编辑窗口。在一个区域中进行编辑的时候,另一个区域也会随之发生变化。进行编辑的时候,另一个区域也会随之发生变化。 状态栏:状态栏:文档窗口底部是状态栏,状态栏左边显示了网页中的各文档窗口底部是状态栏,状态栏左边显示了网页中的各种种HTML标签、设备类型和窗口大小等信息。标签、设备类型和窗口大小等信息。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 插入面板:有常用、结构、媒体、表单、插入面板:有常用、结构、媒体、表单、jQuery Mobile、jQuery UI、模板和收藏夹等、模板和收藏夹等8个对象面板,每个个对象
8、面板,每个对象面板都包含一组命令按钮,利用这些按钮可以方便快对象面板都包含一组命令按钮,利用这些按钮可以方便快速地插入图像、表格、多媒体等各种类型的网页元素(可速地插入图像、表格、多媒体等各种类型的网页元素(可以通过以通过“窗口窗口”“插入插入”打开或关闭)。打开或关闭)。 属性面板:用于设置网页元素的属性。不同的网页元素属性面板:用于设置网页元素的属性。不同的网页元素其属性面板的样子也不相同,编辑网页时,选中的对象不其属性面板的样子也不相同,编辑网页时,选中的对象不同,属性面板中的内容也会随之发生变化。同,属性面板中的内容也会随之发生变化。 浮动面板:窗口右端是浮动面板组,可以通过窗口菜单浮
9、动面板:窗口右端是浮动面板组,可以通过窗口菜单命令打开,包含了文件、插入、命令打开,包含了文件、插入、CSS样式、资源等一系列样式、资源等一系列浮动面板,如图浮动面板,如图3-3。单击还可以显示其设置对话框,其。单击还可以显示其设置对话框,其中文件面板是常用的功能面板之一,如图中文件面板是常用的功能面板之一,如图3-4,用户可以,用户可以自行对其进行拆分和组合。自行对其进行拆分和组合。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 创建及设置本地站点创建及设置本地站点1.创建本地站点的目的创建本地站点的目的创建本地站点就是将本地文件夹中的网页文件与创建本地站点就是将本地文件夹
10、中的网页文件与Dreamweaver系统系统之间建立一种关联性,这样,设计者就可以通过之间建立一种关联性,这样,设计者就可以通过Dreamweaver软件软件来管理站点中的文件。创建本地站点实质上就是在本地硬盘上创建一来管理站点中的文件。创建本地站点实质上就是在本地硬盘上创建一系列的一个文件和文件夹,把网站中所涉及到的各种网页文件和图形系列的一个文件和文件夹,把网站中所涉及到的各种网页文件和图形、多媒体素材按照类别放在不同的文件夹中,以便利用、多媒体素材按照类别放在不同的文件夹中,以便利用Dreamweaver软件对网站中的各种文件进行管理。因此,在创建本软件对网站中的各种文件进行管理。因此,
11、在创建本地站点的第一步,应该首先在本地硬盘上建立一个文件夹。地站点的第一步,应该首先在本地硬盘上建立一个文件夹。在开始制作网页之前,最好先建立一个本地站点,以便全面系统地管在开始制作网页之前,最好先建立一个本地站点,以便全面系统地管理网站中的网页文件、图像文件和多媒体文件,也可以尽可能避免各理网站中的网页文件、图像文件和多媒体文件,也可以尽可能避免各种错误,如路径出错、链接不能实现等问题。初学者往往是由于文件种错误,如路径出错、链接不能实现等问题。初学者往往是由于文件的存放没有条理,网页经常会出现图片不能显示、链接出错等问题。的存放没有条理,网页经常会出现图片不能显示、链接出错等问题。因此,建
12、议在开始制作网页之前,先建立一个文件夹用于存放网站的因此,建议在开始制作网页之前,先建立一个文件夹用于存放网站的所有文件,再在该文件夹内建几个子文件夹,把网页中所涉及到的图所有文件,再在该文件夹内建几个子文件夹,把网页中所涉及到的图片、多媒体等素材分门别类的放在站点文件夹中。片、多媒体等素材分门别类的放在站点文件夹中。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 2.创建及设置本地站点创建及设置本地站点 创建本地站点前,先在你计算机硬盘的根目录下(如创建本地站点前,先在你计算机硬盘的根目录下(如D盘盘或或E盘盘)下新建一个站点文件夹,用以给网页安个下新建一个站点文件夹,用以
13、给网页安个“家家”。接着在该文件夹中还可以建立几个子文件夹,把网站用到接着在该文件夹中还可以建立几个子文件夹,把网站用到的所有图像、多媒体素材、程序文件全部放在这个网站文的所有图像、多媒体素材、程序文件全部放在这个网站文件夹中。本地站点的创建分两步:一是新建一个站点文件件夹中。本地站点的创建分两步:一是新建一个站点文件夹,二是设置本地文件夹和夹,二是设置本地文件夹和DW软件的关联。软件的关联。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 第第1步:步:创建站点文件夹。步骤如下:创建站点文件夹。步骤如下: 在在D盘根目录下新建一个文件夹。打开盘根目录下新建一个文件夹。打开“我
14、的电脑我的电脑”,打开打开D盘,点鼠标右键,选择盘,点鼠标右键,选择“新建新建”“文件夹文件夹”选项选项,D盘下会出现一个新建文件夹图标。盘下会出现一个新建文件夹图标。 输入你要的站点名称,这里输入输入你要的站点名称,这里输入ncpshop。如图。如图3-5。 再在该文件夹下新建图像文件夹,如再在该文件夹下新建图像文件夹,如images;或同时;或同时在该根文件夹下新建几个你拟设计的网页模块的文件夹。在该根文件夹下新建几个你拟设计的网页模块的文件夹。如如images、css、js、techan等文件夹。等文件夹。 注意:文件夹名称可以任意的,但尽量使用西文,不要用注意:文件夹名称可以任意的,但
15、尽量使用西文,不要用中文,可参考。中文,可参考。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 第第2步:步:运用运用DW设置本地文件和设置本地文件和DW软件的关联。步骤如下:软件的关联。步骤如下: 启动启动Dreamweaver,选择,选择“站点站点”“新建站点新建站点”命令,命令,打开打开“站点设置对象站点设置对象”对话框,默认对话框如图对话框,默认对话框如图3-6所示。所示。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 在在“站点设置对象站点设置对象”对话框的对话框的“站点名称站点名称”文本框内输入文本框内输入站点的名称站点的名称“ncpshop”。
16、 单击单击“本地站点文件夹本地站点文件夹”文本框右边的按钮,选择站点文文本框右边的按钮,选择站点文件夹所在的位置,即件夹所在的位置,即“D:ncpshop”。 接下来,在接下来,在“站点设置对象站点设置对象”对话框的左边,单击对话框的左边,单击“高级高级设置设置”,出现新的,出现新的“站点设置对象站点设置对象 ncpshop”对话框,如图对话框,如图3-7所示。所示。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 单击右面区域中的单击右面区域中的“默认图像文件夹默认图像文件夹”文本框右边的按文本框右边的按钮,选择站点内图片的默认保存位置,如钮,选择站点内图片的默认保存位置,如
17、“D:ncpshopimages”。 勾选勾选“启用缓存启用缓存”复选框,可以提高链接的更新速度,复选框,可以提高链接的更新速度,默认为选中状态。默认为选中状态。 单击单击“确定确定”按钮,此时在按钮,此时在“文件文件”面板中会看到如图面板中会看到如图3-4所示的站点结构图,站点所示的站点结构图,站点“ncpshop”创建成功。创建成功。 远程站点的设置内容将在第节介绍。远程站点的设置内容将在第节介绍。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 网页文档的基本操作网页文档的基本操作2. 设置站点首页设置站点首页3. 制作网页的一般过程制作网页的一般过程本节要点中国铁道出版
18、社电子商务网页设计(第2版)课件 2016.12 B 的文件,此时可以直的文件,此时可以直接为其重命名,或者在该文件名上单击右键,选择接为其重命名,或者在该文件名上单击右键,选择“编辑编辑”“重命重命名名”改名字,如改名字,如index.html,就创建了第一个网页文件,但是扩展名,就创建了第一个网页文件,但是扩展名必须为必须为“.html”。要编辑这个文件,用鼠标双击它就行了。网页文件。要编辑这个文件,用鼠标双击它就行了。网页文件的命名规范,参见节。的命名规范,参见节。在在“文件文件”面板窗口也可以用来在站点中创建文件夹,步骤和建立网面板窗口也可以用来在站点中创建文件夹,步骤和建立网页文件的
19、步骤相似。首先用鼠标选中相应的上一层文件夹,单击右键页文件的步骤相似。首先用鼠标选中相应的上一层文件夹,单击右键弹出菜单选择弹出菜单选择“新建文件夹新建文件夹”选项,为其重命名。通过上面创建新网选项,为其重命名。通过上面创建新网页文件的办法,我们可以创建任意数目的文件或文件夹。页文件的办法,我们可以创建任意数目的文件或文件夹。2.打开网页文档打开网页文档 在在“文件文件”面板中双击文件名,或者在该文件名上单击右键,选择面板中双击文件名,或者在该文件名上单击右键,选择“打开打开”,就可以在文档窗口打开该文件,接下来就可以在工作区对文,就可以在文档窗口打开该文件,接下来就可以在工作区对文档进行编辑
20、了。档进行编辑了。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 3.保存网页文档保存网页文档 通过上述方式创建的网页已经被保存在了站点文件夹内,通过上述方式创建的网页已经被保存在了站点文件夹内,当我们对该网页编辑后,单击保存或按当我们对该网页编辑后,单击保存或按【Ctrl+S】组合键组合键即可。也可以选择菜单栏的即可。也可以选择菜单栏的“文件文件”“保存保存”。 4.关闭网页文档关闭网页文档 完成对网页文档的编辑、保存后,单击文档窗口上的的来完成对网页文档的编辑、保存后,单击文档窗口上的的来关闭当前文档,或通过关闭当前文档,或通过“文件文件”“关闭关闭”命令关闭文档命令关闭
21、文档。 5.网页文档的初始化网页文档的初始化 单击单击“编辑编辑”“首选参数首选参数”命令,打开命令,打开“首选参数首选参数”对对话框,在左侧的话框,在左侧的“分类分类”项中选择项中选择“新建文档新建文档”选项,出选项,出现如图现如图3-8所示对话框,设置所示对话框,设置“默认文档类型默认文档类型”为为html5,这样我们在软件里新建的文档默认为这样我们在软件里新建的文档默认为html5文档。也可以文档。也可以设置其他文档类型,如设置其他文档类型,如XHTML1.1。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 每个网站都包含至少一个网页,其中有一个页面包含所有每个网站都包
22、含至少一个网页,其中有一个页面包含所有跳转到其他页面的链接,它就是首页。首页是浏览网站时跳转到其他页面的链接,它就是首页。首页是浏览网站时看到的第一个页面,通常被命名为看到的第一个页面,通常被命名为index.html或或default.html。比如,在地址栏中输入。比如,在地址栏中输入http:/,虽然指明,虽然指明要访问的站点的主机地址,但是并没有说明要浏览其上的要访问的站点的主机地址,但是并没有说明要浏览其上的哪一个文件,这时会自动打开该站点的首页,因此输入哪一个文件,这时会自动打开该站点的首页,因此输入http:/www. /,就相当于是输入了,就相当于是输入了http:/或或htt
23、p:/ /default.html。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 2016.12 B 基本网页元素编辑1.设置网页页面属性设置网页页面属性2.在网页中插入头部内容在网页中插入头部内容3.网页文本的编辑网页文本的编辑4.网页图像的设置网页图像的设置本节要点中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 编辑网页的第一步,就是选择菜单编辑网页的第一步,就是选择菜单“修改修改”“页面属性页面属性”,打开,打开“页面属性页面属性”对话框来设置网页标题等网页元素对话框来设置网页标题等网页元素,如图,如图3-9所示。对话框中左边有所示。对话框中左边有“
24、外观(外观(CSS)、外观)、外观(HTML)、链接)、链接(CSS)、标题、标题(CSS)、标题、标题/编码、跟踪编码、跟踪图像图像”六个分类,这里只介绍六个分类,这里只介绍“标题标题/编码编码”。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 在左侧选择在左侧选择“标题标题/编码编码”分类,可以设置网页的标题和分类,可以设置网页的标题和文字编码等元素:文字编码等元素: 标题:设置网页的标题:设置网页的标签。标签。 文档类型:设置网页的文档声明类型。一般选择文档类型:设置网页的文档声明类型。一般选择HTML5,也可以设置其他类型。,也可以设置其他类型。 编码:设置网页的字体
25、编码。编码:设置网页的字体编码。Unicode(UTF-8)是世界)是世界性通用代码,完美的支持中文编码,性通用代码,完美的支持中文编码,HTML5环境下最好环境下最好选择选择UTF-8。中国铁道出版社电子商务网页设计(第2版)课件 2016.12 B 1.插入插入META标签标签 标签一般用来描述网页文件自身信息,是网页设标签一般用来描述网页文件自身信息,是网页设计中非常重要的元素。计中非常重要的元素。元素常用于描述一些该页元素常用于描述一些该页面的一些基本信息,普通浏览者不会使看到相关数据,搜面的一些基本信息,普通浏览者不会使看到相关数据,搜索引擎对这里的数据很感兴趣。索引擎对这里的数据很
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第3章 Dreamweaver基础2ppt课件 Dreamweaver 基础 ppt 课件
限制150内