216网页安全色对于一个网页设计师来说是必备的常识,且利用它可以拟定出更安全、更出色的网页配色方案。只要在网页中使用216网页安全颜色,就可以控制网页的色彩显示效果。1.7不同色彩的网页千万年来的生活实践,人类由鲜血的红色、植物的绿色、稻麦的黄色、海洋的蓝色等各种自然色彩中形成了一系列共同的印象,使人们对色彩赋予了特别的象征意义。第2章使用PhotoshopCC入门基础教学内容:Photoshop的专长在于图像处理,图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工。本章主要介绍Photoshop的基本操作,包括PhotoshopCC的工作界面、前景色和背景色的设置、图像区域的选择、基本绘图工具的使用、创建文字和应用滤镜基本知识。
2.3创建选择区域从图像中选取所需内容是图像处理的基础操作,各种图像的处理往往是基于图像选取,并在所选区域上进行的。如何快速,精确地选取图像十分重要,这就要求掌握好各种选择工具的使用方法,使图像选取尽可能精确、合适,为以后的各种操作提供方便。2.3.1选框工具在PhotoshopCC中可以使用工具箱中的【矩形选框】工具和【椭圆选框】工具,在图像上选择选区。2.3.2套索工具在PhotoshopCC中可以使用工具箱中的【矩形选框】工具和【椭圆选框】工具,在图像上选择选区。2.3.3魔棒工具Photoshop的魔棒工具,是一个选区工具,其选择范围的多少取决于其工具选项栏中容差值的高低。容差值高,选择的范围就大,容差值低,选择的范围就小。魔棒工具的快捷键是字母W。2.4基本绘图工具在处理网页图像过程中,绘图是最基本的操作。PhotoshopCC提供了非常简捷的绘图功能。下面就来讲述在Photoshop中,画笔、铅笔、加深和减淡工具的应用。2.4.1笔画工具
【画笔】工具是工具箱中经常用到的工具,下面将讲述【画笔】工具的具体应用。2.4.2铅笔工具
【铅笔】工具用于随意性的创作,可以随意地画出各种线条和形状。下面讲述【铅笔】工具的具体使用方法。2.4.3加深和减淡工具的应用
教学重点设计火焰字设计发光字设计绿色清新风格文字设计蓝色荧光字金色质感文字设计黄金立体字4.1设计火焰字本节介绍一种火焰字的最简单制作方法,用图层样式来制作,只需要设置简单的一些参数就可以做出效果不错的火焰字。具体操作步骤如下。4.2设计多彩发光字下面通过【文字】工具和图层样式制作发光文字效果,具体操作步骤如下。
4.3设计绿色清新风格文字本节讲述制作一款清新炫丽的文字效果,具体操作步骤如下。4.4设计蓝色荧光字本节讲述蓝色荧光字的制作,具体操作步骤如下。在处理网页图像过程中,绘图是最基本的操作。4.5金色质感立体文字下面讲述金色质感立体文字效果,具体操作步骤如下。4.6设计黄金立体字下面通过实例讲创建木纹背景的方法,具体操作步骤如下。第5章设计网页Logo与按钮教学内容:按钮是网页中最常见的元素之一,从简单的个人网站到复杂的商业网站,到处都能看到各种各样的网页按钮。这些按钮一般设计精巧、立体感强,将其应用到网页中,既能吸引浏览者的注意,又增加了网页的美观效果。本章就来讲述各种网页按钮和导航栏的制作。Logo是网站形象的重要体现,是互联网上各个网站用来与其他网站链接的图形标志。Logo设计是网站形象设计的核心因素,拥有一款优秀的Logo,可以使品牌视觉形象如虎添翼。
【线条】工具是FlashCC中最基本、最简单的工具。使用【线条】工具可以绘制不同的颜色、宽度和形状。8.3.2椭圆工具与矩形工具
【椭圆】工具可用来绘制椭圆和正圆,不仅可以任意选择轮廓线的颜色、线宽和线型,还可以任意选择轮廓线的颜色和圆的填充色。但是边界线只能使用单色,而填充区域则可以使用单色或渐变色。【矩形】工具用于创建各种比例的矩形,也可以绘制正方形,其操作步骤和【椭圆】工具相似。所不同的是,在矩形面板中可以设置矩形的边角半径。8.3.3多角星形工具
【多角星形】工具的用法与【矩形】工具基本一样,所不同的是在【属性】面板中多了一个【选项】按钮。8.3.4铅笔工具使用【铅笔】工具可以绘制任意形状的线条,选择工具箱中的【铅笔】工具会出现【铅笔模式】附属工具选项,有3种模式可供选择,通过它可以选择Flash修改所绘笔触的模式。8.3.5刷子工具使用工具箱中的【刷子】工具可以随意地画出色块,在其选项中可以设置刷子的大小和样式,单击【选项】区中的按钮,在弹出的菜单中有5种填充模式。8.3.6钢笔工具
【钢笔】工具用于绘制路径,可以创建直线或曲线段,然后调整直线段的角度和长度以及曲线段的斜率。8.4选择对象工具可以通过在舞台中拖动对象来移动它们,或者剪切后粘贴它们,按方向键移动它们,或使用属性面板为它们指定确切的位置。8.4.1选择工具
【选择】工具用于选择或移动直线、图形、元件等一个或多个对象,也可以拖动一些未选定的直线、图形、端点或曲线来改变直线或图形的形状。【选择】工具用于选择或移动直线、图形、元件等一个或多个对象,也可以拖动一些未选定的直线、图形、端点或曲线来改变直线或图形的形状。8.4.2部分选取工具
【部分选取】工具可以选取并移动对象,除此之外,它还可以对图形进行变形等处理。当某一对象被“部分选取”工具选中后,它的图像轮廓线上将出现很多控制点,表示该对象已被选中。8.5编辑图形工具添色工具主要包括【颜料桶】工具、【墨水瓶】工具、【滴管】工具,本节就来讲述它们的使用方法。8.5.1选择工具
【颜料桶】工具
可以为封闭区域填充颜色,还可以更改已涂色区域的颜色。可以使用【颜料桶】工具
填充未完全封闭的区域。
选择工具箱中的【颜料桶】工具
后,在工具箱的下部会出现【空隙大小】附属工具选项。8.5.2墨水瓶工具使用【墨水瓶】工具的具体操作步骤如下。8.5.3墨水瓶工具选择工具箱中的【滴管】工具后,光标就会变成一个滴管状,表明此时已经激活了【滴管】工具,可以拾取某种颜色了。然后移动到目标对象上,再单击左键,这样采集的颜色就被填充到目标区域了。8.6创建文字Flash提供了多种文本功能和选项。可以创建3种类型的文本,分别为:静态文本、动态文本和输入文本。8.7实战——制作立体投影文字本章主要讲述了FlashCC入门的基础知识,下面通过以上所学到的知识讲述立体投影文字的制作。第9章使用元件与库管理好动画素材教学内容:使用元件可以使编辑动画变得更简单,使创建交互动画变得更加容易。将元件从库中取出并且拖放到舞台上,就生成了该元件的一个实例。真正在舞台上表演的是它的实例,而元件本身仍在库中。
元件创建完成以后,可以在影片中任意地方使用该元件的实例。需要注意的是:影片剪辑实例的创建和包含动画的图形实例的创建是不同的,影片剪辑只需要一帧就可播放动画,但在编辑环境中不能演示动画的效果;而包含动画的图形实例,必须在与其元件同样长的帧中放置,才能显示完整的动画。9.4.2编辑实例
每个实例在创建时都拥有和其元件相同的属性,但在动画中全是一样的实例,必然让人感觉呆板。为了让动画更加生动,动画制作者往往需要赋予每个实例不同的属性,可以在【属性】面板中进行编辑。9.5创建和管理库库用来存储可重复使用的对象,包括元件、位图、视频或声音等众多资源。当导入位图或声音时,会自动被存储到库里面。而元件则需要建立后才会存储在库中,每个Flash文档都拥有一个库。9.5.1创建库项目
在【库】窗口的元素列表中,看见的文件类型是:图形、按钮、影片剪辑、媒体声音、视频、字体和位图。前面三种是在Flash中产生的元件,后面两种是导入素材后产生的。9.5.2删除库项目
在【库】面板中不需要使用的库项目,可以在【库】面板中对其进行删除,删除库项目的具体操作步骤如下。9.6实战元件是一种经常引用的元件,一些特定的动画效果也需要借助于元件才能够实现,灵活的运用元件可以有效的提高工作效率。本节通过实例讲述其具体的使用。实战1
——制作按钮
利用元件制作按钮效果如下图所示。具体操作步骤如下。实战2
——利用元件制作动画
利用元件制作动画效果如下图所示。具体操作步骤如下。第10章创建基本Flash动画教学内容:FlashCC是一款非常优秀的矢量动画制作软件,它是当今功能最丰富、最优秀的动画制作软件之一。在Flash中可以创建出丰富多彩的动画效果,可以使对象在画面中运动、改变大小、旋转和改变颜色等。在一个完整的Flash动画中,往往会应用到多个图层,每个图层分别控制不同的动画效果,要创建效果较好的Flash动画就需要为一个动画创建多个图层,以便于在不同的图层中制作不同的动画,通过多个图层的组合形成复杂的动画效果。
教学重点DreamweaverCC的工作界面创建站点使用列表创建超级链接创建基本文本网页11.1DreamweaverCC的工作界面DreamweaverCC是集网页制作和网站管理于一身的【所见即所得】的网页编辑软件,它以强大的功能和友好的操作界面备受广大网页设计者的欢迎,已经成为网页制作的首选软件。DreamweaverCC的工作界面主要由以下几部分组成:菜单栏、文档窗口、属性面板和面板组等。11.1.1菜单栏
菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】10个菜单。11.1.2插入栏
插入栏有两种显示方式,一种是以菜单方式显示,另一种是以制表符方式显示。插入栏中放置的是制作网页过程中经常用到的对象和工具,通过插入栏可以很方便地插入网页对象,有【常用】插入栏、【结构】插入栏、【表单】插入栏、【媒体】插入栏、【jQueryMobile】插入栏、【jQueryUI】插入栏、【模板】插入栏、【收藏夹】插入栏和【隐藏标签】。11.1.3属性面板
【属性】面板主要用于查看和更改所选对象的各种属性,每种对象都具有不同的属性。在【属性】面板包括两种选项,一种是【HTML】选项,将默认显示文本的格式、样式和对齐方式等属性。另一种是【CSS】选项,单击【属性】面板中的【CSS】选项,可以在【CSS】选项中设置各种属性。11.1.4面板租Dreamweaver中的面板可以自由组合而成为面板组。每个面板组都可以展开和折叠,并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易的访问所需的面板,而不会使工作区变得混乱。11.1.5文档窗口
如果网页中的文本样式太单调,会大大降低网页的外观效果,通过对文本格式的设置可使文本变得美观,让网页更具魅力。选中需设置格式的文本,然后在【属性】面板中可以设置文本的具体属性。11.3.3插入特殊字符
如果项目列表之间是并列关系,则需要生成项目符号列表。项目列表又称无序列表,这种列表的项目之间没有先后顺序。项目列表前面一般用项目符号作为前导字符,具体操作步骤如下。11.4.2插入编号列表
当网页内的文本需要按序排列时,就应该使用编号列表。编号列表的项目符号可以在阿拉伯数字、罗马数字和英文字母中做出选择。具体操作步骤如下。11.5创建超级链接
链接是从一个网页或文件到另一个网页或文件的访问路径,不但可以指向图像或多媒体文件,还可以指向电子邮件地址或程序等。当网站访问者单击链接时,将根据目标的类型执行相应的操作,即在Web浏览器中打开或运行。11.5.1创建下载文件链接
如果要在网站中提供下载资料,就需要为文件提供下载链接,如果超级链接指向的不是一个网页文件,而是其他文件例如zip、mp3、exe文件等,单击链接的时候就会下载文件。具体操作步骤如下。11.5.2创建电子邮件链接E-mail链接也叫电子邮件链接,电子邮件地址作为超链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超链接时,将会打开默认的邮件管理器的新邮件窗口,其中会提示用户输入信息并将该信息传送给指定的E-mail地址。具体操作步骤如下。11.5.3创建图像的热点链接
同一个图像的不同部分可以链接到不同的文档,这就是热点链接。要使图像特定部分成为超级链接,就要在图像中设置热点,然后再创建链接。创建图像热点链接具体操作如下。11.6实战——创建基本文本网页本章主要讲述了创建网页文本的基本知识,下面通过实例讲述如何创建基本文本网页的效果,具体操作步骤如下。第12章巧用绚丽的图像和多媒体让网页动起来教学内容:本本章主要介绍在网页中插入图像和多媒体,包括在网页中插入图像及设置图像属性,并用实例进一步说明插入鼠标经过图像的具体方法,同时还讲解如何为页面添加声音、视频文件和Flash动画,最后通过实例讲述了插入图像和多媒体。
教学重点插入网页图像插入鼠标经过图像添加声音和视频文件添加Flash动画创建图文混排网页在网页中插入媒体实例12.1在网页中插入图像图像是网页中最主要的元素之一,不但能美化网页,而且与文本相比能够更直观地说明问题,使所表达的意思一目了然。这样图像就会为网站增添生命力,同时也加深用户对网站的印象。12.1.1在网页中插入图像
前面介绍了网页中常见的3种图像格式,下面就来学习如何在网页中使用图像。在使用图像前,一定要有目的地选择图像,最好运用图像处理软件美化一下图像,否则插入的图像可能会不美观,非常死板。在网页中使用图像,具体制作步骤如下。12.1.2设置图像属性
将图像插入文档后,DreamweaverCC会自动按照图像的大小显示,所以还需要对图像的属性进行具体地调整,如大小、位置及对齐等。选中图像,在图像属性面板中可以自定义图像的属性。12.1.3裁剪图像DreamweaverCC中提供了直接在文档中裁剪图像的功能,不再需要在其他图像编辑软件中进行操作。裁剪图像的具体操作步骤如下。12.1.4调整图像的亮度和对比度
调整图像的亮度和对比度的具体操作步骤如下。12.1.5锐化图像
锐化图像的具体操作步骤如下。12.2插入鼠标经过图像所谓鼠标经过图像就是在浏览网页时当鼠标指针移到图像上时它会发生变化的图像。使用两个文件图像创建鼠标经过图像:原始图像(当首次载入网页时显示的图像)和鼠标经过图像(当鼠标指针移过原始图像时显示的图像)。创建鼠标经过图像网页具体操作步骤如下。12.3添加声音在网页中可以插入Mid、AIFF、WAV、MP3等类型的声音文件。声音文件需要占用大量的磁盘空间和大量的内存。一般情况下,最好使用单声道声音,如果使用立体声的话,那么它的数据量将是单声道声音的两倍。在添加声音文件前,最好能先压缩声音文件。随着宽带技术的发展和推广,互联网上出现了许多视频网站。越来越多的人选择观看在线视频,同时也有很多的网站提供在线视频服务,视频文件的格式非常多,常见的有MPEG、AVI、WMV、RM和MOV等。12.3.1添加声音
通过代码提示,可以在【代码】视图中插入代码,在输入某些字符时,将显示一个列表,列出完成条目所需要的选项,下面通过代码提示讲述插入背景音乐,具体操作步骤如下。12.3.2设置文本属性
利用视频技术,在网上可以进行视频聊天、在线看电影等操作。在网页中插入视频主要有两种方法,一种方法是利用ActiveX插入,另一种方法是利用插件插入。下面通过实例介绍在网页中插入视频文件的方法,具体的操作步骤如。12.4添加Flash动画在网页文档中插入Flash动画、Flash按钮和Flash文本等,可以增加网页的动感,使网页更具吸引力,因此多媒体元素在网页中应用越来越来广泛。12.5实战
本章主要讲述了如何在网页中插入图像、设置图像属性、在网页中简单编辑图像和插入其他图像元素等,下面通过以上所学到的知识来具体讲述。实战1——创建图文混排网页DreamweaverCC提供了强大的图文混排功能,为网页设计注入活力。下面通过实例讲述图文混排的方法,具体操作步骤如下。实战2——在网页中插入媒体实例
在网页中插入媒体的具体操作图像如下。第13章使用表格轻松排列和布局网页元素教学内容:表格是网页设计制作时不可缺少的重要元素。无论用于排列数据还是在页面上对文本进行排版,表格都表现出了强大的功能。它以简洁明了和高效快捷的方式,将数据、文本、图像、表单等元素有序的显示在页面上,从而设计出版式漂亮的网页。表格最基本的作用就是让复杂的数据变得更有条理,让人容易看懂,在设计页面时,往往要利用表格来布局定位网页元素。通过对本章的学习,应掌握插入表格、设置表格属性、编辑表格的方法;能够利用表格布局网页。
教学重点插入表格和表格元素选择表格元素表格的基本操作排序及整理表格内容利用表格排列数据创建细线表格13.1插入表格和表格元素在Dreamweaver中,表格可以用于制作简单的图表,还可以用于安排网页文档的整体布局,起着非常重要的作用。利用表格设计页面布局,可以不受分辨率的限制。13.1.1插入表格
在Dreamweaver中插入表格非常简单,具体操作步骤如下。13.1.2设置表格属性
直接插入的表格有时并不能让人满意,在Dreamweaver中,通过设置表格或单元格的属性,可以很方便地修改表格的外观。13.1.3添加内容到单元格
插入表格后,就可以直接向表格中添加内容了,将光标置于表格的单元格中,分别输入相应的文字。13.2选择表格元素要想在文档中对一个元素进行编辑,那么首先要选中它;同样,要想对表格进行编辑,首先也要选中它。选择表格操作可以分为选中整个表格、选中单元格等几种情况,下面分别进行介绍。13.2.1选取表格选择整个表格有以下几种方法。单击表格线的任意位置。将光标置于表格内的任意位置,选择菜单中的【修改】|【表格】|【选择表格】命令。将光标放置到表格的左上角,按住鼠标左键不放,拖曳鼠标指针到表格的右下角,将整个表格中的单元格选中,单击鼠标右键,在弹出的菜单中选择【表格】|【选择表格】选项。将光标放置在表格的任意位置,单击文档窗口左下角的
标签。13.3表格的基本操作选择了表格后,便可以通过剪切、复制和粘贴等一系列的操作实现对表格的编辑操作。表格的行数、列数可以通过增加、删除行和列及拆分、合并单元格来改变。13.3.1调整表格和单元格的大小 调整表格的高度和宽度时,表格中所有单元格将按比例相应改变大小。13.3.2添加或删除行或列 在已创建的表格内增加行、列,要先将光标放置在要插入行、列的单元格中,然后通过以下方法增加。13.3.3拆分单元格拆分单元格有以下几种方法。将光标放置在要拆分的单元格中,选择菜单中的【修改】|【表格】|【拆分单元格】命令,打开【拆分单元格】对话框,在对话框中进行相应的设置,单击【确定】按钮,即可拆分单元格。将光标放置在要拆分的单元格中,单击鼠标右键,在弹出的菜单中选择【表格】|【拆分单元格】选项,打开【拆分单元格】对话框,也可以拆分单元格。将光标放置在需要拆分的单元格中,在【属性】面板中单击【拆分单元格为行或列】按钮,打开【拆分单元格】对话框,也可以拆分单元格。13.3.4合并单元格 合并单元格有以下几种方法。选中要合并的单元格,选择菜单中的【修改】|【表格】|【合并单元格】命令,即可将选中的单元格合并。选中合并的单元格,单击鼠标右键,在弹出的菜单中选择【表格】|【合并单元格】选项,即可合并单元格。选中合并的单元格,在【属性】面板中单击【合并所选单元格,使用跨度】按钮,即可将选中的单元格合并。13.4排序及整理表格内容DreamweaverCC提供了导入表格式数据和表格排序功能,使用这两个功能可以整理表格内的数据。13.4.1导入表格式数据在Dreamweaver中,可以将其他应用软件制作完成后的表格数据导入到网页中,导入的数据要具有制表符、逗号、分号、引号或者其他定界符。具体操作步骤如下。13.4.2排序表格 如果想要使输入的表格数据有一定的规律性,在Dreamweaver中可以对其进行排序,具体操作步骤如下。13.5实战 表格无疑是网页制作中最为重要的一个对象,因为通常网页都是依靠表格来排列数据的,它直接决定了网页是否美观、内容组织是否清晰。合理地利用表格可以方便地美化页面。实战1——创建细线表格 本例将讲述如何制作细线表格,从而使网页更加美观精细。具体操作步骤如下。实战2——利用表格排列数据 本利用表格排列数据的具体操作步骤如下。第14章使用CSS样式表美化网页教学内容:对于已经设计好的页面及页面中的元素,都可以通过CSS对其进行修饰和美化,做到页面内容和显示效果的相分离。CSS还有一个较强大的滤镜功能,它可以不使用图像处理软件即能实现很多较好的滤镜效果。本章主要讲述CSS样式表、定义CSS属性、链接或导出外部样式表,最后通过实例讲述CSS在网页中的使用。 THE END
|