2016-08-27 分类: 网站建设
如今成都网站建设的相关技术非常多,对于初入网站设计领域的新手来说,选择适合自己 的网站建设技术非常重要。本小节将介绍目前这个领域最为流行的技术与工具。在熟练掌 握了网站建设的这些技术之后,可以触类旁通地选择其他的辅助工具。
网页设计与平面设计相关但又有明显的区别,如果读者是一名平面设计师,那么会很 容易理解网页的设计;但是如果读者没有任何平面设计相关的知识,那么就需要了解一些 平面设计的基本理论,比如视觉表现、审美能力、构图与布局的原理等。
与网页设计相关的工具有 Photoshop、Illustrator、CorelDRAW、Fireworks、Flash 和 Dreamweaver等工具,相信一些工具对于从事平面设计工作的朋友来说非常熟悉了。下面 是对这几个软件的简要介绍。
□ Photoshop图像处理软件:Adobe公司出品的图像处理软件,是目前最受欢迎的功 能强大的图像处理软件之一。该工具的专长是对已有的图像进行编辑加工处理, 添加一些特殊的效果。目前互联网界比较流行的“PS图”,就是指经过Photoshop 软件处理过的图片。
A注意:图像处理与图形创造是两个概念,图像处理是对已有的图像进行加工处理,而图 形创造则是按照自己的构思来设计绘制图形。Photoshop的强项是对已有的图像 进行处理工作,Adobe的Illustrator和Photoshop Creative Suite则主要用来进行图形创造。
□ Adobe Illustrator矢量绘图软件:是Adobe用来进行图形创造的矢量绘图软件,主 要用于印刷和出版领域,不少网页设计者也用该软件来设计网页图形。
□ CorelDRAW矢量绘图软件:这款软件专注于矢量图形创造,除用于平面构图设计 之外,网页设计师经常使用该工具来设计网站的原型,它的强大的图形创造能力 给了设计师无限的创造空间。
□ Adobe Dreamweaver网页设计软件:简称DW,最初是由Macromedia公司开发的, 与Fireworks和Flash并称网页设计三剑客。Dreamweaver注重于网页的排版设计,它提供了所见即所得的方式来设计网页,并自动产生超文本语言标记(即HTML)。 Dreamweaver提供了网站设计生命周期管理工具,比如可以用来管理网站、设计模 板、与远程网站同步等。
□ Adobe Fireworks网页图形软件:这款软件是Adobe公司专门用于网页图形制作的 软件,可以加速Web的设计与开发,是设计网站原型的理想工具。
□ Adobe Flash动画设计软件:Flash软件是一款用于网页上动画设计的软件,它可以 创建非常吸引人的网页动画,比如网站片头、动画导航栏、视频内容等。它是通 过矢量图形来实现动画播放的,具有体积小、响应速度快等特点,一经推出就被 广泛使用。
在网站建设过程中,除了 Dreamweaver是必须要掌握的之外,其他的几个工具可以在 工作中根据需要来进行学习。
网站建设语言包含HTML、CSS和JavaScript这3类,虽然Dreamweaver这样的设计工具会把页面元素自动转换成HTML语言,但对于一名合格的网页设计师来说,HTML是 首先必须掌握的一门语言。
HTML的英文全称是HyperText Markup Language,中文称为超文本标记语言,是一种用来描述网页上页面元素的一种语言。实际上在使用浏览器浏览网页时,浏览器通过下载 HTML和其他相关的网页元素来呈现出网页。以Firefox为例,在网页上右击鼠标,从弹 出的快捷菜单中选择“查看页面源代码”,Firefox将弹出HTML代码窗口。
举个例子,如果想在浏览器中显示一条信息,可以新建一个文本文件,在文件中输入 如下的HTML代码:
HTML 示例 这是一个HTML网页
将该文本文件另存为firstpage.html,然后在浏览器中打开,可以看到果然在网页中显 示出了网页内容。浏览器的标题列显示“HTML示例”,浏览器的主体区显示“这是一个 HTML网页”,。
益注意:虽然学习HTML需要记忆较多的标记语法,但是借助于Dreamweaver这样的可 视化设计工具,可以像编辑Word文档一样编写HTML网页。
除了 HTML语言之外,网站建设人员还应该深入理解CSS。CSS的中文全称是层叠式 样式表,是Cascading Style Sheet的简称,用来格式化HTML网页。CSS是网页格式化的利器,主要用来统一网站的整体设计风格。
举例来说,如果想将前面编写的HTML网页的文字字号变大,并使用“微软雅黑”字 体,则可以编写如下所示的一段CSS代码:
HTML 示例 这美一个HTML网页
在HTML中,样式表使用