《网页制作基础教程第九章》由会员分享，可在线阅读，更多相关《网页制作基础教程第九章（46页珍藏版）》请在金锄头文库上搜索。
1、第9章 网页制作实例,9.1 网站策划 9.2 用Fireworks MX 2004裁切素材 9.3 Flash动画的制作 9.4 使用Dreamweaver MX 2004编辑网页 9.5 网站的测试和上传发布,9.1 网站策划,页面设计主要包括创意、色彩和版式三个方面。 1. 创意 本网站是一个纯粹以网站制作和发布为主要经营项目的公司站点。 2. 网站的宣传语 3. 色彩 4. 版面的布局 站点分为公司首页、行业动态、成功案例、网站建设、域名注册、网站推广、客户留言等版块。,返 回,9.2 用Fireworks MX 2004切素材,1. 裁切设计稿 整体页面的效果制作完成后，需要将效果图
2、进行切片，然后再导入到Dreamweaver MX 2004中重新布局排版。网站的设计稿如图9-1所示。 2. 用Fireworks MX 2004裁切设计稿 因为首页及其他页面都是在Photoshop中设计的，实际上这些页面相当于一幅幅图像，裁切设计稿的目的就是优化这些图像，使上传后的页面达到最快的下载显示速度。,下一页,9.2 用Fireworks MX 2004切素材,（1）首先使用Photoshop将设计稿打开，然后选择“文件”“存储为Web所用格式”命令，在打开的对话框中设置存储格式为PNG-24，然后单击“存储”按钮，如图9-2所示。 （2）使用Fireworks MX 2004打
3、开刚刚保存的PNG文件，首先观察一下页面，发现整个页面是有投影的，我们必须要在切图时考虑想要的效果。选择“工具”面板上的“切片”工具，在页面中裁切出整页的投影所需要的图片。,下一页,上一页,9.2 用Fireworks MX 2004切素材,（3）下面继续切割，顺序由上至下、由左到右。 （4）继续完成LOGO区域的切片，空白的地方也要切割出来，便于重置表格，如图9-5所示。 （5）接下来切割导航条和广告条，这里分别将它们切成两张图片，如图9-6所示。 （6）接下来切割内容区，将每个标题栏分别切出来，有一些空白区也需要切割出来，以便于重置表格时使用，内容区的切图样式如图9-7所示。,下一页,上一
4、页,9.2 用Fireworks MX 2004切素材,（7）再切割网页的底部，如图9-8所示。 （8）在切片工作基本完成后，将设计稿保存为网页文件。 （9）在对话框的格式中选择JPEG格式，品质设置为80，平滑设置为无平滑，如图9-10所示。 （10）“导出预览”设置完成后，单击“导出”按钮，在弹出“导出”对话框中，新建一个文件夹命名为tianfang，选定该文件夹，将裁切好的内容放入该文件夹中，再单击 “保存”按钮，如图9-11所示。,返 回,上一页,9.3 Flash动画的制作,我们将在网页中插入一个用Flash MX 2004制作的动态广告条，以下是具体步骤。 （1）打开Flash M
5、X 2004，新建并保存一个名为Banner的Flash文档，在“文档属性”面板中将广告条的大小设置为806170像素，如图9-12所示。 （2）将已做好的图片素材导入，双击图层1，将图层名改为“背景”，在菜单栏中单击“文件”“导入”“导入到舞台”命令，在打开的“导入”对话框中选中广告条素材图片，单击“打开”按钮，如图9-13所示，这样图片便导入了Flash MX 2004的画布中。,下一页,9.3 Flash动画的制作,（3）单击时间轴面板上的图标，新建两个图层，双击图层名称，重命名图层分别为“文本1”、“文本2”。在“文本1”的图层上输入文字“我们就是”，在“文本2”的图层上输入文字“网络
6、中的天方夜谭”，如图9-14所示。 （4）在画布中调整图层“文本1”和“文本2”的位置，如图9-15所示。,下一页,上一页,9.3 Flash动画的制作,（5）在两个文本层中，分别在时间轴上的第15帧 、第85帧插入关键帧，设置关键帧文字的相应的位置，分别如图9-16、9-17、9-18所示。 （6）至此，一个简单的Flash动画就已经完成了，在菜单栏中单击“文件”“导出”“导出影片”命令，会弹出一个“导出影片”对话框，将影片文件命名为Banner，如图9-19所示。,返 回,上一页,9.4 使用Dreamweaver MX 2004编辑网页,9.4.1 设置文件夹 在使用Dreamweave
7、r MX 2004软件之前，应先设置一些文件夹，以便于将网页文件分别放入到不同的文件夹中。 （1）在IE浏览器中打开裁切的设计稿，如图9-21所示。 （2）在IE的菜单栏中单击“文件”“另存为”命令，弹出“保存网页”对话框，将文件名改为index.htm后保存在已建好的文件夹中，如图9-22所示。,下一页,9.4 使用Dreamweaver MX 2004编辑网页,（3）这时在“天方网络科技”的文件夹中多了一个index.files文件夹，打开该文件夹，将文件夹中所有图片剪贴到img文件夹中，再用记事本打开index.htm网页源文件，在记事本的菜单栏中单击“编辑”“替换”命令，在弹出的“替换
8、”对话框中进行设置，如图9-23所示，替换图片的路径。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,9.4.2 嵌入网页 （1）打开Dreamweaver MX 2004，新建一个名为cgal.htm的网页文件，将该文件放入img文件夹中。 （2）单击菜单栏中的“修改”“页面属性”命令，在弹出的“页面属性”对话框中设置，如图9-25所示。 （3）在常用工具栏中单击按钮，在网页的上面插入2行1列的表格。 （4）在第2行中继续插入一个1行2列的表格，在插入的表格第1列中插入图片。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,（5）在刚
9、才插入的表格的第2列中，再插入3行2列的表格，分别在表格中输入相应的内容，如图9-28所示。 （6）至此，该页面就基本完成。 （7）将前面做好的表格进行复制，追加粘贴到原表格的下面，按下F12键查看效果，如图9-30所示。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,9.4.3 完善网站 （1）在Dreamweaver MX 2004中打开index.htm网页文件，先新建一个站点。 （2）设置完成后，单击“确定”按钮，这时将在“管理站点”对话框中多出一个“天方网络科技”站点，如图9-33所示。 （3）接下来开始定义站点的页面属性。 （4）在常用工具栏中单击按钮
10、，在网页的上面插入一个1行1列的表格，将裁切后的设计稿最顶部的图片剪切到创建的表格中，并根据图片的大小设定表格的长和宽，如图9-37所示。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,（5）在“插入”面板中单击按钮，在网页的上面插入一个1行3列的表格（a），用来存放初始网页其余部分的图片，这样做主要是为了实现页面的投影效果。 （6）将光标移至表格（a）中间的单元格中，在单元格“属性”栏中将 “垂直”设置为“顶端”，如图9-39所示。 （7）继续在该单元格中，插入一个新的3行3列的表格（b），用于制作LOGO区。,下一页,上一页,9.4 使用Dreamweaver
11、 MX 2004编辑网页,（8）下面将初始网页中的LOGO区的图片分别剪切放置到已做好的表格中，如图9-41所示。 （9）将光标移至LOGO区表格的下面，插入一个1行1列的表格（c），用于制作导航栏 （10）接下来就应该制作主体部分。我们发现在设计稿中有灰色的边线，而且在同一个表格中有的有边线，而有的没有，边线还用两个像素的宽度。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,（11）在定义好的表格（e）中插入一个1行5列的表格（f），并将表格（f）第2列和第4列的宽度设置为1个像素，同时在代码中删除空格符 ；避免表格宽度大于1个像素，在第1列、第3列和第
12、5列中定义边框，代码如图9-45所示。 （12）使用同样的方法，在做好的表格中继续插入表格，并将相应的图片剪切到单元格中，这里不再一一讲解了。,下一页,上一页,9.4 使用Dreamweaver MX 2004编辑网页,（13）在“成功案例”单元格中我们需制作一个内嵌框架，将前面做好的网页放入到该单元格中，在这个单元格的中嵌入图像代码，这样整个页面的重新布局完成。 （14）下面完成底部的制作。在两个阴影单元格的中间单元格中的底部，插入一个1行1列的表格，将底部的图片剪切到做好的单元格中。,返 回,上一页,9.5 网站的测试和上传发布,当网站页面建设的工作全部完成后，就要将网页文件上传到已申请好
13、的网站空间上。在将站点上传到服务器并声明可供浏览之前，最好先在本地机器上对其进行测试（实际上，在站点建设过程中，最好不断地对站点进行测试以便及时解决出现的问题）。 在测试的时候，应该确保在目标浏览器中，页面如预期的那样显示和工作，而且没有断开的链接，页面下载也不会占用太长时间。我们还可以通过运行站点报告，测试整个站点并解决出现的问题。,返 回,图9-1 天方网络科技有限公司主页,返 回,图9-2 格式存储,返 回,图9-5 继续切片,返 回,图9-6 切割导航条和广告条,返 回,图9-7 切割内容区,返 回,图9-8 切割完成效果,返 回,图9-10 存为JPEG格式,返 回,图9-11 “导
14、出”对话框,返 回,图9-12 “文档属性”面板,返 回,图9-13 “导入”对话框,返 回,图9-14 时间轴效果,返 回,图9-15 文字的位置,返 回,图9-16 第15帧文字的位置,返 回,图9-17 第85帧文字的位置,返 回,图9-18 第100帧文字的位置,返 回,图9-19 “导出影片”对话框,返 回,图9-21 打开的设计稿,返 回,图9-22 保存网页,返 回,图9-23 替换图片的路径,返 回,图9-25 页面属性设置,返 回,图9-28 添加文字,返 回,图9-30 完成后的效果,返 回,图9-33 “管理站点”对话框,返 回,图9-37 制作第一个单元格,返 回,图9-39 设置表格,返 回,图9-41 制作Logo区,返 回,图9-45 定义边框,返 回,
