HTML与CSS前台页面设计.pptVIP

HTML、CSS网页设计概述 第一章 HTML与CSS前台页面设计 第一章 HTML、CSS网页设计概述 HTML与CSS前台页面设计 本章要点 HTML的基本概念 CSS的基本概念 网页与网站及HTML、CSS网页的开发环境 第一章 HTML、CSS网页设计概述 HTML与CSS前台页面设计 目录： 1.1 HTML的基本概念 1.2 CSS的基本概念 1.3 网页与网站 1.1 HTML的基本概念 HTML是Hypertext Markup Language的缩写，即超文本标记语言，它是用于创建可跨平台的超文本文档的一种简单标记语言，现在通常用来创建Web页面及网页。HTML之所以叫做超文本标记语言是因为它不仅描述文本，而且对网页中的图像、声音等各种元素都可以描述，同时因为它是通过标记（tag）来指明网页中的文档、图像、声音等各种元素如何显示的，所以又被称为标记语言。 使用HTML语言编写的脚本一般被称为网页或者HTML文档。HTML文档的扩展名通常为.html或.htm。 1.2 CSS的基本概念 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS最重要的作用是将HTML页面的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等，都必须一一在HTML文件内列出，有时甚至重复列出。CSS使HTML页面开发者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。 1.3 网页与网站 网页与网站的区别简单的来说：网站是由网页集合而成的。大家通过浏览器所看到的Web页面就是网页，网页说具体了就是一个HTML文件，而浏览器是是用来解读这份文件的。 网站(Web Site)是发布在网络服务器上由一系列网页文件构成的，为访问者提供信息和服务的网页文件集合。网页是网站的基本组成要素，一个大型网站可能含有数以百万计的网页，而一个小的企业网站或个人网站可能只有几个网页。 。 1.3.4 HTML、CSS网页的开发环境 1. 手工直接编写 由于HTML页面文件是标准的ASCII文本文件，所以我们可以使用任何的文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。 2. 使用可视化软件 Frontpage和Dreamweaver是最常用的可视化HTML页面可视化制作工具。HTML页面可视化制作工具的优点就是直观，使用方便，容易上手，在这种编辑器中我们可以直接编辑网页，编辑器则自动为我们生成相应的HTML代码。 如果需要结合Web应用程序开发的话，Visual Studio.NET与MyEclipse则是最好的HTML页面可视化制作工具。Visual Studio.NET与MyEclipse都是专业的Web应用程序开发工具，同时他们也都提供了功能完善的HTML页面可视化制作工具。如果需要开发一个Web应用程序而不是仅仅设计一个美观的HTML页面的话，Visual Studio.NET与MyEclipse则是最佳的选择。 HTML网页中的图片 第一章 本章结束 第二章 HTML与CSS前台页面设计 HTML基础 第二章 HTML基础 HTML与CSS前台页面设计 本章要点 HTML代码的结构 HTML网页的构成 第二章 HTML基础 HTML与CSS前台页面设计 目录： 2.1 HTML代码的结构 2.2 HTML网页的构成 2.3 HTML网页的浏览与测试 2.4 综合实例 1.HTML代码的组成 HTML用于描述功能的符号称为“标记”。如“html”、“body”、“table”等。标记在使用时必须用方括号“”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。 2.1 HTML代码的结构 2.注释与空白符 （1）注释 HTML注释是一种文本内容，出现在HTML源文档中,但浏览器并不显示他们，对于注释来说，最大的区别就是HTML不允许对它进行嵌套。有两种注释方式： 注释方法1： !注释 注释方法2： comment…/ comment 2.1 HTML代码的结构 （2）空格符 HTML页面中空格符并不具有调整间距的功能(加续出现多个空格符时，仅第一上空格符有