HTML与CSS网页设计全套教学课件.pptx

HTML与CSS网页设计全套ppt课件（完整版)第一章 HTML与CSS网页设计概述网页基本概念HTML与CSS语言简介Web 标准Dreamweaver工具Dreamweaver工具的使用网页制作入门Web基本概念1. Web基本概念1.1.1 认识网页查询信息说到网页，其实大家并不陌生浏览新闻网上购物网页究竟是什么？1.1 Web基本概念1.1.1 认识网页以传智播客官网首页为例认识网页：1.1 Web基本概念网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。1.1.1 认识网页1.1 Web基本概念网页是如何形成的呢？1.1.1 认识网页1.1 Web基本概念1.1.1 认识网页除了首页之外，一个网站通常还包含多个子页面。网页与网页之间通过超链接互相访问。网站由网页构成，网页有静态和动态之分。静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。动态网页显示的内容则会随着用户操作和时间的不同而变化。大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用户在开发网站时可根据需求酌情采用。1.1 Web基本概念1.1.2 名词解释与互联网相关的一些专业术语名词名词释义Internet网络就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。WWWWWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。URLURL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。DNSDNS （英文Domain Name System的缩写）是域名解析系统。HTTPHTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。WebWeb通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。W3C组织W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。1.1 Web基本概念1.1.3 了解Web标准为什么需要Web标准？1.1 Web基本概念1.1.3 了解Web标准采用web标准的好处？1、让Web的发展前景更广阔2、内容能被更广泛的设备访问3、更容易被搜寻引擎有哪些信誉好的足球投注网站4、降低网站流量费用5、使网站更易于维护6、提高页面浏览速度1.1 Web基本概念Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。1.1.3 了解Web标准1.1 Web基本概念1.1.3 了解Web标准结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。1.1 Web基本概念1.1.3 了解Web标准XHTML语言描述的网页结构效果三个图片和对应的三段描述文本从上到下依次罗列，不带任何修饰样式。1.1 Web基本概念1.1.3 了解Web标准加入CSS后的网页效果使用CSS对文字和图片以及模块的背景和布局都做了相应的设置。1.1 Web基本概念1.1.3 了解Web标准加入Javascript后的网页效果左边的三张焦点图会自动切换，当鼠标移上右边的文本时，左边会出现相应的图片，鼠标移开后又会按照默认的设置自动轮播。1.1 Web基本概念1.1.3 了解Web标准结构、表现、行为之间的关系1.2 网页制作入门1.2.1 HTML简介HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。1.2 网页制作入门1.2.1 HTML简介通过传智播客网站的一段源代码和相应的网页结构来认识HTML段落和超链接标记图片标记超链接标记1.2 网页制作入门1.2.1 HTML简介HTML语言发展至今，经