网页制作及工具技能训练

《网页制作及工具技能训练》由会员分享，可在线阅读，更多相关《网页制作及工具技能训练（36页珍藏版）》请在金锄头文库上搜索。

1、网页制作与工具技能训练网页制作与工具技能训练 一、技能训练目的、要求和任务一、技能训练目的、要求和任务 本训练是网络信息技术课程的后续实践过程， 主要培养学生网络 信息技术和信息管理的应用能力，通过对网页的规划、网页的设计、 网页动画的设计等专业能力和方法能力的训练以及培养学生的团队 协作、沟通表达、工作责任心、职业规范和职业道德等综合素质等， 使学生掌握个人网页的开发和流程，并能独立和协作进行操作，使之 在就业时能够成为一个合格的信息人才。 本实践训练的内容是以工作过程为向导，以工作任务为基点，综 合理论知识，操作技能和职业素养为一体的训练思路。通过网页的设 计完成情境，对学生进行有目的的训

2、练，使学生不但能够掌握网页设 计的专业知识和专业技能，还能够全面培养其团队协作、沟通表达、 工作责任心、职业道德与规范等综合素质，使学生通过学习的过程掌 握网页设计所需要的各项技能和相关专业知识。 由于网页的布局和信 息的传送、浏览通过教材内容难以获得直接的感觉，所以有必要加强 实践环节的技能训练，其基本要求如下： （一）熟练掌握网页设计工具的使用方法。 （23 种） （二）学会网页设计的基本原理和方法。 （三）正确理解各种信息的发布和浏览方式。 （四）本课程的学习过程也是网页设计的训练过程，要求学生编写 的程序结构清楚、正确易读，符合软件过程的规范，从而培养学生的 数据抽象能力； （六）通过

3、个人网页的设计，引导学生学习当前流行的开发工具的 使用，为今后学习面向对象的程序设计做一些铺垫。 Microsoft 公 司 的公 司 的 FrontPage和和 Macromedia 公 司公 司 的的 Dreamweaver 是使用最多的是使用最多的 HTML 网页制作工具网页制作工具， 同学们可以使用同学们可以使用 其开发网页，并熟悉其使用方法。其开发网页，并熟悉其使用方法。 二、二、 网页制作工具使用与网页设计专业能力要求（利用开网页制作工具使用与网页设计专业能力要求（利用开 发工具）发工具） 1.掌握常规网页的规划。 2、掌握常规网页的策划书的书写。 3、掌握常规网页的效果图的设计。

4、 4、掌握网页动画的设计。 5、熟练应用新技术布局网页。 6、掌握动态代码的编写。 7、熟练开发常规静态网页。 8、掌握开位动态网页的方法。 9、熟悉维护常规网页。 三、技能训练内容及要求三、技能训练内容及要求 为了达到技能训练目的，安排了十个训练单元，训练的重点在于 基本的网页设计方法及工具使用能力。 一、网站的规划设计 网站规划是指在网站建设前对市场进行分析，确定网站的目的和 功能，并根据需要对网站建设中的技术、内容、费用、维护等做出规 划。网站的规划对网站建设起到计划和指导的作用，对网站的内容和 维护起到定位作用。 网站设计流程 随着技术的不断发展和用户对网站功能性的需求不断提高，如今

5、的网站已不再是简简单单利用静态 HTML 来实现了，网站设计越来越 复杂，网站的设计与开发已经进入了一个需要强调流程和分工的时 代。 网站设计主要任务包括：网站架构设计，以浏览器为客户端的的 WEB 应用程序开发，系统测试及网站发布等。 网站设计流程大体上分为以下六个阶段： 用户需求分析及变更（即前期调研） 。 随着互联网的飞速发展，网络已经或者正成为人们学习、工作和生 活中不可缺少的一部分，更重要的是，INTERNET 潜在的商机已经日 益显现。因此，不论个人还是团体，都希望在网络中找到适合自己的 位置。于是，各种各样的网站如雨后春笋般建立起来，纵观各网站可 分为门户网站、 普及型网站、 电

6、子商务类网站、 媒体信息服务类网站、 办公事务管理网站、商务管理网站。 网站架构及业务流程分析。 系统分析及总体设计（网络策划书撰写） 。 网站规划书包含的内容如下： 、建设网站前的市场分析 1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联 网上开展公司业务。 2、市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作 用。 3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪 些竞争力，建设网站的能力（费用、技术、人力等） 。 、建设网站目的及功能定位 1、为什么要建立网站，是为了宣传产品，进行电子商务，还是建立 行业性网站？是企业的需要还是市场开拓的延伸？ 2、整合

7、公司资源，确定网站功能。根据公司的需要和计划，确定网 站的功能：产品宣传型、网上营销型、客户服务型、电子商务型等。 3、根据网站功能，确定网站应达到的目的作用。 4、企业内部网（Intranet)的建设情况和网站的可扩展性。 、网站技术解决方案 根据网站的功能确定网站技术解决方案。 1、采用自建服务器，还是租用虚拟主机。 2、选择操作系统，用 unix,Linux 还是 Window2000/NT。分析投入成 本、功能、开发、稳定性和安全性等。 3、采用系统性的解决方案（如 IBM,HP）等公司提供的企业上网方案、 电子商务解决方案？还是自己开发。 4、网站安全性措施，防黑、防病毒方案。 5、

8、相关程序开发。如网页程序 ASP、JSP、CGI、数据库程序等。 、网站内容规划 1、根据网站的目的和功能规划网站内容，一般企业网站应包括：公 司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基 本内容。 2、电子商务类网站要提供会员注册、详细的商品服务信息、信息 搜 索查询、定单确认、付款、个人信息保密措施、相关帮助等。 3、 如果网站栏目比较多， 则考虑采用网站编程专人负责相关内容。注 意：网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信 息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行 调 查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站 内容。 、

9、网页设计 1、网页设计美术设计要求，网页美术设计一般要与企业整体形象一 致，要符合 CI 规范。要注意网页色彩、图片的应用及版面规划，保 持网页的整体一致性。 2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶 层、网络速度、阅读习惯等。 3、制定网页改版计划，如半年到一年时间进行较大规模改版等。 、网站维护 1、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定 响应时间。 2、数据库维护，有效地利用数据是网站维护的重要内容，因此数据 库的维护要受到重视。 3、内容的更新、调整等。 4、制定相关网站维护的规定，将网站维护制度化、规范化。 、网站测试 网站发布前要进行细致周密的

10、测试，以保证正常浏览和使用。主要测 试内容： 1、服务器稳定性、安全性。 2、程序及数据库测试。 3、网页兼容性测试，如浏览器、显示器。 4、根据需要的其他测试。 、网站发布与推广 1、网站测试后进行发布的公关，广告活动。 2、搜索引掣登记等。 、网站建设日程表 各项规划任务的开始完成时间，负责人等。 、费用明细 各项事宜所需费用清单。 以上为网站规划书中应该体现的主要内容，根据不同的需求和建 站目的，内容也会在增加或减少。在建设网站之初一定要进行细致的 规划，才能达到预期建站目的。 界面设计、交互设计及程序开发。 系统测试和文档编写。 客户培训、技术支持和售后服务。 二、网页设计工具 古人云

11、： “工欲善其事，必先利其器” 。制作网页第一件事就是选 定一个合适的网页设计工具。从原理上来讲，用 Notepad 就可以编 写网页，但选择一个好的编辑器会令你事半功倍。 另外，制作多媒体网页还需要一些辅助工具，包括图像，动画和 视频处理工具，如用于图像设计制作的 Photoshop,Paint shop、专 业网页图像设计工具 Fireworks、动画设计工具 Flash 以及视频制作 工具 VideoPack 等。 1.网页设计工具概述 网页设计工具可以分为两类：第一类是源代码型编辑工具，代表 产品有 Hotdog，HomeSite，Editplus 等；第二类是所见即所得编辑 工具，代

12、表产品有 Hotmetal，Frontpage，Dreamweaver,等。经过几 年的发展与改进，源代码型编辑工具已经基本被淘汰了，同时，所见 即所得编辑工具也日趋走向成熟，其功能也在不断得到完善与强化。 Hotdog-资格最老 Hotdog（热狗）是美国著名的软件公司 Sausage 出品的。该公司 也是靠 Hotdog 一举打入市场，名声大作的。当时正逢 Internet 处于 迅速发展的初期，而市场上又缺乏这种类型的主页编辑工具，大部分 人只能使用记事本来编写 HTML，非常麻烦。Hotdog 正是针对这种情 况，以简单易用、功能强大的方式向 HTML 制作人员而推出的网页制 作软件，

13、自然大受欢迎。HotDog 是较早基于代码的网页设计工具， 其最具特色的是提供了许多向导工具， 能帮助设计者制作页面中的复 杂部分。 HotDog 的高级 HTML 支持插入 marmarquee，并能在预览模式中 以正常速度观看。 这点非常难得， 因为即使首创这种标签的Microsoft 在 FrontPage 98 中也未提供这样的功能。HotDog 对 plugin 的支 持也远远超过其他产品， 它提供的对话框允许你以手动方式为不同格 式的文件选择不同的选项。但对中文的处理不很方便。 HotDog 是个功能强大的软件，对于那些希望在网页中加入 CSS、Java、RealVideo 等复杂

14、技术的高级设计者，是个很好的选择。 HomeSite 简单易用、功能全面 Allaire 的 HomeSite 3.0 是一个小巧而全能的 HTML 代码编辑 器，有丰富的帮助功能，支持 CGI 和 CSS 等等，并且可以直接编辑 perl 程序。HomeSite 工作界面繁简由人，根据习惯，可以将其设置 成像 Notepad 那样简单的编辑窗口，也可以在复杂的界面下工作。 HomeSite 具有良好的站点管理功能，链接确认向导可以检查一 个或多个文档的链接状况。 HomeSite 更适合那些比较复杂和精彩页面的设计。如果你希望 能完全控制你制作的页面的进程，HomeSite 3.0 是你最佳

15、选择。不 过对于生手过于复杂。 DreamWeaver自制动态HTML动画的网页 DreamWeaver 是一个很酷的网页设计软件，它包括可视化编辑、HTML 代码编辑的软件包，并支持 ActiveX、JavaScript、Java、Flash、 ShockWave 等特性，而且它还能通过拖拽从头到尾制作动态的 HTML 动画，支持动态 HTML(Dynamic HTML)的设计，使得页面没有 plug in 也能够在 Netscape 和 IE 4.0 浏览器中正确地显示页面的动画。 同时它还提供了自动更新页面信息的功能。 DreamWeaver 还采用了 Roundtrip HTML 技术

16、。这项技术使得网页在 DreamWeaver 和 HTML 代 码编辑器之间进行自由转换，HTML 句法及结构不变。这样，专业设 计者可以在不改变原有编辑习惯的同时， 充分享受到可视化编辑带来 的益处。DreamWeaver 最具挑战性和生命力的是它的开放式设计，这 项设计使任何人都可以轻易扩展它的功能。 Microsoft FrontPage 98制作功能强大的网页 如果你曾对 Word 很熟悉，那么相信你用 FrontPage 98 进行网页 设计一定会非常顺手。 使用 Frontpage98 制作网页，你能真正体会到“功能强大，简单 易用”的含义。页面制作由 Frontpage98 中的 Editor 完成，其工作 窗口由 3 个标签页组成，分别是“所见即所得”的编辑页，HTML 代 码编辑页，预览页。Frontpage98 带有图形和 GIF 动画编 辑器，支持 CGI 和 CSS。向导和模板都能使初学者在编辑网页时感到 更加方便。 FrontPage 98 最强大之处是其站点管理功能。在更新服 务器上的站点时，不需