仓酷云

标题: 来谈谈：PSD模板转XHTML/CSS文档教程 [打印本页]

作者: 谁可相欹 时间: 2015-1-15 23:15
标题: 来谈谈：PSD模板转XHTML/CSS文档教程
一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.
继上篇”碳纤维作风的拔出式导航菜单“，RichardCarpenter把菜单图片转化为CSS/HTML文档了。我们就一同接着进修吧！
检察CSS/HTML完全版，请点击这里：

布署文件

在我们入手下手切割图片之前，先在当地web服务器上布署文件，创立文件夹，在新建的文件夹中新建空缺HTML文件”index.html”，空缺CSS文件”styles.css”，styles.css放在另外一个文件夹”stylesheets”中，最初再新建文件夹”images”寄存图片。

创立HTML元素

用代码编纂器翻开html文件，在标签”BODY”内新建DIV，设置ID属性为”container”，此DIV将是一切元素的容器，代码以下：

在”container“DIV内创立别的一个DIV，ID属性为”nav”，是包括一切导航元素的容器，代码以下：

在”nav”DIV内创立一个复杂的UL无序列表，设置UL的class属性为”navigation”，每一个列表元素（LI）也设置分歧的class属性，依据class属性来设置LI的款式。代码以下：

以上是次要的HTML代码，接上去入手下手支解导航图片。

网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.

筹办导航图片

不论你相不信任，我们只必要一张年夜图片，出现一般和激活的形态，然后巧用CSS改动背景图片地位，这类手艺称为”款式表贴图定位（CSSSprites）“。
这么cool的手艺的目标就是经由过程整合图片（只需加载一次图片，在激活形态下运转也是一般的），削减对服务器的哀求次数，进步页面加载速率。全部图片巨细是80kb。图片以下：

在photoshop中翻开PSD文件，拔取”矩形选框”工具，选中全部导航。

然后往往菜单”图象>裁剪”，裁剪后，你将注重到画布变短了，以是要增添画布高度，记着以后画布的高度，乘以2，画布高度将是以后画布的一倍。我的179px，增添一倍后是358px，往往菜单”图象>画布巨细”。以下图举行设置：

效果以下：

网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.

复制导航菜单

在复制之前，移除激活形态效果。

选择一切导航图层并举行复制，选中复制的图层，垂直往下移，位于原始图片的正下方，包管两图之间没有漏洞。以下图所示：

上方的导航是扫瞄器一加载的一般形态，下方的是鼠标激活的形态，以是要给下方的每一个按钮增添激活的效果，在此过程当中不要挪动按钮笔墨和球体。扫瞄器会由于一小点的挪动而得到原本的效果。

在保留图片之前，移除背景图层，如许两个导航的背景层是通明的，把图片”navigation.png”保留到文件夹”images”中。同时我们还要保留一张拉丝金属背景图”bg.gif”到”images”中。

网页制造poluoluo文章简介：碳纤维作风的拔出式导航菜单:HTML代码.

CSS款式设置

翻开”styles.css”，入手下手编纂HTML元素body和containerDIV的款式，代码以下：

关于body，只是复杂的增添背景图片，偏重复呈现。关于container，设置margin为auto，是能让导航图片居中显现，宽度恰是导航图片的宽度。
接上去设置navDIV的款式，代码以下：

我们必需意想到navDIV的高度和宽度都是流动的，恰是导航图片的高度和宽度，并且文本要缩进到-9999px，如许是为了埋没文本。
接上去设置每一个无序列表LI的款式：

背景图片都是一样的，可是宽度和地位纷歧样。宽度能够在photoshop中丈量出来，以下所示：

最初设置LI元素在激活形态下的CSS款式：一样也是要调剂背景图的地位。

好了，关于代码就写在这了。固然另有别的体例来完成这类效果，必要列位多多理论！
</p>
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.

作者: 活着的死人 时间: 2015-1-17 21:09
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 再见西城 时间: 2015-1-24 17:41
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 再现理想 时间: 2015-2-2 12:43
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 若天明 时间: 2015-2-7 21:22
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 分手快乐 时间: 2015-2-23 12:30
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 只想知道 时间: 2015-3-7 09:12
可以使用 CSS 检查工具进行设计。

作者: 愤怒的大鸟 时间: 2015-3-14 22:28
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 蒙在股里 时间: 2015-3-21 17:14
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

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