网页制作基础教程第九章

《网页制作基础教程第九章》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第9章网页制作实例9.1网站策划9.2用FireworksMX2004裁切素材9.3Flash动画的制作9.4使用DreamweaverMX2004编辑网页9.5网站的测试和上传发布9.1网站策划页面设计主要包括创意、色彩和版式三个方面。1.创意本网站是一个纯粹以网站制作和发布为主要经营项目的公司站点。2.网站的宣传语3.色彩4.版面的布局站点分为公司首页、行业动态、成功案例、网站建设、域名注册、网站推广、客户留言等版块。返回9.2用FireworksMX2004切素材1.裁切设计稿整体页面的效

2、果制作完成后，需要将效果图进行切片，然后再导入到DreamweaverMX2004中重新布局排版。网站的设计稿如图9-1所示。2.用FireworksMX2004裁切设计稿因为首页及其他页面都是在Photoshop中设计的，实际上这些页面相当于一幅幅图像，裁切设计稿的目的就是优化这些图像，使上传后的页面达到最快的下载显示速度。下一页9.2用FireworksMX2004切素材（1）首先使用Photoshop将设计稿打开，然后选择“文件”→“存储为Web所用格式”命令，在打开的对话框中设置存储格式

3、为PNG-24，然后单击“存储”按钮，如图9-2所示。（2）使用FireworksMX2004打开刚刚保存的PNG文件，首先观察一下页面，发现整个页面是有投影的，我们必须要在切图时考虑想要的效果。选择“工具”面板上的“切片”工具，在页面中裁切出整页的投影所需要的图片。下一页上一页9.2用FireworksMX2004切素材（3）下面继续切割，顺序由上至下、由左到右。（4）继续完成LOGO区域的切片，空白的地方也要切割出来，便于重置表格，如图9-5所示。（5）接下来切割导航条和广告条，这里分别将它

4、们切成两张图片，如图9-6所示。（6）接下来切割内容区，将每个标题栏分别切出来，有一些空白区也需要切割出来，以便于重置表格时使用，内容区的切图样式如图9-7所示。下一页上一页9.2用FireworksMX2004切素材（7）再切割网页的底部，如图9-8所示。（8）在切片工作基本完成后，将设计稿保存为网页文件。（9）在对话框的格式中选择JPEG格式，品质设置为80，平滑设置为无平滑，如图9-10所示。（10）“导出预览”设置完成后，单击“导出”按钮，在弹出“导出”对话框中，新建一个文件夹命名为ti

5、anfang，选定该文件夹，将裁切好的内容放入该文件夹中，再单击“保存”按钮，如图9-11所示。返回上一页9.3Flash动画的制作我们将在网页中插入一个用FlashMX2004制作的动态广告条，以下是具体步骤。（1）打开FlashMX2004，新建并保存一个名为Banner的Flash文档，在“文档属性”面板中将广告条的大小设置为806×170像素，如图9-12所示。（2）将已做好的图片素材导入，双击图层1，将图层名改为“背景”，在菜单栏中单击“文件”→“导入”→“导入到舞台”命令，在打开的“

6、导入”对话框中选中广告条素材图片，单击“打开”按钮，如图9-13所示，这样图片便导入了FlashMX2004的画布中。下一页9.3Flash动画的制作（3）单击时间轴面板上的图标，新建两个图层，双击图层名称，重命名图层分别为“文本1”、“文本2”。在“文本1”的图层上输入文字“我们就是”，在“文本2”的图层上输入文字“网络中的天方夜谭”，如图9-14所示。（4）在画布中调整图层“文本1”和“文本2”的位置，如图9-15所示。下一页上一页9.3Flash动画的制作（5）在两个文本层中，分别在时间轴

7、上的第15帧、第85帧插入关键帧，设置关键帧文字的相应的位置，分别如图9-16、9-17、9-18所示。（6）至此，一个简单的Flash动画就已经完成了，在菜单栏中单击“文件”→“导出”→“导出影片”命令，会弹出一个“导出影片”对话框，将影片文件命名为Banner，如图9-19所示。返回上一页9.4使用DreamweaverMX2004编辑网页9.4.1设置文件夹在使用DreamweaverMX2004软件之前，应先设置一些文件夹，以便于将网页文件分别放入到不同的文件夹中。（1）在IE浏览器中

8、打开裁切的设计稿，如图9-21所示。（2）在IE的菜单栏中单击“文件”→“另存为”命令，弹出“保存网页”对话框，将文件名改为index.htm后保存在已建好的文件夹中，如图9-22所示。下一页9.4使用DreamweaverMX2004编辑网页（3）这时在“天方网络科技”的文件夹中多了一个index.files文件夹，打开该文件夹，将文件夹中所有图片剪贴到img文件夹中，再用记事本打开index.htm网页源文件，在记事本的菜单栏中单击“编辑”→“替换”命令，在弹出的“替换”对话框中进行设置，