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

一个漂亮的投资组合网站对于任何设计师来说都是至关重要的,它能立即将他们的作品呈现给潜在的客户或雇主。一个简单的,单页网站可以有效地做到这一点,通过简短介绍显示大标题的三个关键特性。你的工作和联系方法的例子都在一起,非常可浏览的页面。让我们来看一下在photoshop中生成单页公文包的概念,beplay足球在xhtml/css中构建页面,并通过jquery添加一些奇特的功能。

网络杂志

上个月,我很乐意为国际知名度写一篇文章网络杂志,在美国也被称为实用网页设计。文章标题是使用xhtml/css和jquery创建自己的单页公文包网站出现在188期。《网络杂志》的读者们很乐意让这篇文章在blog.spoongraphics上重新发表给那些可能错过了这篇文章的读者。我强烈建议查看网络杂志,抓住他们推特对于一些方便的网页设计技巧和技术。

网络杂志

你的在线投资组合是你向世界介绍自己,展示你的工作和技能的地方。从前,传统的皮革手提箱是向雇主和客户展示你能做什么的标准形式,如今,个人网站是你的主要卖点。当然,你可以使用诸如弗里克越轨行为或者类似于快速简单地收集工作,但我们想在这里看起来很专业,没有什么能比得上你自己手工制作的网站在你的个性化之下更漂亮了。com域名。

个人设计组合

我们希望达到的目标,就是建立一个简单的网站,收集你是谁的重要信息,你做什么,你的工作和联系方法的例子。这些是任何想雇佣设计师的人都需要的关键点。网站也需要看起来漂亮,但不要太当面,因为它会从你的作品中引起人们的关注,所以我们要建立一个干净的,带有细微细节的结构化布局。最后,我们也希望网站能吸引观众的注意力,如果你的网站是一系列工作申请的一部分,我们不想让浏览者在一页又一页的点击中失去兴趣。将站点限制为一个页面有助于快速有效地显示所有信息。
让我们从photoshop模型开始,beplay足球然后继续使用xhtml/css编写代码,最后使用一个很棒的jquery插件完成一些花哨的功能。

准备文件

打开Adobe Photoshop开始工作,beplay足球在1680x1050px处创建新文档。引入指南以突出显示960px宽的区域,以容纳1024×768分辨率监视器。我们不希望任何主要页面元素超出这一点。同时绘制一个基本网格,将页面元素与给予一个美好的,结构外观。

添加一些纹理

用柔和的米色填充文档,然后转到“过滤器>噪波>添加噪波”。输入3%并选中单色选项。粘贴在混凝土纹理中BITTBOX.com.用图层蒙版和软刷将边缘淡出,然后在不透明度为40%时切换到覆盖混合模式。

自我介绍

以网格为指导,用您喜欢的字体输入您的姓名和服务简介。添加非常软的放置阴影,并将混合模式更改为覆盖。通过使名称以更大的尺寸和更强的外观突出,强调视觉层次。

出示货物

从你的作品中挑选一小部分,剪成400x180px的缩略图。在不透明度为10%的情况下添加10px笔划,以将它们混合到设计中。特别注意它们之间的对齐,确保每个图像之间的水平和垂直间隙相同。

接触方法

在观众浏览了你选择的作品之后,他们可能想取得联系或联系。在你的主要社交网络旁边列出你的电子邮件,比如Twitter和Facebook。使用涂鸦图标从上一篇文章开始博客.spoongraphics.co.uk为链接增添趣味。添加一个颜色叠加,以将这些混合到网站颜色方案中。

总体概念

这里我们有我们网站的图形概念,详细说明了我们的计划。在设计上有一种微妙的纹理,以增加一些视觉效果,基于我们品牌的基本配色方案,我们的工作选择和联系方式列表。该休息一下了。

导出背景

我们的理念是将大面积的石头纹理作为设计的一部分,切换所有其他层的可见性,并复制图形的大部分。保存到Web并调整压缩以在文件大小和图像质量之间找到一个快乐的媒介。

导出页面元素

继续剪切文档并导出单个文件。由于在文字上使用了很酷的字体和效果,我们还必须将这些导出为图像。但是,您可以牺牲小的设计特性来支持Web安全的字体样式,甚至是像sifr这样的技术。

使用雪碧优化

在导出图标时,我们可以将这些文件组合成一个sprite图形。依次复制每个图标,并将它们堆叠到新文档中,然后保存到Web。这将原本应该是7个图像请求的数量减少到1个,为了更快的页面加载。

编写XHTML

开始在您选择的编码应用程序中编写XHTML。注意对每个页面元素使用最自然的HTML标记,比如最大标题的h1标签,小标题为h2,投资组合图片和联系方式列表为ul。

用CSS设计

有了相关的HTML标记,可以添加CSS样式以更改代码的外观。首先重置以删除任何特定于浏览器或默认样式。重复的纹理可以附着在身体上,而较大的背景可以与page wrap div一起使用。

布局页面结构

设置容器DIV的特定宽度样式,并添加边距:0 auto;在页面上居中对齐DIV。标题也可以使用背景图像属性设置样式。不要忘记使用-9999px将默认文本移出屏幕。这是一种常用的CSS图像替换技术。

浮动缩略图

默认情况下,无序列表将以丑陋的项目符号点垂直显示,但在CSS的帮助下,好的旧UL可以非常通用。将投资组合缩略图向左浮动,并排放置,然后添加一些填充和边距,以像概念一样将它们隔开。

把雪碧放进去

我们之前制作的图像精灵可以用CSS实现。为页脚ul li a添加任何常规选项(如边距、衬垫,颜色和字体大小,以及添加contact-icons.jpg背景图像和设置为无重复。然后对于每个锚类,使用背景位置规则以适当的图标为目标。

用jquery进行修饰

默认情况下,公文包的图像链接只会在浏览器中打开,但那很无聊!用一些很棒的东西,现成的插件以及jquery框架,我们可以很容易地添加一些好看的效果。下载jquery lightbox包leandroveira.com网站.

复制文件

jquery lightbox作为一个完整的示例下载,选择我们需要的文件,并将它们复制到您自己的项目文件夹中。我们需要jquery.js,jquery.lightbox-0.5.js,jquery.lightbox-0.5.css和5个图像文件。链接HTML文档头部的javascript和css文件。然后,编写jquery脚本以指向项目组合链接。

完成的网站

有了jquery功能,我们的网站应该可以看到。我们有一个简单的单页网站,简短的引言,一个工作实例集,以惊人的动画效果和一系列的联系门户启动。我们的网站是完整的,或者是?…

浏览器测试

在一系列的日常浏览器中查看我们的网站是至关重要的。我们的有效代码在Firefox中可能看起来很好,游猎,Chrome和Opera,但Internet Explorer有时会显示出相当奇怪的问题。IE7看起来不错,但是IE6在页脚链接上显示了典型的“逐步下降”错误。展示:直排到李很快就排序了!

发射时间

个人设计组合

有了一个在各种分辨率和浏览器中正确显示网站的宁静,我们可以继续前进,把我们刚出炉的网站放在现场供全世界观看。查看工作演示,包括一个完整的样式表的注释副本.

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

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

79评论

  1. 我正在努力理解使用ajax/php联系人表单最简单的方法是什么(你知道:你的名字,你的电子邮件,你的信息)在这样的投资组合中。
    不是托管服务,当然。

    建议?

  2. 好极了!一直在找类似的东西。问题:它是否与.swf文件一起工作来展示Flash工作?

    • 您可以使用简单的弹出式或弹出式javascript,简单通常是更好的记住,flash是不可读的谷歌,所以请确保你的标题和alt的flash显示,以显示可访问(尼斯)的一面。

      您也可以使用dhtml或使用css和target=“_blank”打开新页面。很老的学校,但优势是它不会被弹出窗口拦截器阻挡,将其与新页面/选项卡上的javascript调整大小结合起来,您就有了一个简单的显示工作的方法。

      更好的是,你现在的客户只需把你所做工作的形象,并提供一个链接,指向您当前工作所在的实际站点。这就停止了SWF文件的发布。你的客户很高兴,你给了他们一个链接。

  3. 好的,我看到的简单的PHP联系方式是来自CSS技巧的。

    我觉得很完美,要测试…

    TNX!

  4. 真是一个很好很酷的教程。谢谢克里斯,继续努力。干杯sssssss:)

  5. 很好的教程。不过,从一个使用javascript的新手那里快速提问。在lightbox中弹出的标题信息中,您在哪里/如何进行编辑?

  6. blog.spongraphics为什么出现在我的订阅列表中的另一个例子。本教程同时涵盖了4个主题,非常清楚!->1。将设计简化到最低限度以获得最大冲击;2。切片和准备实际使用的photoshop模型;beplay足球三。创建干净的样式表;4。使用现有的javascript库添加一些zing。

    干得好!

  7. 这将有助于说明本教程需要具备编码知识——如果没有这一点,TUT将几乎毫无用处。对不起的,但是“在您选择的编码应用程序中编写XHTML”只是没有为了一个操作方法。

    • XHTML和CSS的两个屏幕截图清楚地显示了如何操作,这只是替换文件路径的一个例子。他没有给XHTML上大师班。这是一个单页的投资组合网站,如果你不知道XHTML,你可能无论如何都不应该有一个。

      大tut BTW.

      - 1
  8. @乔迪·马修斯:

    我没有意识到代码图像是点击的,因为其他人都不是我想检查的,谢谢你指出这一点。这么说之后,支持文件会很有帮助,因为无法从图像复制/粘贴代码,然后再对其进行编辑。

    至于不知道XHTML阻止我建立自己的投资组合网站:我是一个有印刷背景的专业图形设计师,但我不是编码员。很抱歉,我似乎是这里唯一一个不向这家伙吹气的人,但我来这里的目的是想学点东西。如果我的无知冒犯了你,我非常抱歉。

  9. 临时工,临时工报出…报出…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报…报_______

    - 1

评论现已关闭