当前位置: 首页 网站模板

网页版面设计(如何设计自己的网页界面)

时间:2024-05-29 作者: 小编 阅读量: 7 栏目名: 网站模板 文档下载

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

如何设计自己的网页界面

网页制作的基本设计思路

要设计出一个精美的网站前期工作是必不可少的。一个网页的成功与否,很重要的一个因素在于它的构思,好的创意及丰富详实的内容才能够让您的网页充满勃勃生机。

1 、定位网站的主题和名称

选题应遵循的原则:

(1)主题要小而精

(2)题材最好是你自己擅长或喜爱的内容

(3)题材不要太滥或目标太高

命名应遵循的原则:

(1)名称要正

(2)名称要易记

(3)名称要有特色

2、定位网站的CI形象

(1)设计网站的标志(logo)

(2)设计网站的标准色彩

(3)设计网站的标准字体

(4)设计网站的宣传标语

3、确定网站的栏目

(1)要紧扣主题

(2)设立最近更新或网站指南栏目

(3)设立可以双向交流的栏目

(4)设立下载或常见问题回答栏目

4、确定网站的目录结构

(1)不要将所有的文件都存放在根目录下,会造成文件管理混乱

(2)按栏目内容建立子目录

(3)在每个主栏目目录下都建立独立的IMAGES目录

(4)目录的层次不要太深

(5)不要使用中文目录

(6)不要使用过长的目录

5、确定网站的链接结构

(1)树状链接结构

(2)星状链接结构

6、 资料的收集与整理

7、 选择网页的设计方法

8、 设计网页要注意的问题

(1)全局设计

每个页面上都应该放有价值的东西

不要让页面过载

用不同的方法检查你的设计

网页排版有整体感,合理运用空间

(2)布局

要保持统一

使用表格来组织页面

使用FRAME时要小心

(3)图形

保持你的图形大小小于30K

不要使用渐进图形做为背景

在图形中使用尽量少的颜色

图形要附加文字说明,以便关闭图像时查看

(4)颜色

不要错误地使用颜色

检查你的对比度

(5)文本

文字要严密

保持你的排版格式尽量简单

不用闪动的文字

谨慎地使用浏览器插件和JAVA小程序

(6)备份

(7)更新与维护

9、色彩搭配

网页的色彩是树立网站形象的关键之一

●色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。颜色表

红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色---具有洁白,明快,纯真,清洁的感受。

黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

●网页色彩搭配的原理

1.色彩的鲜明性。

2.色彩的独特性。

3.色彩的合适性。

4.色彩的联想性。

●网页色彩掌握的过程

随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。

○网页色彩搭配的技巧

1.用一种色彩。

2.用两种色彩。

3.用一个色系。

4.用黑色和一种彩色。

在网页配色中,忌讳的是:

1.不要将所有颜色都用到,尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

网页版面布局有几种

1.T型布局

T型布局是指页面顶部为横条网站标志和广告条,下方左半部分为主菜单,右半部分为显示内容的布局。因为菜单背景饺探,整体效果类似英文字母T,所以称之为T型布局,这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰,主次分明,是初学者最容易学习的布局方法;缺点是规矩呆板,如果把握不好,在细节和色彩搭配上不注意,容易让人看了之后感到乏味。

2.“口”型布局

“口”型布局是页面上下各有一个广告条,左边是主菜单,右边是友情链接等内容,中间是主要内容。其优点是充分利用了版面,信息量大;缺点是页面拥挤,不够灵活。

3.“国”型布局

“国”型布局又称为“同”型布局,是一些大型网站喜欢使用的布局类型。页面顶部是一横条,横条左部设置网站标志,右部是横条广告,横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏,左边一般放置内容导航、二级栏目、注册登录、搜索引擎等,右边一般放置动态新闻、热点内容、友情链接等,中间显示网页的主体内容,在页面的最下方是一横条状菜单或广告,也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计,主要优点是页面容纳的内容多,信息量大。

4.标题正文型布局

标题正文型布局最上方是标题或广告等内容,下方是正文,通常文章页面或注册页面采用此种布局,其特点是简洁明快,干扰信息少,较为正规。

5.“三”型布局

“三”型布局具有简洁明快的艺术效果,适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字,给浏览者以强烈的视觉冲击,使其感觉进入了一幅完整的画面,而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部,网站标志非常醒目。

6.“川”型布局

“川”型布局比较特殊,整个页面在垂直方向分为3列,网站的内容按栏目分布在这3列中,可以最大限度地突出主页的索引功能。如果网站栏Bf良多,可以考虑采用这种布局。它和“国”形布局的主要区别是:把主内容区换成了各个二级页面的链接,其中的不足是二级栏目比例不易配置平衡,色彩不易协调。

7.POP布局

POP布局像一张宣传海报,以一张精美图片作为页面的设计中心,在适当位置放置主菜单,常用于时尚类站点。这种布局方式不讲究上下和左右的对称,但要求平衡有韵律,能达到动感的效果,其优点是漂亮吸引入,缺点是速度慢。

8.变化型

采用上述几种布局的结合与变化,布局采用上、下、左、右结合的综合型框架,再结合F1ash动画,使页面形式更加多样,视觉冲击力更强。

网页布局的基本形式主要有上述几种类型,至于哪种布局类型最好,需要具体问题具体分析,要从网站内容、页面结构和表现形式等多方面进行综合考虑,同时也需要制作者具有较高的设计水平。

网站设计需要学什么?

1,你必须要学会HTML知识。
HTML,又叫做‘超文本标记语言’。它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。基本上网页大部分都是由HTML构造完成,实际上它像是一种格式、定义,指示、说明网页中的文字、声音、图像、表格、图形、链接等。
因此,在建设网页的时候你必须要懂得HTML才能来准确的构建网页。



2,CSS知识。
CSS又作层叠样式表,顾名思义它是一种用来表现HTML或着XML等文件样式的语言。在制作网页中需要它结合HTML来执行网页的排版,布局。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
3,javascript脚本
JavaScript是一种属于网络的脚本语言,通常是通过嵌入到HTML网页中给网页带来各式各样的动态效果。如果,你在制作网页中需要一个弹出层,需要一个动态特效、页面交互就必不可少的需要掌握javascript的知识。
javascript脚本语言同其它语言一样,有它自身的基本数据类型。同时它也能兼容绝大部分的浏览器。在使用时,可以直接嵌入到HTML网页中,也可以单独写成JS文件由外部调用。
同作为脚本语言的还有:VBScript 也是比较常用的。
它是一种微软环境下的轻量级的解释型语言,使用COM组件、WMI、WSH、ADSI访问系统中的元素,对系统进行管理。同时它又是ASP动态网页默认的编程语言,配合ASP内建对象和ADO对象,用户很快就能掌握访问数据库的ASP动态网页开发技术。



3,学习一种动态网页技术
ASP是微软公司开发的代替CGI脚本程序的一种应用,也是微软公司的第一个服务器侧的脚本引擎,能够动态产生Web页面。ASP可以与Web数据库以及其它程序进行交互,是一种简单、方便的编程工具。ASP的网页文件的格式是.asp,曾用于各种动态网站中。2002年1月微软发布了最新的ASP.NET,取代了ASP。
ASP学习起来要简单一些,然而它已经是微软放弃提供的,可以说未来发展环境堪忧,是以,现在许多人放弃了使用ASP这种陈旧的技术。转而在PHP上大展手脚。
PHP:超文本预处理器。它是一种统统的开源脚本语言,其语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。
许多人在学习初期,都在考虑到底是要学习ASP动态技术,还是学习PHP,实际上,各自有各自的优势,主要还在于自己的使用上。
不难看出,更多的人更看好PHP。所在在学习动态网页技术上,还是要自己的考虑一番。如果只是单纯的为做一个网页,那么ASP完全可以。倘若你是要在此方面发展,那自然首选PHP,现在互联网讲究的是开源,理论上讲所有的PHP源代码都可以在网络上查找到,所以也就是上面那位同学说的,开源才是趋势。
4,你还要掌握一种数据库的技术
access是微软开发的数据库,夹杂在office中,一般电脑中安装了office软件就能轻送的找打它,access适合于一般的企业网站,因为开发技术简单,而且在数据量不是很大的网站上,检索速度快。不用专门去分离出数据库空间,数据库和网站在一起,节约了成本。
然而当它的数据库过大时,一般达到100M左右的时候性能就会开始下降!一般ASP常用access,主要是它的方便快捷。
相比之下SQL为现在更多的人在使用。
SQL:结构化查询语言。SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言。在使用它时,只需要发出“做什么”的命令,“怎么做”是不用使用者考虑的。SQL功能强大、简单易学、使用方便,已经成为了数据库操作的基础,并且现在几乎所有的数据库均支持SQL。



此外还有:
MySQL:是一个关系型数据库管理系统,数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。
MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策,它分为社区版和商业版,由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发都选择 MySQL 作为网站数据库。
由于其社区版的性能卓越,搭配 PHP 和 Apache 可组成良好的开发环境。
由此,倘若你要学习PHP动态技术,那么就一定要了解MySQL,两者有直接的关系,虽然搭配其它也可使用,但网络技术讲究一个更好的兼容,所以,还是注重一些相辅相成,再说,即时,新手本就是从头开始。那就学一个利于当下的才合理不是?
5,一个编程工具
以上的知识学会之后能让你懂得如何去开发、制作网页,然而在此基础之上你还需要懂得使用一些编程软件,好在这些平台上开发属于你的网页。
DreamWeaver , HBuilder , 等等,这些软件都可以实现即时显示,你可以在一边编辑的过程中,一边查看网页的变化。具体,还要看你自己的使用习惯。但无论那一款软件,在使用之前都需要了解、学习一下,以便更好使用。

请问网页设计怎么做?

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