第1章 网页设计概述-公选.ppt

1,网页设计基础教程,主讲教师：苏永红,2020/6/9,2,授课时间：2011-2012学年第2学期学时数：32学时(上课20学时+上机12学时)总成绩=考核成绩考核方式：以课程设计形式每人做一个小型网站并提交课程设计报告。,2020/6/9,3,教材：网页设计基础教程，库少平等编著，北京邮电大学出版社，2010版参考书：DreamweaverCS4+ASP动态网站开发从基础到实践，李睦芳编著，机械工业出版社，2010版,4,第1章网页设计概述,2020/6/9,5,学习目标,理解Web服务器的基本概念区分静态网页和动态网页了解网页制作的常用语言和常用工具理解网站相关知识理解网站开发的流程,2020/6/9,6,网页(Web页)浏览器中所看到的画面,放置Web站点的计算机,HTML文件,主页一个Web站点的首页,2020/6/9,7,网页的主要元素包括文本、图像、超链接、表单等元素。,2020/6/9,8,1文本文本是最重要的信息载体与交流工具，网页中的信息一般以文本为主。2图像今天看到的丰富多彩的网页，都是因为有了图像，可见图像在网页中的重要性。在网页中既可以通过图像的形式表达主题，也可以通过图像对网页起一个装饰作用。3超链接超链接是网站的灵魂，它是从一个网页指向另一个目的端的链接。,2020/6/9,9,4.表单表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输入文本、单击单选按钮与复选框，以及从下拉菜单中选择选项。5表格表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过表格可以精确地控制各网页元素在网页中的位置。6.多媒体及特殊效果多媒体元素包括声音、动画、视频等。,2020/6/9,10,1.1Web服务器基本概念,1.1.1Web概述Web是英文WorldWideWeb的简称。Web是一个分布式的超媒体（hypermedia）信息系统，它将大量的信息分布于整个因特网上。Web的任务就是向人们提供多媒体网络信息服务。,2020/6/9,11,1.1.1Web概述,超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。,2020/6/9,12,1.1.1Web概述,Internet提供的服务：WWW服务（网上冲浪）电子邮件服务（Email）文件传输（FTP）网络游戏即时信息传递（OICQ）WWW与浏览器：WWW是由遍布在Internet上的称为Web服务器的计算机组成，它将不同的信息资源有机地组织到一起，通过浏览器进行浏览。,2020/6/9,13,1.1.2Web的工作方式,Web是以客户服务器方式工作的。Web必须解决以下几个问题：怎样标志分布在整个Internet上的Web文件?用什么样的协议来实现Web上的各种超链接?怎样使不同作者创作的不同风格的Web文件都能在Internet上的各种计算机上显示出来?,2020/6/9,14,1.1.2Web的工作方式,从技术层面看，Web技术核心有三点：统一资源定位符（URL），实现互联网信息的定位统一标识；超文本传输（HTTP）协议，实现万维网的信息传输；超文本标记语言（HTML），实现信息的表示与存储。,2020/6/9,15,1.1.3URL,UniformResourceLocatorURL结构：方式：/主机名/地点/文件名例如:,2020/6/9,16,如：44域名地址通常分为4部分：机器名.单位名.单位类别.国家简称如：www表示服务器名称，whut表示武汉理工大学，edu表示教育部门，cn表示中国。,2020/6/9,17,1.1.3URL,DNS采用分层次结构：主机名.机构名.顶层域名其中顶级域名分为类型名和区域名两类。类型名用共14个，区域名用两个字母表示世界各国和地区。,2020/6/9,18,1.1.3URL,URL结构：方式：/主机名/地点/文件名例如：,2020/6/9,19,1.2静态网页与动态网页概述,1.2.1静态网页静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，静态网页的页面文件通常是以.htm、.html、.xml、.shtml等为后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。,2020/6/9,20,1.2.1静态网页,静态网页的特点：(1)静态网页的每个页面都有一个固定的URL，不含有“？”；(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在服务器上的；(3)静态网页的内容相对稳定，因此容易被搜索引擎检索；(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，如果完全依靠静态网页，制作方式比较困难；(5)静态网页的交互性较差，在功能方面有较大的限制。,2020/6/9,21,1.2.2动态网页,程序需要在服务器端运行，是动态网页的重要标志，在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页。服务器端动态技术：则需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据URL携带的参数运行服务器端程序，产生的结果页面再返回客户端。,2020/6/9,22,1.2.2动态网页,动态网页的特点：(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量；(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；(4)动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页。,2020/6/9,23,1.3常用的网页设计语言,1.PHPPHP(PersonalHomePages)是一种服务器端的嵌入式HTML的脚本语言。2.JSPJSP(JavaServerPages)是基于Java的技术，用于创建可支持跨平台及跨Web服务器的动态网页。3.ASPASP(ActiveServerPages)是微软公司提供的开发动态网页的技术，具有开发简单、功能强大等优点。4.ASP.NETASP.NET是一种已经编译的、基于.NET环境的语言。,2020/6/9,24,1.4常用的网页设计工具,记事本