网页美工引言.pptVIP

引言 你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。 从今天开始我将教大家怎么做这样的设计！从根本上讲，对于这种设计你需要专业的计算机操作技能和艺术表达能力。对于专业的计算机操作技能，我们在前期的课程学习中打下了良好的基础，通过这门课主要给大家讲述艺术设计方面的相关原理，包括网页的基本版式设计、文字设计、色彩搭配、图形设计、动画设计及应用，掌握了这些内容再结合着之前我们掌握的计算机操作技能来设计网页，我们才可以称之为合格的网页设计师。 引言 随着网络技术的发展，网页成为了人们生活的重要组成部分。我们可以通过网页进行网上购物、网络娱乐、接受网上教育、浏览丰富的全球资讯，公司可以通过网页宣传企业形象和产品，进行电子商务活动。网页在现代生活中得到了广泛的应用，网页设计成为了时下最热门的行业。 网页设计是一门技术和艺术相结合的交叉性学科。它是UI设计的一个分支。 自从第一个网站在上个世纪 90 年代初诞生以来，设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。 1991 年 8 月，Tim Berners-Lee 发布了第一个简单的，基于文本，包含几个链接的网站。 随后的网页都比较相似，完全基于文本，单栏设计，有一些链接等等。 最初版本的 HTML 只有最基本的内容结构：标题 (h1, h2...)，段落(p)和链接(a)。 引言 随后新版本的HTML开始允许在页面上添加图片(img)，然后开始支持制作表格(table)。 网页设计的发展史 基于Flash的网页设计 ，Flash开发于 1996 年。 Flash 影片体积小巧，在线应用更加可行。在视觉效果上 HTML 有很多局限性，尤其是早期的 HTML。要实现复杂的设计，人们往往需要制作大量疯狂的表格结构并/或依靠图像占位符 ，Flash 使创建复杂的，互动性强并且拥有动画元素的网站成为可能。 网页设计的发展史 基于CSS的设计 CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生（甚至感到恐惧）。 与表格布局、Flash网页相比，CSS有许多优势。首先它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。 CSS是网页布局的最佳实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互分离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。 由CSS设计的网页的文件体积往往小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里（默认情况下），这样接下来的访问过程中，网页就都会迅速显示了。 首先，先来对你想要的网页布局做一个构想 。比如你打算对网页信息划分几栏，是三栏还是四栏。 * The first web page (1992) Yahoo! (1996) 引言 1994 年，万维网联盟（W3C）成立，他们将 HTML 确立为网页的标准标记语言。 Altavista (1996) 引言 基于表格的设计 表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。 表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。 W3C (1998) Yahoo! (2002) Altavista (2002) W3C (2003) W3C (2009) Yahoo! (2009) 从上面的图，我们可以看出来：在一个排版中又穿插进另一个排版，所以这是一个有点复杂的结构. 1280*1024 构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px . 把背景色设置为 #ffffff 白色. 用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充. *