从头开始编写一个简洁明了的网页设计

在这个全面和循序渐进的网页开发教程中，您将学习如何将一个专业的网页布局设计的Photoshop模型转换为一个符合标准的XHTML/CSS模板。这是后续教程您要求《六改版》的读者。要学习如何创建Photoshop网页布局模型，请前往名为如何在Photoshop中创建一个说明性的网页设计．

现场演示

点击下面的图片查看现场演示我们将要建造的东西。

下载源文件，并使用它们作为你的网站模板

我们将本教程的源文件发布在GNU通用公共许可证我们只要求您保留源代码中的版权信息(在设计中不可见)。如果你对阅读教程没兴趣，可以用于您的网站或网页模板．所以这篇文章是一个教程而且免费的东西。

• illustrative_web_design_template.zip(ZIP档案，0.98 MB)

让我们开始表演吧，好吗?确保你手边有一壶咖啡或你最喜欢的含咖啡因的饮料，因为你要长途旅行!

设置我们的工作区域和文件

1< / span >在桌面上创建一个名为网页设计布局．

2< / span >在网页设计布局文件夹中，创建另一个名为图片．3.< / span >使用您最喜欢的代码编辑器创建一个新的空白HTML文件，并将其保存在您的网页设计布局文件夹中，文件名为index . html．4< / span >创建一个空白的CSS文件称为styles.css然后保存到网页设计布局文件夹中。

现在您应该有了模板的理想工作设置。

设置HTML文件

5< / span >打开你的index . html档案和你的styles.css在代码编辑器中文件。6< / span >在HTML文件的顶部，找到<标题>标签。

在<标题>标签，添加你的网站标题。输入的信息<标题>标记将确定在浏览器窗口中显示什么。7< / span >你的下面<标题>标记，您需要使用下面的代码链接到您的样式表。

 .

现在我们可以开始为我们的布局模拟一些HTML代码。有很多方法可以将Photoshop文件(PSD)转换为工作模板。有些人先切片所有的图像，然后开始编码模板，有些人更喜欢编码，然后切片。

我发现最好从标题开始，沿着设计的方向进行编码和切片。

模拟标题

8< / span >我们将从一个ID为的简单容器div开始#容器．使用下面的HTML标记。

< div id = "容器" > < / div >

9< / span >在#容器Div，我们再加一个Div#头．

 
 
 
 .

准备头片

10< / span >现在我们有了一个基本的基础，我们可以切片我们的背景图像和我们的头部图像。打开PSD文件叫做illustrative_web_design_psd.psd在Adobe Photoshop中免费提供下载第一部分如何在Photoshop中创建一个说明性的网页设计。

从那个教程下载源文件，然后回到这里。11< / span >一旦PSD文件在Photoshop中打开，通过选择窗口菜单，确保图层面板打开，并确保图层被选中(或者，F7切换图层面板)。12< / span >关闭所有图层的可见性，如下图所示。

13< / span >选择矩形选框工具(M)，在头部区域周围画一个选区，如下图所示;别忘了写2 px背景(如图所示)。14< / span >选择完成后，转到Image > Crop。重要的:不要保存你的PSD文件!

15< / span >通过选择file > Save for web & Devices (Alt + Shift + Ctrl + S)将裁剪好的文件保存为web格式header.gif在你的图片文件夹里。16< / span >关闭PSD文件，当提示保存时，选择“没有”。17< / span >现在，打开header.gif在Photoshop。18< / span >使用缩放工具(Z)，放大到插图中山结束的右侧。你会注意到山有一个暗阴影的区域，里面的阴影是添加的。

19< / span >我们需要小心地擦除阴影部分，使其与山的颜色相匹配。使用矩形选框工具(M)在header.gif上做一个选区，如下图所示。20.< / span >一旦你做出了选择，我们将对选择进行转换。

选择Edit > Free Transform (Ctrl + T)对选区进行自由变换。选择右中间的变换控件并向右边缘拖动。您应该得到如下图所示的内容。

21< / span >重新保存你的文件(header.gif)，点击file > Save for Web & Devices (Alt + Shift + Ctrl + S)，在Photoshop中打开header.gif。22< / span >使用矩形选框工具(M)从头部区域的顶部到底部进行选择，宽度与山的平坦部分相同。

以下图为例。23< / span >选择完成后，使用image > crop再次裁剪图像。24< / span >保存裁剪图像为bg.gif使用文件>保存为Web和设备(Alt + Shift + Ctrl + S)。

重置所有元素的边距和填充

25< / span >回到代码编辑器，打开它styles.css．26< / span >在我们开始添加我们的标题样式之前，我们需要添加一个小的CSS重置来重置所有页面元素的边距和填充。有许多方法可以做到这一点，但为了简洁起见，我们选择使用以下方法。

但是，如果您想了解更多关于重置样式的更好方法，请阅读题为“CSS技巧#1:用CSS Reset重置你的样式”。CSS重置看起来像这样:

* {margin: 0;填充:0;｝

主体背景的样式

一旦在styles.css文件的顶部添加了CSS重置，我们就可以开始为HTML文档的主体设置样式了。27< / span >的bg.gif文件将被合并为CSS背景，它将沿着x轴水平重复。然后，我们通过添加与我们的设计背景相匹配的背景色来完成主体样式。

我们也可以通过样式化段落(< p >)标记。检查下面的代码块。

正文{背景:# edededurl(图片/bg.gif）repeat-x；｝p{颜色:#999;填充:0;Margin: 10px 0;Arial, Helvetica, sans-serif;｝

将页面内容居中

28< / span >设计模型的宽度为950 px．

样式的样式可以设置页面模板的宽度并在浏览器中居中#容器Div使用margin:auto技术并为其分配一个950 px宽度属性。

#{容器保证金:汽车;宽度:950 px;｝

添加说明标题背景图像

29< / span >在创建样式之前#头Div中，我们必须首先确定标题图像的高度。如果你使用的是Windows Vista，你可以简单地点击图像文件，它会在状态栏中显示尺寸。

请随意使用自己的方法来找出图像的高度。从下图可以看出，高度为302 px．30.< / span >我们可以开始设计我们的#头Div的固定宽度950 px和一个固定的高度302 px．

我们还将图像向左浮动。我们加入header.gif图像作为背景。我们将background-repeat属性设置为"没有重演来阻止我们的头部图像水平重复，这是大多数web浏览器的默认行为。

参见下面的代码块。

#头{高度:302 px；宽度:950 px；浮:左;背景:url(/图片header.gif）没有重演；｝

31< / span >测试index . html通过在web浏览器中打开它，您应该会看到如下图所示的内容。

标识(网站标题)切片

我们不能真正插入我们的标志/网站标题到我们的模板作为纯文本，因为它包含太多的图层样式在Photoshop中。

我们别无选择，只能将其作为图像包含。32< / span >首先，打开你的PSD档案(illustrative_web_design_psd.psd再一次)。33< / span >使用矩形选框工具(M)，在你的logo/网站标题周围做一个选区。

利用下图作为如何进行选择的指导方针。34< / span >一旦你做出了选择，在图层面板中，关闭所有图层的可见性，除了与logo/网站标题相关的图层。背景应该是透明的。

35< / span >选择图像>裁剪裁剪画布到只有徽标/网站标题。36< / span >将裁剪后的图像保存为PNG文件。使用文件>保存为Web和设备(Alt + Shift + Ctrl + S)，并保存其名称logo.png进入你的图片文件夹。

将logo添加到HTML文档中

37< / span >转到HTML文档，添加一个名为#标志作为我们的孩子#头div。38< / span >在#标志Div，添加一个<标题>元素。39< / span >在<标题>元素，添加一个超链接(<一>)加上你的网站名称。

我们使用an的原因<标题>标签而不是插入图像是因为我们要使用CSS背景图像文本替换技术。你可以在stopdesign网站上的一篇文章中阅读到这种技术使用背景图像代替文字．以下是上述步骤的代码块:

<标题>< a href = " # " >您的网站名称 
 

#{标志margin-top: 60 px;｝

#logo h1{显示:块;浮:左;宽度:269 px；高度:45 px；indent:-9999 px；｝

#logo h1 a{显示:块；宽度:100％；高度:100％；大纲:没有一个；背景:url(/图片logo.png）没有重演0 0;｝

< div id = "导航"> 
家< / > < /李> <李> < a href = " # " >服务< / > < /李> <李> < a href = " # " >组合< / > < /李> <李> < a href = " # " >客户< / > < /李> <李> < a href = " # " >推荐< / > < /李> <李> < a href = " # " >联系我们< / > < /李> < / ul > < ul类= "电话号码> 
免费报价- 0800 123 456