没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示


试读
56页
基础 【基础一】DIV+CSS的叫法是不准确的 【基础二】使用Table布局是不明智的 【基础三】xHTML+CSS与SEO 【基础四】CSS如何控制页面 【基础五】CSS选择器 【基础六】CSS选择器命名及常用命名 【基础七】盒子模型 【基础八】块状元素和内联元素 ================================= 课程 【第一课】盒模型、块状元素与内联元素、CSS选择器 【第二课】浮动 【第三课】清除浮动 【第四课】导航条 【第五课】浮动(float)页面布局 【第六节】定位 【第七节】定位应用 【第八课】CSS Hack ================================= 小技巧 【单张图片按钮实例】 【首行文字两文字缩进】
资源推荐
资源详情
资源评论














2 天掌握 DIV+CSS 网页制作技术
=================================
基础
【基础一】 DIV+CSS
的叫法是不准确的
【基础二】使用
Table
布局是不明智的
【基础三】 xHTML+CSS
与
SEO
【基础四】 CSS
如何控制页面
【基础五】 CSS
选择器
【基础六】 CSS
选择器命名及常用命名
【基础七】盒子模型
【基础八】块状元素和内联元素
=================================
课程
【第一课】盒模型、块状元素与内联元素、 CSS
选择器
【第二课】浮动
【第三课】清除浮动
【第四课】导航条
【第五课】浮动 (float) 页面布局
【第六节】定位
【第七节】定位应用
【第八课】 CSS Hack
=================================
小技巧
【单张图片按钮实例】
【首行文字两文字缩进】
DIV+CSS 网页制作这种叫法不准确
来源 学习网
网页制作 文章简介: 的叫法是不准确的
DIV+CSS 的叫法是不准确的
我想凡是来到“ 学习网”的同学,很大部分是冲着 来的,目的就是学习 的,
说的再直接一些就是学习如何用 布局页面,如何从一张图片制作成标准的 页面。
如果你看完第一段还没有发现错误的话,那你就很有必要,接着往下看。

这种叫法其实是一种很错误的叫法,这是国人一厢情愿的叫法,而标准的叫法是什么呢?
呵呵,没错,是 ,不理解吧,我来细细给你说,如果下面的你能理解,保证面试的时
候会有很大的帮助,同时也可以让你后面的学习更轻松。
为什么国人将这种页面布局的方法叫做 DIV+CSS?
因为过去布局页面基本上都是用 布局,也可以说是 ,而现在布局页面呢,用
,所以叫 ,听起来也挺合理,认为这样布局出来的页面也就是标准页面,甚至有些人走了
个极端,看到其他网站用到 ,就会嘲笑页面做的不够标准,好似用不用 成为了页面是否标
准的一个标尺。现在我可以告诉大家,凡是有着这种行为的,都学得不咋样,很皮毛!
用了 页面就不标准了纯粹无稽之谈,那什么才是标准页面呢?先看一个专业概念, 标
准,然后我会问三个问题,你来回答:
标 准 不 是 某 一 个 标 准 , 而 是 一 系 列 标 准 的 集 合 。 网 页 主 要 由 三 部 分 组 成 : 结 构
( !"# "!)、表现($!%& '(&)和行为()*'(!)。对应的标准也分三方面:结构化标准语
言主要包括 + 和 +,表现标准语言主要包括 ,行为标准主要包括对象模型(如 ,
-)、.#!'/ 等。这些标准大部分由 , 起草和发布,也有一些是其他标准组织制订的标准,
比如 .("!(/&(0/" !&"1# "!!%.%%(#' '(&)的 .#!'/ 标准。
看明白了没有?问题来了先不要看答案,从上面的概念中找出
问题一: 标准有几部分组成?
问题二:结构化标准语言是什么?
问题三:表现标准语言是什么?
答案一:三部分,结构、表现、行为
答案二:+ 和 +
答案三:
看完上面三个问题,哪什么是标准页面呢?呵呵,说白了就是按照 标准制作的页面,从第二个
问题和第三个问题 中 , 我 们 又 可 以 说 , 用 + 和 制作的页面就是标准页面,也就是说
制作的页面就是标准页面。怎么样,理解了吧
为什么不说 XML+CSS 呢?
很简单,因为 + 过于复杂,且当前的大部分浏览器都不完全支持 +。所以就不用它来布局页
面喽
既 然 制 作 页 面 就 是 标 准 页 面 了 , 又 因 为 中 不 只 有 标 签 , 还 有
%/&、/、、"、'、2、2 、223,即使我不用 ,用其他标签4比如"、'5制作出来的页面也是
标准页面!所以说用 来制作标准页面这句话就很狭隘喽如果满屏全部都是 那也算不上标
准页面,曾经由一个朋友告诉我,说他的页面全部用的 ,每个模块,每个功能区域,就连一条线都
是纯 实现,并且相当自豪的告诉我,没有人比他做的页面更标准的了,他不但对 标准页面的
理解有差错还犯了一个很大的错误, 中的每一个标签都有其作用,各司其职,各守其责,要用的
恰到好处,这才算是标准页面, 不是万能的哟!
说到这里大家应该明白,这种 Web2.0 时代的布局页面的方法,叫 DIV+CSS 是不准确的,应该
叫 xHTML+CSS。

凡是看到这节的同学们,以后尽可能说 ,不要再说 喽,如果非要说,也要
加上一句说明哟,比如
面试官:你对 了解么?
应聘者: 准确的说应该叫 ,我对这种页面布局方法非常了解!……
如果你是面试官,你对这个应聘者,感觉如何呢?呵呵呵
使用 table 布局网页不明智
,来源 学习网
网页制作 文章简介:使用 布局页面为什么是不明智的?
使用 Table 布局页面为什么是不明智的?
大家看到标题,不要误解认为在页面中不能使用 ,而是可以使用 ,但是尽量不要用
去布局页面,为什么这么说呢,因为使用 布局页面会使页面失去灵活性,怎么个灵活法呢,
比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板
块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用
布局的,那么你会崩溃的,工作量那是大大滴,如果不相信的话,你们自己可以找个页面,用
布局出来,然后变换板块和风格,你就会体会到 布局的不灵活性,这是为什么呢,因为
的诞生是为存储数据用的,功能和 # 差不多,不是用来布局用的,只不过后来大家发现用
可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏
览器,于是 就承担起了布局页面的重担,这一做就是好几年 直到 时代的到来,
才从布局页面的工作中逐渐解脱,专心的去存储数据676
既然 Table 是为存储数据诞生的,那谁的诞生是为了页面布局呢?
答案就是DIV, 就是为布局页面而诞生的,只不过一直不被人认同,原因就是 去布局页面
需要 的配合,使用比较繁琐,还不如 拖拖拽拽页面就布局 -8 了,感觉还不如 方便,
从而 被人们放置在一个无人问津的昏暗角落里,暗暗的等待着伯乐的出现,直到 , 年美国加州
#( %'9& 公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使 看到了阳
光,走出了阴霾
说了那么多,我们对比一下 Table 布局页面和 DIV 布局页面的优缺点
使用表格进行页面布局会带来很多问题:
:把格式数据混入你的内容中。这使得文件的大小无谓地变大,而用户访问每个页面时都必须下载
一次这样的格式信息;带宽并非免费。
:这使得重新设计现有的站点和内容极为消耗劳力 4且昂贵5。
:这还使我们保持整个站点的视觉的一致性极难,花费也极高。
:基于表格的页面还大大降低了它对残疾人和用手机或 $.浏览者的亲和力。
而使用 进行网页布局,它会:
:使你的页面载入得更快
:降低你的流量费用
:让你在修改设计时更有效率而代价更低
:帮助你的整个站点保持视觉的一致性

:让你的站点可以更好地被搜索引擎找到
:使你的站点对浏览者和浏览器更具亲和力
:在世界上越来越多人采用 标准时,它还能 提高你的职场竞争实力 4事实上也就是降低失业的
风险5。
网 上 有 一 篇 文 章 , 转 过 来 , 文章 着 重 介 绍 三 点 优 势 ; 也 许 看 完 文 章 后 ,就 像社 区 元 老
)<=>= 说的感觉作者比较迷恋 ,每篇文章都不可避免的带有个人色彩,而转出来的目的,其
实就是想给大家降降 的温度,免得“走火入魔”,视 是为万能的,如果想学好
布局页面,就要从多个方面看它,好了,不多说了,下面是作者对 布局页面的三点优势及理解:
、内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给 来处理。生成的
文件代码精简,更小打开更快。
、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何 和程序页
面,只需要改动 文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。
,、搜索引擎更友好,排名更容易靠前。
第一点、内容和形式分离
网页前台只需要显示内容就行,形式上的美工交给 来处理。生成的 文件代码精简,更小
打开更快。
这个是 技术最显著的特点,也是 存在的根源。完全的颠覆现在传统( )网页
设计的技术。所有现在用 制作的内容,都可以用 来解决掉,而且解决的更完美,更强大。不
需要大家再表格套表格,让生成的网页文件大小更精简,更小。 时代,一个页面表格达到 个以
上是非常普遍的事情,但是现在用 ,一个 都可以不用,就完全达到之前的效果,这就直
接导致网页文件大小比使用 时减少 ?@?,更节约各位站长的硬盘空间,访问者打开网页时
更快,而且用 2'* 时,不像以往使用 时,必须把全部 读取完了才显示页面内容,现在
是可以读一个 2'* 就显示一个效果,大家打开网页不用等。好处真是明显而强大。
这个优点的确是显著的,凡是使用传统 建的网页,内容多的话,有时候达到 ,8 左右都有可
能,文件打了打开时,肯定就有 几秒的延迟。使用 ,你前台打开看到的全是直接内容,
文件都是导入链接的,是另一个文件,根本和 文件大小没关系,这种生成的 文件,一
个也就 8 左右大小。
第二点,改版网站更简单容易了
不用重新设计排版网页,甚至于不用动原网站的任何 和程序页面,只需要改动 文件就完
成了所有改版。
对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站 页面,
只需要重新写 ,再用新 覆盖以前的 就可以实现改版了。方便吧。
第三点,搜索引擎更友好,确实能够对 SEO 起到一定的帮助。
通过 对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取。这
对于 - 也有帮助。
综上所述,个人感觉 不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重
要辅助是很强大方便的。可以弥补 制作框架和表格时的很多不足和美工上的缺点,但是完全只用
它来做,太费时费力,对于全国中小型网站长来说,真的不太适合。我个人觉得用 是
最好的组合,也是最省时省力的办法。

还需要再说明一下,本节讲得是 Table 布局页面和 CSS 布局页面的问题,讨论的是“布局页面”上用
谁更好,并不是说在 CSS 布局的页面内不能用 Table,真正厉害的人物是 DIV、Table、CSS 用得恰
到好处,他们三个各做各的事情,DIV 布局页面,Table 存储数据,CSS 给页面穿衣服!
xHTML+CSS 网页制作和搜索引擎优化 SEO 的关系
,,来源 学习网
网页制作 文章简介: 与 - 的内容,后面章节
会详细给大家介绍,这里就先说一些,让大家对 与 - 有
一定的认识,为后面制作页面打基础,毕竟我们做出来的页面还是要给搜
索引擎看的,所以不能不提提 与 - 的关系。
与 - 的 内 容 , 后 面 章 节 会 详 细 给 大 家 介 绍 , 这 里 就 先 说 一 些 , 让 大 家 对
与 - 有一定的认识,为后面制作页面打基础,毕竟我们做出来的页面还是要给搜索引
擎看的,所以不能不提提 与 - 的关系。
5将页面中最重要的内容用 ) 标签括起来,) 的内容就和页面 ' 很自然的包含了站点或者页面
的核心关键词,搜索引擎很重视 ) 标签的内容哟
5合理的运用 )、), 等标题标签,他们对于页面来说就是文章不同的等级或者不同的功能区域的
标志性元素
,5页面 0 信息不可忽视,一定要包含页面核心的内容
A5为了便于搜索引擎更方便的抓取,要尽可能的保证 页面代码纯净,强调一下,既然是
布局页面,所以 代码要单独写在一个文件内,保证 部分和 部分彻底分离;
) 0 页面中使用 '2 和 #%%,尽可能的避免 % =BCCD尽量使用标准的 命名规范,从这里就可以看
出你这个页面重构师是否专业哟;尽量使用 的缩写以节省代码,例如 /22'&9///
/D缩写为 /22'&9//D最好不要在 页面用 1(& 、#& ! 这种标签。
5在 页面中 % !(&9 标签是可以使用的,可以进一步强化关键词和相应的文字信息。
E5页面中的 *%#!'/ 代码会对搜索引擎分析页面内容产生干扰,可以将 *%#!'/ 代码封装在一
个% 文件中外部调用。
F5G'09HI尽可能的加入 注释,因为百度和 9((9 都有搜索图片的功能,如果加了 ,就更
方便搜索蜘蛛的爬行,搜索相应关键词,就可能出现你网站上的图片,点击图片不就进入你的网站了嘛,
就又多了点流量吧。
剩余55页未读,继续阅读
资源评论


snowkiller
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制
