网页设计基本流程
规划网站栏目
首页设置超级链接和搜索引擎 设定交流的栏目
交流栏目是指论坛,留言本,邮件列表等,可以让浏览 者有机会发表他们的意见,参与网站的活动。
设置信息下载和咨询服务栏目 方便实用的网站指南
网站的目录结构
设计目录结构的原则是方便网站的管 理与维护,设计链接结构的原则是方 便浏览者的阅读。 网站的目录结构 合理安排文件的目录,不要将所有文 件都存放在根目录下。 按栏目内容建立子目录 在每个一级目录或二级目录下都建立 独立的Images 目录,管理素材。
版面布局与首页的设计范例
几种常见的版面布局样式 “同”字型结构布局:所谓同 字型结构就是指页面顶部为主 菜单,下方左侧为二级栏目条, 右侧为链接栏目条,屏幕中间 显示具体内容的布局。 这种布局的优点是页面结构清 晰,左右对称,主次分明,因 而同字型布局的网页得到非常 普遍的运用,不过同字型布局 的缺点:是太规矩呆板如果细 节色彩上缺少变化调剂,很容 易让人感到单调乏味。
网页色彩的搭配
色彩的基本知识(参照 网页色彩构成概论) 网页色彩搭配的原则
1. 色彩的合理性,网页的色彩要漂亮 引人注目,同时还要照顾到人的眼 睛的生理特点不要用大面积的高纯 度色相,它容易使人的眼睛疲劳。 2. 色彩的独特性,要有与众不同的色 彩搭配衬托出网站的个性,使得大 家对你的印象深刻。 3. 色彩的艺术性,色彩设计属于艺术 形式的范畴,按照内容决定形式的 原则,色彩应服务于网站的内容, 和网站的气氛相适应。
规划网站栏目
细致地划分主要内容栏目
将主要内容信息按一定的方法分类,并为它 们设立专门的栏目。
“开门见山”地列出主要内容
网页的内容一般分为几个层次,网站的主要 内容一定要放在首页或一二级栏目中,如果因信 息内容结构问题不得不放在较深的位置上,一定 设法将它在首页安排超级连接,同时在其他网页 放置多个超级连接以便使浏览者很容易地找到它。
对比色与网页色彩的搭配
对比色的应用,原色饱和度较高 的色彩搭配使用,即为对比色。 各种色彩均可作为对比色使用, 但应以一种颜色为主调,使它占 有较大的面积,同时辅以对比色, 起到点缀丰富的作用。 例如以粉红色为主的色调,配以 小面积的淡蓝,淡黄,淡绿,或 者土黄,土灰,土蓝。商业零售 站点,新闻站点,常常运用对比 色造成丰富充实的效果。
版面布局与首页的设计
对比:所谓对比就是利用不同的色彩,形态, 线条等视觉元素相互并置对比,造成画面的 多种变化, 达到丰富视觉的效果。 疏密:疏密关系本是绘画的概念,疏 是指画面中形式元素稀少,甚至空 白的部分.密是指画面中形式元素 繁多的部分,在网页设计中,就是空 白的处理,运用太满太密,太平均是 任何版式设计的大忌,适当的疏密 搭配可以使画面产生节奏感,体现 出网站的格调与品位图.
企业网站建站过程 网站的形象设计 1.网站的标志 2.网站的风格定义 3.网站的广告词 4.网站的标准色彩 5.网站的标准字体 规划网站栏目
规划网站栏目 1.划分主要栏目 2.首页超级链接和搜索引擎 3.设定交互栏目 4.设置下载和咨询服务栏目 5.方便的网站导航 6.网站的目录结构 7.网站的链接结构
版面设计 1.版面设计的过程 2.常见的版面样式 3.首页的设计 网页的色彩搭配 1.色彩的基本知识 2.色彩搭配的原则 3.色彩搭配的技巧
网页中的图像处理 1.图像的类型 2.图像的格式 3.图像的处理技巧 网页中的字体 1.字体与字号 2.特殊字体的处理 网页中的动画与广告 1.动画制作的工具
网站的标准字体
1. 标准字体是指网站 用于标志标题,主菜 单的特有字体。 2. 特别字体只能用图 形图像的形式出现 在网页中。
网站的广告词
1.
2.
用简洁精炼的句子传达信息,网站设计者应努力用一句 话一个词来高度概括网站的性质特点和网站的目标,创 造出类似实际生活中的广告金语来,在最短的时间内传 达出最丰富的内涵。 标志,色彩,字体和广告语四个方面是一个网站树立CI 形象的关键,确切地说是网站的表面工作,设计并完成 这四项工作网站的整体形象就有一个基本的轮廓,有了 一个统一的面目并且具有了一定的专业性。
网站的首页大致分为三种类 型 书籍封面式首页 有些大型网站往往有一个书 籍封面式的,首页上面只有 一个进入的链接点击之后, 才进入到网站。这种首页设 计精美非常考究给人以雍容 大度的气派。
版面布局与首页的设计形式
期刊杂志式的首页
与书籍封面式首页相似,但在首页上有站点全部内容的目录索 引,图文并茂看上去就像是期刊杂志的封面,既漂亮又使网站的 主要内容一目了然,是一种值得推荐的形式。
版面布局与首页的设计
各个字体字号的描述,及其所在 页面位置的参数,有些作为标题 的文字其实已作为图形图像对待 了,这里的文字仅仅指文本的字 体和由计算机程序产生的标题字 时,应说明字体的HTML的色彩数 值. 各种色彩的数值的确定,除图形 图像以外,设计方案中的标准色, 底色,文字的颜色,都应该以 RGB 模式数值或HTML语言数值表 示出来, 最后必须估算一下页面的大小, 根据经验或参照类似的在线网页, 概算一下将来的网页大约有多少 个KB, 一般每页上的图文KB 数 加起来不要超出50KB 否则就会 影响显示速度。
1.
广义的信息:包括网站 的CI设计,网站主题定 位和网民群体的定位以 及网页的制作策划,形 象包装宣传营销等等, 它主要是通过视觉语言 来树立网站的社会形象 从而达到广告宣传的效 果。(由管理部门提供 甚至需要借助广告策划 的眼光进行全面的CI 设计才可能有一个好的 方案)
设计网站的标志
标志图形的设计创意来自网站的名称和内 容,标志可以是中文英文字母,可以是符 号图案,可以是动物或者人物等。 网站标志设计创意可以从以下几种思路开 始: (1) 选用公司有代表性的人物,动物,花草, 可以用它们作为设计的蓝本加以卡通化和 艺术化。 (2) 网站有专业性的可以以本专业有代表性 的物品作为标志。
版面布局与首页的设计范例
“国”字型布局 国字型布局是在同字型 布局基础上演化而来的, 在保留同字型的同时,在 页面的下方增加一横条状 的菜单或广告。 这种布局的优点是充分利 用版面信息量大与其它页 面的链接多切换方便,缺 点是页面拥挤四面封闭, 令人感到憋气。
版面布局与首页的设计范例
自由式布局 自由式布局打破了同字型,国字 型布局的菜单框架结构页面,布 局像一张宣传海报以一张精美图 片作为页面的设计中心菜单栏目 自由地摆放在页面上常用于时尚 类站点 网页优点是漂亮吸引人,缺点就 是显示速度慢文字信息量少,这 种布局适合于以图像为主要内容 的站点.
1. 2. 3.
网站的目录结构
1.
2.
3.
目录的层次不要太多,一般目录的层次不超过5 层,对于 网站的工作人员来说层次越少查找起来也就越容易,也就 越便于维护管理 不要使用中文目录,网络是无国界的Internet 上使用最广 泛的语言是英语,如果使用中文目录有可能对网址的正确 显示造成困难, 尤其会给非汉语的浏览者带来不便 使用意义明确的目录文件名,在给目录取名字时应考虑取 的名字,尽量反映内容以便于记忆管理。
网站的标准色彩
企业的标准色,就是该企业在自己标志产品及宣 传品等方面统一使用的一个固定的颜色。 网站的标准色彩只能是一种,具体应用时可以标 准色为中心利用它的明度变化产生不同的色彩,标准 色彩要广泛运用于网站的标志,标题,主菜单和背景 色块,给人以整体统一的感觉,其它色彩只是作为对 比和衬托,绝不能喧宾夺主。
版面布局与首页的设计范例
左右对称布局 顾名思义采取左右分割屏幕 的办法形成的对称布局,在 左右部分内自由安排文字图 像和链接,点击左边的链接 时,在右边显示链接的内容, 它的优点是既活泼自由,又 可显示较多的文字图像。缺 点是将两部分有机的结合比 较困难不适于信息数据量巨 大的网站。
版面布局与首页的设计形式
网站的链接结构
网站的链接结构是指页面之间相 互链接关系。 安排链接结构的原则: 1.一是要符合浏览者的思维习惯 和浏览习惯。 2.一是要将网站中最重要的信息 有最多的机会与浏览者见面。
设计选项 1. 线性方法 主页 Page one Page two Page three
2 分层模式 主页
主题 A
1. 2.
3.
网站的风格与创意设计
1.
2.
3. 4.
将网站的标志,特有的花边,线条,图 案出现在每个页面上,应该创作一些 网站特有的符号或图标. 使用标准色彩和相近的底色背景色, 文字的链接色彩,图片的色调,页面 的底色边框色等尽量采用与标准色 彩一致或相近的色彩. 突出标准字体在关键性的标题,菜单, 图片里使用统一的标准字体. 用统一的图片处理效果比如阴影效 果的方向厚度模糊度都必须统一. 采取上述具体措施后,虽不能完全保 证网站的艺术效果和品位,但却使网 站具有统一性完整性.
版面布局与首页的设计
布局: 是一个设计的概念,指的是在 一个限定的面积范围内合理安排布 置图形,图像和文字的位置,在把 文章信息按照轻重缓急的秩序陈列 出来的同时将页面装饰美化起来。 版面标准: 设定为800*600 像素
版面布局与首页 的设计过程
版面布局的过程 最初的设计还是需要动笔勾画 草图的,草图的目的是将脑海里朦 胧的想法具体化变成可视可见的轮 廓。 在轮廓草图上首先将需要放置 的功能模块安排到页面上,主要包 含网站标志,主菜单,栏目条,广 告位,搜索器,计数器等,这时我 们必须突出重点,将网站标志,主 菜单,商品目录,及广告等最重要 的模块放在最显眼最突出的位置, 然后再考虑次要模块的排放。
网站制作流程
1. 收集信息 2周 2. 设计草案 3天 3. 制作设计手册 网站结构 页面结构 色彩版式 预算报价 2周 4. 制作页面 1周 5. 调试 2周 6. 发布 7. 跟踪 半年
网站发布的信息
1.
具体的实用信息:主要是 由文字数据和图形图像组 成,有些网站还可以使用 动画声音等多媒体技术, 它们通过网站本身的栏目 设置体现出来。(由业务 部门提供)