1网页综述讲解.ppt

大学计算机基础规划教材 唐四薪 编著 清华大学出版社 2016年10月 本书目录 第1章 网页设计概述 第2章 HTML 第3章 XHTML与Web标准 第4章 CSS 第5章 Fireworks 第6章 网站开发和网页设计过程 第7章 JavaScript 第1章 网页与网站基础 本章要点 网页和网站的概念和联系 Web服务器和浏览器 动态网页和静态网页 域名与主机的关系 URL的结构 WWW Internet为用户提供了各种各样的服务，如WWW，Email，FTP，即时通信等。 WWW的含义是全球信息网（World Wide Web），简称为Web或“万维网”。它是一个基于超文本(hypertext)方式的信息查询工具，通过http协议传输超文本信息。 WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起，通过浏览器（browser）提供一种友好的信息查询界面。 WWW特点 WWW具有三个统一： 1.统一的资源定位方式：URL（统一资源定位器，即网址）。 2.统一的资源访问方式：HTTP（超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。 1.1 初识网页设计 将WWW看成Internet上的一座图书馆，网站就像图书馆中的一本书，而网页便是书中的一页 一个网页就是一个文件，存放在世界某处的某一台Web服务器中 网页包含文本、图像、声音、视频等信息 从表面上看，网页是通过浏览器看到的一幅幅画面。 但网页的本质是一个用 HTML 描述的纯文本文件，它通过各种HTML标记对页面上的元素进行描述。 网页的本质 HTML是HyperText Markup Language的缩写，直译为“超文本标记语言”。 网页是通过HTML书写的一种纯文本文件。浏览器对HTML代码进行了解释，并引用相应的图像、动画等资源文件，才生成了多姿多彩的网页。 1.1.2 网页的布局 布局的含义 布局，就是以最合适浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如 徽标的位置、 导航栏的显示、 主要内容的排版等。 经常用到的版面布局结构主要有以下几种： 网页版面布局的方法 表格布局 将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。 DIV＋CSS布局 用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。 框架布局 将浏览器窗口分割成几部分，每部分放一个不同的网页（示例） 常见网页的版式 1－3－1式 1－2－1式 艺术版式 1-3-1式 示例 表格布局的原则 各栏目之间必须相对独立，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响 各栏目之间必须用占位表格(或CSS边界）留出一定的空隙 栏目采取纵列的形式排列 用CSS布局实现1-3-1布局 1.1.3 网页设计语言——HTML HTML具有语言的一般特征，它是一种符号系统，具有自己的词汇（符号）和语法（规则）。 所谓标记，就是作记号。让浏览器理解某段内容的含义 标记受标记影响的内容/标记 静夜思李白床前明月光，疑是地上霜 标题静夜思/标题 作者李白/作者 段落床前明月光，疑是地上霜/段落 所谓超文本，就是相比普通文本有超越的地方如超文本可以通过超链接转到指定的某一页，超文本还具有图像，视频，声音等元素，并能和用户交互。 HTML的历史 HTML的发展历程如图所示，它是SGML（标准通用标记语言）在WWW中的应用。 HTML与编程语言的区别 HTML语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言； 其次HTML是弱语法语言，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点就不能执行，报告错误； 再次HTML语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。 网页和网站的制作软件 1.2 网站的建立 网站就是由许多网页及资源文件（如图片）组成的一个集合，网页是构成网站的基本元素。通常把网站内的所有文件都放在一个文件夹中，所以网站从形式上看就是一个文件夹。 通常在网站目录下新建一个名为images的子目录，存放网站中所有网页需要调用的图片文件。 网站结构 网站的特点 众多的网页 确定的主题 统一的风格、 便捷的导航、 栏目的分层 1.2.2 在Dreamweaver中建立站点 在 DW中，“站点”一词既表示网站，又表示属于该网站的文件的本地存储位置 建立站点的作用：