半个假期已讫，实习尚无着落（实乃不求上进)，诸事无成，只做了个wordpress主题：focusec。还没全部完善，摆在这里，想请各位朋友同学多赐建议，以便改良，不胜感激。 效果图如下，预览站点这里，图片有压缩，难免失真，最好去网站看一真面目。 上图是首页（index.php)，分页(page.php)效果，下图是文章内容效果（singlepage.php)。 制作这个主题源于练笔冲动，目的是让博客阅读体验更好，因此设计伊始就不与广告版面空间。单栏布局借鉴纸媒简洁排版的优点，减少阅读时信息噪声干扰，用色也比较简单。着墨最多处是评论留言区，花时间最多也在此。主要是把评论的内容和评论的相关信息分隔开来，以便浏览。留言表单比较吸引眼光，目的是促进读者多多评论。 虽然给这博客改版积累些小经验，不过对wordpress了解还不够，制作这主题过程中学习了网上很多教程和资料，特别是水煮鱼写的wordpress主题制作教程（推荐有兴趣者阅读）。另外这个focusec主题不用插件实现了分页导航和嵌套评论的功能。 不过问题也有很多，主要在于边栏（sidebar.php)，我把边栏放在底部，这样窗体化就很难设置，现在问题我还没方法解决，请WP达人帮忙指点。还有怎样向官方提交主题上，怎样才能快速高效，也请指教。谢谢。

因为一些原因，让我也参与了学院与深圳大学合办的齐迎大运之页面设计大赛。在这个比赛的rater中，我是最不够资格的，不过我也已尽我所能把这工作做好。比赛的作品我都写下详细的点评，现在把个人的看法整理一下，希望能给选手交代，也给下一次的比赛点建议吧（希望这比赛还能继续）。详细作品请点这里。 评分标准是按内容，美工，创意来定优胜的，所以下面我就这三个方面说一下。 内容:什么是页面？个人觉得页面就是信息的载体，就像纸的作用一样。最好的页面应该是可以让用户最舒服地接受所展示的信息的页面，很多报刊杂志的排版更重于文字排版，因为文字是纸媒最重要的信息，图片只是起着辅助阅读的作用，便于读者理解。这次比赛我觉得很多作品在这方面上做得不是很好。因为大运会的信息量会比较大，更新频繁会比较高，很多参赛者为了追求界面的美观，采用flash来布局和展示大量的信息，而这些不是flash的强项。另外在设计排版时，有一些作品展示信息的地方不够大，这样本来可以按排在一个页面的内容会变成好几个页面。用户如果在一个网站中翻了好几个页面都找不到所需的信息，那么这个网站也会很快被用户放弃。 另外说到可行性上，主要是技术实现难度上。不少作品缺少这些方面的考虑，不过这些要求有点高，因为很多选手是更多把这个比赛只当作是界面比赛，技术上的原因可以不用考虑。有一些选手是大三大二的选手，我还是觉得需要有这方面的意识，因为举办这次活动的学生很多都是学软件工程和电子商务的。flash用来搭建页面的时候更多是因为它的交互效果和色彩图形上很有吸引力。不过在大中型网站中很少运用它来展示大量的信息，不不仅是因为需要安装flash，更多是因为它不便于维护更新，技术需要高，另外还因很多终端对它的支持不好（比如说很多手机）。另外还有一些问题，比如说字体，虽然现在已经用CSS解决字体问题，不过很多浏览器在这方面上支持还是不够。 美工：这次作品中美工上存在不少问题，听说活动前期宣传时，因为下雨，所以知道这个活动的人不多，所以学美术的同学来参赛的很少。很多页面细节上处理不好，用色也有问题。不少页面上的图像还有扭曲变形。因为这次的主题的2011年世界大学生运动会，所以说美工上的需要其实是挺高的，因为一般大学生对互联网是很了解的，能够设计出被大学生喜欢的界面是不容易的。这次比赛参赛者主要学软件工程和电子商务，美工本来就不是他们的强项，所以出现这么多问题是正常，不过为什么要搞我们不擅长的设计比赛，而不是搞我们更拿手的网站PK呢？ 创意：这次比赛有二三个作品有一些地方在创意上有几个闪光点。第一个作品的”圆”,最具创意奖的获得者的apple风格，还有最后一名选手的白天黑夜的理念（这个真的是创新），这些作品个人觉得在创意上都表现不错。 建议：吸引更多专业的学生参赛，形式上更自由，邀请行业人士参与评委，不要再让像我这种不足以服人的学生当评委。 扯完这些，想说点别的。学院的网页设计课应该放在大一来上，因为这是一门简单的课程，而且是我们专业的技术基础课。大一的时候如果就可以接触到这门课程，相信会有更多的同学会对网页设计感兴趣，学别的技术也会更快。

网页设计是一个永恒不衰的话题，也许这一刻它是最受欢迎的，但是下一刻可能就 被遗忘在角落，我们致力于跟随互联网发展的脚步，这里是speckboy的阅读者收集推荐的一些出色的网站。供给大家参考。 Paul-Rand.com Diesel Fragrance Factory SixClicks FULL Creative Slavik Dizajn iconSweets The Many Faces Of… Chester’s Feed – Cheetos.com hm-andrei.ro DDESILVA Fajne Chłopaki Chopin2010 BRANDELUXE 原文网址：Weekly Web Design and Development Inspiration – N.36 转载请注意本文链接｜来自focusec

电子商务网站总是被认为无趣而且不吸引人，但是，事实并非总是如 此。这个网页展示了25个电子商务的网站，他们证明了网站设计上的创新。可能在布局、图片、设计风格或者网站结构上，但是所有的都打破了典型的电子商务网 站的模式。 Ride Four Ever Mom & Popcorn The Affair Hipstery Benestar Green Label Organics RedVelvetArt CellarThief Shirt Fight K2 Snowboarding Storenvy Edge of Urge ‘47 Levi’s McMenamins Giraffe Saddleback Leather Company Kate Spade Yellow Bird Project Clever Craft Pally Giraffe Mouse to Minx Cinnia Edua Duchy of Cornwall Nursery 原文网址：25 Creative E-Commerce Website [...]

效果图： 步骤： Step1 背景 新建一个文档，如图： 视图>新建参考线，垂直50px，950px。水平参考线在102px,404px,497px,832px. 设置前景色#5398B8，填充文档。滤镜>杂色>添加杂色，设置参数如图： Step2: header 制作logo和其它图标时将使用到发布在Smashing杂志的Flavours 图标集，下载Nevis字体。 把Tablet图标如下图放置，选择Nevis字体然后写下一些东西，例如“portfolio”，然后如图设置： 点击“portfolio”文本层，选择混合选项。进行设置如图： 在参考线上方40px处写上文本 新建一个图层组，命名“导航”，然后选择18pt大小的Myriad Pro字体和#2a2a2a的颜色制作导航。“home”选择白色#ffffff. 复制导航层移动到原来层下方，然后反向更改文本颜色，把颜色是#ffffff改变为#2a2a2a。把颜色是#2a2a2a改变为#ffffff。 然后把图层向下和向右各移动1px。然后改变不透明度40%。 新建一个图层（shift+ctrl+N）,移动到文本层下方。选择圆角矩形工具，设置半径5px前景色3487f99制作按钮。 点击按钮层设置图层混合选项，运用下面的设置 你的导航应该看起来像这个样子： 设置前景色#487f99，点击铅笔工具，设置笔刷1px，创建40px长度的垂直线。然后设置前景色#a4bfcc在刚刚直线的右边创建一样长度 的直线。 Step3: lines 新建图层组，取名“直线”。像刚刚创建垂直线一样制作水平线。建议：制作直线时按住shift键。 Step4：“My Works”Block 新建一个图层组取名“我的作品”。然后从Flavours图标中选择case图标。移动在第一条参考线下的20px处。然后输入“MY WORDS”，字体设置和step2:header中“Portfolio”一样。 设置前景色#000000， 圆角矩形工具，半径5px制作一个按钮如图： 降低不透明度为20%，从Flavours 图标集中选择blue plus按钮，调整W和H大小，移动到之前制作的按钮上。设置前景色#2a2a2a，选择Myrid Pro14pt大小字体。输入“see all works”，移动位置如图所示： 点击“see all works”图层，设置混合选项。 这是运用阴影之后的效果 设置前景色#487f99，选择圆角矩形工具半径5px。制作一个大约190px的box。 选择导航图层组，点击在这个层的按钮，复制图层样式。选择先前在“my works”图层组中的box层。粘贴图层样式。 复制图层，放置它们如图： 挑选你作品中的三个图片，调整它们的大小移动到boxes。如图： 设置前景色#2a2a2a，选择横排文字工具，Myriad Pro字体，大小16pt。写下关于项目的简洁描述。然后在第二张图片上运用阴影选项。 复制描运用了阴影的描述层，移动到其它作品的下方 新建一个图层，移动到“my works”图层组所有层的下方。选择矩形选择工具选择在第一和第二条参考线内的所有区域。填充黑色#000000.如图： 点击新建的图层运用渐变叠加，设置如下： 降低不透明度到30%，你将获得下面的效果 选择来自Flavours图标集中的button [...]

这篇文章翻译自著名的instantShift的Single Page Website Designs: 70+ Latest Examples,根据我们之前翻译的2010年网页设计趋势，我们可以发现单页网站是其中一个趋势（当然这是国外的趋势），在大屏和高分辨 率的推动下，单个页面可以显示出更多的信息，而对于一些信息量不是很大，功能不甚复杂的网站来说，采用单页设计也可以成为一个选项， 当然这也会考验你的页面排版和设计能力。 我们之前在相关的文章中已经提到，单页设计的网站现在已经是一个趋势。就像设计师喜欢用各种事物试验以及观察人们怎样与他们的作品互动一样，我们观 察设计师怎样处理单个页面也是一件趣事。即使这不是一个热门的潮流，但随之的出现，越来越多的设计师已经注意到单页设计，并在他们的作品采用它。在这篇文 章中，你会发现很多不同的非常有创意，非常漂亮的单页设计作品。这里的主要目的是激发你的灵感和想像力，以让你去创作你自己的设计趋势，因为你的网站代表 着你和你的品牌。 单页网站的创意设计 在历史中，著名的艺术家经常通过新的方式和方法来展示他们的创意来表达他们的想法，创造出新的潮流趋势和技术来让他们的作品脱颖而出。从现代的角度 来看，设计是一种交流的方式。另外具体地说，页面设计(web design)是一个展示内容的好平台。没有“好”和”坏”的设计，只有不同的设计。 01. Gelfgolf Official Link 02. Kineticshadows Official Link 03. Indofolio Official Link 04. Agigen Official Link 05. Mojo Official Link 06. 57studios Official Link 07. Zulsdesign Official Link 08. Plannedparenthoodregina Official Link 09. Thewallgallery Official Link 10. Dees Official Link 11. Kamalchaneman Official Link 12. Slovaczech Official Link 13. Pixel Portfolio [...]

当谈到漂亮精确的Web设计时，Photoshop是一个功能强大的工具。这款软件提供了很多工具和资源，这些东西允许你随时随刻创造出 合乎逻辑并完美的页面。下面是从web design tutorial精 选出来的20个网页设计photoshop教程。这些教程对不同工具和技术有深入运用。这些工具和技术都可以被用来设计出出色的页面。 1  从零开始设计一个漂亮的网站 详 细教程 2  如何制作一个色彩丰富的布局简洁的网站—Photoshop教程 详 细教程 3  如何制作一个独特的Wordpress主题 详 细教程 4  如何在Photoshop制作一个浅色发光的网页 详 细教程 5  企业/商务/软件Web布局（PSD 模板） 详 细教程 6  从零开始绘制处理纸质纹理，然后用它制作一个杂乱风格的网页 详 细教程 7  如何在Photoshop中设计一个Wordpress主题 详细教程 8  设计一个简洁的，现代风格的模板 详 细教程 9  如何设计一个独特的五彩缤纷的网站 详 细教程 10  制作一个质感的网页 详 细教程 11  在Photoshop制作一个清新时髦的网页 详 细教程 12  从零开始制作一个时髦的、高端的网页 详 细教程 13  设计一个高雅深色系的公事包网页(Porfolio [...]

这篇文章（原文地址）来自著名的Web Design Wall， 更多09年国外最佳的文章请看我们翻译的WDL评选出来的09年国外最佳系列。 自从2007年以来，每年我都会提及来自Best Web Gallery（best web design是一个著名的国外优秀网页设计作品收藏资源的网站）的最佳CSS设计网站（查看07与08年 的）。今年这个时刻又来到–2009年最佳CSS设计。这次我筛选另外50个设计精彩的网站。在这个名单中，我发现很多有很多采用漂亮的衬线字体简洁风格的网站。那种杂乱和素描风格还是比较流行。不过，采用大幅背景图片就 不像在2008年那样热门了，2009取而代之的是纹理背景图片。 Sushi and Robots Bobulate A Way Back LegiStyles For a Beautiful Web Black Estate Cynosura Mark Dearman iA Trent Walton Area 17 Nosotros Atebits Square Space Gap Medics Fringe Typographica Book Cover Archive Search Inside Video Red Nose Day Carsonified Fajne Chlopaki Devia Mail [...]