第01部分-网页设计概述.ppt

1、,第1部分 网页设计概述,课程学习要求与考核方式,上课： 带课本、以听为主、适当做笔记 实验： 提前准备、按时上下课、遵守机房规章制度 课后： 通过看课本消化吸收课堂知识、多上机练习 考核方式： 上机考试（理论与操作），3小时 闭卷（但会提供相关的电子手册）,课程概述,本课程目的是让学生掌握WEB前端相关技术，能独立完成相应前端网页的设计与开发。主要内容有： HTML与XHTML CSS JavaScript Ajax PHP（初步介绍） Dreamweaver,本章要点,Internet与www 网页和网站的关系 Web服务器和浏览器 动态网页和静态网页 域名与主机的关系 URL的结构,In

2、ternet,Internet是由遍布全世界的各种各样的网络通过TCP/IP协议连接成的一个松散结合的全球网，它使网络上的各台计算机（Internet上称为主机，即host）可以互相交换信息。 Internet为用户提供了各种各样的服务，如WWW，Email，FTP，即时通信等。,WWW,WWW的含义是全球信息网（World Wide Web），简称为Web或“万维网”。它是一个基于超文本(hypertext)方式的信息查询工具，通过http协议传输超文本信息。是由欧洲核子物理研究中心（CERN）研制的。 WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起，通过浏览器（

3、browser）提供一种友好的信息查询界面。,WWW特点,WWW具有三个统一： 1.统一的资源定位方式：URL（统一资源定位器，即网址）。 2.统一的资源访问方式：HTTP（超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。,WEB与互联网,WEB是互联网行业的基石,1. 网页与网站,网页即是超文本，是通过超文本标记语言HTML（HypeText Markup Language）书写的一种文本文件。 通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。 浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素

4、材（图像、声音、动画和影像等），都需要保存成单独的文件，通过相关标记和URL与网页文件关联。,1.1 HTML超文本标记语言,超文本标记语言（HTML）作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。 超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的 。,HTML的历史,超文本标记语言HTML是一种建立超文本/超媒体文档的语言，它用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。,HTML4.01(1

5、999),HTML与编程语言的区别,HTML语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言； 其次HTML是弱语法语言，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点计算机就不执行，报告错误； 再次HTML语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。,1.2 网 站,一个网站对应磁盘上的一个文件夹，网站的所有网页和其他资源文件都会放在该文件夹下或其子文件夹下，设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网页通过链接

6、组织在一起，其中有个网页称为首页，常命名为index.htm，须放在网站的根目录下。 网页中所需要的图片文件一般单独保存在该目录下一个叫images的文件夹下。,网站结构,Wgzx,web,index.htm,images,style.css,about.html,h1.htm,h2.htm,h3.htm,首页文件的直接上级目录，是网站根目录,首页文件的间接上级目录，不是网站根目录,网站目录的建立,制作网站的第一步是在硬盘上新建一个文件夹，作为本地网站的根目录，以后把这个目录上传到服务器上就可以了。 由于要用到Dreamweaver，所以还需配置网站在Dreamweaver下的开发环境。在Dr

7、eamweaver中新建站点，任意取一个站点名，把刚才新建的那个文件夹作为站点文件夹就可以了，这样站点目录内的html文件之间的链接会使用相对URL的形式。,网站的特点,众多的网页 确定的主题 统一的风格 便捷的导航 栏目的分层,网站制作的流程： 确定站点的核心内容 网站的规划 网站外观的设计 网页具体制作 网站性能测试 网站发布 网站更新与维护。,网页和网站的制作工具,Adobe的 Dreamweaver,Microsoft的 FrontPage,2006年后,2 Web服务器和浏览器,网页被放置在Web服务器上 用户通过Url请求web服务器时，web服务器把相应的网页传送到用户浏览器端

8、。 Web服务器的作用：对于静态网页，web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。 对于动态网页，web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。,2.1 Web服务器,由于web服务器对静态网页起的只是一个查找和传输的作用，因此在测试静态网页时可不安装web服务器，直接找到该网站对应的目录双击网页文件预览测试。 而测试或运行动态网页则一定要在本机上安装web服务器(如IIS)，因为动态网页要经过web服务器解释执行生成html文档才能被浏览器解释。,2.2 浏览器,浏览器：用户浏览网页所用 浏览器的本质：解

9、释html代码生成我们看到的网页 目前常见的浏览器（按使用量多少排列）有：IE6、IE7、IE8、Firefox 3、Safari 4、Google Chrome 2、Opera 10及Netscape Navigator 9,浏览器,Internet Explorer Firefox Netscape Navigator,Opera Safari Google Chrome,3. 静态网页和动态网页,静态网页是不包含服务器端代码的html文件，web服务器只是负责把静态网页发送给浏览器，由浏览器解释执行 动态网页中含有服务器端代码，需要先由web服务器对这些服务器端代码进行解释执行生成客户端

10、代码后再发送给客户端浏览器,动态网页的特征,同一个网页根据每次请求的不同，可每次显示不同的内容 因为要显示不同的内容，所以往往需要数据库做支持 从网页的源代码看，动态网页中含有服务器端代码，后缀名不能是.htm,4. 域名、IP和主机,域名和主机的关系：多对一 即在一台主机上可建立多个网站，这些网站的存放方式称为“虚拟主机”，通过web服务器上设置“主机头”进行区别。 域名作用有二，一是将域名发送给DNS服务器解析得到web服务器的IP地址以进行连接，二是将域名信息发送给web服务器，通过域名与web服务器上设置的“主机头”进行匹配确认客户端请求的是哪个网站，若客户端没有发送域名信息给web服务器，例如直接输入ip，则web服务器将打开默认网站。,域名的作用,1.方便记忆IP地址,2.作为主机头信息识别请求的网站,5. URL的结构,URL（Universal Resource Locator）是统一资源定位器的英文缩写，每个站点或站点上的每个文件（网页及所有资源文件）都有一个唯一的地址，浏览器是通过URL来定位目标信息的 URL的一般格式为： 协议名:/主机名:端口号/文件夹名/文件名 协议