仓酷云

标题: 带来一篇网页制造实例:将PSD网站模板转换为XHTML+CSS网页 [打印本页]

作者: 再见西城 时间: 2015-1-15 23:32
标题: 带来一篇网页制造实例:将PSD网站模板转换为XHTML+CSS网页
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
网页制造poluoluo文章简介：将小型、古代的产物主页由psd转换成XHTML/CSS模板.
demo

点击上面的图片将会看到本次制造的demo的效果。

入手下手之前

假如你还没有筹办好，我们倡议您浏览完这个教程系列的第一部分:用Photoshop计划一个小型、古代的产物主页，由于第二部分必要第一部分做好了的psd文件。
假如你想跳过第一部分，你能够间接在第一部分中下载源文件，上面将会必要它才干持续。
创立文件布局，筹办文件

1在桌面上创立新的空目次，取名portfolio。
2在portfolio目次上面持续创立images目次用于寄存图片。
3接上去创立两个空文件styles.css和index.html

4用你最喜好的文本编纂器翻开index.html，我将在本教程中利用AdobeDreamweaver。
5在文档的<head>标签到场对styles.css的链接。可使用以下代码：
代码段1

<link[b]href="styles.css"[/b]rel="stylesheet"type="text/css"/>

复制代码

<P>
网页制造poluoluo文章简介：将小型、古代的产物主页由psd转换成XHTML/CSS模板.

页面分区

以下是我们网页模板的基础布局。我们从创立基础分区来入手下手我们的模板转换事情。

6我们将从在扫瞄器中居中、包括全部文档的主容器入手下手（也被称之为外壳（wrapper））。在容器外部内的5个div将构成一个完全的页面：这些div是：#top,
#welcome,#sidebar,#content和#footer。
HTML代码以下：
代码段2

<divid="[b]container[/b]"><divid="[b]top[/b]"></div><divid="[b]welcome[/b]"></div><divid="[b]sidebar[/b]"></div><divid="[b]content[/b]"></div><divid="[b]footer[/b]"></div></div>

复制代码

模板背景切片

7在我们把各个div转成代码之前，我们起首在页面中到场背景。用Photoshop翻开PSD文件，用矩形选框工具（M）选定头部/导航和背景的一点地区；选定的宽度能够只要1px
（由于我们将会在前面利用css来程度反复它）。

8在选定地区的底部，用滴督工具（I）纪录下色采的16进制值。
9选定好以后，点编纂>兼并拷贝，创立一个新Photoshop文件（Ctrl+N），然后将选定地区复制到新文档中。一般新建Photoshop画布长宽是剪切板当选定地区的巨细。假如不是，请确保他
们是分歧的。
10在新Photoshop文档中，点文件>另存为web和设备所用格局（Alt+Shift+Ctrl+S），选择PNG-8格局，保留文件为background.png，保留在images目次下。
<P>
网页制造poluoluo文章简介：将小型、古代的产物主页由psd转换成XHTML/CSS模板.

将背景转成代码

11如今我们已将背景图片从Photoshop中切片出来，我们能够入手下手写代码了。翻开CSS文件（styles.css），然后写进以下代码：
代码段3

[b]*[/b]{[b]margin:0px;padding:0px;border:none;[/b]}body{background-image:url(images/[b]background.png[/b]);background-repeat:[b]repeat-x[/b];background-color:[b]#001b32[/b];font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#c8c8c8;}#container{margin:[b]auto[/b];width:[b]850px[/b];}

复制代码

代码段3的注释

让我们来细心的剖析一下款式代码。
起首我们将一切元素的margin，padding，border的值回零以免跨扫瞄器的兼容性。我们这个用到的是*选择器。
接上去，我们款式化body元素；我们将background.png设置为背景，经由过程repeat-x使它程度反复。一样把背景致设置为深蓝（#001b32）。
最初，我们把#container的margin设置为auto让结构居中，而且设置宽度为850px。
Logo和站点名的切片

12如今我们接着制造模板的logo和站点题目。利用矩形选框工具（M），选定站点的题目和标示文本（以下图为参考）。

13就像处置background.png一样，复制这个地区到新文档，然后保留为title.png放在images目次。
和站点名转换成代码

14我们转到HTML文档中，在#top这个div内里我们创立一个新div，ID为title。
15在#titlediv内里，到场<h1>元从来安排我们的站点名；一样必要创立一个超链接（<a>）链接到站点主页。关于这个模板，我们仅把href属性的值设为#，假如必要在实践中利用这
个模板，你能够用反斜杠（/）来取代#。
HTML代码以下：
代码段4

<divid="[b]top[/b]"><divid="[b]title[/b]">[b]<h1>[/b]<ahref="#"title="YourWebsiteName">YourWebsiteName</a>[b]</h1>[/b]</div></div>

复制代码

16如今我们转向款式表。款式化#top地区元素。代码以下。
代码段5

#top{[b]float:left[/b];width:[b]850px[/b];height:[b]119px[/b];}#title{float:left;width:278px;height:74px;padding-top:45px;}#titleh1{display:block;float:left;width:278px;height:74px;[b]text-indent:-9999px[/b];}#titleh1a{display:block;width:100%;height:100%;background-image:url(images/title.png);background-repeat:no-repeat;background-position:00;}

复制代码

代码段5的注释

让我们来细心剖析一下下面的代码。
起首我们必要将#top浮动到右边，然后给定一个流动的宽度和高度。
宽度应当和#container等宽，850px，高度应当和浅灰色地区等高，119px。

接上去，我们利用一种CSS背景图片交换的手艺利用text-indent办法。我们将#titleh1
内里的笔墨向左缩进-9999px，将笔墨推出了扫瞄器的可视地区。这个手艺关于屏幕浏览器的可会见性和seo都有优点。
导航转换成代码

17在#top内里，#title上面我们创立一个ID为navigation的div。在#navigation内里增添一个无序列表，class值设为nav-links。以下
是#navigation的代码段。
代码段6

<divid="navigation"><ul><li><ahref="#"title="home">home</a></li><li><ahref="#"title="about">about</a></li><li><ahref="#"title="portfolio">portfolio</a></li><li><ahref="#"title="contact">contact</a></li></ul></div>

复制代码

代码段6的注释

给无序列表设定一个nav-links的类次要目次是为了在链接CSS的时分不会影响到页面上的其他无序列表。必要注重的是，最初一个列表项到场borderx2的类，意为“边框乘2”
；由于导航中的列表项都有一个支解线，我们必要给最初一样的摆布都加上一个1px的边框（也就是边框乘2）。
<P>
网页制造poluoluo文章简介：将小型、古代的产物主页由psd转换成XHTML/CSS模板.

悬停唆使器切片

18在给导航到场CSS款式之前，我们得起首把小小的悬停三角形切片。到Photoshop中利用矩形选框工具（M）选定这个三角形，复制通明背景的新文档，保留为images目次下的
nav_hover.png。

导航款式化

19如今该是给导航到场CSS代码的时分了。利用以下代码。
代码段7

.nav-linkslia{[b]float:left[/b];[b]width:120px[/b];[b]height:68px[/b];[b]text-decoration:none[/b];text-transform:capitalize;color:#666666;font-size:12px;text-align:center;padding-top:51px;[b]border-left[/b]-width:1px;[b]border-left[/b]-style:solid;[b]border-left[/b]-color:#cecece;}.nav-linkslia[b]:hover[/b]{color:#00284a;background-image:url(images/[b]nav_hover.png[/b]);background-repeat:no-repeat;background-position:centerbottom;}li.[b]borderx2[/b]{border-right-width:1px;border-right-style:solid;border-right-color:#cecece;}

复制代码

代码段7的注释

起首，为了让列表项挨个的显现，我们将它们向左浮动。然后给他们流动的宽度高度，使他们之前的空间平衡。然后经由过程给text-decoration值none往复失落超链接默许的下划
线。然后给每一个列表项一个1px、灰色的右边框。
然后经由过程:hover伪类来款式化悬停效果。当鼠标悬停时，我们将列表项的背景设为nav_hover.png。
最初办理最初一个列表项右侧没有支解线的成绩，必要给.borderx2类声明一个border属性。
创立接待地区

接待地区会被支解成两个部分，右边(#welcome-text)和右侧(#welcome-image)。

20在index.html的#welcomediv中到场两个新的div，一个ID为welcome-text，一个ID为welcome-image。我们会在切片完成后将两个div添补上内容。
<P>
网页制造poluoluo文章简介：将小型、古代的产物主页由psd转换成XHTML/CSS模板.

接待图片的切片

21转到PSD文件，封闭除有突变效果深蓝背景的其他一切图层（点击图层右边的眼睛图标）。
22利用矩形选框工具（M）选定一个宽度不凌驾850px的矩形，能够经由过程第一部分的设定好的参考线来选定。

23将这个深蓝背景转成web图片content_background.png，放在images目次下。利用一样的办法，封闭除接待图片图层的其他图层，切片蓝点和接待图片（见一下参考）。

新地区的HTML相似以下。
代码段8

<divid="welcome"><divid="welcome-text"></div><divid="welcome-image">[b]<h3>[/b]loremipsumdolor[b]</h3>[/b]<ul><li>Loremipsumdolorsitamet,consectetursitadipiscding...</li><li>Loremipsumdolorsitamet,consectetursitadipiscding...</li><li>Loremipsumdolorsitamet,consectetursitadipiscding...</li></ul></div>

复制代码

经由过程CSS款式化侧边栏

36CSS中到场以下代码
代码段14

#sidebar{float:left;height:209px;width:219px;background-image:url(images/[b]contentbox.png[/b]);background-repeat:no-repeat;padding-top:20px;padding-right:20px;padding-bottom:30px;padding-left:20px;}h3{[b]text-transform:uppercase[/b];color:#ffffff;[b]text-align:center[/b];margin-bottom:20px;font-size:12px;}.sidebar-listli{[b]list-style-type:none[/b];margin-top:10px;padding-bottom:10px;background-image:url(images/[b]divider.png[/b]);background-repeat:[b]repeat-x[/b];background-position:bottom;}

复制代码

代码段14的注释

我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，包管内容居左。一样设定background-image为contentbox.png。
经由过程text-transform将h3笔墨巨细，经由过程text-align让笔墨居中。
最初经由过程list-style-type取值为none往失落.sidebar-list列表项的默许圆点，然后设定background-image为divider.png，程度反复
(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。
内容地区转换为代码

37内容地区绝对复杂，由于只包括了一些段落和题目。在#content层中，到场二级题目(<h2>)，然后经由过程span.heading-color2给第二部分的笔墨增加分歧
的色彩。添补段落能够用loremipsum偶然义文本。HTML代码以下。
代码段15

<divid="[b]content[/b]"><h2>welcometo<span>yourwebsite!</span></h2><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Quisque.</p><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Quisque.</p><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Quisque.</p></div>

复制代码

内容地区款式化

38#content层到场以下代码。
代码段16

#content{float:[b]right[/b];width:550px;text-align:justify;}#contentp{[b]margin-bottom:10px[/b];}

复制代码

代码段16的注释

为了让#content在右侧显现，我们将其向右浮动，然后给定一个流动的宽度。不给定一个流动的高度的缘故原由是我们想经由过程外部文原本把持高度。然后给<p>到场顶部
和底部margin让它们之间留有空间（由于之前我们已将它们都回零了，这步是必需的）。
页脚切片

39就将近停止了，让我们持续！利用矩形选框工具，巨细850px×60px将也叫背景图片选定。

页脚转换成代码

40页脚很恶化换成代码：我们之必要之前创立的#footer。在#footer层中，我们利用<p>到场一些版权笔墨。代码以下：
代码段17

[code]<divid="footer"><p>Copyright

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 海妖 时间: 2015-1-17 23:10
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 分手快乐 时间: 2015-1-25 23:51
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 变相怪杰 时间: 2015-2-10 02:30
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 灵魂腐蚀 时间: 2015-2-28 18:38
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 老尸 时间: 2015-3-10 06:31
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 不帅 时间: 2015-3-17 05:38
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 活着的死人 时间: 2015-3-23 22:48
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

欢迎光临仓酷云 (http://ckuyun.com/)