来谈谈: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那段冗长的文档类型声明. Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。 经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅. 是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。 可以使用 CSS 检查工具进行设计。 直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页:
[1]