网页制作与工具技能训练.docx
《网页制作与工具技能训练.docx》由会员分享，可在线阅读，更多相关《网页制作与工具技能训练.docx（23页珍藏版）》请在冰豆网上搜索。
网页制作与工具技能训练
网页制作与工具技能训练
一、技能训练目的、要求和任务
本训练是网络信息技术课程的后续实践过程，主要培养学生网络信息技术和信息管理的应用能力，通过对网页的规划、网页的设计、网页动画的设计等专业能力和方法能力的训练以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质等，使学生掌握个人网页的开发和流程，并能独立和协作进行操作，使之在就业时能够成为一个合格的信息人才。
本实践训练的内容是以工作过程为向导，以工作任务为基点，综合理论知识，操作技能和职业素养为一体的训练思路。
通过网页的设计完成情境，对学生进行有目的的训练，使学生不但能够掌握网页设计的专业知识和专业技能，还能够全面培养其团队协作、沟通表达、工作责任心、职业道德与规范等综合素质，使学生通过学习的过程掌握网页设计所需要的各项技能和相关专业知识。
由于网页的布局和信息的传送、浏览通过教材内容难以获得直接的感觉，所以有必要加强实践环节的技能训练，其基本要求如下：
（一）熟练掌握网页设计工具的使用方法。
（2~3种）
（二）学会网页设计的基本原理和方法。
（三）正确理解各种信息的发布和浏览方式。
（四）本课程的学习过程也是网页设计的训练过程，要求学生编写的程序结构清楚、正确易读，符合软件过程的规范，从而培养学生的数据抽象能力；
（六）通过个人网页的设计，引导学生学习当前流行的开发工具的使用，为今后学习面向对象的程序设计做一些铺垫。
Microsoft公司的FrontPage和Macromedia公司的Dreamweaver是使用最多的HTML网页制作工具，同学们可以使用其开发网页，并熟悉其使用方法。
二、网页制作工具使用与网页设计专业能力要求（利用开发工具）
1.掌握常规网页的规划。
2、掌握常规网页的策划书的书写。
3、掌握常规网页的效果图的设计。
4、掌握网页动画的设计。
5、熟练应用新技术布局网页。
6、掌握动态代码的编写。
7、熟练开发常规静态网页。
8、掌握开位动态网页的方法。
9、熟悉维护常规网页。
三、技能训练内容及要求
为了达到技能训练目的，安排了十个训练单元，训练的重点在于基本的网页设计方法及工具使用能力。
一、网站的规划设计
网站规划是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、维护等做出规划。
网站的规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。
㈠网站设计流程
随着技术的不断发展和用户对网站功能性的需求不断提高，如今的网站已不再是简简单单利用静态HTML来实现了，网站设计越来越复杂，网站的设计与开发已经进入了一个需要强调流程和分工的时代。
网站设计主要任务包括：
网站架构设计，以浏览器为客户端的的WEB应用程序开发，系统测试及网站发布等。
网站设计流程大体上分为以下六个阶段：
①用户需求分析及变更（即前期调研）。
随着互联网的飞速发展，网络已经或者正成为人们学习、工作和生活中不可缺少的一部分，更重要的是，INTERNET潜在的商机已经日益显现。
因此，不论个人还是团体，都希望在网络中找到适合自己的位置。
于是，各种各样的网站如雨后春笋般建立起来，纵观各网站可分为门户网站、普及型网站、电子商务类网站、媒体信息服务类网站、办公事务管理网站、商务管理网站。
②网站架构及业务流程分析。
③系统分析及总体设计（网络策划书撰写）。
网站规划书包含的内容如下：
Ⅰ、建设网站前的市场分析
1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展公司业务。
2、市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。
3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。
Ⅱ、建设网站目的及功能定位
1、为什么要建立网站，是为了宣传产品，进行电子商务，还是建立行业性网站？
是企业的需要还是市场开拓的延伸？
2、整合公司资源，确定网站功能。
根据公司的需要和计划，确定网站的功能：
产品宣传型、网上营销型、客户服务型、电子商务型等。
3、根据网站功能，确定网站应达到的目的作用。
4、企业内部网（Intranet）的建设情况和网站的可扩展性。
Ⅲ、网站技术解决方案
根据网站的功能确定网站技术解决方案。
1、采用自建服务器，还是租用虚拟主机。
2、选择操作系统，用unix,Linux还是Window2000/NT。
分析投入成本、功能、开发、稳定性和安全性等。
3、采用系统性的解决方案（如IBM,HP）等公司提供的企业上网方案、电子商务解决方案？
还是自己开发。
4、网站安全性措施，防黑、防病毒方案。
5、相关程序开发。
如网页程序ASP、JSP、CGI、数据库程序等。
Ⅳ、网站内容规划
1、根据网站的目的和功能规划网站内容，一般企业网站应包括：
公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。
2、电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。
3、如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。
注意：
网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。
可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。
Ⅴ、网页设计
1、网页设计美术设计要求，网页美术设计一般要与企业整体形象一致，要符合CI规范。
要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。
2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。
3、制定网页改版计划，如半年到一年时间进行较大规模改版等。
Ⅵ、网站维护
1、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。
2、数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。
3、内容的更新、调整等。
4、制定相关网站维护的规定，将网站维护制度化、规范化。
Ⅶ、网站测试
网站发布前要进行细致周密的测试，以保证正常浏览和使用。
主要测试内容：
1、服务器稳定性、安全性。
2、程序及数据库测试。
3、网页兼容性测试，如浏览器、显示器。
4、根据需要的其他测试。
Ⅷ、网站发布与推广
1、网站测试后进行发布的公关，广告活动。
2、搜索引掣登记等。
Ⅸ、网站建设日程表
各项规划任务的开始完成时间，负责人等。
Ⅹ、费用明细
各项事宜所需费用清单。
以上为网站规划书中应该体现的主要内容，根据不同的需求和建站目的，内容也会在增加或减少。
在建设网站之初一定要进行细致的规划，才能达到预期建站目的。
④界面设计、交互设计及程序开发。
⑤系统测试和文档编写。
⑥客户培训、技术支持和售后服务。
二、网页设计工具
古人云：
“工欲善其事，必先利其器”。
制作网页第一件事就是选定一个合适的网页设计工具。
从原理上来讲，用Notepad就可以编写网页，但选择一个好的编辑器会令你事半功倍。
另外，制作多媒体网页还需要一些辅助工具，包括图像，动画和视频处理工具，如用于图像设计制作的Photoshop,Paintshop、专业网页图像设计工具Fireworks、动画设计工具Flash以及视频制作工具VideoPack等。
1.网页设计工具概述
网页设计工具可以分为两类：
第一类是源代码型编辑工具，代表产品有Hotdog，HomeSite，Editplus等；第二类是所见即所得编辑工具，代表产品有Hotmetal，Frontpage，Dreamweaver,等。
经过几年的发展与改进，源代码型编辑工具已经基本被淘汰了，同时，所见即所得编辑工具也日趋走向成熟，其功能也在不断得到完善与强化。
①Hotdog--资格最老
Hotdog（热狗）是美国著名的软件公司Sausage出品的。
该公司也是靠Hotdog一举打入市场，名声大作的。
当时正逢Internet处于迅速发展的初期，而市场上又缺乏这种类型的主页编辑工具，大部分人只能使用记事本来编写HTML，非常麻烦。
Hotdog正是针对这种情况，以简单易用、功能强大的方式向HTML制作人员而推出的网页制作软件，自然大受欢迎。
HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。
HotDog的高级HTML支持插入marquee，并能在预览模式中以正常速度观看。
这点非常难得，因为即使首创这种标签的Microsoft在FrontPage98中也未提供这样的功能。
HotDog对plug－in的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。
但对中文的处理不很方便。
HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。
②HomeSite简单易用、功能全面
Allaire的HomeSite3.0是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。
HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。
HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。
HomeSite更适合那些比较复杂和精彩页面的设计。
如果你希望能完全控制你制作的页面的进程，HomeSite3.0是你最佳选择。
不过对于生手过于复杂。
③DreamWeaver——自制动态HTML动画的网页 DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML（DynamicHTML）的设计，使得页面没有plug－in也能够在Netscape和IE4.0浏览器中正确地显示页面的动画。
同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了RoundtripHTML技术。
这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。
这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。
DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
④MicrosoftFrontPage98——制作功能强大的网页
如果你曾对Word很熟悉，那么相信你用FrontPage98进行网页设计一定会非常顺手。
使用Frontpage98制作网页，你能真正体会到“功能强大，简单易用”的含义。
页面制作由Frontpage98中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页，预览页。
Frontpage98带有图形和GIF动画编辑器，支持CGI和CSS。
向导和模板都能使初学者在编辑网页时感到更加方便。
FrontPage98最强大之处是其站点管理功能。
在更新服务器上的站点时，不需要创建更改文件的目录。
FrontPage98会为你跟踪文件并拷贝那些新版本文件。
FrontPage98是现有网页制作软件中唯一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。
⑤Netscape编辑器——制作简单的网页
NetscapeCommunicator和NetscapeNavigatorGold3.0版本都带有网页编辑器。
如果你喜欢用Netscape浏览器上网，那么使用Netscape编辑器真是简单方便！
当你用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。
你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与Frontpage98还有些像。
但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。
Netscape编辑器是网页制作初学者很好的入门工具。
如果你的网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。
如果你对HTML语言有所了解的话，能够使用Notepad或UltraEdit等文本编辑器来编写少量的HTML语句，那么也可以弥补Netscape编辑器的一些不足。
⑥AdobePagemill3.0——制作多框架、表单和ImageMap图像的网页
Pagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。
如果你的主页需要很多框架、表单和ImageMap图像，那么AdobePagemill3.0的确是你的首选。
Pagemill创建多框架页十分方便，你可以同时编辑各个框架中的内容。
Pagemill在服务器端或客户端都可创建与处理ImageMap图像，它也支持表单创建。
Pagemill允许在HTML代码上编写和修改，支持大部分常见的HTML扩展，还提供拼写检错、搜索替换等文档处理工具。
在Pagemill3.0中还增加了站点管理能力，但仍不支持CSS、TrueDoc和动态HTML等高级特性。
Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。
⑦ ClarisHomePage3.0——快速创建动态的网页
如果使用ClarisHomePage软件，你可以在几分钟之内创建一个动态网页。
这是因为它有一个很好的创建和编辑Frame（框架）的工具，你不必花费太多的力气就可以增加新的Frame（框架）。
而且ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理特性还允许你检测页面的合法连接。
不过界面设计过于粗糙，对ImageMap图像的处理也不完全。
2、网页设计辅助工具
㈠图像制作工具
图形图像制作工具是用来制作图片、处理图像等网页设计中常用资源的工具，比较典型的有图像制作处理工具Photoshop、矢量图形常用制作与编辑工具——CorelDraw10等。
它们使用简单，适合网页开发者进行网页设计。
①Photoshop
Photoshop是当今图形设计、处理工作者的首选工具，对于广大的开发者来说，Photoshop在网页图像制作中，也是一款极为实用的工具。
网上也有许多关于Photoshop的学习资料。
Photoshop是Adobe公司开发的一个功能十分强大的专业级的图像编辑工具，它将选择工具、绘画和编辑工具、颜色校正工具及特殊效果功能结合起来，对图像进行编辑处理。
它能帮助用户创建绝对优秀的能与照片逼真的图像，并且工作质量将随用户工作经验和对图像编辑原则的了解而呈指数上升。
在众多的图像处理软件中，Photoshop以其完备的图像处理功能和多种美术处理技巧为许多的专业人士所青睐。
它既是一种先进的绘图程序，同时也可以用来修改和处理图像。
Photoshop集图像编辑、图像合成、图像扫描等多种图像处理功能于一体，同时支持多种图像文件格式，并提供有多种图像处理效果，可制作出生动形象的图像效果，是一个非常理想的图像处理工具。
②轻巧实用的PaintShop
CorelPaintShopProX是一款功能完善、使用简便、可与PhotoShop相媲美的专业级数码图像编辑软件。
CorelPaintShopProX为您提供的工具使您可以轻松的捕捉、创建、增强并最优化您的图形文件除了支持超过三十多个文件格式外，它提供的Layer功能，让您编辑多个Layer后再结合为一，并且可以让每个Layer都拥有不同的特殊效果，使您在编辑上方便许多，修改时也可以仅针对某个Layer进行修改而不必全图重新制作！
另外，内建的画面截取功能让您截取任何屏幕画面进行编辑，再利用其多种特殊效果及制作网页用按钮等功能制作专业级的图案。
③网页图像制作专家Fireworks
Fireworks是一个强大的图形处理工具，除了拥有一般图像处理软体具备的基本功能外，Fireworks还有一些独特的地方：
1.全部为，网页设计人员考虑，利用它不仅可以生成体积小、质量高的普通静态图像，还可以非常轻松地做出各种网页设计中常见的效果，比如图像翻转、下拉菜单等。
2.具有良好的兼容性。
能够自由地导入、导出各种图像文件。
3.具有强大的批处理功能。
4.可以同时处理矢量图和位图。
5.能够很方便地对图像进行切割，同时能自动给各区添加HTML代码、增加链接等。
6.同时能和DreamWeaver，Flash实现网页制作的无缝连接密切配合。
AdobeFireworksCS4是Adobe推出的一款网页作图软件，软件可以加速Web设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。
FireworksCS4不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库,并可与AdobePhotoshopCS4、AdobeIllustratorCS4、AdobeDreamweaverCS4和AdobeFlashCS4软件省时集成。
在Fireworks中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和Flash的其它资源。
然后直接置入DreamweaverCS4中轻松地进行开发与部署。
㈡动画设计工具
①动画利器Flash
Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。
通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。
您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。
Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。
Flash是通过广泛使用矢量图形做到这一点的。
与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。
位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。
②Animationshop
Jasc软件公司所出品的制作动画效果按钮、广告横幅和其他网页图片的软件，让你轻轻松松地制作网页动画或者广告横幅，内建许多动画变换特效，简单的绘图以及文字功能，是套不错的动画制作软件！
强大而易用的创建多样效果动画的动画制作工具。
内建多种效果。
且能够输出多种动画视频和动画文件，还可以另存为许多静态图形。
③Ulead GIFAnimator
友立公司出版的动画GIF制作软件，内建的Plugin有许多现成的特效可以立即套用，可将AVI文件转成动画GIF文件，而且还能将动画GIF图片最佳化，能将你放在网页上的动画GIF图档减肥，以便让人能够更快速的浏览网页。
这是一个很方便的GIF动画制作软件，由UleadSystems.Inc创作。
UleadGIFAnimator不但可以把一系列图片保存为GIF动画格式，还能产生二十多种2D或3D的动态效果，足以满足您制作网页动画的要求。
三、几种常用网页设计工具的使用
我们已经知道了多种网页设计工具，这其中一定有适合自己的一种。
从事网站开发，一定要熟练掌握必备的网页设计工具。
就我个人而言，我比较喜欢Adobe公司的网络三剑客，功能强大，操作简便，使用很称心顺手。
网页三剑客网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。
由Dreamweaver，Fireworks，Flash三个软件组成，俗称三剑客。
之所以称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。
现在，制作网页，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；较为流行的一种是在Fireworks中做好主要页面，然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。
（1）dreamwaver刀客（网页制作）Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视化网站开发工具。
（2）firework剑客（图像处理）Fireworks是Macromedia公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。
（3）flash闪客（动画设计）flash是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。
Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。
其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高，Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。
flash是Macromedia公司推出辅助网页的动画制做工具。
虽然上面是常用的三剑客，但是我们现在用来作图像处理的工具用得比较多的还是PHOTOSHOP，因为这个ADOBE的主打产品，而且也是一流的图形处理工具。
所以我们会用得比较多。
Photoshop是目前PC机上公认的最好的通用平面美术设计软件，它的功能完善，性能稳定，使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。
所以，也有称Photoshop，Flash，Dweamweaver为“新网络三剑客”的。
这里我主要应用的是“新网络三剑客”。
㈠使用Dreamweaver制作网页
Dreamweaver是一款有着多年历史和良好口碑的可视化网页编辑工具（简称DW），他最大的优点就是所见即所得，对W3C网页标准化支持十分到位，同时它还支持网站管理，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML，而且还支持ASP、JSP、PHP、ASP.NET、XML等程序语言的编写与调试。
Dreamweaver从字面意思上解释是“梦想编织者”的意思，可见macromedi
升级会员 