《网页设计与制作教程》(教程全集)

《《网页设计与制作教程》(教程全集)》由会员分享，可在线阅读，更多相关《《网页设计与制作教程》(教程全集)（24页珍藏版）》请在金锄头文库上搜索。

1、 本本章章要点要点网页素材的搜集 工具软件简介 网站标志的制作 系列图片和动画素材的制作 动画与页面动态广告的制作第第2 2章章 网页素材的搜集与制作网页素材的搜集与制作快速导读快速导读本章以销售汽车的本章以销售汽车的“超越超越”网站为例，逐步网站为例，逐步 学习搜集和制作汽车销售网站所涉及的各种不学习搜集和制作汽车销售网站所涉及的各种不 同的素材。如收集各个品牌汽车的相关基本素同的素材。如收集各个品牌汽车的相关基本素 材，制作网站标志材，制作网站标志LogoLogo、导航背景与按钮，使、导航背景与按钮，使 用模板处理汽车品牌标志和网站标志，制作各用模板处理汽车品牌标志和网站标志，制作各 网页

2、头部动态广告素材，制作网页头部动态广告素材，制作gifgif和和swfswf动画动画。2.1 2.1 搜集搜集网页素材网页素材 2.1.1 2.1.1 广泛搜集网页广泛搜集网页素材素材准备准备素材包括：素材包括： 网站网站的的LogoLogo、BannerBanner、图片、图片、FlashFlash动画、各种按钮、声音动画、各种按钮、声音 文件和视频文件等文件和视频文件等。材料既可以从图书、报纸、光盘或多媒体上获取，也可以从材料既可以从图书、报纸、光盘或多媒体上获取，也可以从 互联网上搜集，然后把搜集的材料去粗取精，去伪存真，互联网上搜集，然后把搜集的材料去粗取精，去伪存真， 作为自己制作网

3、页的素材。需要强调的是，不论是文字素作为自己制作网页的素材。需要强调的是，不论是文字素 材还是图片（动画）素材，都应该注意其来源是否注明版材还是图片（动画）素材，都应该注意其来源是否注明版 权所有，以免违反知识产权的有关规定。权所有，以免违反知识产权的有关规定。2.1 2.1 搜集搜集网页素材网页素材 2.1.2 2.1.2 紧紧扣网站主题，搜集并制作素材扣网站主题，搜集并制作素材广泛搜集网页素材最终要为网站主题服务，因而在建设广泛搜集网页素材最终要为网站主题服务，因而在建设“ “超超 越越” ”网站时，搜集网站素材很大程度上要搜集整理本公司网站时，搜集网站素材很大程度上要搜集整理本公司 资料

4、和品牌代理公司资料。资料和品牌代理公司资料。2.1 2.1 搜集搜集网页素材网页素材 2.1.3 2.1.3 整理整理素材素材把搜集的原始素材分门别类存放在一个文件夹中，比如把搜集的原始素材分门别类存放在一个文件夹中，比如 chaoyuechaoyue网站根文件夹。把编辑好的各类素材文件存放在网站根文件夹。把编辑好的各类素材文件存放在 网站根文件夹中的各类子文件夹中；网站根文件夹中的各类子文件夹中；imagesimages子文件夹中子文件夹中 存放不同栏目的页面都要使用的公共图片素材存放不同栏目的页面都要使用的公共图片素材文件。文件。2.1 2.1 搜集搜集网页素材网页素材 2.1.4 2.1

5、.4 明确明确素材命名规范素材命名规范在在刚开始搜集素材时，应该制定一套明确的命名规则，以最刚开始搜集素材时，应该制定一套明确的命名规则，以最 少的字母表达出最容易理解的意义。少的字母表达出最容易理解的意义。2.2 2.2 工具工具软件简介软件简介 2.2.1 2.2.1 平面平面制作软件制作软件Photoshop CS4Photoshop CS4PhotoshopPhotoshop软件主要用于平面图像画面的制作和处理，软件主要用于平面图像画面的制作和处理， Photoshop CS4Photoshop CS4版是目前最流行的版本。使用版是目前最流行的版本。使用PhotoshopPhotosh

6、op 可以制作颜色丰富、表现力强的精美画面。可以制作颜色丰富、表现力强的精美画面。 1 1、关于、关于PhotoshopPhotoshop工作工作区域区域 2 2、关于工具、关于工具 3 3、帮助和支持、帮助和支持2.2 2.2 工具工具软件简介软件简介 2.2.2 2.2.2 网页网页效果图设计软件效果图设计软件fireworks CS4fireworks CS4FireworksFireworks软件是一款创建与优化软件是一款创建与优化 Web Web 图像和快速构建网站图像和快速构建网站 与与 Web Web 界面原型的理想工具界面原型的理想工具。 1 1、关于工作区域关于工作区域 2

7、2、属性检查、属性检查器器 3 3、帮助和支持、帮助和支持2.2 2.2 工具工具软件简介软件简介 2.2.3 2.2.3 动画动画制作软件制作软件Flash CS4Flash CS4FlashFlash软件主要用于网页平面动画的制作，软件主要用于网页平面动画的制作，Flash CS4Flash CS4版是版是 目前最流行的版本。使用目前最流行的版本。使用FlashFlash可以制作变化灵活、表现可以制作变化灵活、表现 生动的动画影片生动的动画影片。 1 1、关于工作区域关于工作区域 2 2、时间、时间轴轴 3 3、帮助和支持、帮助和支持2.2 2.2 工具工具软件简介软件简介 2.2.4 2

8、.2.4 在在InternetInternet上查找所需信息上查找所需信息通过通过InternetInternet连接和连接和Microsoft Internet ExplorerMicrosoft Internet Explorer，可以查找，可以查找 和浏览和浏览WebWeb上的所有信息。在上的所有信息。在WebWeb中查找信息的方法有很中查找信息的方法有很 多，单击工具栏上的多，单击工具栏上的“ “搜索搜索” ”按钮可以访问多个搜索提供商按钮可以访问多个搜索提供商 。在。在“ “搜索搜索” ”框中键入单词或短语，键入框中键入单词或短语，键入gogo、findfind或或? ?，后跟，后跟

9、 单词或词组，按单词或词组，按EnterEnter键之后键之后Internet ExplorerInternet Explorer将使用提供将使用提供 商预置的搜索开始搜索。进入网页后，单击商预置的搜索开始搜索。进入网页后，单击“ “编辑编辑” ”菜单，菜单， 然后单击然后单击“ “查找（在当前页）查找（在当前页）” ”，可以搜索指定的文本。，可以搜索指定的文本。2.2 2.2 工具工具软件简介软件简介 2.2.5 2.2.5 屏幕屏幕捕获工具捕获工具SnagIt 7SnagIt 7和中华神捕和中华神捕 1.521.521 1、屏幕捕获工具、屏幕捕获工具SnagIt 7SnagIt 7是一个非

10、常优秀的屏幕、文本和是一个非常优秀的屏幕、文本和 视频捕获与转换视频捕获与转换软件。软件。可以捕获可以捕获WindowsWindows屏幕、屏幕、DOSDOS屏屏 幕；幕；RMRM电影、游戏画面；对象、菜单、窗口、客户区窗电影、游戏画面；对象、菜单、窗口、客户区窗 口、最后一个激活的窗口或用鼠标定义的区域及延时捕获口、最后一个激活的窗口或用鼠标定义的区域及延时捕获 的图像。图像可被存为的图像。图像可被存为BMPBMP、PCXPCX、TIFTIF、GIFGIF或或JPEGJPEG格格 式，也可以存为系列动画式，也可以存为系列动画。 2 2、中华神捕、中华神捕 2.622.62是一款超级方便的屏幕

11、抓图、做图以及图是一款超级方便的屏幕抓图、做图以及图 片浏览片浏览工具。工具。2.3 2.3 制作制作背景与按钮背景与按钮 2.3.1 2.3.1 制作制作金灰色渐变背景金灰色渐变背景渐变色的背景在网页中十分常见渐变色的背景在网页中十分常见，可通过，可通过使用使用PhotoShopPhotoShop来来 制作一款非常有代表性的网页背景图像制作一款非常有代表性的网页背景图像效果。效果。2.3 2.3 制作制作背景与按钮背景与按钮 2.3.2 2.3.2 制作制作素材色渐变背景素材色渐变背景渐变色的背景很常见，但是颜色的选取确是个大问题，其实渐变色的背景很常见，但是颜色的选取确是个大问题，其实 有

12、一个非常简单的技巧就可以轻松获得适当的色彩，就是有一个非常简单的技巧就可以轻松获得适当的色彩，就是 从图像中直接选取所需要的颜色。从图像中直接选取所需要的颜色。2.3 2.3 制作制作背景与按钮背景与按钮 2.3.3 2.3.3 制作制作冰雪花边背景冰雪花边背景在制作特殊背景效果的时候，使用在制作特殊背景效果的时候，使用PhotoShopPhotoShop软件所自带的软件所自带的 滤镜，往往可以给人意外的惊喜。下面使用滤镜，往往可以给人意外的惊喜。下面使用PhotoShopPhotoShop的的 滤镜来制作冰雪花边的背景效果。滤镜来制作冰雪花边的背景效果。2.3 2.3 制作制作背景与按钮背景

13、与按钮 2.3.4 2.3.4 制作制作首页按钮首页按钮网页中的按钮是网页上使用频率最高的页面元素，当然按钮网页中的按钮是网页上使用频率最高的页面元素，当然按钮 的设计也是多种多样，下面将使用的设计也是多种多样，下面将使用PhotoShopPhotoShop来设计一款来设计一款 比较实用的按钮效果。比较实用的按钮效果。2.3 2.3 制作制作背景与按钮背景与按钮 2.3.5 2.3.5 制作制作主页背景图像主页背景图像很多网站的主页都会添加背景图像，下面将使用很多网站的主页都会添加背景图像，下面将使用PhotoShopPhotoShop 来制作一款能够平铺的背景图像效果。来制作一款能够平铺的背

14、景图像效果。2.4 2.4 制作制作网站标志网站标志 2.4.1 2.4.1 新建图像文件新建图像文件 2.4.2 2.4.2 处理道路素材处理道路素材 2.4.3 2.4.3 处理处理汽车素材汽车素材 2.4.4 2.4.4 导导入素材图像入素材图像 2.4.5 2.4.5 变换变换道路图像道路图像 2.4.6 2.4.6 填充填充渐变背景渐变背景 2.4.7 2.4.7 调整调整汽车图像汽车图像 2.4.8 2.4.8 书写文字书写文字 2.4.9 2.4.9 保存文件保存文件、输出图像、输出图像2.5 2.5 制作制作系列图片和动画素材系列图片和动画素材 2.5.1 2.5.1 创建创建

15、模板模板 2.5.2 2.5.2 使用使用模板制作各汽车品牌模板制作各汽车品牌标识标识 2.5.3 2.5.3 主页主页头部动画素材头部动画素材 2.5.4 2.5.4 养养车用车头部动画车用车头部动画素材素材 2.5.5 2.5.5 车型车型图库头部动画素材图库头部动画素材 2.5.6 2.5.6 最新最新车型头部动画车型头部动画素材素材2.6 2.6 制作制作“ “手指动作手指动作” ”动画动画 2.6.1 2.6.1 创建创建动画文档动画文档 2.6.2 2.6.2 书写书写文本文本 2.6.3 2.6.3 文本文本阴影阴影 2.6.4 2.6.4 书写书写特殊符号特殊符号 2.6.5 2.6.5 制作制作“ “遮罩遮罩” ”图形元件图形元件 2.6.6 2.6.6 制作制作“ “左视眼左视眼” ”图形元件图形元件 2.6.7 2.6.7 制作制作“ “眼睛眼睛” ”影片剪辑元件影片剪辑元件 2.6.8 2.6.8 引用引用元件实例元件实例 2.6.9 2.6.9 制作制作各类动画各类动画2.7 2.7 制作制作首页动画首页动画 2.7.1 2.7.1 导导入背景图像入背景图像 2.7.2 2.7.2 绘制绘制路径路