当前位置:首页 >> 政史地 >> 专题1 网站设计概念 第三稿

专题1 网站设计概念 第三稿


网站设计概念
1. 预备知识 2. 网站建设四步曲

四川教育学院电子信息工程系 赵苏骅

预备知识
1. WWW原理 2. 相关名词

网页

想一想
? 打开Internet,就进入了一个妙不可言的网络世 界,在这里我们可以饱览各种各样精彩纷呈的页 面,让我们的

触角伸向世界的各个地方。有没有 想过,如果有一天我不是作为浏览者,而是网页 的设计者时,我应该懂得什么?又该怎么做?看 到如图所示的一个“初学者园地”时,想一想:
1. 我们是如何在Internet上看到网页的? 2. 网页是怎样做出来的? 3. 如图所示的页面外观形式漂亮吗?观察它是如何布局 页面、选用色彩的?

?

还是从Internet相关知识说起。

Internet的信息服务
? Internet可以提供多种的信息服务(基本上 它们都遵照了同一种工作模式,即客户-服 务器模式,这种工作模式是Internet 的信 息服务得以发展的基础 )。如我们常用的: WWW信息浏览服务、电子邮件E-mail、文 件传输FTP、远程登录Telnet、电子公告牌 BBS和Internet新闻服务News等。 ? 接下来我们主要介绍WWW信息浏览服务。

WWW信息服务的概念
? Internet上WWW(World Wide Web) 简称Web,也称为万维网,是一种使用最 为广泛、发展最为迅速的应用技术。 可以说正是由于Web的出现,才使得 Internet在全球范围得到空前的普及。

?

Web工作原理
1. 采用客户-服务器模式工作。
– 客户:服务的请求者。客户必须通过浏览器 (如微软公司的IE)才能访问服务器的超媒 体信息。 – 服务器:服务的处理者。Web上的超媒体信 息就存放在该计算机中。

2. Web客户和服务器之间通过超文本传 输协议 (HyperText Transfer Protocol,HTTP)进行对话,该协议 建立在TCP连接之上,协议端口通常 为80。

3. Web上的信息分布在整个Internet上,如 何唯一确定某一个文档,Web采用了统一 资源定位符URL 来来标识。关于URL接 下来还有进一步叙述。 4. Web规定所有的文档都采用超文本标记语 言(HyperText Markup Language, HTML)来描述,Web服务器负责用HTML 语言来描述并组织各种文档,这些文档通 常被称为Web网页;而客户方的浏览器负 责解释HTML编写的超媒体文档,并调用 相关的软件将信息展示给用户。

统一资源定位符URL
? 通常,统一资源定位符URL由三部分组成: ? 协议类型、服务器地址(域名或IP地址)、文件 名称 如: http://www.yahoo.com/index.html ftp://ftp.pku.Mu.cn/pub/rfc
http:// ftp://表示浏览器访问服务器使用的协议
表示雅虎公司的Web站点域名和 北京大学匿名FTP服务器的域名 index.html是该Web站点的首页面文档名, /pub/rfc表示该服务器中RFC文档所在的位置

超文本标识语言(HTML)
? 网页又被称为HTML文件,该文件使用超文 本标记语言编写而成。这种语言是通过在文 本文件中加入一系列的标签(tag)来告诉计算 机如何显示网页。所以,HTML并不是一种 复杂的编程语言,而是一种排版标记语言。 ? HTML文档是一种任何文本编辑器可以创建 的文本文件,通常它们由.html或.htm为后缀 。而只有通过浏览器才可以对HTML文档进 行相应的解释。

? 所谓“标签”是由用尖括号“<>”括起来的 一组代码,由若干这样的代码就形成了 HTML文档。 ? 标签通常是成对出现,结束标签和开始标 签的区别只是多了一个斜杠字符” /”。 ? 如<table>表示一个表格的开始,</ table>表示一个表格的结束。

HTML文档的组成
主要由两部分组成 1. 首部(head): 由<head>...</head>构成,主要包 含文档的标题(title),以及其他一些标识文档 内容和格式的信息。标题和内容信息可被搜 索引擎使用来查找该网页,格式信息则是用 来定义网页显示风格的。 2. 体部(body): 由<body>...</body>构成,体部 紧接在首部后面。体部部分是通过标签组织 的网页内容。

链接标记
? 超链接的语法是: <a href=”链接对象”>链接标记</a>。 ? 其中“链接对象”可以是任何可以用统一资源定 位符URL表示的对象,既可以是本地Web服务 器上的文档,也可以指向远地Web服务器上的文 档。 ? “链接标记”可以是一个或几个文字,也可以是 图标、一幅图,甚至是图的某一部分,它是该链 接在浏览器上显示的名称,用户通过鼠标点击就 可以访问链接对象。

一个简单的HTML文档
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页设计</title> </head> <body> <p>哈哈,我也会做网页啦!</p> <p><img src="../images/69.gif" width="85" height="85" /> </p> <p><a href="index.htm">返回主页</a></p> </body> </html>

图为通过IE5显示的HTML文档

相关名词
? 网页:就是我们在浏览万维网时看到的一 个个的画面。它由多种对象构成,如下页 图所示,其中包含文字、图片、网站标志、 导航栏、内容区、版权和网站信息区等内 容。 ? 网站:则是一组相关网页的集合。一个小 型网站可能只包含了几个网页,而一个大 型网站则可能包含成千上万个网页。打开 某个网站的第一个网页称为首页(或主 页),一般说来它具有链接到网站所有栏 目的索引功能。

导航栏

内容区

版权区

网站建设四步曲
1. 2. 3. 4. 网站设计和素材准备 网页制作 域名注册,租用空间 网站维护和推广

收集资料

内容与功能设计 目录与链接结构设计

网 站 内 容 设 计 流 程 图

网站信息结构设计 修改方案 网站风格设计

网站领导小组审核 不合格 合格
网站运行环境选择 主页设计 网页可视化设计 修改方案 其它页设计

网站领导小组审核
不合格 合格
网页开发技术选择

静态网页制作
网页设计 动态网页制作

四步曲之一:网站设计和素材准备
开始网站建设,第一步是要有一个相对完整 的设计方案,首先做好详细的规划,在接下来 的网页制作中才能心中有数。规划中需要考虑 的因素很多,大体分两个方面: ? 一方面是网站的内容设计; ? 另一方面是网站的外观形式 它们相辅相成,同时交替进行。

一方面是网站的整体设计
根据网站的目的和功能规划网站内容,一般企业网站应 包括:公司简介、产品介绍、服务内容、价格信息、 联系方式、网上定单等基本内容。 注意:网站内容是 网站吸引浏览者最重要的因素,无内容或不实用的信 息不会吸引匆匆浏览的访客。可事先对人们希望阅读 的信息进行调查,并在网站发布后调查人们对网站内 容的满意度,以及时调整网站内容。

建立一个网站好比造一座高楼,首先要设计好 框架图纸,才能使楼房结构合理。所以,我们在 动手制作网页前,需要考虑好以下三点:

1、网站主题
? 网站题材千奇百怪、琳琅满目。只要你想 的到,就可以把它制作出来。现实生活中 主题的确定往往是出于某种实际的需要。 比如下面“实用范例”的主题,就是对一 种产品的介绍。

2、网站栏目
? 栏目就是一个网站内容的大纲索引。也就 是我们会谈到的若干话题。确定栏目前要 回答两个问题: 第一,为什么要建该网站? 第二,哪些人会关注我的网站,他们感兴趣 的内容是什么?想清楚这些问题后,才能 根据网站主题确定所需栏目。 ? 最好将它画出草图,反复斟酌。

3、网站名称
? 网站名字是在网站主题确定之后,给网站 一个时尚,响亮,易记,对网站的形象和 宣传推广也有很大影响的名称。 ? 如新浪、网易就是极成功的案例。

信息发布型企业网站主要栏目

【实例】
? 应某公司要求,为其设计一个三维液晶显 示器产品销售网站。经过主创人员与公司 反复协商,将网站的名称、内容和栏目用 下面的草图表示出来(限于篇幅,只画出 主要内容作代表),完成站点制作前的设 计工作。

“新视野”网站内容结构草图
新视野(主页)

产品

应用领域

联系我们

问题解答

业界动态

……

15寸

15参数

18寸

18参数

……

日本

美国

……

另一方面是网站的外观形式
另一方面是网站的外观形式:网页美术设计一般要与企业整体形象一致, 要符合CI规范。要注意网页色彩、图片的应用及版面规划,保持网页的 整体一致性;在新技术的采用上要考虑主要目标访问群体的分布地域、 年龄阶层、网络速度、阅读习惯等;制定网页改版计划,如半年到一年 时间进行较大规模改版等。

网站的外观形式是站点的整体形象给浏览者的综合感受。比 如我们觉得迪斯尼的网站生动活泼、颜色鲜艳;IBM的网站 则专业严肃、简洁大气。这些说法主要是对其外观表现形式 描述。主要包括: – 版面部局 – 文字排版 – 图片制作 – 色彩搭配等 这方面的具体设计方法在后面会谈到。

素材准备
网站材料是创建网站的前提,准备网 站的材料主要在于以下几点: (1)网站内容的文字材料。 (2)网站的图片资料。 总之,有关建站的材料,都需要备好。 有些材料,如新闻、图片等,可以利用网 络收集和拷贝。网络是一个超大型的知识 库,想要的材料,网络上基本都有,可以 参考和下载。

四步曲之二:网页制作
? 制作网站,主要涉及两类软件:

1. 网站管理与网页制作软件 2. 其他辅助软件

FrontPage 网页设计工具

Dreamweaver Photoshop

电子商务网站设计工具

图象处理工具

Fireworks Flash

设计与制作

Dreamweaver 8
创建一个简单网站 网页更新 网站发布

更新与发布

FrontPage 网站设计开发工具 Dreamweaver ASP.NET

网站设计工具

Photoshop 图象处理工具 Fireworks Flash

网站发布工具

CutFTP

FlashFXP

网站管理与网页制作软件
? 目前用于网站管理与网页设计的软件 主要有FrontPage、Dreamweaver等。 ? 这两个软件都具有完善的网站管理与 上传功能,其网页设计特点如下:

1、FrontPage
? 它简单、容易上手,且功能强大。特别适 合网页初学者使用。一般来讲,如果用户 会用Word,就会用Frontpage。 ? 不过,Frontpage兼容性不好,利用 FrontPage做出来的网页往往不能用 Netscape浏览器正常显示; ? 其次,生成的垃圾代码多。此外, FrontPage对动态网页支持不好,不支持 Flash。

2、Dreamweaver
? 网页制作软件三剑客之一,该软件是现在 使用最多的网页设计工具,它支持DHTML 动态网页、Flash动画和插件,能实现很多 FrontPage无法实现的功能,如动态按钮、 下拉菜单等。 ? 该软件的缺点是站点管理功能较弱、模板 较少。

有必要掌握HTML语言
? 以上两款软件都是可视化网页编辑器,基 本可做到所见即所得,但要精确控制网页 元素,制作出丰富而精彩的网页,有赖于 对HTML语言的掌握。至于HTML代码的编 写可以用文本编辑器类软件,如Windows 附带的记事本、Word等。

网页设计辅助软件
? Fireworks:网页制作软件三剑客之一。该软 件主要用于制作网页图像、标志、GIF动画、图 像按钮与导航栏等。 ? Flash:网页制作软件三剑客之一。该软件主要 用于制作矢量动画,如广告、网站片头动画、 动画短片和MTV等。此外,利用该软件还可以 制作交互性很强的游戏、网页和课件等。 ? Photoshop:该软件是一个优秀的图像处理软 件,利用它可为网页制作图像、特效字、标志 和GIF动画等各种素材。

? 此外,常见的图像处理与动画制作软件还 有:CorelDraw与FreeHand(优秀的矢量 绘图软件,也可用来制作网页图像)、 GIFAnimator(优秀的GIF动画制作软件)、 Cool3D(优秀的特效字动画制作软件)等。

常用网站程序设计语言
? 如果网站中包含动态网页,由于动态网页 通常都是用HTML语言和其他语言组合编写, 或者完全由其他语言编写的。因此,用户 除了需要掌握一些常用的网页设计工具外, 还应掌握一些常用的网站程序设计语言。 如JavaScript和VBScript脚本语言、Java、 CGI、ASP、JSP等。

? GIF(Graphics Interchange Format)的原义是"图 像互换格式"。GIF文件的数据,是一种基于LZW 算法的连续色调的无损压缩格式。其压缩率一般 在50%左右,它不属于任何应用程序。目前几乎 所有相关软件都支持它,公共领域有大量的软件 在使用GIF图像文件。GIF图像文件的数据是经过 压缩的,而且是采用了可变长度等压缩算法。所 以GIF的图像深度从lbit到8bit,也即GIF最多支持 256种色彩的图像。GIF格式的另一个特点是其在 一个GIF文件中可以存多幅彩色图像,如果把存 于一个文件中的多幅图像数据逐幅读出并显示到 屏幕上,就可构成一种最简单的动画。

? JPEG是joint Photographic Experts Group(联合图像专家组)的缩写, 是最常用的图像文件格式,是一种有损压缩格式,能够将图像压缩在 很小的储存空间,图像中重复或不重要的资料会被丢失,因此容易造 成图像数据的损伤。尤其是使用过高的压缩比例,将使最终解压缩后 恢复的图像质量明显降低,如果追求高品质图像,不宜采用过高压缩 比例。但是JPEG压缩技术十分先进,它用有损压缩方式去除冗余的 图像数据,在获得极高的压缩率的同时能展现十分丰富生动的图像, 换句话说,就是可以用最少的磁盘空间得到较好的图像品质。而且 JPEG是一种很灵活的格式,具有调节图像质量的功能,允许用不同 的压缩比例对文件进行压缩,支持多种压缩级别,压缩比率通常在10: 1到40:1之间,压缩比越大,品质就越低;相反地,压缩比越小,品 质就越好。比如可以把1.37Mb的BMP位图文件压缩至20.3KB。当 然也可以在图像质量和文件尺寸之间找到平衡点。JPEG格式压缩的 主要是高频信息,对色彩的信息保留较好,适合应用于互联网,可减 少图像的传输时间,可以支持24bit真彩色,也普遍应用于需要连续色 调的图像。JPEG格式的应用非常广泛,特别是在网络和光盘读物上, 都能找到它的身影。目前各类浏览器均支持JPEG这种图像格式,因 为JPEG格式的文件尺寸较小,下载速度快。

四步曲之三:域名注册和租用空间
? 制作完毕的网站,要上传到Internet,必须 做这一步。

什么是域名
? Internet是一个信息的海洋,这些信息存放在 世界各地的计算机上,这些计算机都有一个唯 一的名字,即域名(也就是前面讲到的URL构成 中的一部分)。 域名一般由英文单词和数字组成,通常它具有 一定的含义(这样就便于记忆),如 www.tsinghua.edu.cn是清华大学的3W服务 器的名字, tsinghua表示清华大学,edu代表 教育机构,cn代表中国。

?

申请域名的方法
? 域名是独一无二的,一般都采取先到先得 的申请方法。域名的设计原则以易记和符 合公司形象为前提。域名想好了,就可以 向中国互联网络信息中心(CCNIC,网址 http://www.cnnic.net.cn)或者众多的域 名代理服务机构申请注册域名。

租用空间
? 当注册了域名之后,下一步就是为你的网 站建立主机。这个主机,必须是一台功能 相当的服务器级的电脑,并且要用专线或 其他的形式24小时与互联网相连。建立主 机有以下两种模式:

1、主机托管
? 所谓主机托管,就是你将你购置的网络服 务器,托管于一些网络服务机构(该机构 当然要有非常好的互联网接入环境),每 年支付一定数额的费用。 要架设一台最基本的服务器,在购置成本 上,可能需要数万元,而在配套软件的购 置上,更要花上一笔相当可观的费用。另 外还需要聘请足够的技术人员,负责网站 建设及维护(包括软件和硬件)。此外, 更要考虑日后的运作成本,技术支持及维 护等问题。

?

2、虚拟主机
?

?

所谓虚拟主机,就是在别人的主机上,租用一 定的网站空间以假设自己的网站。打个比方, 如果自己建立的主机是互联网上的一间屋,那 么网络公司就是互联网上一间大屋,而虚拟主 机就是这间大屋里面分租给你的一间小房间。 使用虚拟主机,不仅节省了大笔购买相关软硬 设施的费用,公司也无须招聘或培训更多的专 业人员,因而成本也较主机托管低得多。不过, 虚拟主机只适合于一些小型、结构较简单的网 站,对于大型网站来说还应该采用主机托管的 形式,否则在网站管理上会十分麻烦。

四步曲之四:网站维护和推广
? 网站制作完成后,上传到主机。之后还需 不断更新,加强管理。

网站推广
? 网站上传到主机,这仅仅是一个开始。随 之而来的是一连串的宣传活动,如果没有 人知道你的网站的存在,那你的网站就只 能是形同虚设。宣传的花费可以很高,可 以很低,甚至免费,当然效果也就有所不 同。 ? 常见的有以下四种:

1、在搜索引擎上登记
? 将你公司的网站加入到揵引擎。 ? 每个浏览者都有一个习惯,就是当要找出 一个网址的时候,就会求助于一些大型的 搜索引擎,如yahoo、sohu、 sina 、 netease等。输入一个关键字,一会儿之后 就有大量的网站被列出来。

2、网上广告
? 加入搜索引擎,就好比守株待兔,显得极度 为被动。一个比较主动的方法是将广告放在 别的网站之中。但将广告放在“人流”密集 的大网站上,所费非轻,动輙几千几万元, 未必划算。 ? 除这种收费的网上广告,还可以参加一些免 费的广告交换计划。简单来说,广告交换计 划公司会让你的广告在其会员网页上显示一 次,而你也需要让广告公司的广告在你的网 页上显示若干次作为补偿。由于广告交换成 本低(近为零),因而在网上也颇为流行。

3、论坛、BBS、新闻组
? 另一种免费宣传公司网站的方法,就是参 加论坛、BBS或新闻组(New Group) 讨论。不时进入与公司业务或网站主题相 关的论坛,利用你的专业知识,为网友提 供意见、分享经验、排忧解难,都会让你 公司的名字在网友中留下良好的印象。 在论坛发言时,在签名档留下公司的名字 及网址,久而久之,网站的访问量也会随 之而来的。当然,参与论坛的讨论是一项 长期而艰巨的任务,需要持之以恒。

?

4、其他
在公司的名片上引上公司的网址,用 电子邮件告之你的网站已经开通;花钱在 报纸杂志这类传统媒体上卖广告;还有其 他其他很多互联网之外的宣传手法……需 要花钱、花时间、花精力。

网页的外观设计
? 在前面的介绍中主要涉及网站的内容设计,这 里要谈到的是形式方面。 一个网站仅仅靠内容的全面、丰富、专业还不 够,网络这种媒体形式的瞬时性特点,要求一 个成功的网站要快速抓住浏览者的注意力,必 须在布局上合理、清晰、便于浏览,在色彩上 抢眼、和谐,引起与主题相符的心理共鸣。 总之,为浏览者提供一个舒适的阅读环境,是 外观设计追求的目标。

?

?

网页设计的基本原则
我们主要以下从两方面着手: 1. 网页版式 2. 色彩

网页版式设计
网页版式设计分以下两步进行: 划分页面框架。 填充内容。

? ?

1、划分页面框架
? 网页设计初期,先要对整个页面进行 一个大区域的划分。对页面的划分是 为了能让浏览者更清晰、更快捷地找 到所需要获取的信息。 ? 在这一步不需要讲究细节,只要有一 个轮廓就行。

常见的划分方法
? 常见的划分有“三横”式, “两横三竖” 式。其实对区域的划分还有更多的方法, 我们完全可以根据对网页所要表达的功能 模块来安排“横”、“竖”。 ? 还有其他一些划分方法,如海报式,它的 布局像一张宣传海报,以一张精美图片作 为页面的设计中心。常用于时尚类站点, 如喜力啤酒的主页。

网页版式结构图

(a) “三横”

(b) “两横三竖”

2、填充内容
? 这一步是将一些主要的内容放到划分好的 各个区域中。要遵循突出重点、平衡协调 的原则,将网站标志,导航条等最重要的 模块放在最显眼,最突出的位置,然后再 考虑次要模块的排放。 对“三横”结构而言,我们通常的做法是, 第一横放网站的标志、广告条、导航栏等 元素,中间一横是网页的具体内容,最下 面一横放版权信息和联系方式等。如图为 JVC公司的主页。

?

采用“三横”结构的JVC公司网页

? 而对“两横三竖”的结构,我们通常这样 来布局。第一横和最下面一横放法与上面 相同,“三竖”的左侧放站点的一些链接, 中间是网页的主要内容,右侧放新闻或友 情链接等零碎板块。参见下页图,为我国 著名的8848网站的主页(编辑整理)。

采 用 两 横 三 竖 结 构 的 8 8 4 8 网 站 主 页

设计注意事项
1. 网页的尺寸: 2. 对各板块的处理:

网页的尺寸
? 由于鼠标中键仅能在网页的纵向上滚动, 所以,为了便于浏览,最好不让浏览器出 现横向的滚动条。一般说来,对于网页的 高度不用刻意控制,但宽度是我们应该考 虑的因素。 按照800X600px的屏幕分辨率,网页版面 的宽度应为750~780px之间。 按照1024X 768px的屏幕分辨率,网页版 面的宽度应为900~1000px之间。 提示:网页宽度是减去滚动条(20px) 后的尺寸。

?

?
?

? 虽然现在主流的显示器为1024X 768px, 但是,考虑到在800X 600px的屏幕上,横 向上就不能完全显示的问题,在加之按 800X 600px做的页面,当使用 1024X768px的屏幕分辨率来看时,可以在 两边空白处放置活动广告,这也颇受网站 建设者欢迎。所以目前大部分的网站还是 选择按照800X 600px来制作网页。 ? 网易的主页宽度为752px,搜狐主页的宽度 为760px,新浪主页的宽度为760px。

对各板块的处理
? 如果在页面上出现众多版块时,为了使各 版块区域分明,可采用空白区分隔,还可 采用设置不同的背景色或加上边框、线条 等手段。如图1-9(a)所示。

板块区域排版比较

(a) 明确板块区域

(b) 不明确板块区域

排版中善用图片两招
? 为导航条和各版块标题区设计一组形状别 致、颜色突出的背景图片,一来方便浏览 者快速找到所需要的内容,二来使网页看 起来十分漂亮。如8848的网站图中的“图 书”、“影音”板块就采用了该方法。 ? 插入典型图片既可以美化网页又可以形象 地说明内容,如8848的网站图中的“图 书”、“影音”板块就采用了该方法。

色彩选择

? 浏览者第一次访问网站,色彩决定了他们对页面 的第一印象。所以,一个网站拥有漂亮的色彩, 比其他任何设计要素都重要。而根据网站的整体 设计进行协调的配色是最重要的。这个过程需要 我们用头脑和心灵来感受。 ? 网页色彩设计,并不是简单选用几种漂亮颜色的 问题。它需要设计师在色彩的使用上深思熟虑, 建立一个完整的色彩计划。计划依然要考虑主题、 浏览群体等多种因素,这些因素考虑的越具体越 好,这样才能准确确定网站风格,从而选择具体 用色。

用色方案

? 在用色的选择方面,可以用“千变万化”来形容, 只有孜孜不倦的学习和脚踏实地的训练,才能够 提高我们的色彩感。 ? 通常用以下方法为我们的网页确定色彩:首先, 确定“主色彩”。主色彩时网页中面积最大的颜 色,也可以和背景色一起混用,也就是说,它主 导整个网页界面氛围的色彩。 ? 然后确定“辅助色彩”,辅助色彩是可以和主色 彩协调地配色,起到辅助作用的色彩; ? 最后来定“强调色彩”,强调色彩起到和谐、强 调的作用。

另类方法
? 还有一种方法是将网页的背景色与主色彩 分别考虑, ? 首先确定出背景色(通常为白色,或黑 色), ? 然后再确定主色彩、辅助色彩、强调色彩。

实用范例——喜力啤酒
在喜力啤酒Heineken的主页设计用色方案 中,为了刻画公司整体形象,选择了公司标志 (Logo)色上使用的绿色,作为主色彩。这种 网站色彩的选择蕴含了色彩市场营销的理念,既 强化了商标的印象,也考虑到以前曾经用过的好 色彩,不但会减少选择色相的时间,而且也能够 选择出代表公司形象的最佳方案,可以达到一举 多得的效果。确定了主彩色后,就要找到与之相 配的辅助色彩,这里选择了同类色,以便增强网 页的层次感、丰富网页的色彩。最后是强调色的 应用,采用对比色,起到了突出重点的目的。

喜力啤酒主页
主色: #319a00 辅助色: #005529 #7baa21

强调色: #ff0400

网页制作者的基本要素:
1.要有一定的美术功底、审美观念。要多学会观

察,多欣赏一些中外优秀的作品,多欣赏广 告作品,这对你的创意都很有启发。 2.作图软件,PhotoShop和Fireworks都是网页 必备的,两者各有长处。 3.内容第一,多收集些有积极意义、吸引人的资 料。个人主页中尽量多写些原创的东西。如 果转载,一定要注明作者。 4.要有顽强的毅力,勤于思考;勤于维护,特别 是留言簿要常关注。 5.时刻为网友着想,站在网友的立场,多想想网 友的感受。

观察与思考
1. 上网浏览以下网站: ? 网页设计师 http://www.w3cn.org/ ? 尼康 http://www.nikon.com.cn/ 或 http://www.nikon.com ? 老康蓝屋 http://www.shlk.com/ 2. 联系自己的网站关注并分析以上所看网站: ? 设计风格; ? 站点的主题、栏目设计(内容的层次结构); ? 站点的文件结构、链接结构; ? 主页和其它页面的版面设计(注意:布局结构,以及 图片、文本、色彩、空白、均衡等因素的设计)。

作业
根据自己的爱好和特长,设计一个网站。 要求如下: 1. 确定网站主题和名称以及站点下设栏目, 并用方框图表示之。 2. 设计网站的整体风格,并根据风格确定主 页、目录页和内容页三类页面的版面布局、 色彩方案、文字、图片等设计元素的应用, 并绘制草图。

谢谢光临!
四川教育学院电子信息工程系 赵苏骅 shrong1103@163.com 13683424922


更多相关文档:

专题三第一讲(定稿)

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...专题三第一讲:高中物理新课程的教学设计( 专题三第...比如就是物理的概念,物理的规律等等.那么像这样的...

第三章汇编程序设计讲稿

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...本讲重点: 本讲重点:了解汇编的概念及其方法, 掌握...在字符前应添加第三章 汇编语言程序设计 数字...

第三届新概念结构设计大赛-点式分离装置创意设计专题(非密)[终稿]

第三届新概念结构设计大赛-点式分离装置创意设计专题(非密)[终稿]_其它_高等...第三届新概念结构设计大赛-点式分离装置创意设计专题一、活动简介 分离装置在...

徐路毕业论文第三稿1

徐路毕业论文第三稿1_管理学_高等教育_教育专区。...充分的强调以人为本的设计理念,主张环境,包装,人与...专题推荐 2014教师资格材料分析辅... 2014小学教师...

程序设计(C)第三次作业

新闻网页贴吧知道音乐图片视频地图百科文库 ...程序设计(C)第三次作业_工学_高等教育_教育专区。...1/2 专题推荐 2014年全国计算机等级考... 【呕心...

山水同源第三稿[1]

山水同源第三稿[1]_文化/宗教_人文社科_专业资料 暂无评价|0人阅读|0次下载|举报文档 山水同源第三稿[1]_文化/宗教_人文社科_专业资料。“第三届宝天文化...

1.公司运营管理体系设计指导思路(第三稿)

新闻网页贴吧知道音乐图片视频地图百科文库 ...1.公司运营管理体系设计指导思路(第三稿)_经管营销...专题推荐 百度认证-大数据营销01 优秀产品经理指南 ...

1第三单元第一节第一课时修改稿2

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...修改稿(1)2 暂无评价 11页 免费 必修二第三单元...猜想 我对气体的猜想 猜想的依据 (2)请设计实验...

精 品 教 学 设 计3.7.1第三章补充内容之二复合函数的概念和应用

精品教学设计3.7.1第三章补充内容之二复合函数的概念和应用_数学_高中教育_教育专区。高中精品数学教学设计。精品教学设计 复合函数的概念和应用(2 节课) 设计理...

【2015届高考数学二轮复习 专题2 第1讲 三角函数的概念、图象与性质素能训练(文、理)

【2015届高考数学二轮复习 专题2 第1讲 三角函数的概念、图象与性质素能训练(...4 4 2 5 2 5 3.(文)(2014·唐山市二模)已知 sinα + 2cosα = 3,...
更多相关标签:
概念设计网站 | 概念产品设计网站 | 网站专题页面设计 | 网站专题页设计 | 专题网站设计 | 国外概念设计网站 | 建筑概念设计网站 | 网站专题设计软件 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com