html及css网页设计概述

《html及css网页设计概述》由会员分享，可在线阅读，更多相关《html及css网页设计概述（38页珍藏版）》请在金锄头文库上搜索。

1、HTML与CSS网页设计概述,HTML与CSS(第一讲 ),课程定位 网页设计的核心和基础 软件技术专业的必修基础课 课程目标 熟练掌握HTML语言标记、CSS（层叠样式表）、盒子模型、浮动与定位； 能够灵活应用滑动门、CSS精灵等高级技巧； 具备独立设计、制作网页的能力； 为后续课程打下坚实的基础。,课程介绍,自主学习（CSS控制文本样式为例） 熟练掌握字体样式属性和文本外观属性 text-align的属性值center和标记的区别 后代选择器与交集选择器的优缺点 制作样式表中文手册说明页面 学习能力提高要素 提前预习(问题)、高效听讲(解惑)、复习总结(收获) 笔记(成绩比例：10%) 平

2、时实践过程(练习中要思考、思考过再练习) 课上平时实验+自主学习实践(成绩比例：30%) 代码书写规范严谨，学习要有韧性、要讲效率 培养审美能力(合理的页面布局、舒适的色彩搭配等),提问、实验表现,提交Word文档,提交HTML文档,Web基本概念 网页制作入门 网页制作工具,教学内容,重点 Web基本概念 网页制作入门 难点 Web基本概念 网页制作入门,重点、难点,Web基本概念 网页制作入门 网页制作工具,教学内容,认识网页,Web基本概念,说到网页，其实大家并不陌生,浏览新闻,查询信息,网上购物,认识网页,Web基本概念,网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页

3、中还可以包含音频、视频以及Flash等。,认识网页,Web基本概念,动画,图像,文本,认识网页,Web基本概念,LOGO,按钮,Banner,导航,认识网页,Web基本概念,链接,版权信息,Banner,认识网页,Web基本概念,网页是如何形成的呢？,认识网页 除了首页之外，一个网站通常还包含多个子页面。网页与网页之间通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。 静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。 大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用户在开发网站时

4、可根据需求酌情采用。,Web基本概念,名词解释,Web基本概念,与互联网相关的一些专业术语,了解Web标准,Web基本概念,为什么需要Web标准？,了解Web标准,Web基本概念,采用web标准的好处？,1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问 3、更容易被搜寻引擎搜索,4、降低网站流量费用 5、使网站更易于维护 6、提高页面浏览速度,了解Web标准,Web基本概念,Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。,了解Web标准 结构标准：结

5、构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。 XML(The Extensible Markup Language) 可扩展标记语言 XHTML(The Extensible HyperText Markup Language) 可扩展超文本标记语言 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。 CSS(Cascading Style Sheet) 层叠样式表 行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。 DOM(Document Object Model) 文档对象模型 ECMAScri

6、pt(European Computer Manufactures Association) 以JavaScript为基础定制的标准脚本语言,Web基本概念,了解Web标准,Web基本概念,XHTML语言描述的网页结构效果,三个图片和对应的三段描述文本从上到下依次罗列，不带任何修饰样式。,了解Web标准,Web基本概念,加入CSS后的网页效果,使用CSS对文字和图片以及模块的背景和布局都做了相应的设置。,了解Web标准,Web基本概念,加入Javascript后的网页效果,左边的三张焦点图会自动切换，当鼠标移上右边的文本时，左边会出现相应的图片，鼠标移开后又会按照默认的设置自动轮播。,了解We

7、b标准,Web基本概念,结构、表现、行为之间的关系,Web基本概念 网页制作入门 网页制作工具,教学内容,HTML简介 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页

8、面。,网页制作入门,HTML简介 通过传智播客网站的一段源代码和相应的网页结构来认识HTML,网页制作入门,HTML简介 HTML语言发展至今，经历了6个版本： 超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。 HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。 HTML 3.21997年1月14日，W3C推荐标准。 HTML 4.01997年12月18日，W3C推荐标准。 HTML 4.01（微小改进）1999年12月24日，W3C推荐标准。 HTML 5的第一份正式草案已于2008年1

9、月22日公布，仍继续完善。,网页制作入门,HTML简介 目前最新的HTML版本是HTML5，但是各个浏览器对其支持不统一，所以如今大多数的网站采用的还是HTML4.01版本。 XML虽然数据转换能力强大，完全可以替代HTML，但是面对互联网上成千上万基于HTML编写的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩展，得到了XHTML。 目前国际上，网站设计推崇的Web标准就是基于XHTML的（即通常所说的DIV+CSS）。,网页制作入门,CSS简介 CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图

10、片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。,网页制作入门,CSS简介 使用CSS设置的网页效果：,网页制作入门,CSS简介 CSS语言的发展历程： 1996年12月W3C发布了第一个有关样式的标准CSS1。 1998年5月发布了CSS2。 目前最新的版本是CSS3，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS2，即本书所讲解的版本。,网页制作入门,CSS简介 CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是

11、独立的文件，则必须以.css为后缀名。,网页制作入门,CSS采用的是内嵌方式，虽然与HTML在同一个文件中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。 如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。,常见浏览器介绍 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。,网页制作入门,常见浏览器介绍 不同的浏览器对同一个CSS样式有不同的解析，这样，同样的页面在不同浏览器下的显示效果可能不同。,网页制作入门,常见浏览器介绍 IE浏

12、览器由微软公司推出。IE有6、7、8、9、10、11等版本，最新的是Edge。在制作网页时，低版本一般也是需要兼容的。 Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐浏览器是最常用的浏览器。 Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。,网页制作入门,Web基本概念 网页制作入门 网页制作工具,教学内容,常见网页制作工具 记事本 Editplus Notepad+ Sublime Dreamweaver Eclipse MyEclipse,网页制作工具,熟练地使用网页制作工具 Web标准，HTML与CSS语言的特征及发展历程 常用网页制作工具。,本讲总结,Thank You !,