第一课(X)HTML与CSS概述.ppt

《第一课(X)HTML与CSS概述.ppt》由会员分享，可在线阅读，更多相关《第一课(X)HTML与CSS概述.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一课(X)HTML与CSS概述第一课(X)HTML与CSS概述Web标准标准(X)HTML基础基础CSS基础基础JavaScript基础基础DW能做什么能做什么DW的界面介绍的界面介绍一个简单的网页制作一个简单的网页制作Web标准标准oWEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。o“结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。o也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScr

2、ipt用来控制网页的行为。Web标准标准o在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。o每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。o网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。o因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。Web标准标准图图:“结构结构”、“表现表现”和和“行为行为”的关系的关系Web标准标准o主要原则是：（1）用标签元素描述网页的内容结构；（2）用CS

3、S描述网页的排版布局；（3）用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序。Web标准标准采用网站标准对网站浏览者的好处：采用网站标准对网站浏览者的好处：n文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）用户能够通过样式选择定制自己的表现界面所有页面都能提供适于打印的版本采用网站标准对网站所有者的好处：采用网站标准对网站所有者的好处：n更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS

4、改版后，每天节约超过两兆字节（terabytes）的带宽。更容易被搜寻引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容提高网站易用性。在美国，有严格的法律条款（Section508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。(X)HTML基础基础oHTML是HyperTextMarkupLanguage的缩写，中文翻译为“超文本标记语言”，是制作网页的最基本语言。nHyper（超）用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。nText（文本）：HTML是一种文本解释性的程序语言，即它的源代码将不经过编译而直接在浏览器中运行时被“翻译

5、”。nMarkup（标记）：HTML的基本规则就是用“标记语言”成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。(X)HTML基础基础o但HTML存在很大的缺陷。首先，它只能使用固定和有限的标记；其次，把数据和显示格式存放在一起，使数据和格式分离比较困难等。随着Web的发展，人们意识到必须有一种方法能够将数据和显示格式分离开，于是决定开发一个新的SGML的简化子集，这就诞生了XML。oXML是为文档交换设计的，并以一种开放的、自我描述的方式定义的数据结构，是一种能够定义其他语言的语言，即可扩展。在描述数据内容的同时能突出对结构进行描述，从而更好的体现数据之间的关系。(X)HTML

6、基础基础oXML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。应用XML，人们可以在自己的领域内自由地交换信息。o后来W3C又用XML设计了一个与HTML4.01功能相同的语言，使之与HTML相兼容，称为XHTML（可扩展超文本标记语言）oXML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立建立XHTML的目的就是实现的目的就是实现HTML向向XML的过渡的过渡。(X)HTML基础基础pH

7、TML最基本的语法就是：内容内容p标记通常都是成对使用的，有一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器从服务当浏览器从服务器接收到器接收到HTML文件后，就会解文件后，就会解释里面的标记符，释里面的标记符，然后把标记符相然后把标记符相对应的功能表达对应的功能表达出来。出来。(X)HTML基础基础o在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：(X)HTML基础基础ohtml元素是网页文件的最外围的一对标签，它告诉浏览器整个文件是HTML格式，并且是从开始，至结束。ohead元素包含的是网页的头部信息，它的内容主要被浏览器所

8、用而不会显示在网页正文中。ohead元素中可以包含下述一些元素。ntitle元素nlink元素和style元素常用于CSSnscript元素nmeta元素(X)HTML基础基础obody元素是html文件的主体元素，它包含所有要在网页上显示的各种元素o最常用的段落块元素有p（段落）元素和div（通用块）元素。o常用的行元素有img（图像）元素、a（链接）元素、span（通用行）元素、b（粗体）、i（斜体）和br（换行）元素等。o标签元素不要背诵，结合标签元素不要背诵，结合dreamweaver学习学习(X)HTML基础基础oXHTML与HTML的重要区别2.所有标签的元素和属性的名字都必须使用

9、小写所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTML对大小写是敏感的，和是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：必须写成。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字onMouseOver也必须修改成onmouseover。1.所有的标记都必须要有一个相应的结束标记所有的标记都必须要有一个相应的结束标记 以前在HTML中，你可以打开许多标签，例如和而不一定写对应的和来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个“/”来关闭它。例如：(X

10、)HTML基础基础4.所有的属性必须用引号所有的属性必须用引号括起来括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：必须修改为：3.所有的所有的XHTML标记都必须合理嵌套标记都必须合理嵌套同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：/b必须修改为：/p就是说，一层一层的嵌套必须是严格对称。5.给所有属性赋一个值给所有属性赋一个值XHTML规定所有属性都必须有一个值，没有值的就重复本身。CSS基础基础oCSS是CascadingStyleSheets的缩写，中文为“层叠样式表”。o传统HTML相比CSS为基础

11、的页面设计方法，其所体现出的劣势主要有以下几点：（1）维护困难。）维护困难。为了修改某个特殊标记（如标记）的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。（2）标记不足）标记不足。HTML本身的标记很少，很多标记都是为网页内容服务的，而对于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。（3）网页过）网页过“胖胖”。由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，占用网络带宽。（4）定位困难。）定位困难。在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的其他标记同样也导致页面的复杂和后期维护的困难。CSS基础基础

12、Dreamweaver的代码模块的代码模块CSS基础基础o在具体使用CSS之前，请看一个生活中的例子，通常我们描述一个人可以为这个人列一张表：张飞张飞 身高：身高：185cm；体重：体重：105kg；性别：男；性别：男；性格：暴躁；性格：暴躁；民族：汉族；民族：汉族；CSS基础基础2级标题字体：宋体；大小：15像素；颜色：红色；装饰：下划线h2 font-family:宋体;font-size:15px;color:red;text-decoration:underline;CSS基础基础oCSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该

13、设置的“值”。因此，概括来说，CSS就是由3个基本部分组成的“对象”、“属性”和“值”。o在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器（selector）。CSS基础基础图：图：CSS标记选择器标记选择器CSS基础基础图：类别选择器图：类别选择器CSS基础基础图：图：ID选择器选择器CSS基础基础o内部样式表是将定义样式表的内容放在style元素中，并且设置type属性为text/css。然后将style元素放在HTML文档的head元素中。o外部样式表是将定义样式表的内容放在一个文本文件中，一般都是以.css作为扩展名，然后在H

14、TML文档的head元素中插入link元素，通过下属格式将外部样式表文件连接到HTML文档中：CSS基础基础JavaScript基础基础o它是写在HTML文档中的一种基于对象和事件驱动并具有安全性能的脚本语言，当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。oJavaScript的作用:1校验用户输入的内容2有效地组织网页内容3动态地显示网页内容4弥补静态网页不能实现的功能5动画显示JavaScript基础基础o代码示例DW能做什么能做什么o借助AdobeDreamweaver软件,

15、快速、轻松地完成设计、开发和维护网站和Web应用程序的全过程。Dreamweaver是为设计人员和开发人员而构建的,它提供一个选择:是在直观的可视布局界面中工作,还是在简化的编码环境中工作。1最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。2网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3无可比拟的控制能力Dreamweaver集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。DW的界面介绍的界面介绍A.“插入”栏B.文档工具栏C.“文档”窗口D.面板组E.标签选择器F.“属性”检查器G.“文件”面板DW的界面介绍的界面介绍一个简单的网页制作一个简单的网页制作