在这一步一步的网页开发教程中,您将学习如何将一个美丽的和引人注目的垃圾主题网页布局——在上一个教程中从Photoshop创建的——转换成一个工作的HTML和CSS模板。这是第二部分分两部分的教程向你展示的系列如何使用Photoshop创建一个垃圾网站设计,然后告诉你如何转换设计使用基于标准的HTML和CSS模拟成一个功能完整的网页。
最终结果
下面,你将看到我们将要一起创建的预览。点击图片可以看到现场演示HTML/CSS网页布局。
下载源文件
本教程中的源文件是在Gnu通用公共许可证这样你就可以在自己的项目中学习和/或使用它们。
- grunge-web-design-from-scratch.zip(ZIP档案,15.2 MB)
设置文件
1在您的计算机上创建一个名为枯燥乏味的布局.这将包含所有与布局相关的文件。2在grunge布局文件夹中,创建另一个名为图片;这将包含我们所有的模板图像。
3.使用您最喜欢的代码编辑器,创建一个空白的HTML和CSS文档,然后将HTML文档保存为index . htmlCSS文档为styles.css在垃圾布局文件夹里。
设计背景的工作
背景是布局中最棘手的部分。因为它的设计方式,网站将不得不左对齐。另外,由于后台如此之大,文件大小对于56k调制解调器用户来说可能是个大问题。
4首先,打开本教程下载时附带的ps图象处理软件(PSD)文件。它在一个叫做_photoshop_source_file,它叫做grunge-design-from-scratch-psd.5在图层面板(按F7切换图层面板)中,找到所有的背景元素。
元素应该在两个图层组中:bg而且起皱.关闭所有图层的可见性,除了这两个组中的图层。6在整个画布周围创建一个选框(Ctrl + a),然后选择编辑>合并复制(Shift + Ctrl + C)来复制所选区域。
复制到剪贴板后,创建一个新的Photoshop文档,文件>新建(Ctrl + N),并将其粘贴到新文档中。7点击图层面板底部的“添加图层蒙版”图标,为新文档中的背景图像添加图层蒙版。8一旦你添加了图层蒙版,在工具面板中选择渐变工具(G)。
在选项栏中,设置渐变颜色为黑色(#000000)到白色(#FFFFFF),并设置渐变类型为线性渐变.9从画布的右侧向左侧拖动渐变。使用短划。
关于如何实现这一点,请参见下图。10背景现在应该有一个白色的边缘,让我们融入背景。11最后,通过选择文件>保存为Web和设备(Alt + Shift + Ctrl + S)在您的图像文件夹,使用的文件名bg.gif.
切片的标题
12使用矩形选框工具(M),在每个标题以及网站的主要标题周围做一个选择。将每个标题保存在。png格式的透明背景中。用合适的名称将每个标题保存在images文件夹中(参见下图确定本教程中使用的文件名)。
开始HTML标记
13现在我们有了一些图像,可以开始标记一些HTML了。在您最喜欢的源代码编辑器中打开index.html文件和styles.css文件。14在HTML文档中,添加网站标题并使用正常方法链接样式表。
<标题>把手弄脏[…]< /名称><链接的href = "styles.css" Rel ="stylesheet" type="text/css" /> .
15在文档正文(
)中创建一个ID为的div#容器
.
在这个div中,再创建两个div。设置ID
第一个要的属性标题,第二个导航.在title div中,我们将添加一个简单的h1
标签与我们的网站标题。在h1
标签,添加一个链接到您的网站的名称(<一>
).
我们会用到一些CSS背景文字图像替换为我们的冠军。然后使用简单的列表以相同的方式构建导航。注意,主导航中的最后一个列表项有一个特殊的类称为# nodivider
这样,最后一项就不会有垂直分隔符了。
你还会注意到链接的顺序是相反的;这是因为链接将被正确地浮动。
< div id = "容器" ><!——标题开始- - >< div id = "标题" > < h1 > < a href = " # " >弄脏你的手< / > < / h1 > < / div ><!——标题结束- - ><!——导航开始- - >< div id = "导航" > < ul类= " navlinks " > <李> < a href = " # " >与< / > < /李> <李> < a href = " # " >博客< / > < /李> <李> < a href = " # " >工作< / > < /李> <李> < a href = " # " >对< / > < /李> <李类= " nodivider ">home
在下面的图中,您应该可以看到我们网页结构的预览。
重置CSS边距和填充
16现在我们有了基本的HTML结构,可以开始添加一些CSS样式了。我们将从一个简单的margin/padding CSS reset开始,它将margin和padding重置为0。有很多方法重置CSS样式,我们鼓励你需要调查更先进和强大的CSS重置方法.
* {margin: 0px;填充:0 px;}
身体的CSS
17现在,我们将为网页的样式属性编码身体
.我们设置背景色为白色,并添加我们的背景图像(bg.gif).然后我们将背景设置为没有重演
.
最后,背景的位置将是左上角
.
身体{背景:# fffurl (图片/ bg.gif)没有重演左前;font-family: Arial, Helvetica, sans-serif;颜色:# 73360 d;text-align:证明;}
#container div的CSS样式
18容器的CSS类似于后面的代码块。容器将有一个固定的宽度950 px这对于我们将要使用的空间来说应该是足够的。我们赋予容器顶部和左侧空白。
网页布局的位置将是左对齐的,所以我们将容器浮动到左边。
#{容器宽度:950 px;保证金:85 px0 0120 px;浮:左;}
为网站标题编写CSS代码
19现在,我们将处理网站标题(logo)的CSS。的#标题
Div将有一个固定的宽度82 px和高度的412 px,与我们的设计模型尺寸相匹配。此外,div也会向左浮动。
#标题{高度:82 px;宽度:412 px;浮动:左;}
在title div中,我们有一个h1
标签。
我们实际上不希望显示HTML文本h1
标签的文本,我们通过设置隐藏它文本
属性来-9999 px.
h1 {indent: -9999 px;浮:左;}
我们现在可以设置CSS的背景一个
标签在我们h1
标签到设计模型中的标志。即使文本已经移动到用户显示器的一侧-9999px,链接仍然在那里。我们设置了显示
属性来块,以及添加一个固定宽度的82 px和高度的412 px等于父结点h1
.
实际标题图片(title.png),然后指定为它的背景。
H1 a{显示:块;背景:url (图片/ title.png)无重复左顶部;浮:左;高度:82 px;宽度:412 px;}
切割导航的垂直分离分隔器
20.关于导航,有相当多的风格需要处理,但首先我们需要回到Photoshop,切片我们的小分隔器。21用矩形选框工具(M)在其中一个分隔线周围做一个选区,然后选择编辑>合并复制(Shift + Ctrl + C)。22创建一个新的Photoshop文档,背景透明,文件>新建(Ctrl + N),然后粘贴(Ctrl + V)分割线进去。
23将此新文档保存为PNG文件,文件>保存为web和设备(Alt + Shift + Ctrl + S),文件名为nav_seperator.png在你的图像文件夹。
样式化主导航
24现在,我们来处理导航的CSS。我们首先设置#导航
Div,给它一个固定的宽度538 px和一个固定的高度82 px.固定的高度与我们的导航分隔图像的高度相同。
#navigation {float: left;宽度:538 px;高度:82 px;}
对于导航列表项(李
),我们通过赋值来删除默认项目符号list-style-type
CSS属性没有一个.
我们还将每个链接显示为块元素,然后向右浮动。设置固定的宽度100 px对于每个列表项,它应该为文本提供足够的空间,并在垂直导航分隔符图像的每一边留下适当的空白。然后,我们设置我们的分隔图像作为他们的背景,并将其位置向左。
最后,我们给每个列表项一个最高空白30 px使它们垂直居中。
.navlinks李{list-style-type:没有;显示:块;浮动:正确的;宽度:100 px;text-align:中心;margin-top: 30 px;背景:url (图片/ nav_seperator.png)离开不再重演;}
接下来,我们需要为导航链接的文本设置样式。的文字修饰
CSS属性设置为没有一个这就去掉了每个链接下面的线。我们将文本加粗,并将其转换为大写,以达到视觉效果。
最后,我们尝试遵循设计模型中的字体样式字体大小
的价值16 px而且字母间距
到负值,把字母挤在一起一点。
.navlinks李的{文字修饰:没有;颜色:# 432303;粗细:大胆;大写首字母:;字体大小:16 px;字母间距:2 px;}
下一个样式规则适用于当用户将鼠标悬停在列表项链接上时。我们不想要什么花哨的东西,只是简单的颜色变化。
李.navlinks一:徘徊{颜色:# 902 b03;}
最后,我们编写垂直导航分隔符的样式。HTML代码中的列表项链接(Home)获得一个类.nodivider
这只是简单地删除,这样它就没有一个分割图像在它的左边。
.navlinks李.nodivider{背景图片:没有;}
如果您现在测试web模板,您应该会得到类似这样的结果。
水平分规
25在我们的Photoshop设计模型中,有两到三个大的分隔线贯穿整个布局,将每个内容区域分隔开来。现在我们将把这些东西实现到模板中。首先,切换到Photoshop。
26使用矩形选框工具(M),在其中一个分割线周围做一个选区;选框选择的尺寸应该是950 px通过2 px.要使此选择更加准确,请在“选项”栏中设置风格来固定然后输入950对于宽度和2的高度。27一旦你做出选择,选择编辑>合并拷贝(Shift + Ctrl + C)。
28创建一个新的Photoshop文档,文件>新建(Ctrl + N),并粘贴(Ctrl + V)水平分隔符。29将这个新的Photoshop文档保存为PNG文件,文件>保存为Web和设备(Alt + Shift + Ctrl + S)在images文件夹中,文件名:divider.png.
在网页布局中添加水平分隔线
30.要将分隔符包含到模板中,只需使用类创建空div.divider
.
< div class = "分频器" > < / div >
设计水平分隔潜水器
31控件的背景添加了前面创建的分隔符图像.divider
下潜,向左漂。然后我们应用一个固定的宽度950 px和高度的2 px,和的维数完全一样divider.png.最后,我们添加顶部和底部空白来增加一些空间。
.divider{浮动:左;高度:2 px;宽度:950 px;保证金:30 px030 px0;背景:url (图片/ divider.png)不再重演;}
创建特色区域
32特色区域由三个区组成。首先,我们有一个主div#特色
,其中包含另外两个div。内部#特色
Div,我们有两个Div#选书目
而且#选好的图片
.#选书目
将包含我们的h2
标题。我们的文本内容< p >
标签,在HTML文档中添加自己的内容,本教程使用lorem ipsum虚拟文本。
终于,# featured-iomage
Div将简单地有我们的特色图像在里面。一定要优化你的特色图片因此它减少了页面加载时间。下面是特色区域的HTML标记。
<!——特色区域开始- - >< div id = "特色" ><!——以文本开始- - >< div id = "选书目= " " > < h2类《技术">特色作品scott meyer电影网站
Lorem ipsum dolor sit amet, consectetuer adipiscing elit[…/p>
职责:美术指导[…) < /强> < / p > < / div ><!——以文本结束- - ><!——特色形象开始- - >< div id = "选好的图片“> / < img src = "图像featured_example_image.gif" alt="特色图片" />
编码特色区域CSS
33让我们开始设计特色区域。阅读下面的描述来理解我们的CSS在做什么。的#特色
Div应该向左浮动,并且应该有一个固定的宽度950 px,等于#容器
div。
固定的高度应该与我们的特色图像的高度相同234 px).
#特色{浮动:左;身高:234像素;宽度:950 px;}
的#选书目
Div的高度应与其父Div (#特色
).它被移到左侧,以便显示内联的#选好的图片
我们设置宽度为451 px(#选好的图片
有479 px这将给我们一个20px的沟槽在两个div之间(记住的宽度#特色
是930 px)。
#选书目{浮动:左;高度:234 px;宽度:451 px;}
我们的h2
标签有一个类.featured-work
;这是另一个CSS背景文本图像替换发挥作用的地方(我们将文本缩进到用户显示器的左边,这样就看不到它了)。
固定的宽度和高度与实际图像的尺寸相同。
h2。特色作品{背景:url(图像/featured_work.png)不再重演;高度:35像素;宽度:211像素;indent: -9999 px;margin-bottom: 20 px;}
对于第3级标题,我们对文本进行转换,使每个单词都大写。
H3 {margin-bottom: 10px;字体大小:25 px;首字母:利用;}
的#选好的图片
Div向右浮动,以便它与#《
这个div的宽度是479 px所以我们有一个20px的槽在它和#《
.
#选好的图片{浮:对;宽度:479像素;身高:234 px;}
为了结束我们的特色区域CSS,我们在内部提供图像#选好的图片
背景颜色和一些填充。
#feature -image img {background-color: #ba5009;填充:12 px;}
现在在web浏览器中测试您的工作,应该会得到如下图所示的结果。
编写内容区域的HTML代码
34特色区域下面的内容区域使用两个简单的div进行编码。每个div对每边都是唯一的(.content-box-left
而且.content-box-right
).在每个div中,将有一个h2
标签与一个特定的类分配给他们,以便我们可以执行一些更多的CSS背景图像文本替换。研究下面内容区域的HTML结构。
<!——内容框左侧开始——>< div class = "content-box-left= " " > < h2类关于网站">关于本网站Duis autem vel eum iriure dolor in hendrerit acilisi.[…
Typi non habent claritem insitam;美国东部时间一般legentis[…) < / p > < / div ><!——内容框左端——><!——内容框右开始——>< div class = "content-box-right">
More Work samples
为内容区编写CSS代码
35研究下面的CSS和描述,以理解内容区域所涉及的代码。.content-box-left
而且.content-box-right
有固定的宽度460 px这让一个30 px中间有分隔槽。我们将它们向左和向右浮动,以便它们以相对于彼此的内联方式显示。
.content-box-left{浮动:左;宽度:460 px;}.content-box-right{浮动:正确的;宽度:460 px;}
每一个h2
类(.about-website
而且采样
)有自己的特定背景图像应用到他们,这与我们创建的标题有关,我们从本教程早期的Photoshop设计模型中切割他们。
同样,我们向左侧缩进HTML文本以隐藏它们。
h2.about-website(图片/{背景:urlabout.png)不再重演;高度:28 px;宽度:211 px;indent: -9999 px;margin-bottom: 20 px;} h2采样(图片/{背景:urlsamples.png)不再重演;高度:28 px;宽度:226 px;indent: -9999 px;margin-bottom: 20 px;}
最后,任何图像内.right-content
Div将在它们周围有边界,通过赋予它们来创建5 px两边都有衬垫。
.content-box-right img {background-color: #e7c788;浮:左;填充:5 px;Margin: 0 0 4px;}
在浏览器中测试布局,结果应该如下所示。
向模板添加更多的内容框
36在布局的底部,还有三个内容区域。我们打算用一个(.content-box-small
)。首先,只需在HTML文档中创建三个div,并为它们分配一个类.content-box-small
.
HTML标记看起来像下面的代码块。
<!——箱# 1——>< div class = "content-box-small= " " > < h2类取得联系">Get In Touch电话:820-1892-0129