第四章第1节了解与设计网站.ppt

第4章 网站设计与评价 第1节 了解与设计网站 【学习目标】 1、知识性目标：知道WWW、网页、主页、网站的基本概念及其相互关系，了解构成网页的基本元素；知道静态网页和动态网页的差异，并能解释它们的工作原理；了解常用的网站建设技术和网站的策划与设计方法。 2、技能性目标：能够分析网站的结构，辨别静态网页和动态网页；能够根据主题策划与设计网站。 3、情感性目标：通过观察不同的网页结构，提高审美情操；通过活动体验协作的乐趣，培养客观真实的价值观。 通过前面的学习，大家对网页浏览已经有了初步的了解。下面我们一起来对网站方面的知识进行系统地学习。 一、网站与网页 1、网页：是利用各种软件或开发工具制作而成的文件，它可以传递文字、图片、声音等各种信息。 网页可分为静态网页和动态网页。 静态网页是一种用HTML代码组成的文件，往往用于发布无需用户参与、内容固定的信息。静态网页通常用HTML语言或Dreamwaver、FrontPage等工具编制。 动态网页：包括动态表现网页和动态内容网页。 动态表现网页是在网页外观上实现动态，常用制作技术有GIF动画、Flash、JavaScript（JSP）等。 动态内容网页是通过一定的计算机编程语言（如CGI、ASP、JSP、PHP等）来实现与用户的实时交互，生成内容发生变化的网页。例如，查询、留言板、聊天室等网页。 2、网站：由一些互联的网页构成的一个整体。 3、主页：又叫首页，是指一个网站的起始网页，它是网站的门面，体现了整个网站的主题、风格及架构，还具有引导的功能。 二、网站的结构 常见的网站结构有树形、星形和混合形。 1、树形结构：主页上的超级链接指向一级子页，一级子页的超级链接指向二级子页，依次类推。 优点：条理清晰。 缺点：浏览效率低，访问者如果想从一个栏目的子页转到另一个栏目的子页，必须先返回主页。 2、星形结构：每个页面上都设置一个共同的超级链接按钮，所有页面都可以通过该按钮保持链接，这个超级链接按钮就是所有页面的入口。 优点：浏览方便，访问者随时可以切换到自己想看的页面。 缺点：链接太多，访问者容易迷失方向。 3、混合形结构：常见的混合形结构是主页和一级子页之间采用星形结构链接，一级和二级子页、二级和三级子页之间采用树形结构链接。 三、构成网页的元素 1、文字与图片 2、动画：GIF动画、Flash动画等 3、音频：网上流行的音频格式主要有MIDI、WAV、MP3等 4、视频：常用的视频格式有RM、AVI、MPG等 5、超级链接：超级链接通常内嵌在文字或图片中，当用户的鼠标移至超级链接上时会显示出手指形状。 6、动态内容：动态内容是在与用户交互的过程中产生的，主要包括查询、留言板、论坛、聊天室等。 四、静态网页和动态网页的工作原理 （一）静态网页的工作原理 用户通过在浏览器的地址栏中输入网址或单击超级锭接发出请求，该请求会在网络上传送，并根据网址或超级链接所指定的位置，找到存有所需文件的服务器。服务器在收到请求后，便检查自己是否存有所需请求的文件，如果有则将文件送出。客户端在收到服务器返回的文件后，由浏览器对其进行解读，并将结果呈现在客户端屏幕上。 （二）动态网页的工作原理 1、动态表现网页的工作原理 当用户浏览包含GIF动画和Flash动画等动态内容的网页时，所有的动态内容都会从服务器端下载到客户端，由客户端的浏览器程序对其进行解读，并将结果呈现在屏幕上。 2、动态内容网页的工作原理 例如，互动出版网的图书查询过程中动态内容网页的浏览过程为： （1）用户在互动出版网的主页中输入需要查询的图书名称或作者姓名等信息，浏览器将用户的请求发送给Web服务器； （2）Web服务器接收到客房端发来的请求后，运行与图书查询相应的ASP或JSP程序，并向数据库服务器发出查询请求； （3）数据库服务器将查询结果返回给Web服务器； （4）Web服务器将查询结果返回到用户的浏览器。 五、常用的网站建设技术 1、HTML：即超文本标记语言，是一种用来制作超文本文档的简单标记语言，一直被用作万维网上的信息表示语言。 2、JavaScript：是目前应用最广的页面描述语言之一，它通常被嵌入在HTML语言中，无需编译就可以直接在浏览器中执行，非常适合于建立网页前端与使用者的互动，用于开发一些浏览器客户端的应用程序。 3、DHTML：即动态超文本标记语言，可以使页面具有动态效果。 4、CGI：通用网关接口（common gateway interface），是一种用来定义服务器程序和脚本程序之间的沟通标准的机制。 5、ASP：是微软公司开发的动态网页技术。 6、PHP：是一种跨平台解释执行的脚本语言。 7、JSP：是由Sun公司提出、多家公司参与制定的动态网页技术标准。 六、网站的策划与设计 （一）