精通CSS+DIV——100%网页样式与布局密码(txt+pdf+epub+mobi电子书下载)


发布时间:2020-09-18 06:07:29

点击下载

作者:龙马工作室(编著)

出版社:信息技术第二出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

精通CSS+DIV——100%网页样式与布局密码

精通CSS+DIV——100%网页样式与布局密码试读:

前言

随着社会信息化的发展,与网站开发相关的各项技术越来越受到广大IT从业人员的重视,与此相关的各类学习资料也层出不穷。然而,现有的学习资料在注重知识全面性、系统性的同时,却经常忽视了内容的实用性,导致很多读者在学习完基础知识后,不能马上适应实际的开发工作。为了让广大读者能够真正掌握相关知识,具备解决实际问题的能力,我们总结了多位相关行业从业者和计算机教育专家的经验,精心编制了这套“精通100%”丛书。丛书内容

本套丛书涵盖读者在网站开发过程中可能涉及的各个领域,在介绍基础知识的同时,还兼顾了实际应用的需要。本套丛书主要包括以下品种。CSS+DIV的最佳学习途径

本书全面研究总结了多位计算机教育专家的实际教学经验,精心设计学习、实践结构,将读者的学习过程分为4个阶段。读者既可以根据章节安排,按部就班地完成学习,也可以直接进入所需部分,结合问题,参考提高。本书特色▶ 内容讲解,系统全面

本书对知识点进行精心安排,既确保内容的系统性,又兼顾技术的实用性。无论读者是否接触过CSS和DIV,都能从本书中找到合适的起点。▶ 项目案例,专业实用

本书针对学习的不同阶段选择案例。在系统学习阶段,侧重对知识点的讲解,以便读者快速掌握;而在实战阶段,则面向实际,直接对热门网站进行剖析,帮助读者了解知识的实际应用方法。▶ 应用指导,细致入微

除了知识点外,本书非常重视实际应用,对关键点都进行了细致的讲解。此外,在正文中还穿插了“注意”、“说明”、“技巧”等小栏目,帮助读者在学习过程中更深入地了解所学知识,掌握相关技巧。▶ 书盘结合,迅速提高

本书配套的多媒体教学光盘中的内容与书中的知识点紧密结合并相互补充。教学录像可以加深读者对知识的理解程度,并系统掌握实际应用方法,达到学以致用的目的。超值光盘▶ 10小时全程同步教学录像

录像涵盖本书所有知识点,详细讲解每个案例的开发过程及关键点,帮助读者轻松掌握实用技能。▶ 王牌资源大放送

除教学录像外,光盘中还赠送了大量超值资源,包括本书所有案例的源代码、CSS属性速查表、Dreamweaver案例电子书、Dreamweaver常用快捷键速查表、22小时Dreamweaver教学录像、Photoshop案例电子书、Photoshop常用快捷键速查表、8小时Photoshop教学录像、大型ASP网站源码及运行说明书、精彩CSS+DIV布局赏析电子书、精彩网站配色方案赏析电子书、精选JavaScript实例、网页配色方案速查表、网页设计、布局与美化疑难解答电子书、网站建设技巧电子书和颜色代码查询表等。光盘使用说明▶ Windows XP操作系统

01 将光盘印有文字的一面朝上放入光驱中 , 几秒钟后光盘会自动运行。

02 若光盘没有自动运行,可以双击桌面上的【我的电脑】图标,打开【我的电脑】窗口,然后双击【光盘】图标,或者在【光盘】图标上单击鼠标右键,在弹出的快捷菜单中选择【自动播放】选项,光盘就会运行。▶ Windows 7、Windows 8操作系统

01 将光盘印有文字的一面朝上放入 DVD 光驱中 , 几秒钟后光盘会自动运行。

02 在Windows 7操作系统中,系统会弹出【自动播放】对话框,单击【运行MyBook.exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹,双击光盘文件夹中的MyBook.exe文件,也可以运行光盘系统。

在Windows 8操作系统中,桌面右上角会显示快捷操作界面,单击该界面后,在其列表中选择【运行MyBook.exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹,双击光盘文件夹中的MyBook.exe文件,也可以运行光盘系统。

03 光盘运行后,经过片头动画后便可进入光盘的主界面。

04 教学录像按照章节排列在各自的篇中,在顶部的菜单中依次选择相应的篇、章、节名称,即可播放本节录像。

05 单击菜单栏中的【赠送资源】,在弹出的菜单中选择赠送资源的名称,即可打开相应的文件夹。

06 详细的光盘使用说明请参阅“其他内容”文件夹下的“光盘使用说明.pdf”文档。创作团队

本书由龙马工作室策划,史卫亚任主编,王锋、张闻强任副主编,其中第1章~第5章、第14章由河南工业大学史卫亚老师编著,第6章、第7章由河南工业大学王锋老师编著,第8章由河南工业大学梁义涛老师编著,第9章、第10章由河南工业大学刘刚老师编著,第11章~第13章由河南工业大学张闻强老师编著,第15章~第18章由河南工业大学侯慧芳老师编著。参与本书编写、资料整理、多媒体开发及程序调试的人员还有汪磊、孔万里、李震、赵源源、乔娜、周奎奎、祖兵新、董晶晶、王果、陈小杰、左琨、邓艳丽、崔姝怡、侯蕾、左花苹、刘锦源、普宁、王常吉、师鸣若、钟宏伟、陈川、刘子威、徐永俊、朱涛、张允等。

在编写过程中,我们竭尽所能地将最好的讲解呈现给读者,但也难免有疏漏和不妥之处,敬请广大读者不吝指正。若读者在学习中遇到困难或疑问,或有任何建议,可发送邮件至zhangyi@ptpress.com.cn。编者第1篇CSS基础篇

本篇介绍了 CSS 3 的基础,包括 CSS 的初步体验、CSS 样式核心基础、网页样式代码生成的方法、用CSS设置文本样式、用CSS设置网页图像特效、用CSS设置网页背景颜色与背景图像及CSS的高级特性等相关知识,为后面深入学习奠定根基。▶ 第1章 CSS的初步体验▶ 第2章 CSS样式核心基础▶ 第3章 网页样式代码的生成方法▶ 第4章 用CSS设置文本样式▶ 第5章 用CSS设置网页图像特效▶ 第6章 用CSS设置网页背景颜色与背景图像▶ 第7章 掌握CSS的高级特性第1章 CSS的初步体验

本章教学录像:1 小时16分钟

本章将带读者进入CSS技术的大门,让你熟悉房屋主人的身世(CSS的基本概念)以及爱好(主要工作),并了解该技术与它的兄弟(HTML技术)之间的关系。然后让你欣赏一下它的一些作品,并带你和CSS一起去了解它的日常工作流程。本章要点(已掌握的在方框中打勾)□ 网页中标记的概念□ HTML 与 CSS 的优缺点□ 浏览器对 CSS 的支持□ 网页设计中的 CSS□ 网页 CSS 赏析□ 编写 CSS 样式1.1 CSS的概念

本节视频教学录像:9分钟

CSS 的全称为 Cascading Style Sheet,即“层叠样式表”,是 1996 年由 W3C 审核通过并推荐使用的网页技术,目前的最新版本为 CSS 3。CSS 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

在设计网页的时候,通常将网页所呈现出来的外观称为“样式”。例如,网页中文字的字体和颜色、图片的大小和显示效果、线条的粗细等,都统称为“样式”。而CSS就是用于控制“样式”的工具。简单地说,通过CSS样式设置页面的格式,将页面内容与表现形式分离,即页面内容存放在HTML文档中,而用于定义表现形式的CSS规则存放在另一个文件中,或作为HTML文档的某一部分(通常为文件头部分)。

CSS通常与HTML配合使用,即HTML用于存放内容,而CSS则用于控制这些内容以什么“样式”表现出来。例如,要在网页上以红色、宋体显示“网页样式与布局”这几个汉字,那么通常会使用HTML来保存这7个汉字,而使用CSS来保存其“样式”要求,即“红色”、“宋体”。当然,如果网页上只有这一句话,使用CSS控制样式,反倒增加了代码量,还不如直接使用HTML来控制。但试想,在当今主流网站的页面上,动辄上万行的文字、几十上百幅的图片,使用不同的形式表现出来,如果全部使用HTML控制,无疑是一种灾难——既增大了代码量的体积,又增加了修改的难度。

而CSS的最大作用正在于此。它可以对页面上的所有内容的样式进行规定,如果不同位置上的同一类文字或图片的样式需要修改,那么只要修改CSS中的内容即可,大大方便了设计人员的工作。这也是CSS能够迅速获得相关从业人员青睐的原因。

将内容与表现形式分离的做法是符合Web标准的,不仅使维护网站更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。目前流行的网页绝大多数都采用了CSS控制其外观。1.1.1 网页中标记的概念

对于熟悉HTML语言的网页设计者来说,标记的概念一定不会陌生。在学习CSS之前,我们应当先了解一些关于网页中的基本知识。

HTML(Hyper Text Mark-up Language)即超文本标记语言,构成网页文档的主要语言。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。HTML文本是由许多HTML标记组成的描述性文本,HTML标记也可以看成是HTML的命令,可以用来说明文字、图形、动画、声音、表格、链接等。标记都括在一对尖括号“<>”中,并且标记一般成对出现,中间加入受标记控制的信息内容。

例如在网页里显示一个一级标题,实现的代码是

,其中“⋯”是标题的具体内容,例如:

标题内容

技巧

HTML 语言是不区分大小写的 , 所以

等同于

或者

其中,“

”为起始标记,“

”为结束标记。HTML语言的结束标记符就是“/”。在

之间的实际内容就是标题的内容。“”、“”等标记是一般网页中常见的标记。【范例1.1】所示是一个简单的关于网页中标题的例子。【范例1.1】 网页中的标题(范例文件:ch01\1-1.html)

01

02

03

04

05 网页标题

06

07

08

HTML

09

HTML(Hyper Text Mark-up Language)超文本标记语言 ,是构成网页文档的主要语言。HTML的结构包括头部(Head)、主体(Body)两大部分。其中,头部描述浏览器所需的信息,而主体则包含所要说明的具体内容,HTML文本是由许多HTML标记组成的描述性文本,HTML标记也可以看成是HTML的命令,可以用来说明文字、图形、动画、声音、表格、链接等。

10

11

其在IE 8中的浏览效果如下图所示。在这个范例中,分别使用了 、< html >、、、、<body>、<h1>、<p>等主要标记,各个标记的作用如下。</p><p>⑴ <!DOCTYPE > 标记作为声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。</html></p><p>(2) <meta/> 标记位于文档的头部,不包含任何内容,提供有关页面的元信息。</p><p>(3) < html > 标记限定了文档的开始点和结束点,在它们之间是文档的头部和主体。</p><p>(4) <head>标记定义了文档的头部。</head></p><p>(5) <body> 标记中间是文档的正文内容。</body></p><p>(6) <h1>标记中间是文档内容的标题部分。</h1></p><p>(7) <p> 标记中间是文档内容的段落部分。</p><p>所有的页面都是由各种各样的标记和标记的内容组成。在浏览网页时,以IE为例,可以在浏览器的菜单栏上,单击【查看】▶【源文件】命令,查看当前网页的源代码。1.1.2 HTML与CSS的优缺点</p><p>通过前面的范例可以看到,HTML创建网页文本的方法很简单,只需通过一些标记就可以控制文本等信息,具有如下显著的优点。</p><p>⑴ 使用Table的表现方式不需要考虑浏览器兼容问题。</p><p>⑵ 简单易学,易于推广。</p><p>然而,随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来。主要存在三个缺点。</p><p>⑴ 由于没有统一的风格样式进行控制,HTML 的页面往往体积过大,代码存在臃肿以及不规范的现象,会延长网页的显示时间,浪费带宽。</p><p>⑵ HTML 本身的标记十分的少,页面格式定义固定,当页面的内容需要改变时,必须重新制作HTML,需要花费很多的时间,尤其对整个网站而言,后期修改和维护的成本很高。</p><p>⑶ 由于代码过大,不利于被搜索引擎搜索。</p><p>CSS的产生弥补了HTML的缺点,主要体现在以下几个方面。</p><p>⑴ 提高页面浏览速度。</p><p>视觉效果相同的一个页面,采用CSS布局的页面要比TABLE编码的页面产生的文件小得多,CSS布局的页面文件大小一般只有TABLE编码的页面的1/2左右。浏览器也不用花额外的时间去编译大量冗长的标签。</p><p>⑵ 表现与结构分离。</p><p>CSS从2.0开始真正意义实现了设计代码与设计内容之间的分离,它将设计部分剥离出来并单独放在一个样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎来说更加易于识别。</p><p>⑶ 易于维护和改版。</p><p>开发者只要简单修改CSS的内容就可以重新设计整个网站的页面。</p><p>⑷ 继承性能优越(层叠处理)。</p><p>CSS的代码在浏览器的解析顺序上将会根据CSS的级别进行解析,按照对同一元素定义的先后顺序来应用不同的样式。良好的CSS代码可以使代码之间产生继承关系,实现多重代码的复用。降低了代码的编写量以及维护成本。</p><p>⑸ 易于被搜索引擎搜索。</p><p>使用CSS实现样式和内容的分离,网页文件代码简洁。简洁的代码可以增加有效关键词占网页总代码的比重,让搜索引擎对网站更具可读性,更容易被索引。</p><p>下面通过两个范例对比一下使用HTML建立的网页以及使用HTML和CSS建立的网页,了解文件代码的简洁性。【范例1.2】 用HTML建立的文件(范例文件:ch01\1-2.html)</p><p>01 <!DOCTYPE htm l PUBLIC "-//W3C//DTD XHTML 1.0 Trans it iona l//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </p><p>02 <html xmlns="http://www.w3.org/1999/xhtml"></html></p><p>03 <head></head></p><p>04 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/></p><p>05 <title>网页标题

06

07

08

HTML

09

HTML(Hyper Text Mark-up Language)即超文本标记语言,是构成网页文档的主要语言。HTML的结构包括头部(Head)、主体(Body)两大部分。其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容,HTML文本是由许多HTML标记组成的描述性文本,HTML标记也可以看成是HTML的命令,可以用来说明文字、图形、动画、声音、表格、链接等。

10

CSS

11

CSS的全称为Cascading Style Shee,即「层叠样式表」,是 1996年由W3C审核通过并推荐使用的网页技术,目前的最新版本为CSS 3。CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

12

13

【范例1.3】 用 HTML和CSS建立的文件(范例文件:ch01\1-3.html)

01

02

03

04

05 网页标题

06

07 

13

14

15

16

HTML

17

HTML(Hyper Text Mark-up Language)即超文本标记语言,是构成网页文档的主要语言。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包括所要说明的具体内容,HTML文本是由许多HTML标记组成的描述性文本,HTML标记也可以看成是HTML的命令,可以用来说明文字、图形、动画、声音、表格、链接等。

18 

CSS

19 

CSS的全称为Cascading Style Sheet,即「层叠样式表」,是 1996年由W3C审核通过并推荐使用的网页技术,目前的最新版本为CSS 3,CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

20

21

左图是【范例1.2】的显示结果,右图是【范例1.3】的显示结果。从【范例1.2】可以看到,在

标记中间加入了标记用于控制显示内容的字体和字号大小。

如果后期需要修改字体或者字号大小的时候,需要在每个标记中进行修改。在这个例子中间,只有4个地方需要修改,但是如果网页要显示的内容很多的时候,对应的标记也随之增多,这时候每个标记后面的定义都需要修改,工作量非常大。

但是如果采用【范例1.3】的写法,把定义样式的部分写在文件标记之中,如果后期需要修改字体或者字号大小的时候,只需要修改两个地方。即使网页内容再多,所定义的样式标记都在这里,修改简单,整个网页代码简洁。不仅如此,CSS还提供了很多实用的格式控制方法,这些在随后的章节学习中会逐渐接触到。1.1.3 浏览器对CSS的支持

网上的浏览器种类繁多,如果仅按照生产商的品牌分,也有成百上千种。如果以浏览器的核心来分,则主要有IE、Firefox和Netscape。绝大多数的浏览器对CSS都有着很好的支持。就目前技术而言,IE浏览器和Firefox浏览器对CSS的处理有着很多细微的区别,它们之间的兼容性有待改善。不仅如此,就浏览器本身而言,同一浏览器的不同版本对相同页面的浏览效果也存在着一些细微差异。【范例1.4】 浏览器对CSS的支持(范例文件:ch01\1-4.html)

01

02

03

04

05 网页标题

06 

14

15

16

  • 无序列表 1
  • 17

  • 无序列表 2
  • 18

    19

    20

    21

    【范例1.4】是一段很简单的HTML代码,其中在中定义使用的CSS样式ul,该方式定义显示的无序列表方式,不显示文字前面的点,并且显示结果为紧贴前一个元素,并排显示,然后通过在正文中使用所定义的CSS样式实现对无序列表ul li标记样式上的控制。这段代码在IE 9和Firefox 21浏览器中的显示效果存在差异。如下图所示,可以发现,在 Firefox 21浏览器中两段文字分别显示在不同行上,并且位置互相对齐;在 IE 9 浏览器中,虽然两段文字也分别显示在不同行上,但是显示位置不是完全对齐,第一段文字有缩进。

    显示效果上存在的差异主要是由于不同浏览器对CSS样式默认值的设置有所不同。可以通过对CSS文件各个细节的严格编写,使得浏览器实现基本相同的显示效果。1.2 网页设计中的CSS

    本节视频教学录像:4分钟

    在1.1节中,读者了解了CSS的基本概念,并且也知道了它与HTML之间的关系和各自的优缺点,但是到底CSS在网页设计过程中能做什么呢?使用该技术有没有局限性?本节就来回答这个问题。1.2.1 CSS能做什么

    CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其他显示效果实现更加精确的控制。

    在CSS中只需要对相应的代码做一些简单的修改,就可以改变同一类内容的表现形式,而无论这些内容是在同一位置,或在同一页面的不同位置,甚至在不同的页面上。CSS可以实现以下作用。

    ⑴ 同样的设计,在几乎所有的浏览器上都可以使用,只有个别设计在某些浏览器上可能无法显示。

    ⑵ 从前只能通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

    ⑶ 使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

    ⑷ 可以轻松地控制页面的布局。

    ⑸ 可以将许多网页的风格格式同时更新,不需要一页一页地更新。可以将站点上所有的网页风格都使用同一个CSS文件进行控制,只要修改这个CSS文件中相应的内容,整个站点的所有页面都会随之发生变动。1.2.2 CSS的局限性是什么

    CSS具有这么多妙用,那么是不是就意味着它就是无所不能的呢?是不是什么都能自由实现的呢?这个答案是否定的,CSS仍然存在一些局限性,例如:

    ⑴ CSS 存在有些属性不能被继承的问题,存在继承的局限性。比如 border 属性,它是用来设置元素的边框的,它不存在继承性。其他很多边框类属性都是不能继承的,又如说padding(补白),margin(边界)等属性。

    ⑵ 在使用 CSS 指定特定元素的外观时,对静态 HTML 都能完美支持,但是对于动态网页(使用ASP、JSP、PHP等语言编制的网页)中的服务器元素,还存在不同浏览器显示的效果不一致的问题。1.3 网站CSS赏析

    本节视频教学录像:3分钟

    学习CSS的过程,其实就是一个不断借鉴不断充实的过程。如果仅仅是知道某个属性怎么用,那么还不能算是真正的掌握CSS。只有当读者了解了CSS之后,才会发现,原来相同的属性只要换一个用法就能产生意想不到的效果。

    下面通过两个综合实例,来体会一下CSS的强大功能。1.3.1 案例1——商务网站CSS样式赏析

    下图是一个中央电视台的首页,该页面利用CSS实现了以下效果。

    ⑴ 使用CSS灵活控制版面布局,网页布局主要采用的是两栏布局,即页首栏和内容栏,网页上端是页首栏,放置网站的LOGO、导航栏以及一些广告信息。网页页面内容栏被垂直分成两栏,用于存放节目简介和图像预览等内容。

    ⑵ 网页页面以白色为底,黑色文字为主,为了突出,文字用红色或者蓝色显示。例如标题用红色显示,主要内容列表显示。这些都是通过CSS加以控制。

    ⑶ 下图所示,左下角采用JavaScript语言实现的幻灯片自动播放效果。

    通过CSS以及与其他语言的结合完成了这个商务网站的创建,本书后续章节将逐渐介绍这些方法,并通过案例分析帮助读者熟悉商务网站的制作过程。1.3.2 案例2——游戏网站CSS样式赏析

    下图所示是一个游戏网站的首页。这个网站也是采用CSS与JavaScript技术实现网页控制,达到缤纷的动态效果。主要体现在以下两点。

    ⑴ 整体页面布局使用 DIV+CSS 进行布局的,整个页面分为“上-下”两栏,其中上栏是游戏网站的logo、导航栏以及一些广告信息,中栏是又分为左右两栏,左栏占用空间大,是游戏简介,右栏是游戏人气排行榜。

    ⑵ 页面使用CSS控制页面背景和字体,以白色为背景,文字多以黑色和蓝色为主,以突出不同游戏。另外,游戏网站中图像占的比例很大,给人以直观逼真感受。1.4 编写我的第一个CSS样式

    本节视频教学录像:25分钟

    通过前面的简单介绍,读者对于CSS已经有了一个比较初步的了解。下面通过一个实际的例子,从零开始,一步一步地讲解CSS的基本使用过程。该例子通过CSS样式控制网页中图片的显示效果。1.4.1 从零开始

    这里用到的主要工具是 Dreamweaver CS 6,这款专业的网页设计软件在代码模式下对 HTML、CSS和JavaScript等代码的编写,有着很好的语法着色及语法提示功能。并且软件自身自带很多的实例,对学习CSS有着很好的帮助。【范例1.5】 编写第一个CSS样式(范例文件:ch01\1-5.html)

    1首先要新建一个HTML页面,启动Dreamweaver CS 6软件,在初始启动界面。单击【文件】▶【新建】菜单命令,或者使用快捷键Ctrl+N,如下图所示。

    2此时会弹出下图所示的【新建文档】对话框。

    在上图的【新建文档】对话框中,布局基本上分为4列,其中第1列包含“空白页”、“空模板”、“流体网格布局”、“模板中的页”、“示例中的页”和“其他”6个选项,可以根据需要选择其中一个选项,一般在建立HTML或者CSS文件的时候,选择“空白页”;对应第1列任何一个选项,在“页面类型”列中都会出现不同的选项,读者也可以根据需要选择不同的页面类型;对于前两列的任何选择,在“布局”列也会有对应变化的选项,读者可以选择自己需要的布局样式。在第4列中,常用的有“文档类型”和“附加CSS文件”,“文档类型”用于指定所制作的文件的类型,可以根据需要选择;如果需要附加一个已经制作好的CSS文件,可以在“附加CSS文件”中添加。“首选参数”中可以设置一些常用的默认设置,例如浏览器预览的默认主浏览器、是否在启动时显示欢迎屏幕等。

    3上图的【新建文档】对话框中,选择【空白页】选项卡下【页面类型】中的【HTML】文档,布局中选择【无】,然后单击【创建】按钮,出现下图所示的HTML代码录入界面。说明

    范例 1.5 步骤 2 图中,“文档类型”选择 html 4.01 transitional。

    4进入HTML代码录入界面,将“无标题文档”修改为“图片控制实例”,单击【文件】▶【保存】菜单命令,或者使用快捷键Ctrl+S,弹出【另存为】对话框,如下图所示。

    5在【保存在】下拉列表中选择将要保存文件的文件夹位置,在【文件名(N)】后输入1-5.html,单击【保存】按钮。

    这时所创建的网页是完全空白的。下面为其加入图片。说明

    在保存文件的时候,最好将文件存在某个指定文件夹中,把文件分类存放,养成良好的目录结构习惯。例如:“D:/final/ch01”。1.4.2 加入图片

    在上一节创建的1-5.html文件的标签中,加入如下代码(只需要在上一节所创建的代码中增加第8行内容)。

    01

    02

    03

    04

    05 图片控制实例

    06

    07

    08

      /*新增加的内容 */

    09

    10

    上面增加的一句代码的作用是显示一幅图片example.jpg,该图片是在“ch01\”目录中,一定注意这个图片要和刚才所创建的文件1-5.html放到同一个文件夹,读者可以使用复制粘贴到自己定义的文件夹。当然如果有其他图片,读者也可自行替换使用,只需将图片名称更改即可。

    如上图所示,用鼠标左键单击 Dreamweaver 工具栏上面的调试按钮,或者按快捷键F12,在浏览器中浏览,显示效果如下图所示。1.4.3 加入CSS代码控制图片

    从1.4.2小节图中很直观地看出来,没有经过CSS样式控制的图片位置默认是靠左的,图片大小也未经任何控制。为了使图片在网页中显示的效果更加美观,可以加入CSS样式控制图片的显示方式。要实现的效果为:①控制图片显示为右对齐;②定义图片的宽度和高度;③为图片增加滤镜效果。具体的代码如下,添加在上面例子的之间。

    01  /*下面是样式表 ,中间放入 css内容 */

    02

    09

    注意

    由于 Firefox 火狐浏览器不支持这种滤镜效果,所以在 IE 9 和 Firefox 21 浏览器中显示的效果不太一样。

    通过和上图之间的对比,可以发现,这个时候图片在浏览器中显示的效果明显不一样,图片由默认的向左对齐改为现在的向右对齐。此外,图片也有了滤镜的效果,这通常需要用Photoshop才能实现,这就是CSS的魅力所在。1.4.4 CSS的注释

    编写CSS代码和编写其他的程序一样,养成良好的注释习惯,对于提高代码的可读性并减少日后维护的成本都显得尤其重要。在CSS中,注释的语句都位于“/*”和“*/”之间,注释的内容可以是单行或者多行。

    01 /*这是 css注释 */

    02 /*这也是 css注释

    03 多行注释 */

    使用注释的时候,“/*”和“*/”要成对出现,如果只有一个“/*”,而缺少“*/”,则“/*”后面的代码会被认为是注释内容,从而失效。例如:

    01 div{

    02 margin:auto; float:right;

    03 }/*对 div的注释

    04 img{ width:400p; xheight:300px;

    05 filter:blur

    06 (add=ture,direction=120,strength=200)}对 img的注释 */

    上面这个例子中,在03行后有“/*”,因此其后的内容都认为是注释,一直遇到“*/”为止,而“*/”直到06行才出现,因此04、05、06行的代码都会被认为是注释内容。

    值得注意的是,在之间经常会看得见“”将所有的CSS代码包含在其中,例如1.4.3节的例子中就是这样。这样做的原因是当遇到有些浏览器不支持CSS的时候,会将其中的CSS代码直接显示在浏览器上,经过这样设置后,这些CSS代码就不会显示在浏览器上了。1.5 CSS语法书写标准及功能

    本节视频教学录像:35分钟

    在上一节,已经通过实例学习了如何创建和使用CSS技术编写网页。下面来看一下CSS语法的规则。1.5.1 规则块

    规则块就是CSS样式的主要内容。一个规则块使用一对大括号包围,其间可以使用任何符号,其中单引号和双引号其间的字符被解析为一个字符串。例如:

    01

    02

    08

    1.5.2 @规则

    @规则是以关键字@开头,后面紧跟的是一个标识符。@规则可分为4种。

    ⑴ @import 引用外部 CSS。

    ⑵ @charset 指定该样式表使用的字符集。

    ⑶ @page 设置页面容器的版式、方向、边空等。

    ⑷ @media 将 HTML或XML文档定位为目标输出方法。

    1.@import规则

    语法:说明

    括号内的 URL 代表使用绝对或相对地址表示的 CSS 样式表文件(文件扩展名为.css)。

    sMedia : 指定设备类型。

    常用的设备类型为:

    all用于所有的媒介设备。

    aural用于语音和音频合成器。

    braille用于盲人用点字法触觉回馈设备。

    embossed用于分页的盲人用点字法打印机。

    handheld用于小的手持的设备。

    print用于打印机。

    projection用于方案展示,比如幻灯片。

    screen用于电脑显示器。

    tty用于使用固定间距字符格的媒介,比如电传打字机和终端。

    tv用于电视机类型的设备。

    01 @import url("test.css") screen, print; /* 用来指示要导入的样式表文件是 test.css,用于屏幕或者打印机。其中样式表文件使用的是相对地址*/

    02 @import url(" D:\css\test.css") /* 用来指示要导入的样式表文件是 D:\css\test.css。其中样式表文件使用的是绝对地址*/

    2.@charset规则

    用于定义使用的字符集,只能用于CSS样式表文件,且只能使用一次,必须位于样式表最前面。

    该规则的语法规则是:

    @charset "sCharstacterSet";说明

    对于外部样式表来说,其字符集由HTML 文档的字符集指定。

    例如:@charset "utf-8"; 指定页面编码字符集格式为 utf-8。其他常见的字符集还有 GB2312-80、GB18030-2000、GB18030-2005、Unicode等。

    3.@page规则

    该规则用于设置页面容器的版式、方向、边空等。

    页面容器包括页面内容区域和内容区域外围的边空补白区域。其基本语法如下:

    @page label pseudo-class { sRules }

    其中label表示页标;pseudo-class表示伪类:first | :left | :right,这些伪类是CSS选择符的一部分,用于文档状态的改变,其中:first表示页面容器的第一页;:left表示页面容器左边空白区域;:right表示页面右边空白区域;sRules表示CSS样式表的定义。

    例如:@page thin:first { size: 3in 8in } 表明设置页面容器 thin 类的第一页大小为宽为 3in, 高为8in。

    4.@media规则

    @media规则指定CSS样式表规则用于特定的设备类型(显示器、打印机等)。其语法规则为:

    @media sMedia { sRules }

    其中,sMedia指定设备名称,sRules表示样式表的定义。

    sMedia媒介类型描述如下:

    all用于所有的媒介设备。

    aural用于语音和音频合成器。

    braille用于盲人用点字法触觉回馈设备。

    embossed用于分页的盲人用点字法打印机。

    handheld用于小的手持的设备。

    print用于打印机。

    projection用于方案展示,比如幻灯片。

    screen用于电脑显示器。

    tty用于使用固定密度字母栅格的媒介,比如电传打字机和终端。

    tv用于电视机类型的设备。

    例如:@media screen{BODY{font-size:12pt;}}表示设置显示器的字体大小。1.5.3 规则集

    样式规则集是一系列样式声明规则的集合。每个规则由选择符和属性声明两部分组成。其中,选择符用于标识格式元素(如p、h3标记、类名或id),属性声明则用于定义元素的样式。

    定义CSS规则的语法如下:

    选择符{属性:值;属性:值...}

    其中属性声明用花括号括起来,其内容可以由一个或者多个“属性-值”对组成,属性名称与属性值用冒号(:)进行分割,不同属性-值对用分号(;)进行分割。

    当在HTML网页中定义CSS规则时,应把规则定义放在标记之间;如果是在单独的CSS文件中定义CSS规则,则不必使用

    15 

    16 

    17 

    下面的内容是使用字符串方式显示的

    18 

    19 

    20 

    显示的结果如下图所示。在这个例子中,使用CSS的content属性,在字符串中输入将要显示的内容“欢迎访问我的网站”,同时为了对比,也使用HTML的h1标签在页面显示内容“下面的内容是使用字符串方式显示的”。1.5.6 CSS样式标准

    和HTML类似,CSS也是由W3C组织负责制定和发布的,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

    1996 年 12 月,发布了 CSS 1.0 规范,其中包含非常基本的属性,比如字体,颜色、空白边。1998 年 5 月,发布了 CSS 2.0 规范,该规范在 1.0 基础上添加了高级概念(比如浮动和定位)及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器);CSS 3的标准制定工作在2000年后就开始了,但距离最终的发布还有相当长的路要走,为提高开发和浏览器实现的速度,CSS 3被分割成模块,这些模块可以独立发布和实现。

    由于CSS样式标准规范很多,网页http://www.w3.org/TR/#tr_CSS有详细的介绍。下面给出在网页设计过程中普遍遵循的一些标准规范。

    1.CSS 样式中关于字号的规范

    为保证不同浏览器上字号一致,网页最佳字号单位用像素px或点数pt,优先用px。最合适的字体和字号大小分别是:px和pt。px,一般使用中文宋体12px或14.7px;pt,一般使用中文宋体的9pt和11pt;黑体字或宋体字需要加粗时,一般选用11pt和14.7px再加粗比较合适。注意

    以上尺寸使用不是绝对的,仅供参考。

    2.编码格式:使用UTF-8

    请确保编辑器使用的字符编码为 UTF-8。在 HTML 模板或文档中通过 来定义编码格式。高手私房菜技巧:Dreamweaver的多种视图方式

    Dreamweaver软件提供了多种视图方式,包括“代码视图”、“拆分视图”和“设计视图”。允许用户在这些视图中编写网页代码。用户可以通过选用工具栏中的“代码”、“拆分”和“设计”按钮来选择任意一种视图方式。

    1.代码视图

    如下图所示,代码视图是Dreamweaver软件显示网页文档代码的视图模式,在代码视图中,Dreamweaver可以用不同的颜色标记这些代码的内容,以区分各种代码的性质,同时还具有代码提示功能。

    2.拆分视图

    如下图(左)所示,在编写网页代码的时候,如果用户希望一边编写代码,一边浏览效果,则可以选择“拆分”视图,同时显示网页的源代码以及设计效果。

    3.设计视图

    如下图(右)所示,这种视图类似于Microsoft公司的Word软件,使用“所见即所得”的可视化设计方式,可以直接在页面中输入文字和图片,这时代码会自动生成。

    用户可以根据自己的习惯,选用任何一种视图方式。推荐使用“代码视图”或者“拆分视图”,因为在许多情况下还要加入参数设置等内容。第2章 CSS样式核心基础

    本章教学录像:37 分钟

    上一章读者已经学习了CSS样式的基本概念。“千里之行始于足下”,在深入学习CSS样式之前,先来认识CSS样式的核心基础。本章重点介绍如何使用CSS控制页面中的各种标记,并介绍各种CSS样式选择器以及在CSS中如何引入HTML。本章要点(已掌握的在方框中打勾)□ 创建使用 CSS 的网页□ CSS 语法书写标准及功能□ 关键字和字符串□ CSS 标准□ 使用 CSS 选择器□ 在 HTML 中调用 CSS 的方法2.1 使用CSS选择器

    本节视频教学录像:22分钟

    选择器(select)是CSS中很重要的概念,所有的HTML语言中的标记都是通过不同的选择器进行控制的。在使用中,只需要把设置好属性的选择器绑定到HTML标签上,就可以实现各种效果,达到对页面的控制。

    选择器的概念就和“地图”中使用的“图例”类似。在“地图”中,常用蓝色的线表示河流,红色的线表示公路,用黑色圆点表示省会城市,等等。这也是一种“内容”和“表现形式”的对应关系。在网页设计中,常常也事先定义这些选择器,例如h1标题用蓝色文字表示,h2标题用红色文字表示。然后在 HTML中将这些定义的选择器赋予不同的元素,实现CSS对HTML的“选择”。

    在CSS中,可以根据选择器的类型把选择器分为基本选择器和复合选择器,复合选择器是建立在基本选择器之上,对基本选择器进行组合形成的。基本选择器包括标记选择器、类别选择器和ID选择器3种,下面进行逐个介绍。2.1.1 标记选择器

    标记选择器,顾名思义,就是用与对HTML中标记进行描述的选择器,一个HTML页面由很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪个CSS样式。例如,p选择器就是用于声明页面中所有

    标记的样式风格,h1选择器用来声明页面中所有

    标记的样式风格。每一个标记选择器都包含选择器本身、属性和值,其中属性和值可以设置多个,其基本语法格式为:

    标记选择器{属性:值;属性:值…}

    其中标记选择器就是HTML中用的标记,例如p、h1、h2等。属性和值之间用冒号“:”分割,多个属性和值之间用“;”分割。

    下面通过例子看看选择器的使用效果,先来看看没有加入选择器的效果。【范例2.1】 没有加入选择器的效果(范例文件:ch02\2-1.html)

    01

    02

    03

    04

    05 标记选择器

    06

    07

    08

    标记选择器 1

    09

    标记选择器 2

    10

    标记选择器 3

    11

    标记选择器 4

    12

    标记选择器 5

    13

    标记选择器 6

    14

    15

    1按照前面介绍的方法,新建实例2-1.html,输入上面代码,在Dreamweaver CS6 软件环境下按下F12快捷键,或者单击【在浏览器中调试预览/调试】按钮,在IE浏览器中浏览的效果图如下图所示,可以发现网页中文字没有任何样式,这是没有加入标记选择器前的网页。

    2 在文件的

    前面增加下面代码,用于定义p标记选择器。

    01 /*定义 css的样式 */

    02

    09

    3在Dreamweaver CS6 软件环境下按下F12键,在IE下运行,得到的效果如下图所示。

    通过两图之间的比较不难发现,只要定义了p选择器,在网页中出现的多个

    标签都会发生变化。可见CSS样式是多么的实用。2.1.2 类别选择器

    在实际应用中,不会像上节那样,所有标记选择器一旦声明,所有的页面都会相应的变化。例如:

    标记声明为是红色时,所有页面关于

    的标记都是红色的。如果仅希望一部分

    标记是红色的,另一部分

    标记是蓝色的或者是其他样式的,该怎么做呢?这时候仅仅依靠标记选择器是远远不够的。这就需要引入类别(class)选择器。

    用户可以自由定义类别选择器的名称,但必须遵守CSS规范。其

    试读结束[说明:试读内容隐藏了图片]

    下载完整电子书


    相关推荐

    最新文章


    © 2020 txtepub下载