HTML、CSS网页设计概述.ppt

HTML与CSS前台页面设计,翟英杰66035 doriszhai天,肇庆工商职业技术学院,成绩考核,平时成绩+期末成绩（40%+60%） 平时成绩（课堂表现，出勤，作业等）,后续课程（网页设计与制作、Asp网站开发） 网页制作三剑客（Flash、firework、dreamweaver）,特别要求,我们一直在强调，尽量少的去使用工具，那么在手写代码的过程中，应该具备以下的能力： 牢记所有常用的html标签： 要学会“盲打”：靠肉眼去识别键盘会被累晕滴 能够做到“胸有成竹”：对于已完成的网页设计，在头脑中形成明确的标签轮廓。 做到了以上三点,我们就可以通过任何工具来制作网页，都不会比别人慢。 我们要做属于我们自己的网页!,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。 设计html语言的最初目的，是为了能把存放在一台电脑中的文本或图形联系在一起，用于与另一台电脑的发送和接收,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则是最佳的选择。, 我的第一个网页 大家好，很高兴和大家一起学习这门课，嘿嘿！ ,扩展名或后缀名：*.htm或*.html 扩展名能够反映一个文件的属性，所以轻易不要更改 两者的区别：在dos和windows 3.x环境下，由于文件名受格式限制，文件名长度不得超过8个字符，扩展名只能用.htm,命名规则,1、无空格 2、无特殊符号（例如&符号），只可以有下划线“_”,只可以为英文、数字 3、字母区分大小写 4、网页首页文件名默认为：index.html或index.html 加载文件：图片文件、js文