Archive for the ‘html’ Category

将小型、现代的产品主页由psd转换成XHTML/CSS模板

Posted in css, html, photoshop on 11/20/2009 12:20 上午 by tunpishuang

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

原文地址：http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion

本教程将会指导你将一个photoshop网页设计转换为可以使用的HTML/CSS模板。这是web设计和代码转换系列教程的第二部分。

demo

点击下面的图片将会看到本次制作的 demo 的效果。

Demo

开始之前

如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页 ， 因

为第二部分需要第一部分做好了的psd文件。

如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。

创建文件结构，准备文件

1 在桌面上创建新的空目录，取名portfolio。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

Creating the file structure and preparing the files

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的<head>标签加入对styles.css的链接。可以使用如下代码：

代码段1

<link href="styles.css" rel="stylesheet" type="text/css" />

Creating the file structure and preparing the files

页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

Coding the layout sections

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。 Read the rest of this entry »