网页设计制作概述.ppt

一 网页、网站的概念 二 Web标准 三 网站的规划与设计 四 网站开发工作流程 五 网站策划书撰写要点 六 常用网页制作软件 七 实训,第1章 网页设计制作概述,1.1.1 网页、网站和主页 网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。 网站由一组相关的HTML文件和其他文件组成，这些文件存储在Web服务器上。当用户访问一个Web站点时，该站点中有一个页面总是被首先打开，该页面称为首页或主页（一般为index.html或default.html）。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页 按照Web服务器的响应方式的不同，可以将Web页分为静态网页和动态网页。 静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页 按照Web服务器的响应方式的不同，可以将Web页分为静态网页和动态网页。 静态网页指客户端的浏览器发送URL请求给Web服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。,1.1 网页、网站的概念,1.1.2 静态网页和动态网页 动态网页是指必须经过应用程序服务器处理后才能交给Web服务器送到客户端进行显示的网页文件。这类网页根据所采用的应用程序服务器不一样，其文件名的扩展名也不一样。可以是 hph，jsp，asp等等。 动态网页技术根据程序运行的区域不同，分为客户端动态技术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括JavaScript、ActiveX和Flash等。,1.1 网页、网站的概念,1.2.1 Web标准的概念 WEB标准不是某一个标准，而是一系列标准的集合。 网页主要由三部分组成： 结构（Structure） 结构标准语言有： XML、XHTML 表现（Presentation） 表现标准语言有：CSS 行为（Behavior） 行为标准语言有：DOM、ECMAScript,1.2 Web标准,1.2.2 建立Web标准的目的 简单地说，建立Web标准的目的是： 提供最大利益给最多的网站用户； 确保任何网站文档都能够长期有效； 简化代码，降低建设成本； 让网站更容易使用，能适应更多不同用户和更多网络设备； 当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。,1.2 Web标准,1.2.3 采用Web标准的优点 1客户端的优点 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜素机器人等）； 用户能够根据样式选择定制自己的表现界面； 所有页面都能提供适于打印的版本。,1.2 Web标准,1.2.3 采用Web标准的优点 2服务器端的优点 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低； 更容易被搜寻引擎搜索到； 改版方便； 提供打印版本不需要复制内容。,1.2 Web标准,在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。 网站的规划与设计一般应遵循以下三个原则： 最大限度地满足用户需要； 最有效地进行资源利用； 使用方便，界面友好，运行高效； 常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。,1.3 网站的规划与设计,典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。 3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。,1.4 网站开发工作流程,补充案例：暨南大学网站结构,1.4 网站开发工作流程,网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。 1前期调研分析 2网站的功能定位 3网站技术解决方案 4网站内容规划 5网页设计 6网站维护 7网站测试 8网站发布与推广 9网站设计日程表 10费用明细,1.5 网站策划书撰写要点,1.6 常用网页制作软件,1.6.1 网页制作工具 网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。 1Dreamweaver 2FrontPage 3Adobe GoLive 4HomeSite 5Visual Studio 2005/2008,1.6 常用网页制作软件,1.6.2 网页图形图像处理工具 使用网页图形图像处理工具可以设计、处理适合网页的图形图像。 1Fireworks 2Photoshop 3CorelDRAW,1.6 常用网页制作软件,1.6.3 网页动画制作与特效工具 随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。 1Flash 2Ulead GIF Animator,1.6 常用网页制作软件,1.6.4 网页上传工具 制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。 1CuteFTP 2FlashFXP 3LeapFTP 4其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。,1.6 常用网页制作软件,1.6.5 网页设计工具的发展动向 2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。 另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。,实训一：规划