建立一个网站的流程介绍(为新手准备).docVIP

建立一个网站的流程介绍(为新手准备) 今天元云和各位朋友分享是一篇入门级的流程介绍文章, 本教程写的大概可以归为国内美工职位的工作内容, 亦或是 设计师+页面重构工程师的工作内容. 适合阅读对象:初学者 文章介绍了如何建立一个简单的网页的步骤， 包括三大个部分: 设计(设计师做), 页面重构(页面重构工程师), 校验w3c(页面重构工程师); 详细的有, 1.如何在photoshop中设计你的页面 2.如何在photoshop中切图你的设计稿 3.如何建立html页面，定义页面的架构 4.添加页面类容 5.添加 CSS 6. html验证，CSS验证 非常简单详细，但却是非常规范的。 (翻译的较为粗糙,推荐阅读原文) 标签： 浏览器 设计 html CSS 切割 重构 兼容 建立一个网站的流程介绍 Aug 3rd in \o 查看所有职位的HTML和的CSS HTML CSS by \o 帖子泰萨桑顿 Tessa Thornton 翻译：元云 在本指南中，我会以简单易的步骤来介绍如何设计和建立我们的第一个网站。教程是为初学者而准备的，能够让初学者学到一些技能，了解一些工具来完成自己的第一个符合标准的网站。 这是一个崭新的一周;也许是时间学习一门新的技能了！ ? 我是多伦多大学的学生，主修哲学。最近，我把网页设计作为一种爱好，在很短的时间里从中学到了很多东西，非常感谢在线大量资源。我想分享我的经验和知识给新学员们。 ? 第1步-我们要做什么 我们将设计和编写一个非常简单的网站。壮观的设计？它不是，但是它对于教你如何掌握基础的编码技术却是非常有效果。 第2步-准备工作 你需要什么？ 本教程，假设你是从来没有编写建立过网站的，或者只有少数的几次经验。然而，为了完成本教程，您还需要准备以下的内容： Photoshop或类似的图像编辑器 一个编辑器（更晚些时候） 了解基本的HTML，它是如何工作的，基本语法和标签。 要跟上速度的话，请查看官方资源在 W3Schools ，在那里你可以了解到这个教程需要的所有的基本知识。 .同样的对CSS ，你要知道选择器如何工作并且熟悉基本的属性知识。最好的资源是仍然在 W3Schools 浏览器，很明显。我使用的是Firefox ，如果你想让你的网站，和我的截图每一步都一样话，那么你也应该用FF Layout布局 我们做一个非常简单的网站，有4个基本要素：标题，内容，侧栏和页脚，布局会是这个样子： ? 这在动手之前，先在纸面上或在Photoshop上固定你的布局设计，然后再开始，这步骤是一个非常好的简化您的工作流程和组织您的构思的做法。 第3步-使用入门 新建一个Photoshop文件， 1000px*1200px 。 我们也可以稍后更改设置。因为我用笔记本所以我设置的高宽比较小一些，如果你喜欢的话可以随意设置更宽的值。 现在，我还不打算在这里讨论屏幕分辨率和最佳网站宽度。所有现在你需要知道的只是，我们的网页的内容将是800px宽，这没关系是可以的。因此，在我们宽为1000px的文件里，我们拖动了100和900px的标尺设置宽度。在我们的设计里有了一个侧边栏，我已经决定将其设置为三分之一的宽度页。三分之二的800是530 ，所以让我们建立一个更宽的宽度630px 。我们也会建立一个不错的背景颜色＃ ebe8e8 。 ? Step 4 - Header第4步-头部 用矩形工具，画一个大的，蓝色方块在文件的上方， 170px高，颜色是＃ 23b6eb 。下一步画一个小的，深灰色块在网页的最上方，我用＃ 5d5a5a ? Step 5 - Highlight第5步-高亮 现在我们要添加高亮效果在蓝色标题区。创建一个剪报遮罩层以上的蓝色，然后使用，软刷（ x 400像素宽） ，并挑选颜色有点轻的蓝色背景。 现在用笔刷刷在中间部位，尽量不要碰到顶部边缘。图层为混合模式 ? 第6步-导航栏 现在我们要添加另外一个导航栏，我们可以使用渐变，从＃ e2e3e4到＃ bebdbd ? Step 7 - Footer第7步-页脚 接下来，让我们画一个灰色方块的在底部，我选择了一个颜色比顶部栏更暗灰些颜色 ? Step 8 - Logo第8步-标志 Background背景 LOGO，我们要画一个矩形，并添加另外一个锚点另一端，然后将其拖放到一边。 ? 其次，添加图层混合选项：渐变叠加＃ aec457从＃ cdf399 ，1px内部描边 ? ? ? ? ? ? ? Text文字 现在到了文字：大和粗体 Font: Myriad Pro Style: Bold Size: 60px Color: #36809a 添加一个向内的投影 ? ? 第9步-副标题 下一步添加