利用fireworks简化网页制作.doc

利用fireworks简化网页制作浙江省慈溪市掌起初级中学 刘倩摘要初中教材中网页制作这一部分通常都是用frontPage软件来做介绍，从确定主题、收集整理素材、图片处理、规划与设计一直讲到表格的运用、超级链接等等。从头到尾都是一个个的技术，学生在学习了好几节课之后，还没有触摸到网页制作的真谛，常常就此失去制作的兴趣。本文阐述了运用网页三剑客中的Fireworks制作网站的模板，然后在Dreamweaver进行编辑加工的创作流程。淡化了网页制作的技术，强调的是美感和审美能力的培养，使初中学生学习网页制作从难变易，取得了很好的成效。关键字fireworks 模板 网页制作随着全国中小学电脑作品制作活动的深入开展，网页制作作为其中的一个重要项目，也由于其较强的表现力和丰富的创作空间，越来越受到学校的重视。在初中教材中，一般也包括网页制作的内容，但教材中通常都是用frontPage软件来做介绍，并且都是先从确定主题、收集整理素材、图片处理、规划与设计一直讲到表格的运用、超级链接等等。从头到尾都是一个个的技术，学生在学习了好几节课之后，还没有触摸到网页制作的真谛，常常就此失去制作的兴趣。在制作网页的过程中，也很难得心应手地运用frontPage已有的工具进行布局，一不小心就会因为一个误操作导致网页格局大乱。怎样用直观的方法让学生直接接触到网页的制作，让作为初学者的学生制作网页时从难变易呢？几年的教学和课外网页制作兴趣小组的辅导，让我总结出了一些行之有效的经验。我在辅导学生的过程中，都是先教他们运用网页三剑客中的Fireworks制作网站的模板，再利用Fireworks中的切片工具对制作的模板切片，并以“Html和图片”的格式进行导出，然后利用Dreamweaver打开对应的Html文件进行编辑加工。这样的创作流程，淡化了网页制作的技术，强化的是美感和审美能力的培养，使网页制作从难变易，从抽象到直观，取得了很好的教学效果。下面，我就我校网页兴趣小组同学的作品童话（2008年宁波市一等奖）为例，介绍一下制作的过程。（网页作品童话）一、运用Fireworks制作网站的模板1.对图片的处理：将搜集的图片通过套索工具、魔术棒工具等进行简单的处理，一般来讲边缘色差不是很大的时候，适合用套索工具，而色差较大的时候可以用魔术棒工具，这两种工具在使用上都非常简单。但在处理的时候要注意，特别是对色差不明显的区域，最好将属性里的“边缘”参数设置为“羽化”，这样才不会使处理后图片显得生硬。在童话的首页里，学生就是利用了下面这几张图片上的素材，通过简单的处理，组成了首页的各个元素。（首页的素材）2.布局：其实简单地说，布局就是我们处理之后的各个元素的合理摆放。但一般来讲，每个页面上都要包含导航条、版权说明，而首页一般还有网页名称、主题的简介等。一个网页作品的好坏，首页是很重要的，首页的布局是否合理，格调是否美观雅致，能不能给人耳目一新的感觉，这些将影响到对整个网页的评价。学生在童话中，根据主题，选用了这样一些俏皮的元素，随意地放在导航条的周围，以增加网页活泼的风格。当然，网页的风格应该与主题相符合，严肃的主题适合中规中矩的风格，而轻松的主题则最好在布局上有自己的特色。3.文字的添加： 象首页这种文字比较少的页面，我们可以把文字直接用“文本工具”添加到模板里。因为在Fireworks里添加的文字是以图片格式导出，以后在任何一台电脑里浏览时，都不会因电脑里缺少某种字体而导致文字都变成四种基本字体。这样，我们就可以运用各种丰富的字体来更好地表现网页的主题，增加网页的美感。4.制作分级模板：根据网页的主题，制作栏目模板和内页模板。一般来讲，每个栏目可单独制作一个模板，各个栏目之间，风格基本统一，但可以色调的变化来避免单调。比如，在童话中，根据主题，下面设立了“安徒生童话”、“格林童话”、“味道童话”、“郑渊洁童话”和“童话名家”，在制作栏目模板时，每个模板的布局基本一致，但根据不同的栏目，采用了蓝、黄、褐、粉、橙几种颜色作为主色调，而内页模板与相应的栏目模板具有相同的色调，但内页模板中间有大量的空白，以方便后期制作时添加文字。童话中的模板如下：（童话中的栏目模板）（童话中的内页模板）二、利用Fireworks中的“切片”工具，对制作的模板进行切片，并以“Html和图片”的格式导出。模板制作好之后 ，我们要先用“切片”工具对模板进行切片。由于首页模板在Dreamweaver中只需添加链接，不需要再添加文字，所以，切片的目的只是让图片不要太大，否则在网页打开时就会造成速度太慢，对切片的位置并无特殊要求，但一般来讲，我们还是要避免把导航条和文字切割开，应尽量保持一个相关内容的完整性，并且使图片的数目适量。但是在需要添加大量文字的模板中，就要特别注意切片的位置，要在中间留出一段没有其他图片做背景的空白区域，以方便在Dreamweaver中添加文字时可以添加任意多的文字，而不会使网页的背景凌乱而不完整。这一区域一定要留出（首页切片） （内页切片）接下来，我们用“文件”下面的“导出”菜单项，将模板导出为Html文件，其中“保存类型”选择Html和图像，“HTML”选择导出HTML文件，“切片”选择导出切片，并在“包括无切片区域”和“将图像放入子文件夹中”两个选项前打勾。然后按“保存”按钮，这样就会产生一个Index.html文件和一个以images为名的文件夹。（导出文件时的参数选择）三、利用Dreamweaver打开对应的Html文件进行编辑加工。1. 在导航条上添加热点，设置超链接2. 将需要添加文字的部分图片设为背景，然后在上面添加文字，这样不论文字的多少，都不会影响整个网页背景图案的完整性。这一块设置为背景3. 一般每个栏目下有多个内容网页，这时可利用同一个模板，在模板上设好超级链接后每添加好一个内页的内容，就用“另存为”保存下来，这样可很方便地利用模板做出相同版式不同内容的网页。4. 每个栏目的文件放在相应的文件夹中，做到井然有序。在制作过程中要养成良好的习惯，把每个栏目的网页文件按文件夹分开存放，不要全部放在同一个文件夹中，显得杂乱无章。同时要注意，在给网页名命时最好采用栏目名称的拼音，不要用中文，或者是简单地以数字命名。（童话目录层次） 按照这样的方法制作网页，由于学生在制作的过程当中，能够直观地一步步看到网页丰满起来，在制作的过程中又没有什么大的技术难点，淡化了网页的制作的技术，所以学生