网页基础认识.pptVIP

2．Fireworks 动态感应的JavaScript 教材： 《Photoshop cs/Dreamweaver mx 2004/Flash 2004/Fireworks 2004》 第1章 网页设计基础 本章教学目标 一个成功的Web站点，与在该站点制作前的构思与规划是分不开的。在建站前通过合理的构思与规划，不但可以让制作人员的工作更加轻松，而且还能让站点有一个全局上的总纲，在制作过程中不至于没有头绪，避免走不必要的弯路。通过本章的学习，读者可以了解到网页内容的规划方法、设计网页布局、站点规划与设计流程、创建设计图等内容，并能掌握制作一个主页的基本流程。 教学重点与难点 1. 网页内容的规划 2. 设计网页布局 3. 站点规划与设计流程 4. 创建设计图 5. 主页的基本制作流程 1.1 网页的设计构思和布局 1.1.1 网页的知识与术语 当用户在制作网页时，经常会遇到一些术语，例如，服务器、客户端、框架、CGI、ASP PHP ASP.NET JAVA、计数器、留言板、交互、表单等。如果用户对这些术语不了解，在制作网页时将会遇到不少问题，下面将分别介绍这些术语。 1.1 网页的设计构思和布局 1.1.2 网页的设计构思 一个网页的成功与否，很重要的一个因素就在于它的构思，富有创意的构思和巧妙的页面布局会让网页具有更强的生命力和观赏性。在网页的设计构思中需要认真考虑的问题有：网页的主题、网页的命名、网页标志、色彩搭配和字体等要素。 1. 网页的主题 2. 网页命名 3. 网站标志 4. 色彩搭配 5. 字体 网站制作要求案例 1.1 网页的设计构思和布局 1.1.3 网页的布局 在网页布局过程中，应该遵循的原则有：对称平衡、异常平衡、对比、凝视和空白等。一般来说，网页的布局有下面几种常见的结构。 “π”型结构布局 “Ｔ”型布局 “三”型布局 对比布局 POP布局 Flash布局 1.2 站点规划与设计流程 当用户希望创建一个Web站点时，首先应考虑如何设计和规划站点，以确保它能制作成功。即使用户只是创建个人主页，仅仅是为了供朋友和家人一起分享，也需要谨慎地规划站点，使每个人都能浏览该主页。 1.2 站点规划与设计流程 1.2.1 决定站点目标 在创建网站时，决定站点的目标是第一步。设计者应清楚建立站点的目标，确定它将提供什么样的服务，网页中应该出现的内容等。通常，一个好的规划，可以直接影响站点的质量和将来浏览者的访问流量。此外，对于一个网站来说，应能够经常提供新内容才能吸引浏览者。在网页中插入媒体(如Flash、Director等)元素，也可以使网页看上去生动、可亲。 1.2 站点规划与设计流程 1.2.2 选择目标观众 为了使站点能够吸引更多的观众，应该充分考虑到观众所使用的计算机类型，使用的操作平台(如Macintosh、Windows、Linux等)，平均使用的连接速度以及他们使用的浏览器种类和显示器尺寸等，这些因素都会影响观众访问您的网页。一旦选择了观众，并且决定了他们使用的计算机类型、连接速度和浏览器种类，就能够实现您的设计。 1.2 站点规划与设计流程 1.2.3 为兼容的浏览器创建站点 在多数环境下，需要为广大用户设计Web站点。这时可选择一种或两种浏览器作为目标浏览器，并为这些浏览器设计相应的站点，同时也要使该站点能较大程度地适合于其他的浏览器。当站点中包含特殊的版面形式、动画、多媒体和交互性内容时，它们将显示与浏览器兼容性之间的矛盾。 1.2 站点规划与设计流程 1.2.4 组织站点结构 合理地组织站点结构，能够加快对站点的设计，提高工作效率，节省工作时间。当创建一个大型网站时，如果将所有的网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很困难。因此，应合理地使用文件夹来管理文档。 1.2 站点规划与设计流程 1.2.5 创建设计图 1.2 站点规划与设计流程 1.2.6 设计导航图 在站点中设置导航条也是一个重要的组成部分。当设计站点时，应考 虑到访问您的站点的观众大多都是有经验的，也应考 虑到如何使观众能轻松地从网站的一个地方移动到另一个地方。 1.2 站点规划与设计流程 1.2.7 计划和收集资源 一旦设计好站点的布局，就可以创建并收集所需的资源文件了。这些资源可以是一些图像、文本或者是一些媒体(如Flash，Shockwave等)。在进行站点制作之前应装备好已经收集到的资源，否则，将不得不为了寻找所需的图像或创建按钮而频繁地停下来。 1.3 主页的基本制作流程 指定网页标题 采集网页内容 准备网页图片 设定网页框架 设定