学习使用XHTML+CSS的方法怎么改善现有网站?

优采云 发布时间: 2021-05-21 18:03

  学习使用XHTML+CSS的方法怎么改善现有网站?

  如何改善现有的网站

  我们的大多数设计师仍在使用传统的表布局,性能和结构混合在一起来构建网站。学习使用XHTML + CSS需要一个过程,并且不可能一步一步地使现有的网站符合网站标准。最好的方法是逐步进行,逐步达到完全符合网站标准的目标。如果您是新手,或者对代码不太熟悉,还可以使用兼容标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准的最完整的工具。

  1。初步改善

  许多设计人员和开发人员都不知道DOCTYPE是什么,以及DOCTYPE的用途是什么。 DOCTYPE是文档类型的缩写。它主要用于说明您使用的XHTML或HTML版本。浏览器根据您的DOCTYPE定义的DTD(文档类型定义)解释页面代码。因此,如果您不注意设置错误的DOCTYPE,结果将使您感到惊讶。 XHTML 1. 0提供了三个DOCTYPE选项:

  ([1) Transitional)

  ([2)严格类型(严格)

  ([3) Frameset

  对于我们的主要改进,只需选择过渡声明即可。它仍然可以与您的表布局,性能徽标等兼容,这样您就不会觉得更改太大而难以掌握。

  提示:如果您懒得输入上面的过渡代码,则可以访问网站的主页,然后查看源代码,然后将相同的代码复制并粘贴到头部。

  在DOCTYPE声明后直接添加以下代码:

  名称空间是详细的DTD,它采集元素类型和属性名称。命名空间声明使您可以通过指向在线地址来标识您的命名空间。只需按原样输入代码即可。

  为了被浏览器正确解释并通过徽标验证,所有XHTML文档都必须声明其使用的编码语言。代码如下:

  此处声明的编码语言为简体中文GB2312,如果需要制作传统内容,可以将其定义为BIG5。

  XML区分大小写,因此XHTML也区分大小写。所有XHTML元素和属性的名称都必须小写。否则,您的文档将被W3C验证视为无效。例如,以下代码不正确:

  公司简介

  正确的书写方式是:

  公司资料相同,

  更改为

  ,请更改以等待。这种转换非常简单。

  向所有图片添加alt属性。 alt属性指定当无法显示图片时,将显示文本以进行替换。这对于普通用户是可选的,但对于纯文本浏览器和屏幕阅读器的用户来说是必不可少的。仅当添加alt属性时,该代码才会通过W3C正确性检查。请注意,我们需要添加有意义的alt属性。像下面这样写是没有意义的:

  

  正确的写作:

  

  在HTML中,您不需要引用属性值,但是在XHTML中,必须将它们用引号引起来。

  例如:height =“ 100”,而不是height = 100。

  在XHTML中,必须关闭每个打开的标记。就是这样:

  每个打开的标签都必须关闭。

  HTML可以接受未关闭的标签,但是XHTML不能。

  此规则可以避免HTML的混乱和麻烦。例如:如果不关闭image标签,则在某些浏览器中可能会出现CSS显示问题。这样,您可以确保在设计页面时显示该页面。应该注意的是:空标签也应该被关闭,并且在标签的末尾使用正斜杠“ /”来关闭它们自己。例如:

  

  处理完上述七个规则后,页面基本符合XHTML 1. 0的要求。但是我们还需要验证它是否真的符合标准。我们可以使用W3C提供免费的验证服务()。发现错误后,一一修改。在以下资源列表中,我们还提供其他验证服务和网站,以提供有关验证的指南,这些指南可以用作W3C验证的补充。恭喜,当XHTML验证最终通过时,您已朝网站标准迈出了一大步。这没有想象中的那么困难!

  2。中间改进

  接下来,我们的改进主要在于结构和性能的分离。此步骤不像第一步那样容易实现。我们需要观念上的改变,以及CSS2技术的学习和应用。但是学习任何新知识都需要一些时间,不是吗?诀窍是边做边学。如果您一直在使用表格布局,并且从未使用过CSS,并且不必急于对表格布局说再见,则可以使用样式表代替字体标签。您学得越多,您就能做的越多。好的,让我们看一下我们需要做什么:

  我们在写徽标时养成了习惯。当我们想要更大的字体,并且想要在它的前面添加一个点符号时,我们就使用它。我们总是想表示大的,表示点的和“粗体”。实际上,它可以通过CSS变成任何您想要的字体,

  文本可以是巨大的,粗体的,可以是图片等。我们不能强制使用结构元素来实现性能效果,我们应该使用CSS来确定那些元素的外观。例如,我们可以使原创的默认6级标题的大小相同:

  h1,h2,h3,h4,h5,h6 {font-family:Times New Roman,serif; font-size:12px;}

  许多人可能永远都不知道HTML和XHTML元素旨在表达结构。我们许多人已经习惯于使用元素来控制性能,而不是结构。例如,内容列表可能使用以下徽标:

  一句话

  句子2

  句子三

  如果我们改用无序列表会更好:

  您可能会说“但它显示一个点,我不想使用一个点”。实际上,CSS并没有设置元素的外观,您可以使用CSS来关闭点。

  例如,提供表格或形成独特的结构标记

  接下来,在编写样式表时,您可以创建一个“菜单”选择器并关联CSS规则,以告知表格单元格,文本标签和所有其他元素如何显示。这样,无需在每个标签上附加一些冗余的,消耗带宽的性能层高度,宽度,对齐方式和背景颜色属性。仅使用一个附加标签(标识为“ menu”的id标签),您就可以在单独的样式表中对干净,紧凑的代码标签执行特殊的呈现处理。

  中级改进我们在这里列出了三个主要要点,但是有很多内容和知识点需要我们逐步学习和掌握,直到最终实现完全使用CSS而不是任何形式来实现布局。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线