从表到去 。 （第1部分-创建你的布局） 08年10月24日由布雷迪Feiereisel · 3评论 
行，我们将在这里完成您的Photoshop正在布局和映射与CSS出来-股利的，而不是Photoshop的默认HTML， -表。 为了能够成功在本教程中你必须知道的HTML编码，和一些CSS经验也有帮助。
可以让出发点基本知识。 而不是使用HTML和使用表单元来保存我们的背景图像，形成布局，我们将使用<div>氏可以以同样的方式行事，但更容易编辑和每种格式<div>我们将重视一个id，所以他们知道如何将网页格式的单元格。 因此，在HTML编码格式现在<div id="idname here">“/分区”。 现在，我们设置了单元格的参数相匹配的身份证名字，这里面去<head>标签。
开始它关闭，设置背景颜色和图像。 对于这一个，我决定使用
这是设在http://urbanm.net/blog/bg.jpg，对这个CSS编码
身体（
背景图像：网址（http://urbanm.net/blog/bg.jpg）;
背景重复：重复- x;
背景颜色：＃010066;
）
这是什么做的是设置任何的HTML编码的一面，是与的<Body>有背景图片横向重复自我，直到它填充了整个浏览器，背景图像匹配的梯度，在我们的形象，我们提出的底部，因此，它已顺利移交。
你应该像本事
现在我们担心网站的实际内容。 我通常保留一切的中心对齐，所以你必须在你的中心对齐<body>元素一切。您可以添加<center>后的<Body>。 所以，现在你的身体的HTML应该像如下：
的<Body>
<center>
“/中心”
“/体”
时间把我们的网站上的旗帜。 我们要创造的单元格将举行的旗帜，与乌拉圭回合在<center>标签允许进入放置一个<div id="banner">“/分区”有我们的第一个单元格。 如果没有设置参数，标有“旗帜”永远不会出现，所以我们的ID必须设置此参数与CSS细胞。 我将用我的旗帜下图。
＃旗帜（
背景图像：网址（http://urbanm.net/blog/banner.png）;
高度：200px;
宽度：800px;
）
以上是什么意思是，任何HTML对象具有的旗帜ID标签将有上述背景图片，并且还将有高度和旗帜的形象，恰好是由800px 200px的宽度。 我们的网站现在正在加快，现在应该犹如此事情。
现在，我想一般在导航栏上，但我会讨论这部分本教程2步。
跳过导航栏上，我们要讨论的内容框定所有的信息。 您的图片时，请记住，你将在3个不同的剪接的地方，顶部的一部分，其中将包含它的头对我来说，我是圆边风扇等。 第二届剪接你将有会的内容将图像垂直重演，为了填写您所填写的所有信息空间。 第三届剪接是页脚，再次我是一个边缘的圆形风扇。 下面是三个图像我为这部分使用。 头 - 内容中继器 - 注脚 。
当它被放在一起它的所有形式的此框。现在我们要建立的HTML代码，以便它能够在图像中形成正确的。 我们将使用4个细胞，形成我们的内容框。 四个第一是要就其他三个细胞它里面。 本单元的目的，你会明白稍后更多的理解，但基本上会允许你改变了你将作出不同的网页，如果需要的文本样式。 因此让我们开始的HTML，这是新的HTML。
的<Body>
<center>
<div id="banner">“/分区”
<div id="indexcontent">
<div id="header">“/分区”
<div id="contentrepeater">“/分区”
<div id="footer">“/分区”
“/分区”
“/中心”
“/体”
现在我们成立的细胞像我们想要的，但现在我们必须为每个标签的ID参数。 这应该是这个样子。
＃indexcontent（
显示：块;
宽度：600px;
）
＃indexcontent＃头（
身高：35px;
宽度：600px;
背景图像：网址（http://urbanm.net/blog/header.png）;
背景重复：不重复;
）
＃indexcontent＃contentbg（
背景图像：网址（http://urbanm.net/blog/content.png）;
背景重复：重复，辎;
高度：150px;
宽度：600px;
）
＃indexcontent＃页脚（
背景图像：网址（http://urbanm.net/blog/footer.png）;
背景重复：不重复;
身高：37px;
宽度：600px;
）
哇-这是一个很大的做一步吗？ 让我解释给你，并帮您解决。
以＃indexcontent开始，我们把它的宽度为600px，而这正是我的内容框图像。 我们没有设置高度，以便它可以展开和折叠取决于有多少内容，您在细胞里面它。 我们设置显示封锁，使细胞将扩大其高度，正确的像素数量。
接下来，我们得到了＃indexcontent＃头，尺寸设置以匹配图像的大小，我们有背景图片设置到正确的位置。
比我们＃indexcontent＃contentbg，我们有正确的形象，我们的背景图像选择，我们需要设置重复，辎，以便它重演垂直以适应单元尺寸。 我拿起了它的高度150px，只有这样你们可以看到重复的效果，你会改变这种办法适用于所有的内容在其中你。
最后，我们＃＃indexcontent页脚，它只是作为头相同。
现在你应该有你的基本布局为您创建完成了！
请继续关注第2部分，解释如何使导航栏。
评论
3回应“走出去 ， 从表格 。 （第1部分-创建你的布局）“
08年10月24日由布雷迪Feiereisel · 3评论
行，我们将在这里完成您的Photoshop正在布局和映射与CSS出来-股利的，而不是Photoshop的默认HTML， -表。 为了能够成功在本教程中你必须知道的HTML编码，和一些CSS经验也有帮助。
可以让出发点基本知识。 而不是使用HTML和使用表单元来保存我们的背景图像，形成布局，我们将使用<div>氏可以以同样的方式行事，但更容易编辑和每种格式<div>我们将重视一个id，所以他们知道如何将网页格式的单元格。 因此，在HTML编码格式现在<div id="idname here">“/分区”。 现在，我们设置了单元格的参数相匹配的身份证名字，这里面去<head>标签。
开始它关闭，设置背景颜色和图像。 对于这一个，我决定使用
这是设在http://urbanm.net/blog/bg.jpg，对这个CSS编码
身体（
背景图像：网址（http://urbanm.net/blog/bg.jpg）;
背景重复：重复- x;
背景颜色：＃010066;
）
这是什么做的是设置任何的HTML编码的一面，是与的<Body>有背景图片横向重复自我，直到它填充了整个浏览器，背景图像匹配的梯度，在我们的形象，我们提出的底部，因此，它已顺利移交。
你应该像本事
现在我们担心网站的实际内容。 我通常保留一切的中心对齐，所以你必须在你的中心对齐<body>元素一切。您可以添加<center>后的<Body>。 所以，现在你的身体的HTML应该像如下：
的<Body>
<center>
“/中心”
“/体”
时间把我们的网站上的旗帜。 我们要创造的单元格将举行的旗帜，与乌拉圭回合在<center>标签允许进入放置一个<div id="banner">“/分区”有我们的第一个单元格。 如果没有设置参数，标有“旗帜”永远不会出现，所以我们的ID必须设置此参数与CSS细胞。 我将用我的旗帜下图。
＃旗帜（
背景图像：网址（http://urbanm.net/blog/banner.png）;
高度：200px;
宽度：800px;
）
以上是什么意思是，任何HTML对象具有的旗帜ID标签将有上述背景图片，并且还将有高度和旗帜的形象，恰好是由800px 200px的宽度。 我们的网站现在正在加快，现在应该犹如此事情。
现在，我想一般在导航栏上，但我会讨论这部分本教程2步。
跳过导航栏上，我们要讨论的内容框定所有的信息。 您的图片时，请记住，你将在3个不同的剪接的地方，顶部的一部分，其中将包含它的头对我来说，我是圆边风扇等。 第二届剪接你将有会的内容将图像垂直重演，为了填写您所填写的所有信息空间。 第三届剪接是页脚，再次我是一个边缘的圆形风扇。 下面是三个图像我为这部分使用。 头 - 内容中继器 - 注脚 。
当它被放在一起它的所有形式的此框。现在我们要建立的HTML代码，以便它能够在图像中形成正确的。 我们将使用4个细胞，形成我们的内容框。 四个第一是要就其他三个细胞它里面。 本单元的目的，你会明白稍后更多的理解，但基本上会允许你改变了你将作出不同的网页，如果需要的文本样式。 因此让我们开始的HTML，这是新的HTML。
的<Body>
<center>
<div id="banner">“/分区”
<div id="indexcontent">
<div id="header">“/分区”
<div id="contentrepeater">“/分区”
<div id="footer">“/分区”
“/分区”
“/中心”
“/体”
现在我们成立的细胞像我们想要的，但现在我们必须为每个标签的ID参数。 这应该是这个样子。
＃indexcontent（
显示：块;
宽度：600px;
）
＃indexcontent＃头（
身高：35px;
宽度：600px;
背景图像：网址（http://urbanm.net/blog/header.png）;
背景重复：不重复;
）
＃indexcontent＃contentbg（
背景图像：网址（http://urbanm.net/blog/content.png）;
背景重复：重复，辎;
高度：150px;
宽度：600px;
）
＃indexcontent＃页脚（
背景图像：网址（http://urbanm.net/blog/footer.png）;
背景重复：不重复;
身高：37px;
宽度：600px;
）
哇-这是一个很大的做一步吗？ 让我解释给你，并帮您解决。
以＃indexcontent开始，我们把它的宽度为600px，而这正是我的内容框图像。 我们没有设置高度，以便它可以展开和折叠取决于有多少内容，您在细胞里面它。 我们设置显示封锁，使细胞将扩大其高度，正确的像素数量。
接下来，我们得到了＃indexcontent＃头，尺寸设置以匹配图像的大小，我们有背景图片设置到正确的位置。
比我们＃indexcontent＃contentbg，我们有正确的形象，我们的背景图像选择，我们需要设置重复，辎，以便它重演垂直以适应单元尺寸。 我拿起了它的高度150px，只有这样你们可以看到重复的效果，你会改变这种办法适用于所有的内容在其中你。
最后，我们＃＃indexcontent页脚，它只是作为头相同。
现在你应该有你的基本布局为您创建完成了！
请继续关注第2部分，解释如何使导航栏。
人们是否仍使用标签？ 为什么不使用CSS的中心内容？
^这应该是该中心的标记。
该职位是否有意义，我...但如果你尝试检查在连接我的一些视频教程这个CSS ...为确保您将学习更好地利用它... ...