网站构建流程详解：八个关键设计阶段打造卓越网站：八个步骤的网站设计攻略

网站设计十步骤

网站设计十步骤

随着所见即所得工具的日益普及与便捷，制作网页已变得轻松易行，不再需要手工编写源代码。新手通过短暂学习即可掌握网页制作，误以为其简单易行，匆忙制作网站，却发现自己作品粗糙。原因何在？俗话说：“心急吃不了热豆腐”。建立网站如同盖楼，是一项系统工程，需遵循特定流程。唯有按步骤操作，才能设计出满意的网站。

一、明确网站主题

网站主题即网站内容核心，需有明确主题。个人网站无法像综合网站般内容全面，需聚焦兴趣，深入挖掘，形成特色，给用户留下深刻印象。主题不限，但需鲜明，内容力求全面深入。

二、收集素材

明确主题后，围绕主题收集素材。素材来源包括图书、报纸、光盘、多媒体及互联网。去粗取精，去伪存真，作为网页素材。

三、规划网站

网站设计成败取决于规划水平。规划包含结构、栏目、风格、颜色、布局、图文运用等。制作前需考虑周全，才能制作出个性鲜明、具有吸引力的网站。

四、选择制作工具

工具选择不影响网页质量，但功能强大、操作简单的软件可提高效率。网页制作工具包括Dreamweaver、Frontpage等所见即所得编辑工具，以及图片编辑、动画制作、特效工具等。

五、制作网页

根据规划，逐步将想法变为现实。制作时遵循先大后小、先简后繁的原则。先设计结构，再完善细节；先设计简单内容，再设计复杂内容。灵活运用模板，提高效率。

六、上传测试

网页制作完成后，上传至Web服务器。使用FTP工具上传，并在浏览器中逐页测试，发现问题及时修改。

七、推广宣传

网站制作完成后，需不断宣传，提高访问率和知名度。推广方法包括搜索引擎注册、交换链接、加入广告链等。

八、维护更新

网站需定期维护更新，保持内容新鲜。补充新内容，吸引浏览者。

九、界面设计步骤

1. 创建画布：打开Photoshop创建新项目，选择画布大小。

2. 应用渐变：创建新层，添加渐变前景色和背景色。

3. 添加纹理：创建新层，添加胶片颗粒艺术效果和高斯模糊效果。

4. 导航条设计：下载带状图片，调整大小，设置透明效果。

以上为网站设计步骤及界面设计步骤，希望对您有所帮助。

顶端的导航区段里，我们安放了一条状的带状。我们注意到这种带状风格在众多网站中都有应用，但在此处我们采用的方式略有不同。因为BoxedArt希望这种设计看起来像是用来发送邮件的盒子。为了打造这个导航栏，我们需要从bigstockphotos.com上下载一张带状图片，运用自由变换工具（在编辑菜单中选择自由变换或快捷键CTRL+T）沿着顶部区域展开。接下来，为了打造透明效果，我们将图层样式设置为线性加深。

第五步：老邮票导航按钮

继续秉承盒子主题，我们想让这个导航按钮呈现出类似破旧磨损邮票的质感。为了达到这种效果，我们需要一张老邮票（同样在bigstockphotos.com上下载）。下载后，首先描出邮票的路径，从背景中提取出来，邮票上仍然保留图像。为了覆盖邮票上的图像，我们在其上粘贴一张黄色纸张，也就是添加一个纹理效果。

接下来，为了区分不同类别的导航，我们在邮票上添加一些装饰花纹效果。在完成颜色盒子的创建后，我们将这个层的样式修改为线性加深，以便颜色能与老照片混合在一起。然后，我们增加另一个新层，自上而下填充黑白颜色，给这个图层添加胶片颗粒艺术效果，设置如下，最后将图层设置为正片叠底，将不透明度设置为60%。

第六步：应用导航按钮到导航条上

现在我们已经创建好了几个不同颜色的邮票按钮，是时候来完成最后header部分的准备工作了。将导航按钮应用到导航条上，我们通过给每个导航按钮应用由mathilde设计的Sketchy icons图标来添加一些手写效果。这些icon图标放置在每个颜色盒子中，并调整了中心图标的位置。同样的步骤将icon应用到每个邮票上。

接下来，使用自由变换工具（CTRL+T），将每个邮票调整不同的朝向，给它们一种拍打的效果。这一步后，切换到文字工具，每个分类使用一种手写字体。这里我用到的是“Loved by the King”。最后，我们的导航条就完成了。

第七步：开始顶部介绍区域

首先创建一个新层（CTRL+SHIFT+N），在工具栏中选择矩形选框工具。现在在页面上创建一个矩形，使用白色填充。这块区域将被用作一张白纸。

好了，我们已经完成了白色纸张部分。在白纸图层下面创建另一个新层，然后填充黑色，这个层将用来创建阴影。完成之后，转到滤镜>模糊>高斯模糊，半径设置为6.5。之后将这个层的不透明度设置为20%，向右移动5pixels。然后添加主要的文字，将短语“Simplify and Save”放在顶部纸张部分。

现在你看，在白纸下面有阴影，但纸张并不是粘在哪里的。所以我们在纸张的一边添加一些胶带，如之前的教程一样，在另一边添加了一个邮戳来保持画面的平衡。在你的纸张完成后，选择一些手写字体来添加一些文字，使其看起来像是包裹上的信息。最后，加亮这些图层，按下CTRL+T自由变换工具，角度设为-1.5 degrees，使其看起来更加具有真实效果。

第八步：贴上一个便签

我们使用便签设计来分隔空间，介绍我们网站的优惠注册信息。这个设计在整个盒子主题上运用得非常好。要打造这样一个便签效果，需要创建另一个新的图层，选择钢笔工具来绘制一个方形区域。

在你完成之后，转到路径面板，按住CTRL键点击路径图层，接着你会看到方形区域已经载入选区了。之后使用前景色#fffb78背景色#fffcd1从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。

第九步：再次添加阴影效果

现在我们需要再次添加阴影效果，给便签纸添加深度。因此创建另一个新层(CTRL+SHIFT+N)。过程与之前给白纸创建阴影类似，但将不透明度设置为40%。你需要变换一下阴影来创建一种倾斜效果，轻微地拖动一下。

第十步：给便签纸添加内容

下一步，给便签纸添加一些文字，在我们的便签纸中我们要添加一些加入等按钮。为了创建相似的按钮，首先绘制一个盒子，使用绿色填充，然后添加一个蒙版选择一种grudge笔刷。下一步遮住按钮的一些部分，使其看起来像破损一样，这就是我们创建邮戳的效果。

第十一步：卷曲胶带纸标题

我们转到body的内容部分。在这个设计中，我们要创建2栏和一些图标。我们使用的是已经有的图标，因为我们喜欢这种手写效果，包括Handy Icons and Sketchy icons。在body开始的区域，我们要一个标题栏用来罗列我们网站的内容。我们把这个header部分做成卷曲效果。至于说到透明胶带，我们使用的来自bigstockphoto的图片。为了增加胶带的深度，我使用矩形选框工具来选择胶带的一些区域。在选中选区后，我们复制这个图层，按下ALT+SHIFT向左边移动，然后在向右移动一下，使其看起来显得长一些。为了避免缝隙的产生，我们使用图章工具拼合这些缝隙。

第十二步：预览下的小图标

BoxedArt网站的内容区域包含许多网页模板的预览。要创建这种效果，我们需要选择矩形选框工具创建一个小的矩形，然后使用颜色#123057填充。这些按钮，我们只需复制第一个图层，移动它到第一个图层下面，设置这个图层的透明度，这里我们设置的为40%。重复同样的步骤处理其余的按钮。

第十三步：使用针脚线来分隔这些区域

为了分隔主要的分类，为了创建这些虚线，我们可以使用文字工具，将角度设置为90度，将这些图层的样式设置为叠加。为了使这些更加显眼，我们只需复制这个图层2-3次，至于颜色深浅取决于你自己。

为了区分这些核心类别，为了构建这些虚线，我们可以将文字工具的角度调整为90度，将这些图层的样式调整为叠加。为了使其更加显眼，我们只需复制这个图层2-3次，至于颜色的深浅，则由您自行决定。

第十四步：添加额外内容

添加剩余的内容非常简单，我们只需使用直线工具来分隔每个部分，并添加一些图标和文字。这里我们采用的是一种简洁的字体Helvetica Condensed。

第十五步：底部广告区域

我们已经到了底部放置广告区域，这里的带状条将再次被应用。使用先前已有的图片作为起点，下一步，我们要使用圆角矩形工具，前景色设置为白色，半径为5px。然后我们需要设置一些小圆角矩形，颜色设置为#f8f7f3，边框用深灰色。你可以在下图的图层样式中设置边框（即描边效果）。

第十六步：公告区域

公告区域我们采用与header区域相似的蒙版方法，当然，订阅新闻通讯等区域也是如此，就像纸张粘上去的一样。首先，我们给header区域添加一种厚实的纸张效果，这与body区域的方法基本相同。至于内容部分，选中矩形选框工具，在右下角绘制小盒子，颜色填充为#f9e5a6。完成后按下CTRL-D取消选区，然后选择加深工具，笔刷大小设置为35pixels，加深棕色盒子的边角区域。

最后，我们将图层的不透明度设置为60%，双击图层在图层样式中添加一些阴影效果，参数设置后，再添加一些内容。

第十七步：网页底部

到了我们创建底部部分的时候了，首先我们使用矩形选框工具，在页面上选择下图所示区域，使用颜色#462d0f进行填充，并使用直线工具绘制一条直线，颜色设置为#a05d18。

到了底部的分类部分，我们再次绘制一个大的选框，颜色填充为#472a0b，图层的不透明度设置为78%，接着创建另一个图层，颜色填充为#fffcd1。下一步，添加胶片颗粒效果，最后将图层的不透明度设置为30%，图层样式为正片叠底。

最后，我们只需重复在footer区域进行的操作，或者复制图层将其移至底部，这样你就可以添加内容了。看看下面的预览图，是否有些启发，希望你喜欢。