《Dreamweaver CC网页创意设计案例课堂》根据Dreamweaver CC图形绘制和平面设计的特点,精心设计了65个案例,由优秀平面设计教师编写,循序渐进地讲解使用Dreamweaver CC制作和设计专业网页作品的全部知识。全书共分9章,分别讲解Dreamweaver CC的基本操作、娱乐休闲类网页设计、电脑网络类网页设计、商业经济类网页设计、教育培训类网站设计、艺术爱好类网站设计、旅游交通类网站设计、生活服务类网站设计、购物网站设计等内容,通过大量的案例精讲帮助读者掌握网页制作的方法和操作技巧。c采用案例教程的编写形式,兼具技术手册和应用专著的特点,附带的DVD教学光盘如教师亲自授课一样讲解,内容全面、结构合理、图文并茂、案例丰富、讲解清晰,不仅适合广大图像设计初、中级爱好者的使用,也可以作为大中专院校相关专业以及社会各类初、中级网页培训班的教学用书。本书配套光盘内容为本书所有案例精讲的素材文件、效果文件以及案例精讲的视频教学文件。
第1章 Dreamweaver CC的基本操作
◆ Dreamweaver CC的安装
◆ Dreamweaver CC的启动与退出
◆ 站点的建立
◆ 站点的管理
◆ 页面属性设置
◆ 多媒体文件的添加
◆ E-mail链接
◆ 下载链接
◆ 鼠标经过图像
◆ 弹出信息设置
◆ 设置空链接
本章重点
Dreamweaver与其他设计类软件的基本操作方法有所不同,对初学者来说,初次使用Dreamweaver会有许多困惑。为了方便后面章节的学习,在本章中将学习安装、卸载、启动Dreamweaver CC,并学习对该软件的一些基本操作。
案例精讲001 Dreamweaver CC的安装
案例文件:无视频文件:视频教学\ Cha01 \ Dreamweaver CC的安装.avi
制作概述
本例将讲解如何安装Dreamweaver CC。
学习目标
掌握Dreamweaver CC的安装方法。
操作步骤
(1) 将Dreamweaver CC的安装光盘放入光盘驱动器,系统会自动运行Dreamweaver CC的安装程序。首先屏幕中会弹出一个安装初始化,如图1-1所示,这个过程大约需要几分钟的时间。
(2) Dreamweaver CC的安装程序会自动弹出一个欢迎安装界面,单击【安装】或【试用】按钮,如图1-2所示。
图1-1 初始化程序
图1-2 欢迎安装界面
(3) 随后弹出Dreamweaver CC授权协议窗口,单击Dreamweaver CC授权协议窗口右下角的【接受】按钮,如图1-3所示。
(4) 在弹出的对话框中的序列号文本框中填入序列号进行安装,然后单击【下一步】按钮,如图1-4所示。
图1-3 接受软件许可协议
图1-4 输入序列号
(5) 此时会弹出Dreamweaver CC的安装路径,安装过程需要创建一个文件夹,用来存放Dreamweaver CC安装的全部内容。如果用户希望将Dreamweaver CC安装到默认的文件夹中,则直接单击【安装】按钮即可;如果想要更改安装路径,则可以单击安装位置右边的【更改】按钮,在磁盘列表中选择相应的磁盘,如图1-5所示。
(6) 用户选择好安装的路径之后,单击【安装】按钮,开始安装Dreamweaver CC软件,如图1-6所示。
图1-5 安装路径
图1-6 安装进程
(7) Dreamweaver CC安装完成后,会显示一个安装完成窗口,如图1-7所示。
(8) 单击【关闭】按钮,完成Dreamweaver CC的安装。软件安装结束后,Dreamweaver CC会自动在Windows程序组中添加一个Dreamweaver CC的快捷方式,如图1-8所示。
图1-7 安装完成界面
图1-8 Dreamweaver CC快捷方式
案例精讲002 Dreamweaver CC的启动与退出
案例文件:无视频文件:视频教学 \ Cha01 \ Dreamweaver CC的启动与退出.avi
制作概述
本例介绍如何启动与退出Dreamweaver CC。
学习目标
掌握启动与退出Dreamweaver CC的方法。
操作步骤
(1) 双击桌面上的Dreamweaver CC快捷方式,进入Dreamweaver CC的工作界面,如图1-9所示,程序就启动完成了。
(2) 退出程序可以单击Dreamweaver CC工作界面右上角的按钮关闭程序,也可以选择菜单栏中的【文件】|【退出】命令退出程序,如图1-10所示。
知识链接Adobe Dreamweaver,简称DW,中文名称为“梦想编织者”,是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。Adobe Dreamweaver使用所见即所得的接口,亦有HTML(标准通用标记语言下的一个应用)编辑的功能。DW是第一套针对专业网页设计师的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。目前有Mac版本和Windows版本。
图1-9 Dreamweaver CC的工作界面
图1-10 选择【退出】命令
案例精讲003 站点的建立
案例文件:无视频文件:视频教学 \ Cha01 \站点的建立.avi
制作概述
在制作网页之前,需要建立站点。本例介绍如何使用Dreamweaver CC建立站点。
学习目标
学会如何建立站点。
操作步骤
(1) 启动Dreamweaver CC软件,选择【站点】|【新建站点】菜单命令,如图1-11所示。
(2) 弹出【站点设置对象】对话框,在【站点名称】文本框中输入“我爱我家”,如图1-12所示。
图1-11 选择【新建站点】命令
图1-12 保存文件
(3) 在【本地站点文件夹】文本框中指定站点的位置,即计算机上用于存储站点文件的本地文件夹。可以单击该文本框右侧的文件夹图标以浏览相应的文件夹,如图1-13所示。
(4) 单击【保存】按钮,关闭【站点设置对象】对话框,在【文件】面板中的【本地文件】窗口中会显示该站点的根目录,如图1-14所示。
图1-13 存储面板
图1-14 【文件】面板
知识链接Dreamweaver站点是一种管理网站中所有相关联文档的工具,通过站点可以实现将文件上传到网络服务器、自动跟踪和维护、管理文件以及共享文件等功能。严格地说,站点也是一种文档的组织形式,由文档和文档所在的文件夹组成,不同的文件夹保存不同的网页内容,如images文件夹用于存放图片,这样便于以后管理与更新。Dreamweaver中的站点包括本地站点、远程站点和测试站点3类。本地站点是用来存放整个网站框架的本地文件夹,是用户的工作目录,一般制作网页时只需建立本地站点。远程站点是存储于Internet服务器上的站点和相关文档。通常情况下,为了不连接Internet而对所建的站点进行测试,可以在本地计算机上创建远程站点,来模拟真实的Web服务器进行测试。
案例精讲004 站点的管理
案例文件:无视频文件:视频教学 \ Cha01 \站点的管理.avi
制作概述
本例介绍如何在Dreamweaver CC中管理站点。
学习目标
掌握使用Dreamweaver CC管理站点的方法。
操作步骤
(1)选择【站点】|【管理站点】菜单命令,如图1-15所示。
(2)打开【管理站点】对话框,如图1-16所示。
图1-15 选择【管理站点】命令
图1-16 【管理站点】对话框
(3)在【管理站点】对话框中选择要打开的站点,如选择【我爱我家】站点,单击【完成】按钮,即可将其打开,如图1-17所示。
知识链接测试站点是Dreamweaver处理动态页面的文件夹,使用此文件夹生成动态内容并在工作时连接到数据库,用于对动态页面进行测试。静态网页是标准的HTML文件,采用HTML编写,是通过HTTP在服务器端和客户端之间传输的纯文本文件,其扩展名是htm或html。动态网页以.asp、jsp、php等形式为后缀,以数据库技术为基础,含有程序代码,是可以实现如用户注册、在线调查、订单管理等功能的网页文件。动态网页能根据不同的时间、不同的来访者显示不同的内容,动态网站更新方便,一般在后台直接更新。
(4)如果要对站点进行编辑,可在选择站点名称后单击【编辑当前选定的站点】按钮,如图1-18所示,完成上述操作后即可打开【站点设置对象】对话框。
图1-17 选择对象
图1-18 单击【编辑当前选定的站点】按钮
(5)完成编辑后,单击【保存】按钮,返回【管理站点】对话框,单击【完成】按钮结束站点的编辑,如图1-19所示。
图1-19 保存文件
知识链接站点是一组具有共享属性(如相关主题、类似的设计或共同目的)的链接文档和资源。Dreamweaver是创建和管理站点的工具,使用它不仅可以创建单独的文档,还可以创建完整的Web站点。
案例精讲005 页面属性设置
案例文件:无视频文件:视频教学 \ Cha01 \页面属性设置.avi
制作概述
本例介绍Dreamweaver CC的页面属性设置。
学习目标
学会如何设置网页的页面属性。
操作步骤
(1) 运行Dreamweaver CC软件,单击【属性】栏中的【页面属性】按钮,如图1-20所示。
(2) 在弹出的【页面属性】对话框中的【分类】栏中进行选择,可对页面的背景颜色、位图和字体等进行设置,如图1-21所示。
对于在Dreamweaver中创建的每个页面,都可以使用【页面属性】对话框指定布局和格式设置属性。在【页面属性】对话框可以指定页面的默认字体系列和字体大小、背景颜色、边距、链接样式及页面设计的其他许多方面。可以为创建的每个新页面指定新的页面属性,也可以修改现有页面的属性。在【页面属性】对话框中所进行的更改将应用于整个页面。Dreamweaver提供了两种修改页面属性的方法:CSS 或 HTML。Adobe建议使用CSS设置背景和修改页面属性。
图1-20 单击【页面属性】按钮
图1-21 设置参数
案例精讲006 多媒体文件的添加
案例文件:无视频文件:视频教学 \ Cha01 \多媒体文件的添加.avi
制作概述
本例介绍如何在网页中添加多媒体文件。
学习目标
学会如何在网页中添加多媒体文件。
操作步骤
(1) 启动Dreamweaver CC,在欢迎屏幕的【新建】栏中选择HTML选项,如图1-22所示。
(2) 选择菜单栏中的【插入】|【媒体】| flash SWF命令,将随书附带光盘中的CDROM \素材\ Cha01\自行车.swf文件插入到当前文档,如图1-23所示。
图1-22 选择HTML选项
图1-23 选择对象
(3) 单击【确定】按钮后会弹出请求保存对话框,单击【是】按钮,如图1-24所示。
(4) 在【对象标签辅助功能属性】对话框中,标题随意即可,单击【确定】按钮即可,如图1-25所示。
图1-24 单击【是】按钮
图1-25 【对象标签辅助功能属性】
(5) 完成上述操作,效果如图1-26所示。
(6) 完成后进行保存,按F12键可以在浏览器中预览效果,如图1-27所示。
图1-26 完成操作后的效果
图1-27 预览效果
知识链接相比传统媒体,网页包含了更多的组成元素——除了文字、图像、音频、视频外,还有很多其他对象也可以加入网页中,比如Java Applet小程序、Flash动画、QuickTime电影等。1. 文字文字是网页的主体,是传达信息最重要的方式。因为它占用的存储空间非常小(一个汉字只占用两个字节),所以很多大型的网站提供纯文字的版面以缩短浏览者的下载时间。文字在网页上的主要形式有标题、正文、文本链接等。2. 图像采用图像可以减少纯文字给人的枯燥感,巧妙的图像组合可以带给用户美的享受。图像在网页中有很多用途,可以用来做图标、标题、背景等,甚至构成整个页面。(1)图标网站的标志是风格和主题的集中体现,其中可以包含文字、符号、图案等元素。设计师就是用这些元素进行巧妙组合来达到表现公司、网站形象的目的。(2)标题标题可以用文本,也可以用图像。但是使用图像标题要比文本标题的表现力更强,效果更加突出。有时页面中的标题需要使用特殊的字体,但可能很多浏览者的机器上没有安装这种字体,那么浏览者看到的效果和设计师看到的效果是不同的。此时最好的解决方法就是将标题文字制作成图片,这样可以保证所有人看到的效果是一样的。
(3)插图通过照片和插图可以直观地表达效果和展现主题,但也有一些插图仅仅是为了装饰。广告条网络媒体和其他传统媒体一样,投放广告是获取商业利益的重要手段。网站中的广告通常有两种形式:一是文字链接广告;二是广告条。前者通过HTML语言即可实现,后者是把广告内容设计为吸引浏览者注意的图像或者动画,让浏览者通过单击来访问特定的宣传网页。(4)背景使用背景是网站整体设计风格的重要方法之一。背景可通过HTML语言定义为单色或背景图像,背景图像可以是JPEG和GIF两种格式。(5)导航栏导航栏用来帮助浏览者熟悉网站结构,让浏览者可以很方便地访问想要的页面。导航栏的风格需要和页面保持一致。导航栏主要有文字导航和图形导航两种形式。文字式导航清楚易懂,下载迅速,适用于信息量大的网站。图形导航栏美观,表现力强,适用于一般商业网站或个人网站。3. 音频将多媒体引入网页,可以在很大程度上吸引浏览者的注意。利用多媒体文件可以制作出更有创造性、艺术性的作品,它的引入使网站成了一个有声有色、动静相宜的世界。多媒体一般指音频、视频、动画等形式。网上常见的音频格式有MIDI、WAV、MP3等。MIDI音乐:每逢节日,我们都会到贺卡网站上收发电子贺卡。其中有些贺卡就有一种音色类似电子琴的背景音乐,这种背景音乐就是网上常见的一种多媒体格式——MIDI音乐,它的文件以.mid为扩展名,特点是文件体积非常小,很快就可下载完毕,但音色很单调。WAV音频:我们每次打开计算机时听到的进入系统的音乐实际上就是WAV音频。该音频是以.wav为扩展名的声音文件,它的特点是表现力丰富,但文件体积很大。【MP3音乐】:MP3是我们非常熟悉的文件格式,现在互联网上的音乐大多数都是MP3格式的,它的特点是在尽可能保证音质的情况下减小文件体积,通常长度为3min左右的歌曲文件,大概在3MB。4. 视频视频在网页上出现得不多,但它有着其他媒体不可替代的优势。视频传达的信息形象生动,能给人留下深刻的印象。常见的网上视频文件有AVI、RM等。AVI视频:AVI视频文件是由Microsoft开发的视频文件格式,其文件的扩展名为.avi。它的特点是视频文件不失真,视觉效果很好,但缺点是文件体积太大,短短几分钟的视频文件需要耗费几百兆的硬盘空间。RM视频:喜欢在线看电影的朋友一定认识它,它是由Real Networks公司开发的音视频文件格式,主要用于网上的电影文件传输,扩展名为.rm。它的特点是能一边下载一边播放,又称为流式媒体。QuickTime电影:QuickTime电影是由美国苹果计算机公司开发的用于Mac OS的一种电影文件格式,在PC上也可以使用,但需要安装QuickTime的插件,这种媒体文件的扩展名是.mov。WMV视频:这是微软公司开发的新一代视频文件格式,特点是文件体积小而且视频效果较好,能够支持边下载边播放,目前已经在网上电影市场中站稳了脚跟。FLV视频:FLV是 Flash Video的简称。FLV串流媒体格式是一种新的网络视频格式,它的
出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上有效使用等缺点。随着网络视频网站的丰富,该格式已经非常普及。5. 动画动画是网页中最吸引眼球的地方,好的动画能够使页面显得活泼生动,达到动静相宜的效果。特别是Flash动画产生以来,动画成了网页设计中最热门的话题。常见的动画格式:GIF动画是多媒体网页动画最早的动画格式,优点是文件体积小,但没有交互性,主要用于网站图标和广告条。Flash动画:Flash动画是基于矢量图形的交互性流式动画文件格式,可以用Adobe开发的Flash CS3进行制作。使用其内置的ActionScript语言还可以创建出各种复杂的应用程序,甚至是各种游戏。Java Applet:在网页中可以调用Java Applet来实现一些动画效果。6.链接和路径当用鼠标单击网页上的一段文本(或一张图片)时,此时会出现小手的形状,如果可以打开网络上一个新的地址,就代表该文本(或图片)上有链接。
案例精讲007 E-mail链接
案例文件:无视频文件:视频教学 \ Cha01 \ E-mail链接.avi
制作概述
本例介绍如何在网页中添加E-mail链接。
学习目标
学会如何在网页中添加E-mail链接。
操作步骤
(1) 运行Dreamweaver CC,在欢迎屏幕的【新建】栏中选择HTML选项,然后输入“有空联系,可以给我发邮件”文本,如图1-28所示。
(2) 选中其中的【邮件】文本,如图1-29所示。
图1-28 新建文件
图1-29 选中文本
(3) 选择菜单栏中的【插入】|【电子邮件链接】命令,在弹出的【电子邮件链接】对话框中的【电子邮件】文本框中输入电子邮件地址dlwcno111@163.com,然后单击【确定】按钮,即可为选择的文本添加电子邮件链接,如图1-30所示。
(4) 电子邮件链接完成后,保存文件。按F12键可以在浏览器中预览效果,如图1-31所示。
图1-30 添加电子邮件链接
图1-31 预览效果
知识链接电子邮件(标志:@,也被大家昵称为“伊妹儿”),是一种用电子手段提供信息交换的通信方式,是互联网应用最广的服务。通过网络的电子邮件系统,用户可以以非常低廉的价格(不管发送到哪里,都只需负担网费)、非常快速的方式(几秒之内可以发送到世界上任何指定的目的地),与世界上任何一个角落的网络用户联系。电子邮件可以是文字、图像、声音等多种形式。同时,用户可以得到大量免费的新闻、专题邮件,并实现轻松的信息搜索。电子邮件的存在极大地方便了人与人之间的沟通与交流,促进了社会的发展。超级链接是网页中最重要、最基本的元素之一。每个网站实际上都是由很多网页组成的,这些网页都是通过超级链接的形式关联在一起的。超级链接的作用是在因特网上建立一个位置到另一个位置的链接。超级链接由源地址文件和目标地址文件构成,当访问者单击超级链接时,浏览器会自动从相应的目的网址检索网页并显示在浏览器中。如果目标地址不是在网页而是其他类型的文件,浏览器会自动调用本机上的相关程序打开所要访问的文件。在网页中的链接按照链接路径的不同可分为3种形式:绝对路径、相对路径和根目录路径。这些路径都是网页中的统一资源定位,只不过后两种路径将URL的通信协议和主机名省略了,但必须有参照物,一种是以文档为参照物,另一种是以站点的根目录为参照物,而第一种就不需要有参照物,它是最完整的路径,也是标准的URL。
案例精讲008 下载链接
案例文件:无视频文件:视频教学\ Cha01\下载链接.avi
制作概述
本例介绍如何在网页中添加下载链接。
学习目标
学会如何在网页中添加下载链接。
操作步骤
(1) 运行Dreamweaver CC,打开随书附带光盘中的CDROM\素材\Cha01\会议室.html网页文件,选择网页中的【会议室】文本,如图1-32所示。
(2) 在【属性】面板中单击【链接】后的【浏览文件】按钮,在打开的【选择文件】对话框中选择“会议室.zip”文件,单击【确定】按钮,如图1-33所示。
图1-32 打开文件
图1-33 【选择文件】对话框
(3) 指定路径完成后,在【属性】面板中可查看到所选择的链接文件,如图1-34所示。
(4) 下载文件链接完成后,保存文件。按F12键可以在浏览器中预览效果,如图1-35所示。
图1-34 【属性】面板
图1-35 预览效果
案例精讲009 鼠标经过图像
案例文件:无视频文件:视频教学 \ Cha01 \鼠标经过图像.avi
制作概述
本例介绍如何在网页中添加鼠标经过图像的效果。
学习目标
学会如何在网页中添加鼠标经过图像的效果。
操作步骤
(1) 启动Dreamweaver CC,在欢迎屏幕中的【新建】栏中选择HTML选项,如图1-36所示。
(2) 选择菜单栏中的【插入】|【图像】|【鼠标经过图像】命令,如图1-37所示。
图1-36 新建文件
图1-37 选择【鼠标经过图像】命令
(3)弹出【鼠标经过图像】对话框,单击【原始图像】文本框右侧的【浏览】按钮,在弹出的【原始图像】对话框中选择鼠标经过前的图像文件“匣释者.jpg”,如图1-38所示。
(4)单击【鼠标经过图像】文本框右侧的【浏览】按钮,在弹出的原始图像对话框中选择鼠标经过时的图像文件“萨菲罗斯.jpg”,如图1-39所示。
图1-38 选择经过前的图像
图1-39 选择经过时的图像
(5) 完成后单击【确定】按钮,然后单击菜单栏中的【实时视图】按钮,预览效果,最后保存,如图1-40所示。
图1-40 单击【确定】按钮
……
第1章 Dreamweaver CC的基本操作
案例精讲001 Dreamweaver CC的安装 2
案例精讲002 Dreamweaver CC的启动与退出 4
案例精讲003 站点的建立 5
案例精讲004 站点的管理 6
案例精讲005 页面属性设置 8
案例精讲006 多媒体文件的添加 9
案例精讲007 E-mail链接 12
案例精讲008 下载链接 14
案例精讲009 鼠标经过图像 15
案例精讲010 弹出信息设置 16
案例精讲011 设置空链接 18
第2章 娱乐休闲类网页设计
案例精讲012 金属音乐网页设计 20
案例精讲013 速播电影网页设计 28
案例精讲014 嘟嘟交友网页设计 35
案例精讲015 媚图吧网页设计 45
案例精讲016 网络游戏网页设计 53
案例精讲017 篮球体育网页设计 59
案例精讲018 下载吧网页设计 67
第3章 电脑网络类网页设计
案例精讲019 IT信息网站 78
案例精讲020 技术网站 83
案例精讲021 个人博客网站 88
案例精讲022 设计网站 96
案例精讲023 绿色软件网站 99
案例精讲024 人民信息港 105
案例精讲025 速腾科技网页设计 113
第4章 商业经济类网页设计
案例精讲026 宏达物流网页 122
案例精讲027 洁雅卫浴网页 129
案例精讲028 宏泰投资网页 135
案例精讲029 凯莱顿酒店网页 142
案例精讲030 尼罗河汽车网页 150
案例精讲031 莱特易购网 158
案例精讲032 美食网 165
第5章 教育培训类网站设计
案例精讲033 小学网站网页设计 172
案例精讲034 天使宝贝(一) 181
案例精讲035 天使宝贝(二) 195
案例精讲036 天使宝贝(三) 203
案例精讲037 兴德教师招聘网 207
案例精讲038 新起点图书馆 215
第6章 艺术爱好类网站设计
案例精讲039 万图网网页设计 224
案例精讲040 书画网网页设计 232
案例精讲041 唐人戏曲网页设计 239
案例精讲042 婚纱摄影网页设计 250
案例精讲043 家居网站设计 255
案例精讲044 工艺品网设计 261
第7章 旅游交通类网站设计
案例精讲045 路畅网网页设计 268
案例精讲046 天气预报网网页设计 285
案例精讲047 黑蚂蚁欢乐谷网页设计(一) 299
案例精讲048 黑蚂蚁欢乐谷网页设计(二) 309
案例精讲049 旅游网站(一) 319
案例精讲050 旅游网站(二) 341
案例精讲051 旅游网站(三) 349
第8章 生活服务类网站设计
案例精讲052 礼品网网站 358
案例精讲053 鲜花网网站(一) 373
案例精讲054 鲜花网网站(二) 385
案例精讲055 房地产网站 391
案例精讲056 装饰公司网站(一) 398
案例精讲057 装饰公司网站(二) 406
案例精讲058 装饰公司网站(三) 416
第9章 购物网站设计
案例精讲059 shoes社区(一) 422
案例精讲060 shoes社区(二) 426
案例精讲061 shoes社区(三) 433
案例精讲062 女人天女装(一) 440
案例精讲063 女人天女装(二) 452
案例精讲064 女人天女装(三) 457
案例精讲065 魅包网 466