这篇文章最初发表于2008年
介绍的技巧和技术可能过时。

从最近的教程继续,在Adobe Photoshop中创建一个充满活力的博客设计beplay足球,我们现在将研究如何将这个概念应用到XHTML和CSS构建的实际网页中。通过从photoshop导出图像并对页面进行编码,我们将生成beplay足球整个博客设计的工作示例。

在最后最后一个教程,我们创建了一个完整的头版模型,包括整体布局,颜色和设计,建议的排版和样本内容。现在是时候回顾一下这个概念,计划一下哪些元素可以在纯XHTML和CSS中创建,哪些部分需要使用图像。

要导出的第一个元素是大背景。所有其他层都是隐藏的,通过“保存为Web和设备”选项导出大量文档。
从第一印象来看,很容易认为这样一个大的图片对于网站设计来说太大了,但实际上,经过优化的jpeg压缩后,结果只有30kb,在图像质量和总文件重量之间进行平衡。

然后导出主要内容区域,制作另一个大的选择,包括整个中心面板以及阴影和透明边框效果等视觉效果。由于透明度的复杂使用,上边栏也包含在该区域中。

允许网页垂直展开,将导出较低内容区域的一部分,该部分将垂直重复。

要完成网页布局,将导出页脚区域,围绕图像进行选择,以匹配整体宽度并包括图形的灰色渐变。

为了导出侧边栏,主要内容区域暂时垂直拉伸。

因为这个概念使用了单独的侧边栏部分,所以图形将使用两个图像——一个足够长的上部分,可以容纳比实际情况下更多的部分,以及一个小的底部部分,将长部分裁剪成单独的面板。这与菜单上使用的滑动门技术类似。

长卡瓦出口,包括所选内容中边框的透明度效果。

接下来是完成侧边栏部分的薄底部部分。

从菜单背景中导出一个单张,这是另一个可以根据菜单文本的长度水平重复的图像。利用PNG文件的透明度,可以将菜单覆盖在背景的不同颜色上。

概念上的各个贴子区域使用与侧边栏相同的边框效果,但由于它们不与背景重叠,也不具有任何复杂的透明度,因此它们将纯粹由CSS生成。

但是,内容面板的下部使用了轻微的蓝色渐变,这可以简单地导出为一个薄条,将在水平方向重复。

小小的评论泡沫,箭头,然后,RSS和电子邮件图标与博客徽标一起单独导出。

完整的概念现在被分割成单独的图像,共13张图片将构成该页面,其中五个是特定于布局的。组合图像的完整大小为95kb,即使是少数仍然拨号上网的用户,在浏览网页时也会很快下载。

HTML网页被设置为包含布局的结构。一个单独的CSS样式表与文档链接,文档将包含设计的可视化规则。

添加了一个ID为container的DIV,该DIV将允许内容居中,其中一个背景将被固定。记住,我们还有一个垂直重复的薄背景图像,在CSS3得到更广泛的支持之前,需要使用第二个DIV来放置此图像。
h1标记用于说明网站名称,也将是标志的基础。上部导航和RSS/电子邮件订阅选项以无序列表的形式列出。

然后编写页面布局的CSS,从重置开始删除任何浏览器默认值。大背景图像附加到正文和全局字体样式设置。容器,内容和页脚分隔也用适当的背景图像设置样式。

继续使用CSS样式,然后添加单个元素的设计代码,设置标题1和无序列表以显示适当的图像和颜色。

有了这个初始编码,可以在浏览器中预览HTML,到目前为止,布局显示在页面的中心位置,徽标和导航已就位。

接下来是充实文章片段,如前所述,在柱子周围使用一个容器将使面板具有样式,而不是使用图像。

页面此部分的CSS样式为面板添加颜色和边框,并设置文章标题和段落文本的样式。由于网站与Web开发相关,大多数观众可能是火狐用户,这意味着我们可以使用moz border radius按照最初的概念在面板上显示圆角。对于其他浏览器,这只会降低到一个正方形的角。

在浏览器中测试这个,然后显示这个样式,演示如何使用CSS背景色和边框从Photoshop中重新创建原始效果。beplay足球

然后,侧边栏的HTML结构被布置出来,在侧边栏部分使用容器允许使用两个背景图像,这些背景图像构成滑动门技术,用于扩展侧边栏内容。

增加了更多的CSS样式来操作HTML元素,定制尺码,颜色和排版。

然后可以在浏览器中看到侧边栏样式,请注意,边栏部分使用的长图像是如何根据内容的长度而缩短的。

下一步是快速返回到文章片段并添加阅读更多选项和评论信息。

然后添加这些元素的样式,在两个段落上使用特定的类可以使注释气泡和阅读更多的箭头图标作为背景图像添加。

然后面板就完成了,可以在浏览器中查看,薄背景图像的重复给人的印象是文本设置在一个实心面板上。

总体布局完成,尽管仍处于概念阶段,但现在可以在浏览器中查看页面,以了解其在不同分辨率下的显示方式,以及模拟链接的悬停效果。

一如既往地与网页设计一旦站点被创建,工作就永远不会停止。在Firefox中测试,歌剧和游猎没有问题,然而,Internet Explorer有其他的意图。

对CSS样式的一些修改很快解决了问题。将导航样式从一个内联块更改为它的默认块格式,并调整浮动块完成了任务。

认购期权似乎正面临着IE中常见的逐步问题,只需将display:inline添加到列表项中即可修复此问题。

实施这些更改后,网站很快恢复正常,并准备好作为WordPress主题进行构建,如果需要更多的样式来覆盖生成的编码,当然,带有注释区域的内部页面。

如果能更详细地解释每一行代码就更好了,这篇文章会一直持续下去,很可能会重复出现。希望通过查看完整的HTML和CSS,您能够看到每个元素是如何构造的。退房完成的网页.

在Pinterest上共享
没有图像。
51评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

51评论

  1. 谢谢你的评论,我很高兴这篇文章能帮上忙!

    同时也要感谢菲茨帮助解决埃莉的问题,设计界如何与他人分享他们的知识真是太好了。

    制作一个WordPress主题可能是将来某个时候的一篇文章,我得回去拍几张制作第3部分的过程截图。

  2. 文章真不错!!!!

    是否有机会发布图像的源材料?

    作为一名技术网站开发人员,我能理解的Web部件。但我对photoshop的设计不太了beplay足球解。

    当做,

    作记号

  3. 多好啊!自从上周我发现你的网站以来,我一直非常喜欢它,现在我更喜欢它了。

    关于一个细节的问题是:当浏览器窗口调整大小时,什么特定变量使背景标题图像与内容保持一致?

    知道我的意思吗?

  4. 伙计,我现在正在学习CSS。我来自一个基于表的设计结构。这是再好不过的时候了。这是精神装瓶…它瓶子我的思想。

  5. 艾利

    我想我知道你的问题是什么意思。

    主体的背景设置为“中心顶部”所以这将通过浏览器调整大小,因为它保持在中心。

    此外,content div还将绿色渐变背景设置为“top”因为包含的DIV居中,所以“Margin:0 Auto”它也将在浏览器中居中,与宽度无关。

    希望这有帮助。

  6. 非常感谢菲茨!这正是我需要的帮助。我很难找到速记“顶尖中锋”有任何效果,但一旦我把它们分开,它就完美地工作了。:)

  7. 很棒的指南(第1部分和第2部分)。你打算继续进行下一步,将博客系统的结构融入其中吗?比如让WordPress/Blogger等与这个布局一起工作?

    继续精彩的工作。

  8. 克里斯,我注意到您使用空的DIV方法来清除浮动。我也曾经,令人沮丧地,在我所有的设计中使用相同的方法来清除那些讨厌的浮动。但是,我一直讨厌只为演示文稿添加标记,尤其是一个空的分区。我现在使用的是使用伪类的ClearFloat方法,之后,它也会带来一系列的挫折。只是想知道你在这两种方法中的立场。

  9. @copy112多亏了这个伟大的小脚本的css技巧:css-tricks.com/ie-6-阻止程序-脚本/

    @埃里克对我来说,clear-div方法已经成为常规方法,我有一段时间没有考虑太多了。我要进一步研究:术后,以前,与旧浏览器的兼容性让我感到厌烦,但现在像IE6这样的浏览器正在整个行业逐步淘汰,这可能是一个不错的选择。谢谢提醒!

  10. 另一种让firefox包含float的方法是在包含元素上设置隐藏的溢出,这将强制火狐在不影响IE的情况下正确显示浮动。

    例如:

    火狐不会正确地包含浮动,所以这样做:

    .产品标题{
    溢出:隐藏;
    }

    然后浮球按预期工作。

    希望这有帮助

    马特

  11. 这是一个很好的教程,可以提供很大的帮助!!谢谢:

    我有个问题,本教程是否适用于blogspot XML模板?如果没有,我如何使其适用?

评论现已关闭