|
个人主页新手全攻略。
快马加鞭”—令网站浏览提速的七大秘方。
使 FrontPage 与 Dreamweaver“ 亲密合作 ” 。
网页色彩搭配的设计艺术 。
网页设计必读,新手必读....
网页制作基本原则 。
网站的整体风格和创意设计 。
友情链接的苦恼(兼说网页简洁)
几种主页制作中常用的小花招.
一些与网页密切相关的技术.
关于网页导览设计的九点注意.
网页设计八种陋习.
让你的主页更精彩.
网页设计时应注意哪些问题.
主页制作五步曲.
制作个人首页的窍门.
网页设计中排版与布局小基础.
网页导航设计的注意要点.
Q: 个人主页新手全攻略。 A: 可能每个上网的朋友都想有一个属于自己的 “ 家 ” ,其实在今天,拥有自己的主页实在不是一件什么难事了,只要你有一点电脑基础,只要你想去做。我在网易社区会常看到诸如 “ 如何做主页 ” 、 “ 怎样拥有自己的主页 ” 这类的话,其实第一步就是,动手去做!不知从何下手?那我就给你讲讲吧!
第一步:计划 不管做什么,如果没有计划是不可思议的。其实这里所说的计划也没什么的,就是你要做你的主页之前应该有个想法,什么内容呀,什么方面的呀等等。我想个人主页只要是你自己喜欢的就足够了。比如,你是个球迷,那你就可以做一个有关足球的,你喜欢某个球星,那你也可以做一个与他相关的主页。再就是你的专业特长,比如你是个大夫,你可以在你的主页里介绍有关医疗方面的常识之类的,你正在炒股,那你也可以做一个与之相关的。总之,不要因为内容而发愁,只要是你能做的,那就足够了。
第二步:找一个合适的工具 想好做什么了,接下来就是怎么去做的问题了,要做就得有合适的软件,也就是我们通常所说的网页制作工具了。现在流行的网页制作工具有两种: Frontpage2000( 以下简称 FP) 和 Dreamweaver3.0( 以下简称 DW) 。我本人建议,初学者学 FP 合适一点,其 “ 傻瓜 ” 式的操作方式、友好的界面及强大的功能是其成名的原因!当然,你也可以学 DW ,它在动态网页制作方面无 “ 人 ” 能及,其功能比 FP 还要强大,但它的界面不是很适合初学者,操作起来也不像 FP 那样方便。
第三步:动手布置你的 “ 家 ” 内容想好了,用什么想好了,下面就要动手去做了。做主页涉及到很多,并非一句话两句话能说完的,所以这里并不想做更详尽的论述。请大家参阅相关方面的书籍和文章。
第四步:辅助功能 如果你在网上安了家,你想不想知道有多少人来过你的 “ 家 ” ?你想不想知道来你 “ 家 ” 的人有没有什么想法?你想不想让大家在你的 “ 家 ” 中讨论点儿什么?你想不想让来你家的人能互相聊聊 …… 等等,总之,你可能忽然会发现你的家还有很多东东要布置。不要急,我们做为个人主页,用一些免费的就行了,而且如果想自己做也有一定的困难,先不说技术上的,首先就要有稳定的支持如 CGI 或 PHP 等的空间,总之,如果你不是想做很专业的个人主页,这些东东就到网上找吧。其实,网上给我们已经提供了很多,具体可参阅新浪搜索里的免费资源,那里面什么留言板、论坛、聊天室等等等等,你能想到的差不多都有了。
第五步:为你的家找个地方 到现在,你的家可能已经打扮的漂漂亮亮的了,可是,别人怎么才能看到你的家呀?别急,现在在网上给提供这种免费空间的地方多的是,如: http://go.163.com( 网易 ) , http://www.topcool.net( 首都在线 ) 等。考虑到初学者,这里给介绍一个从申请到上传都非学简单的一个: http://www.8u8.com( 发又发 ) ,你点进去后,只要你认识字,我想你就能看明白,按它的仅有的几步填进去就行了,申请后,你按它的提示到你的出箱看看,一切搞定!
第六步:上传你的主页 现在一切都准备好了,把你做好的主页上传到你申请的免费空间上就行了。仍以 “ 发又发 ” 为例,你在申请并确认完后,你进到它的首页,你在上面能看到 “ 专业建设 ” 四个大黑字,点进去,然后,输入你的用户名和密码,进去以后,里面已经两个文件了,不要管它,删掉就行了,选中相就文件的复选框,点 “ 删除 / 刷新 ” 按钮,就搞定了。首先有一点要注意:你的主页的首页(也就是你用你的网址进去后能看到的那页)文件名必须是 “index.htm” ,这点你要注意了。然后你先建立几个文件夹,也就是你的主页里有的对应的文件夹,因为这儿只能上传单个的文件,不能上传文件夹。然后上传文件,把对应文件夹里的文件上传上去,一定要对应好了,文件夹在建立时注意大小写,要跟你上传前在你机器里的的完全一致。这样,你的家就算是安置好了。
第七步:宣传你的 “ 家 ” 你已经在网上安置了你的家,为了能让别人知道,你可以跟人交换链接,可以适当的到别的论坛发点儿广告(注意不要违返人家的规定哦!),到一些搜索引擎把你的主页提交上去,总之,想尽一切办法,让更多的人知道你的主页!
Q: 快马加鞭 ”— 令网站浏览提速的七大秘方 。 A: 很多朋友都用虚拟主机来做网站,将网页文件存放在虚拟空间上,但是页面内容一多,网站打开的速度就显得特别慢,如果您碰到这种情况,与其寻求更好的空间,不如通过优化网页代码来取得满意的速度。笔者总结了一些切实可行的方法,制作主页时,以下的方法可以令你的网页速度大大提高。
一、记得帮页面减肥 我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘,再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重,所以,网页本身所占的空间越小,那么浏览速度就会越快。这就要求在做网页的时候遵循一切从简的原则,如:不要使用太大的 Flash 动画、图片等资源。干净、简洁的页面会给人一种思路明朗的感觉。
二、如没必要,尽量使用静态 HTML 页面 众所周知, ASP 、 PHP 、 JSP 等程序实现了网页信息的动态交互,运行起来的确非常方便,因为它们的数据交互性好,能很方便地存取、更改数据库的内容,使网站 “ 动 ” 起来,如:论坛、留言板等。但是这类程序必须先由服务器执行处理后,生成 HTML 页面,然后再 “ 送 ” 往客户端浏览,这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序,网页显示速度肯定会慢,所以没有必要,请尽量使用静态的 HTML 页面。
三、不要将整个页面内容塞到一个 Table 中 这是网页设计的问题了,很多站长为了追求页面统一对齐,将整个页面的内容都塞进了一个 Table (表格)里,然后再由单元格 td 来划分各个 “ 块 ” 的布局,这种网站的显示速度是绝对慢的。因为 Table 要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度。正确的做法是:将内容分割到几个具有相同格局的 Table 中去,不要全都塞到一个 Table 里。
四、将 ASP 、 ASPX 、 PHP 等文件的访问改为. js 引用 这在 ASP 、 ASPX 、 PHP 等程序设计时应该注意的,如果你要在静态的 HTML 页面里嵌入动态的数据,而这些动态的数据是由 ASP 、 PHP 等程序来提供的话,会使用以下的语句引用:,这样的话,每次有一个人访问你的网站,服务器就要执行并处理一次 tongji.asp 文件,从数据库抽取相应的数据,再输出给网页显示,如果有几万个人同时访问,就要执行几万次,后果就可想而知。建议在这些程序中将数据动态生成到一个 1.js 文件中去,然后在首页通过这样的代码来引用该 1.js 文件。这样,数据显示的任务就交给客户端的浏览器去做,不会耗费服务器的资源,显示速度自然就很快;笔者的网站 www.25cn.net 下有个 index3.htm 文件,大家可以通过访问 www.25cn.net/index3.htm 和 www.25cn.net 做一下比较,前者所花的时间几乎是后者的几倍!
五、使用 iframe 嵌套另一页面 如果你要在网站上插入一些广告代码,又不想让这些广告网站影响速度的话,那么,使用 iframe 最合适不过了。方法是:将这些广告代码放到一个独立的页面去,然后在首页用如下的代码将该页面嵌入即可,这样就不会因为广告页面的延迟而拖了整个首页的显示。
六、讲究网站计数器代码放置的技巧 在网页里放置计数器可以统计网站的访问流量,为站长和广告商家提供访问依据,但是,不管功能有多强大的网站统计系统,都会有出故障的时候。如果直接把统计代码放到页面内容的前面,或者放在一个 Table 或者 div 标签里,那么在计数器不能访问的时候,你的页面上那个 Table 或者 div 就会产生几十秒钟的延迟,导致页面很长时间才能访问。所以,要提高网站的速度,就要讲究统计代码放置的位置,正确的方法是:把统计代码放到页面的最下面,并且不要和页面内容同在一个 Table 或者 div 标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个 Table 或者 div 来放置计数器。这样,在计数器不能访问的时候,你的网站速度也不会受到丝毫影响。
七、友情链接的学问 网站之间互相做链接可以增加网站的宣传效果,做 LOGO 图片链接更能准确地描述网站的主题和定位,宣传效果会大大的增强,但图片链接做得太多,必然会影响网页的显示速度。很多站长都喜欢直接引用友情网站上的图片 URL ,这样图片要先经过加载才能显示的,各个友情网站的访问速度不一样,整个表格都要等图片都下载完了才能显示出来,这样大大降低了网页的速度。因此,做友情链接时应尽量做到:
1. 只做文字链接:做文字链接是不会延迟网页速度的。
2. 将所有链接放到一个独立的分页去,然后在首页链接上该页。
3. 如果友情链接一定要出现在首页,请将链接所在的整个 Table 放到页面的最下方,因为页面是由上到下逐行显示的,将其放到页面的最下方,不会延迟其他内容的显示。
4. 友情链接的 LOGO 图片先下载后再传到自己的网页空间,这样,速度由自己的网站空间决定而不受友情网站的影响。
来源:《中国电脑教育报》
Q: 使FrontPage与Dreamweaver“亲密合作”。 A: 作为一个网页设计初学者的时候,你是否曾经为选择一款好的设计软件而困惑 ? 是不是有人向你推荐 FrontPage ,因为 FrontPage 是微软的王牌、网页制作的老前辈,应该使用 FrontPage 。但是又有人告诉你 Dreamweaver 是网页制作的当红小生,他对网页设计的影响谁也不能小瞧,应该使用 Dreamweaver 。
许许多多的人为自己喜欢某个软件而争执不休。但是如果你仔细想一想,为什么不兼而有之,发挥两者的长处呢 ?
我们可以从网页的各方面的构成来讲解 FrontPage 和 Dreamweaver 结合使用。
1 、结构
网页结构的架构是网页设计是否成功的关键之一。就象一只美丽的风筝同样需要科学设计骨架一样。使用过 FrontPage 的朋友都知道虽然微软宣传所见即所得,但是经常会出现我们设计的结构很好但是预览时候却出现各个 “ 零件 ” 挪位的情况。而 Dreamweaver 在这方面做的要比 FrontPage 好的多。因此,在网页的整体设计阶段,我建议大家使用 Dreamweaver 。等到我们在构建结构的过程中临时改变主意决定要加一个图片的时候,那么小范围的框架就需要重新设计。如果再使用 Dreamweaver ,他只会增加或者删除一个网格,形不成错落有置的局面。这个时候,需要你使用 FrontPage 的 “ 橡皮 ” 和 “ 画线 ” 工具来帮助你。使你网页机构美观大方,设计合理。在结构的设计过程中,我们会常常遇到怎么设计表格更美观这一问题。如果使用 FrontPage ,我们必须不断地使用右键改变网格属性。如果使用 Dreamweaver 这样的事情就会避免发生,因为 Dreamweaver 的工具栏就浮现在我们的设计面板上,所以我们可以进行更改,免去了很多的麻烦。
2 、源代码
我们都知道任何一个所见既所得的软件设计的网页都有其不合理的地方。一个网页设计师只懂得使用软件是不行的,还要学会编辑网页的源代码,这样的网页才能更美观大方。使用 Dreamweaver 的朋友都知道, Dreamweaver 虽然设计的网页漂亮。但是他本身在制作网页的过程中形成的源代码界面非常模糊。如果这个时候使用 FrontPage 就可以避免这种现象。在 FrontPage 的源文件项中,当我们看网页源代码的时候,网页源代码是错落有置,而且各种不同的程序例如 Javascript 、 Java 、 CSS 等都呈现出各种不同的颜色。这样可以方便我们更改网页源代码。但是 FrontPage 在这个方面也有其缺点,比如在我们的网页中嵌入的 ASP 代码。如果在 FrontPage 编辑格式下看到是一片空白,让我们常常不知道要编辑代码的位置。在 Dreamweaver 编辑状态下我们就能够看到各种代码标记,一般显示为黄色的小标记。当我们选中它的时候在源文件状态下就可以方便地更改我们嵌入各种代码了。这是 Dreamweaver 和 FrontPage 在源代码更改时候结合使用的方法,建议大家灵活掌握。
3 、修饰
每一个网页就象一件艺术品,他的后期工作应该是精雕细琢然后才能焕发出光彩。 Dreamweaver 在网页修饰方面远远不如 FrontPage 做的好。比如我们在网页制作中经常会使用插入搜索框、下拉框等。如果单纯使用效果很简单。如果使用一些必要的修饰,那么我们的网页就会奕奕生辉。使用 FrontPage 修饰边框要比 Dreamweaver 做出来的漂亮得多,也很有个性。每一个网页设计师都希望自己设计网页越小越好,如果他使用 FrontPage ,那么冗余代码就多,反之, Dreamweaver 冗余代码相对较少。在网页的修饰的收尾阶段,建议大家使用 Dreamweaver 。
最后需要提醒大家:在 Dreamweaver 和 FrontPage 结合编辑一个文件的过程中, Dreamweaver 经常会跳出提示,问你是否保存修改后文件,这个时候一定要看清楚了再决定呀!
每一个软件之所以受人喜爱并保持长久不衰都有其存在的理由。不要对使用 Dreamweaver 还是 FrontPage 而犹豫不绝了。在做网页的过程中,把二者都打开吧,你会发现他们都是你的好朋友!
Q: 网页色彩搭配的设计艺术 。 A: 打开一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩。色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计,在排除立体图形、动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印象。因此,在设计网页时,我们必须要高度重视色彩的搭配。 一、色彩的基础知识 色彩五颜六色、千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红、橙、黄、绿、青、蓝、紫等七色,各颜色间自然过渡。其中,红、黄、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分,冷色 ( 如蓝色 ) 给人的感觉是安静、冰冷;而暖色 ( 如红色 ) 给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。 色彩与人的心理感觉和情绪也有一定的关系,利用这一点可以在设计网页时形成自己独特的色彩效果,给浏览者留下深刻的印象。一般情况下,各种色彩给人的感觉是: 红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽 二、色彩搭配的原则 色彩搭配既是一项技术性工作,同时它也是一项艺术性很强的工作,因此,设计者在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、性格独特的网站。 1. 特色鲜明 一个网站的用色必须要有自己独特的风格,这样才能显得个性鲜明,给浏览者留下深刻的印象。 2. 搭配合理 网页设计虽然属于平面设计的范畴,但它又与其它平面设计不同,它在遵从艺术规律的同时,还考虑人的生理特点,色彩搭配一定要合理,给人一种和谐、愉快的感觉,避免采用纯度很高的单一色彩,这样容易造成视觉疲劳。
3. 讲究艺术性 网站设计也是一种艺术活动,因此它必须遵循艺术规律,在考虑到网站本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。 三、色彩搭配要注意的问题 1. 使用单色 尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。 2. 使用邻近色 所谓邻近色,就是在色带上相邻近的颜色,例如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一。 3. 使用对比色 对比色可以突出重点,产生了强烈的视觉效果,通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用。 4. 黑色的使用 黑色是一种特殊的颜色,如果使用恰当,设计合理,往往产生很强烈的艺术效果,黑色一般用来作背景色,与其它纯度色彩搭配使用。 5. 背景色的使用 背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景色要与文字的色彩对比强烈一些。 6. 色彩的数量 一般初学者在设计网页时往往使用多种颜色,使网页变得很 “ 花 ” ,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。
---- 欢迎来我的小站,有不错的音乐和特效呀,值得初学者借监。
Q: 网页设计必读,新手必读 .... A: 近年来, Internet 飞速发展,不但企业和政府机构纷纷建立自己的 网站,在网上开展业务,树立形象,而且还有不少个人在网上建立自己的个人主页,这使得 主页制作成为当今的热门技术。 下面我们讨论的就是网页设计的基础知识及概况。在讲解中,我童心除了介绍一些知识 ,还会给大家一此提示。呵呵,别发愣了。
一、制作的网页包括哪几部分?
总体说来,网页的制作包括以下几个部分: 1 .图形、图像处理制作 在网页上插入一些精美、适当的图片是必要的,否则,不会有人光顾您的网页。因此, 在设计您的网页之前,就应搜集或制作一些好看、适用的图片。网上或者光盘上都有这方面 的内容。制作图像, Photoshop 是这方面的老大哥,但不是专门处理网络图像的;我们一般选 用 Fireworks ,用它制作网络图像是最好的,我们将在后面讲到。 [ 提示 ] 一般在 WWW 上 jpg 和 gif 格式的图片传输较快,经常使用;位图 bmp 文件占用空间太 大,传输较慢,并不适用。 jpg 的文件较大,但画质相当好,可以显示 24 位真彩色; gif 颜色 只有 256 色,但文件小多了,速度就快了。照片、风景画等超过 256 色的图片就采用 jpg 格式; 颜色简单的标志图片、标题、小动画等最好用 gif 格式。 2 .动画制作 传统的做法是在 HTML 中嵌入用 Java 程序编写的动画,但这要求开发者对 Java 语言的编程 要熟悉。随着软件业的发展,现在制作漂亮的动画就轻松多了,有很多制作动画的软件。比 如 Flash ,用它制作出来的动画小巧迷人,只需作为一个 *.swf 文件导出,然后再导主到网页 编辑器中,这样,在浏览器中就可以浏览到动画了。这是不是要比编程轻松多了解? [ 提示 ]Flash 制作动画不仅方便快速,而且画质高、体积小,要做好主页不可不学。 3 .文本编写 您的网页中需要大量文字,这就要在网页编辑器中用 HTML 语言中的标签编写。也可以利 用网页编辑工具的 “ 所见即所得 ” 功能,直接写入文字。 [ 提示 ] 这要用到网页设计工具。网页设计工具最流行的就是 Dreamweaver 和 FrontPage 了 ,两者各有优势,后面将说到这方面的内容。 4 .框架设计 框架是网页的常用形式,它可以使网页更为清晰,可以把不同的页面超链接在同一框架 中,使得页面空间更紧凑。在 HTML 中用 < frame>< /frame> 标签编写。 5 .表格应用 网页中很活跃的一种元素,它的应用可使网页更紧凑和灵活。在 HTML 中用 < table&g t< /table> 标签编写。 [ 提示 ] 表格不光是数据的集合,在网页设计中还有整齐布局的作用。
Q: 网页制作基本原则 。 A: 凡事皆有原则,网页制作当然也不例外。一个优秀的页面应考虑到以下三个方面:内容、速度和页面美感。基于国内网价过高和网速过慢的现实,内容和速度应优先考虑,至于美感,则只好 ...
内容处于第一位,网页的目的不就是为了表现一定的内容吗?大家访问你的网站是要找到自己需要的东西,像软件、 mp3 、小说下载或一定的资讯、教材,一般没时间看你漂亮或不漂亮的表现自我的东西 —— 大家可没多的银子交给电信局。想提高你网站的访问率,先要在内容上多下工夫。纵观排名靠前的各大个人网站,无一不以内容取胜。
在确定内容的基础上,尽量提高速度十分必要,况且国内网络线路本身传输速率就太慢。有时你的内容再好,但速度太慢,访问者也只有失去耐心,从而影响你网站的访问量。要提高速度,有时必须牺牲页面美观,增加美观的图片只好不要,好的复杂表格嵌套排版方式只好取消。
在目前情况下,页面美感不得不最后考虑,除非你是唯美主义者。还是看看排名靠前的网站吧,页面大多让人不敢恭维,但访问率就是高居不下。注重美观意味着两大牺牲,一是速度,二是要多投入时间,好的修饰排版要占去总时间的 80% 或更多,你耗得起吗?
内容第一,速度第二,美观是第三的平方。
Q: 网站的整体风格和创意设计 。 A: 网站的整体风格及其创意设计是站长们最希望掌握,也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。当我们说: " 这个站点很 cool ,很有个性! " 那么,是什么让你觉得很 cool 呢?它到底和一般的网站有什么区别呢?本文试图用最简明的语言来说明: 1. 风格是什么,如何树立网站风格? 2. 创意是什么,如何产生创意?
● 风格 (style) 是抽象的。是指站点的整体形象给浏览者的综合感受。 这个 “ 整体形象 ” 包括站点的 CI (标志,色彩,字体,标语),版面布局,浏览方式,交互性,文字,语气,内容价值,存在意义,站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的, IBM 是专业严肃的。这些都是网站给人们留下的不同感受。
风格是独特的,是站点不同与其他网站的地方。或者色彩,或者技术,或者是交互方式,能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络 (www.century .2000c .net) 的黑白色 , 网易壁纸站的特有框架 , 即使你只看到其中一页,也可以分辨出是哪个网站的。
风格是有人性的。通过网站的外表,内容,文字,交流可以概括出一个站点的个性,情绪。是温文儒雅,是执著热情,是活泼易变 , 是放任不羁。象诗词中的 “ 豪放派 ” 和 “ 婉约派 ” ,你可以用人的性格来比喻站点。
有风格的网站与普通网站的区别在于:普通网站你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量大小,浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识,比如站点有品位,和蔼可亲,是老师,是朋友。
看了以上描述,你可能对风格是什么可能依然模糊。其实风格就是一句话:与众不同!
如何树立网站风格呢?我们可以分这样几个步骤:
第一,确信风格是建立在有价值内容之上的。一个网站有风格而没有内容,就好比绣花枕头一包草,好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的,无须置疑。
第二,你需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路:
1. 如果只用一句话来描述你的站点,应该是 :_____________ 参考答案: 有创意,专业,有 ( 技术 ) 实力,有美感,有冲击力 2. 想到你的站点,可以联想到的色彩是: ________________ 参考答案: 热情的红色,幻想的天兰色,聪明的金黄色 3. 想到你的站点,可以联想到的画面是: ________________ 参考答案: 一份早报,一辆法拉利跑车,人群拥挤的广场,杂货店 4. 如果网站是一个人,他拥有的个性是: ________________ 参考答案: 思想成熟的中年人,狂野奔放的牛仔,自信憨厚的创业者 5. 作为站长,你希望给人的印象是: ____________________ 参考答案: 敬业,认真投入,有深度,负责,纯真,直爽,淑女 6. 用一种动物来比喻,你的网站最象: __________________ 参考答案: 猫 ( 神秘高贵 ) ,鹰 ( 目光锐利 ) ,兔子 ( 聪明敏感 ) ,狮子 ( 自信威信 ) 7. 浏览者觉得你和其他网站的不同是: __________________ 参考答案: 可以信赖,信息最快,交流方便, 8. 浏览者和你交流合作的感受是: ______________________ 参考答案: 师生,同事,朋友,长幼。
你可以自己先填写一份答案,然后让其他网友填写。比较后的结果会告诉你:你网站现在的差距,弱点及需要改进的地方。
第三,在明确自己的网站印象后,开始努力建立和加强这种印象。 经过第二步印象的的 " 量化 " 后,你需要进一步找出其中最有特色特点的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化,宣传。例如:再次审查网站名称,域名,栏目名称是否符合这种个性,是否易记。审查网站标准色彩是否容易联想到这种特色,是否能体现网站的性格等等。具体的做法,没有定式。我这里提供一些参考:
1. 将你的标志 logo, 尽可能的出现在每个页面上。或者页眉,或者页脚,或则背景。 2. 突出你的标准色彩。文字的链接色彩,图片的主色彩,背景色,边框等色彩尽量使用与标准色彩一致的色彩。 3. 突出你的标准字体。在关键的标题,菜单,图片里使用统一的标准字体。 4. 想一条朗朗上口宣传标语。把它做在你的 banner 里,或者放在醒目的位置,告诉大家你的网站的特色是 ... 5. 使用统一的语气和人称。即使是多个人合作维护,也要让读者觉得是同一个人写的。 6. 使用统一的图片处理效果。比如,阴影效果的方向,厚度,模糊度都必须一样。 7. 创造一个你的站点特有的符号或图标。比如在一句链接前的一个点,可以使用 ,. 。 ☆※○◇□△→ (区位码里自己参看)等等。虽然很简单的一个变化,却给人与众不同的感觉, ( 为什么我没有想到呢? ) 8. 用自己设计的花边,线条,点 9. 展示你网站的荣誉和成功作品。 10. 告诉网友关于你的真实的故事和想法。
风格的形成不是一次定位的,你可以在实践中不断强化,调整,修饰,直到有一天,网友们写信告诉你: " 我喜欢你的站点,因为它很有风格! "
● 创意 (idea) 是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师,最苦恼的就是没有好的创意来源。
注意,这里说的创意是指站点的整体创意, ( 因为这个创意而产生这个站点,或者相同的内容,推出的创意不同 ), 网页的平面设计创意我将在后面的版面布局窍门里介绍。
创意到底是什么,如何产生创意呢?
创意是引人入胜,精彩万分,出奇不意的; 创意是捕捉出来的点子,是创作出来的奇招 .... 这些讲法都说出了创意的一些特点,实质上,
○ 创意是传达信息的一种特别方式。
比如 Webdesigner( 网页设计师 ) ,我们将其中的 E 字母大写一下 : wEbdEsigEr ,感觉怎么样,这其实就是一种创意! 创意并不是天才者的灵感,而是思考的结果。根据美国广告学教授詹姆斯的研究,创意思考的过程分五阶段: 1. 准备期 -- 研究所搜集的资料,根据旧经验,启发新创意; 2. 孵化期 -- 将资料咀嚼消化,使意识自由发展,任意结合; 3. 启示期 -- 意识发展并结合,产生创意; 4. 验证期 -- 将产生的创意讨论修正; 5. 形成期 -- 设计制作网页,将创意具体化。
○ 创意是将现有的要素重新组合。 比如,网络与电话结合,产生 IP 电话。从这一点上出发,任何人,包括你和我,都可以创造出不同凡响的创意。而且,资料越丰富,越容易产生创意。就好比万花筒,筒内的玻璃片越多,所呈现的图案越多。你如果有心可以发现,网络上的最多的创意来自与现实生活的结合 ( 或者虚拟现实 ) ,例如在线书店,电子社区,在线拍卖。你是否想到了一种更好的创意呢?
创意思考的途径最常用的是联想,这里提供了网站创意的 25 种联想线索:
1. 把它颠倒 2. 把它缩小 3. 把颜色换一下 4. 使它更长 5. 使它闪动 6. 把它放进音乐里 7. 结合文字音乐图画 8. 使它成为年轻的 9. 使它重复 10. 使它变成立体 11. 参加竞赛 12. 参加打赌 13. 变更一部分 14. 分裂它 15. 使它罗曼蒂克 16. 使它速度加快 17. 增加香味 18. 使它看起来流行 19. 使它对称 20. 将它向儿童诉求 21. 价格更低 22. 给它起个绰号 23. 把它打包 24. 免费提供 25. 以上各项延伸组合
Q: 友情链接的苦恼 ( 兼说网页简洁 ) 。 A: 网页上传后,就来这儿交流学习,结识了不少陌生的朋友,点击了不少的网站,也交换了些许链接。很多网站做得不错,有的专业,有的精致,有的别出心裁,也有的运用了不少的制作技巧,让我大开眼界,收益匪浅。只是有时有点苦恼,我的机子也和我一样是个跟不上时代的,老牛破车样慢,所以一遇上有背景音乐的,有弹出广告的,有嵌入网站脚本的 ( 就如我自己的一样 ) ,还有请你安装插件的,就老半天打不开,急死人 ! 本来想多看看人家的网站,细看看里面的内容,从中学点什么,可这样一慢起来就烦了,只好走马观花了,快快出来。其实做网页本来是想做得完美点吸引人,结果却让人望而却步。由此我想到,做简单明快点也许更能吸引人,形式是为内容服务的,好的技巧运用得恰当才能使自己的网站具有活力。刚学的时候什么技巧都想试着用一用,这正是我们这些菜鸟的共同心理,其结果是技巧学了不少,而自己的网站的总体质量却不见得有很大提高。这些问题当然在专业高手那里自然是不存在,所以我们真要向高手们学习 !
Q: 几种主页制作中常用的小花招。 A: 如果网页中的链接点比较多,就会在维护中遇到很多问题。首先,一个链接点的 URL名可能很长, 我们只有保证一个字母都不敲错才能正确进行链接,无疑这对输入的要求是很高的。另外,时间一长,某些站点已不复存在,过去有效的链接已经变成了“死链接”,如果靠人工定期一个个站点去访问以确保链接正确,那几乎是不可能的。这是个让人为难的问题。而利用FrontPage2000就能有效地解决这个问题: 首先启动FrontPage 2000并打开欲检验的Web站点(就在本地硬盘相应文件夹中) 。在左边Views(视图) 区选择Hyperlink Status(超链接状态)视图,此时屏幕右半边便转变为超链接状态视图。右边窗口中会列出该站点网页中所有超链接的状态表。最上一行是项目栏,共计有“Status(状态) ”、“Hyperlink(超链接点) ”、“In Page (所在页) ”、“Page Title(页面标题)”、“Modified by(修改人)”五项。最重要的“状态” 一项共有三种值,黄球+Unknown表示尚未检查,红球+Broken表示断链,绿球+Ok表示有效链。 点击上方Status项目栏边框,可以按状态值排列超链接点,按此功能可将所有短链列于最前方, 以便于修改。当然,根据需要也可按“In Page” 等项目排列链接点,进行管理。如果只检查一部分链接点,其选择操作也在此窗口中进行。 选择排列在一起的链接点,按住“Shift”,用上下方向键选择即可;选择分立的链接点,则要求按住“CTRL”键,用鼠标左键单击欲选链接。 刚开始所有的超链接点状态都为 “Unknown” , 要进行断链检查, 请先连上 Internet, 选择Tools菜单下“Verify Hyperlinks...”工具。系统会弹出对话框,询问你要进行何种操作(共三种选择) 。“Verify all hyperlinks”是检查本站点所有的链接点,“Resume verification”用于恢复检查(检查工作意外中断后恢复操作) ,“Verify selected hyperlink(s)”只检查事先选定的一个或一组文件。选择一种工作方式,点击右方OK按钮,检验工作便正式开始了。 自动检查完毕,可能你会发现一些标为红色的短链。下面就需要修正这些链接点了, 操作起来也相当的方便。 选中欲修正的链接,点击鼠标右键,弹出菜单中会有 “Edit Hyperlink...”和“Edit Page”这两项。选择“Edit Hyperlink...”一项,系统会询问将无效链接修改为哪一地址,比如FrontPage发现http://www.micorsoft. com为无效链接, 我们发现为输入时录入错误,此时修改为http: file://www.microsoft. com就对了。如果错误不易发觉如何修改,那边可选用“Edit Page”一项,仔细研究该程序,以期发现问题之所在,实在不行就删掉该链接。 ◆.自动滚屏 绝大多数主页的显示范围会超出屏幕,访问者都必须要按动水平或垂直滚动杆来跳过开始的欢迎词,下面的函数演示了自动按指定的方向、速率、范围游动的主页的制作。 varposition=0; functionscroller() { if(position!=400) { position++; parent.scroll(400,position); clearTimeout(timer); vartimer=setTimeout("scroller()",0); timer; } }
◆.在主页中编制音频播放器 虽然NetscapeNavigator3.0和InternetExplorer都支持音频文件的播放,但在制作过程中还是遇到了这样一个问题: 如果用隐藏方式播放则没有声卡的用户要出错,而且因为是后台播放用户无法控制其暂停、播放和停止;如果不隐藏,因为播放器是黑色背景无论放在哪儿都觉得别扭,影响主页的效果。而自编一个既便于用户控制又能给页面起到点缀作用的音频播放器不失为一个好办法。下面详细介绍用JavaScript 自编音频播放器的方法。 1. NetscapeNavigator3.0的音频播放器 1).直接打开 NetscapeNavigator3.0支持.mid、 .wav和.au等音频文件格式,您可以在浏览器中直接打开上述文件,打开时出现如下图的播放器窗口并自动播放一次,继续播放可单击“PLAY”按钮。 2).程序调用 在主页文件中您可以嵌入如下名为MySound的音频控制台来实现隐藏方式下音频 文件的自动循环播放: < EMBED SRC="jn.mid"//源文件名 HIDDEN="TRUE"//隐藏方式 AUTOSTART="TRUE"//自动播放 LOOP="TRUE"//循环播放 NAME="MySound"//嵌入对象名 < /EMBED> 2. JavaScript的音频支持函数 通过JavaScript的音频支持函数您可以控制任何一个嵌入在主页中的音频控制台。 JavaScript提供了如下的支持函数: play({loop[TRUE,FALSEoranINT]},′{url-to-sound}′)//播放 pause()//暂停 stop()//停止播放当前文件 StopAll()//停止播放所有文件 start-time({numberofseconds})//从第几秒开始 end-time({numberofseconds})//到第几秒结束 setvol({percentagenumber-without"%"sign})//音量百分比控制 fade-to({volumepercentyouwishtofadeto-withoutthe"%"sign})//削减音量到 fade-from-to({volumepercentstartfade},{volumepercentendfade})//从某个音量值削减到某个音量值 start-at-beginning()//从文件头开始 stop-at-end()//到文件尾停止 下面四个是状态测试函数 IsReady()//准备状态测试 IsPlaying()//播放状态测试 IsPaused()//暂停状态测试 GetVolume()//获取当前音量值 3. 应用举例 下面是一个包含NetscapeNavigator3.0音频播放器所有五个元素的例子。考虑到有些用户没有声卡,本例中没有设置自动播放。读者可以根据自己的喜好结合鼠标事件将各个元素和测试函数都添加到图形按钮中。程序清单如下: < HTML> < HEAD> < TITLE>自编音频播放器演示< /TITLE> < SCRIPTLANGUAGE=JavaScript> < !--Writer:YuHaiHe functionplaySound(){ document.firstSound.play(true); } functionpauseSound(){ document.firstSound.pause(); } functionstopSound(){ document.firstSound.stop(); } functionvolup(){ currentVolume=document.firstSound.GetVolume(); newVolume=(currentVolume+10); if(document.firstSound.GetVolume()==100){ alert("音量已经达到最大值"); } if(newVolume<101){ document.firstSound.setvol(newVolume); } else { if((newVolume<=100)&&(newVolume>90)){ document.firstSound.setvol(100); } } } functionvoldown(){ currentVolume=document.firstSound.GetVolume(); newvolume=(currentVolume-10); if(document.firstSound.GetVolume()==0){ alert("音量已经达到最小值"); } if(newVolume>0){ document.firstSound.setvol(newVolume); } else { if((newVolume>=0)&&(newVolume<10)){ document.firstSound.setvol(0); } } } file://EndofJavaScriptCode--> < /SCRIPT> < /HEAD> < BODY> < EMBED SRC="JN.MID" HIDDEN=TRUE AUTOSTART="FALSE" LOOP="TRUE" NAME="firstSound" MASTERSOUND> < P>< AHREF="javascript:playSound()">播放< /A>< /P> < P>< AHREF="javascript:pauseSound()">暂停< /A>< /P> < P>< AHREF="javascript:stopSound()">停止< /A>< /P> < P>< AHREF="javascript:volup()">音量+< /A>< /P> < P>< AHREF="javascript:voldown()">音量-< /A>< /P> < /BODY> < /HTML> ◆.显示访问者的浏览器类型、版本号等信息 如果想让访问者浏览你的主页时, 显示出他的浏览器类型、版本号等信息,并提出建议,如: “请使用NETSCAPE浏览器。”那么,就把下面的函数加入到你的源代码中。 vari=0; varj=0; varn=0;
varBrowserInfo="您的浏览器是:"+navigator.appName+""+navigator.appCodeName+""+navigator. appVersion;functionMakeArray(n) { this.length=n; for(varj=0;j\n;j++) { this[j]=0; } returnthis; } varMessages=newMakeArray(3); Messages[0]="您的浏览器名字:"+navigator.appName; Messages[1]="您的浏览器代码:"+navigator.appCodeName; Messages[2]="版本:"+navigator.appVersion; Messages[3]=" 欢迎到光临寒舍 "; functionShowInfo() { document.Menu.Display.value=Messages[i]; if(iΛ2) i=0 elsei++; document.Menu.Display.value=Messages[i]; BrowserInfo=Messages[i]; setTimeout("ShowInfo()",3000); } ◆.做游动字幕 主页的信息要让访问者注意,使用动态效果是很重要的。开个小窗口让文字信息反复游动,效果很不错!汉字中间的空格是必须的,目的是不出现乱字符。 varid,position=0; functionbanner() { vari,k; varm1="此处属不定期更新,有时间您就常来看看..."; varm2=""; varm3="本站点正在积极的建设中,望各位高手赐教!"; varm4=""; varmsg=m1+m2+m3+m4; k=(165/msg.length)+1; for(i=0;i\=k;i++)msg+=""+msg; document.form1.banner.value=msg.substring(position,position+160); if((position++)==msg.length)position=0; id=setTimeout("banner()",100); } ◆.给网页标记“审查等级”的方法 不少人都赞成用对网页划分等级的方法来对网页的内容进行限制,以防止特定的人群(如儿童)看到不合适的内容。 这里最为推荐的方法是:如果Web服务器支持的话,在HTTP的头数据流中插入两个扩展头,或者,Web站可以运行一个标签服务器(label bureau server),也可以使用嵌入标记在HTML文档中直接插入一个标签。 ◆.给主页添加视频动画 只要把下面这段代码添加到你的网页中, 就可以在主页中添加Windows视频动画或其他RralMedia格式的视频动画。 < img dynsrc=file:///F:/zip/avi/Bab2.avi start="fileopen" width="360" height="190" alt="Bab2.avi (7144264 字节)" controls hspace="-1" vspace="0"> 在这段代码中,dynsrc的值为你的动画文件的名字,它应是以avi、ra、ram为后缀名的文件;start的值一般为“fileopen”,这样就可以使动画自动播放;width和 height的值分别是动画播放时的画面的宽度和高度(以像素为单位也可以百分比来表示);alt 的值是对动画文件的非显示说明;hspace是画面离页左边的距离(以像素为单位); vspace是画面离页顶的距离(以像素为单位)。 ◆.在网页上使用ActiveX控件 在网页上显示一个ActiveX控件要使用HTML的OBJECT标识,将一个命令按钮插入到网页中的标识如下: < OBJECT ID="CommandButton1" WIDTH=96 HEIGHT=32 CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"> < PARAM NAME="Caption" VALUE="Click Me"> < PARAM NAME="Size" VALUE="2540;846"> < PARAM NAME="FontName" VALUE="System"> < PARAM NAME="FontEffects" VALUE="1073741825"> < PARAM NAME="FontCharSet" VALUE="134"> < PARAM NAME="FontPitchAndFamily" VALUE="34"> < PARAM NAME="ParagraphAlign" VALUE="3"> < PARAM NAME="FontWeight" VALUE="700"> < /OBJECT> OBJECT具有几个参数,CLASSID是Windows用来注册ActiveX控件的类标识,PARAM 初始化该控件的属性,定义好控件后就可以为这个控件编写必要的代码来响应事件了。 显然, 用上述的方法进行控件的定义是很繁琐的。如果用微软的ActiveX Control Pad(可从微软的站点上下载),就能大大简化这一过程。 ActiveX Control Pad提供了四个构件,可以大大简化网页的设计: Text Editor (HTML文档编辑器) 、 Object Editor (直观地改变控件大小和属性) 、HTML Layout Editor(HTML布局编辑器,用于生成HTML的布局)、Script Wizard(脚本向导程序)。 运行ActiveX Control Pad后,在编辑器中输入HTML标识可生成Web页面,需要插入ActiveX控件时, 选择Edit→Insert ActiveX Control就会打开一个提示窗口,你可以按照提示进行灵活的处理。 选择你所要的ActiveX控件后会出现相应的属性窗口, 通过它可以设置控件的属性。一切工作做完后,关闭控件窗口,相应的HTML代码已经插入到HTML文档中了。如果要建立一个HTML布局, 其方法步骤是: File→New HTML Layout, 打开Layout和 Toolbox窗口, Layout窗口类似VB的设计窗体,可以方便地在上面放置各种控件,要加入VBScript的脚本,用右键单击Layout窗体,选择Script Wizard,在1号窗选择相应的控件和事件,在下方的代码视窗中输入代码即可。完成HTML布局后,保存退出。在HTML文档中需要插入布局的地方进行如下操作:Edit→Insert HTML Layout,选择好 Layout文件后,在文档中会插入相应的代码。这样就可以非常方便地生成一个活动的 Web页面。 ◆.做时钟的方法 varTimeValue=""; functionShowTime() { varToday=newDate(); TimeValue=(Today.getYear()+1900)+"年"+(Today.getMonth()+1)+"月"+Today.getDate()+"日"; TimeValue+=((Today.getHours()\10)?("0"+Today.getHours()):Today.getHours()); TimeValue+=((Today.getMinutes()\10)?":0":":")+Today.getMinutes(); TimeValue+=((Today.getSeconds()\10)?":0":":")+Today.getSeconds(); document.Menu.Time.value=TimeValue; setTimeout("ShowTime()",1000);
Q: 一些与网页密切相关的技术 。 A: Java Java 是由 Sun 公司开发而成的一种编程语言,利用 Jave 写成的小程序叫做 Java Applet。使用它可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。而且,不论你使用的是哪一种 WWW 浏览器,哪一种计算机,哪一种操作系统,只要WWW浏览器上面注明了“支持Java”,你就可以看到生动的主页。
当初Java面世的时候,曾经轰动一时,被认为将会成为 Internet 应用的主要开发语言。但时至今日,Java 的风头已大不如前,原因是 Java 也有着起致命的弱点,就是在客户端的编译运行的速度慢,资源消耗大。现在 Java 多用于服务器端、及一些复杂的客户端程序的编写。
JavaScript JavaScript 具有脚本语言的“简单”这个特性,编写容易,不需要有很深的编程经验。JavaScript 语言是通过嵌入或整合在标准 HTML 语言中实现的,也就是说 JavaScript 的程序是直接加入在HTML文档里,当浏览器读取到 HTML 文件中 JavaScript 的程序,就立即解释并执行有关的操作,无须编译器,其运行速度比 Java Applet 要快得多。
现在, JavaScript 已经成为了制作动态网页必不可少的元素,大家经常在网页上看到的动态按钮、滚动字幕,就大多数都是使用 JavaScript 技术制作的。
CSS CSS(Casading Style Sheets 层叠样式表),跟 HTML 一样也是一种标记语言,甚至很多属性都是来源于HTML。利用 CSS 技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
Flash Flash 是 Macromedia 公司出品的一个适量动画制作软件,用他做出来的动画就叫Flash动画,其特点是:
1、动画具有很强的交互性,我们甚至可以完全使用 Flash 来制作一个网站; 2、采用“准”流(Stream)式的设计,就是说,我们可以一边下载动画文件一边欣赏动画; 3、由于它是基于矢量的图形系统,因而只要使用得当,就可以大大地减少文件的数据存储量,所占空间比位图少得多,非常适合在网络上使用。同时,矢量图像可以做到真正的无级放大,这样,无论用户的浏览器使用多大的窗口,图像始终可以完全显示,并且不会降低画面质量。
如果你看过使用了 Flash 技术的网站,你一定会被其神奇的魅力所倾倒。当然,Flash 也有其弊端,就是维护更新不方便,不适宜用于一些更新频繁、信息量大的网站。
DHTML DHTML 的全称为 Dynamic HTML,即我们常说的动态 HTML。很多人都误会 DHTML 是一种语言,其实 DHTML 仅仅是一个概念——通过各种技术的综合发展而得以实现的概念,这些技术包括 Javascript,VBScript,DOM(Document Object Model,文件目标模块),Layers(层) 和 CSS 等。DHTML 的目的在于加强网页的交互性;对用户的操作在本地就可做实时处理,从而得到更快的用户响应;使网页的界面更丰富多变,使页面设计者可以随心所欲地表达自己的构思。
◆ 动态 HTML 与动态网页是两个不同的概念,你可以简单的理解为动态 HTML 能使网页上的元素动起来(如文字的变色,图片的移动);而动态网页,则是在服务器端动态地生成你看到的“静态”网页,而这个网页上的元素,并不一定会“动”。
摘自---网页制作学习园地
Q: 关于网页导览设计的九点注意 。 A: 一.当导览按钮连结到目前此页时 各Webpage若重复使用同一组的导览按钮,无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性,并没有绝对的必要性拿掉此导览按钮,但Webpage设计者可让此按钮不再具有超连结的功能;或将此按钮的彩度、亮度降低(如∶深绿色变成淡绿色,亮红色变成暗红色),使读者可清楚地意识到∶这个暗设下来的导览按钮不再具有超连结的功能。 二.不要在一篇短文里提供太多的超连结。适当、有效率地使用超连结,是一个优良的导览系统不可或缺的要件之一。但过份滥用超连结,造成短短的一篇文章里却处处是links,反而损害了Webpage行文的流畅与可亲性。在充斥着超连结的短文里,很可能其中不少是无意义、没必要的links。例如∶连结到一页只有两三行注解的link、连结到一页只放了「施工中」的招牌的link。在一篇长短适中的Webpage里(3、4个荧幕页面),文章里提供的文字式超连结最好不要超过10个以上,以使全页行文能够顺畅,而读者也不至于眼见一大堆超连结,反而不知从何点取才好。况且,连续、肩并肩地出现两、三个文字式超连结,很容易被误认为只是一个长度较长的超连结,于是被读者忽略掉,便也失去了这些超连结的原本功能。 如果您果真有那么多的超连结必须提供给读者,不如将这些超连结以条列的方式,一笔一笔清楚地列在一选单页或目录页上,既不防碍走文的顺畅,又呈现一目了然的导览连结。 三.让超连结的字串长短适中且走文自然 抓住能传达主要讯息的字眼当做超连结的锚点(anchor),可有效地控制住超连结的字串长度,避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点),而不利于读者的阅读或点取。 四.注意超连结颜色与单纯叙述文字的颜色呈现 WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的用色,以便丰富Webpage的色彩呈现。如果您的网站充满知识性的信息,欲传达给访问者,建议您将网页内的文字与超连结用色,设计成较乾净素雅的色调,会较有利于阅读∶纯粹的叙述文字采用较暗、较深的颜色来呈现(如∶黑色、墨绿色、暗褐色),超连结文字则以较鲜明抢眼的色彩来强调(如∶亮黄色、翠绿色、鲜橘色),至于探访过的超连结则采用较低于原超连结亮度的颜色做呈现。 五.分析、说明您提供的bookmarks或coollinks 常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks,以分享读者个人遨游WWW的美好经验。但多数Webpage设计者就只提供一大串links,并不分门别类,也不加以分析、说明为什么这个link好,值得推荐?那个link的主要内容为何精彩之处?又在哪? 提供您的bookmarks或coollinks是一大善举,但未加以分析、说明,却变得功亏一篑。多花几分钟,将您提供的bookmarks或coollinks稍加分类、注解,可提供读者清晰的概念与无限的方便,也使您的站台的导览系统更加周全完善。未加以说明、注解的coollinks,其实一点也不cool。老实说,任何人都可以到Yahoo轻易地找到上百上千的links。您若未对这些推荐的links加以个人独特的评论、介绍,读者又何劳偏得到您的站台去找索引呢?任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐全。 六.在具前后连续顺序的文件里提供必要的连结 将篇幅过长的文件分隔成数篇较小的Webpages大大地增加了界面的亲和性,但在导览按钮与超连结的配置上,Webpage设计者则要更细心周全地安排,使得读者不论身处您站台的哪一阶层,依然能够快速便捷地通往其他任何一个页面。Webpage设计者应特别注意∶ 1.提供「上一页」、「下一页」、「回子目录页」与「回首页」的导览按钮或超连结在一系列具前后连续顺序的文件里,每篇Webpage都至少应提供「上一页」、「下一页」、「回子目录页」与「回首页」的导览按钮或超连结,可使读者能够立即得知自己所在的页面,是属于一份较大文件内的一小部分。(考虑、体贴一下某读者不是从您的Home顺序连结至此页,而是依循别的站台的某个link跳跃连结至此)。并且可以藉由这些links 随时参考连结「上一页」、「下一页」与本页的连贯内容;直接点取「回子目录页」查寻其他相关的标题;或直接跳跃至homepage,浏览其他不同项目的信息。 2.简明扼要地标明此页、上一页与下一页文件的标题或内容梗概 在一系列具前后连续顺序的文件里,每篇Webpage都应加上一个具说明性的标题,使读者一目了然,马上抓住这一页的重点。 而完善的导览系统除了提供「上一页」、「下一页」的导览按钮或超连结外,更添加精简达意的上一页与下一页标题、内容提要,使读者即使尚未点取这些Webpages时,亦能先梗概地了解自己将连结至什么样的Webpage。 3.提醒读者某一系列文件已到尽头 当读者已达某一系列文件的最后一页时,Webpage设计者应提供一小段告示提醒读者,同时不再提供「下一页」的导览按钮或超连结。 但基于Webpage介面设计的一致性,或许有些Webpage设计者并不希望在同一系列的最后一篇Webpage里忽然少了一个先前每页都有的「下一页」导览按钮(尤其是精心设计过的图形化导览按钮)。为达成此目的,可考虑将最后一页的「下一页」导览按钮颜色暗沉下来,且不赋予超连结的功能,并提供一小段告示提醒读者,此系列文件已到尽头,不再有「下一页」的内容。 七.在较长的Webpage内提供目录表与大标题 理想的Webpage长度以不超过3、4个荧幕页面为佳。但是如果基于某些特殊理由,您的Webpage一定要做得很长,那么不要忘了在此长篇的Webpage最上头,提供一个目录表,Webpage的内容也标上大小标题,以利清楚阅读。尤其重要的是,在这些标题与目录表的HTMLsource里分别设置锚点,与连结到锚点,以使您的Webpage真正发扬WWW的高互动性、高便捷性功能。 八.暂时不提供超连结到尚未完成的Webpage 超连结或导览按钮应该引导读者到一篇真正「有料」的Webpage,而不是以「挂羊头卖狗肉」的方式,事先将某一超连结描述得超级精彩、超级诱人,结果读者兴致勃勃地连结过去,却根本看不到任何精彩、诱人的内容,唯一所见的,只是一张无聊的告示牌∶「施工中」。 如果您急欲在网络上推出您的站台、展现您Homepage,但仍有少数几页Webpage尚未完成,建议您先暂时别让这些「施工中」的Webpage正式露面。(即先暂时别让这些连往「施工中」的Webpage的「超连结」,拥有真正的超连结功能。)等到您「几乎」完工之后(Webpage永远没有「真正」完工之时,总是需要不断地修改、增添、翻新),再正式开放连结也不迟。 倘若您急欲告诉读者,您即将提供一页超级精彩、超级诱人的Webpage在此站台,只是目前仍在努力赶工中,您大可直接摆一段告示在即将是「超连结」的文字旁(但目前仍不具超连结的功能),明白昭告世人,以减省读者徒然点取、徒然往返的时间;也免得读者满怀希望,却又落得失望而归。 九.测试所有的超连结与导览按钮的真实可行性 Webpage上线之后,第一件该做的事,是逐一测试每一页的每一个超连结与每一个导览按钮其真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage,却反而冒出“FileNotFound"的错误讯号出来。这是一个负责任、够水准的Webpage设计者对自己的作品应有的基本品质要求。
转载--网页制作学习园地
Q: 网页设计八种陋习 。 A: 不要为图像加入太长的交互文本 使用“ALT="为图像加入交互文本是一个好习惯,因为并不是所有的人都打开图像载入开关的,这时候这些交互文本给了用户一个有用的提示,特别是一些连接。但有部分网页制作者为图像加入了很长的交互文本,当用户载入图像时,这并不影响结果;但如果用户不载入图像,浏览器就会将所有的文本都显示出来,以致超出了它本来的宽度、或高度,对网页原来的排版影响很大。 例如广州市某免费个人主页提供商的网页,我开始在关闭图像载入的情况下访问,结果该网页乱七八糟,而且需要使用滚动条才能全部浏览,每个文字连接都被前面的图像逼得排成两行,很不顺眼!后来我打开图像载入再去访问该站时,发现网页原来很整齐。那些用文件名和长度作为交互文本的图像只是一些长度、宽度都很小的装饰图案,但因为交互文本太长了,所以才造成了混乱! 不要将连接全部摆在图像中 以往的网页中的连接都是文字,而且用下划线以资识别。但不久人们就讨厌了这些文字连接,于是都采用了图像连接。后来,更加嫌一个图像一个连接太麻烦了,于是将所有的连接到摆进了一个图像中去。但与上忌情况一样,不是所有的人都打开图像载入,如果你把所有的连接到摆在图像中去,而没有任何同样功能的文字连接的话,用户也许会很不知所措。 某网上男孩子的网页,可能是考虑到这个情况,于是把包含在图像中的连接作为交互文本列了出来———呀!足有1000多像素的宽度。结果我没有用鼠标去“探索”———其实可以用TAB键去寻找这些连接———而是退了出来。与其怕部分用户望而止步写了那么多的交互文本,为什么就不可以增加一些同样目的的文字连接呢? 不要使用自动滚动 曾经到过一个内容“丰富”的网页,它几乎使用了所有曾经在《中国计算机报》中出现过的网页制作技巧:现在的时间、访问了的时间、等等。不过有一个不是使用得很好的,就是窗口的自动滚动。我只是想发个邮件给网页的主人,但我却无法使滚动条停下来让我点击连接,于是我花了很久才“命中”窗口中的E-mail连接———真后悔军训的时候没有练好射击!也许自动滚动可以炫耀一下本事,但就没有什么实际价值了。用户有鼠标,可以自己移动滚动条,网页制作者们可以少操心。 不要用延时效果的JavaScript 现在的网页制作者为了使网页更加具有影响力,都疯狂地加入JavaScript。以现在的猫奔跑的速度而言,这些脚本也算不了什么,用户不会介意。但是,如果这些脚本可能导致延时的话,用户的态度就不同了。因为这些延时不会因为猫的快慢而改变,任何用户都必须望着屏幕上的“杂耍”完了才可以继续。头一两次还会觉得:WELL,棒极了!但后来,……某个国人网页的首页在载入时窗口的底色———窗口里面没有任何内容———由白色逐渐变成黑色,整个过程耗费了几秒,嘿!别小看这几秒,我能检查了全部的邮箱了! 不要依赖浏览器 唉!其实留意《中国计算机报》的话,应该看过这类的警告。但事实上,太多的网站首页中加入了“请在123*456分辨率下使用789浏览器浏览本网站”的文字。我是安装了IE、NC、和Opera,因为我要制作网页,需要它们来检验网页的在这些浏览器下的可读性。但一般用户不会安装那么多的浏览器,更加不会牢记着哪个网站需要用哪个浏览器浏览。 网页设计是一门艺术,一门大众(流行)艺术!就好比音乐,只使用一种乐器、没有歌声,当然也会有人喜欢,但是流行音乐更多的是采用各种乐器,加上歌手的歌声,这样才会被更加多的普罗大众所接受,对吗? 也许不可能让网页在使用所有的浏览器浏览都有一样的效果,但尽量地去达到该目的,会让网页在这个浏览器下有这样的特色、在另一个浏览器下又有不同的特色,这是网页制作者的工作,不是吗? 不要滥用留言簿 别误会,虽然我的个人网页由于服务器的问题不能使用留言簿,但我绝对不是妒忌!那次在某个网友的网页上留言,提交之后发现我的留言和个人的部分资料立即送了上留言网页,和其他以前的留言一起展示出来。首先,我的个人资料之所以告诉你是因为想与你交个朋友,但未经任何提示的情况下就全部摆了上网,好象不是很友善。其次,更重要的是,我在该留言网页上发现了某个人的言论似乎很偏激,有反革命嫌疑———这样做是很危险的!你的网页有没有违法成分你自己可以控制,但其他访问者的言论是你所难以估计的,万一被其他别有居心的人利用来进行反动宣传,这样你岂不成了“同伙”! 有鉴于此,我奉劝所有使用留言簿的网友,慎之又慎啊! 不要忘记版权 现在,网上的侵犯知识产权问题非常猖獗,某N字头免费个人网页提供商上的网页尤其严重———甚至有盗版光盘贩卖呢!为此一些新的免费个人网页提供商就要求用户在申请时提交详细的、真实的个人资料,以防备不可预计的事情发生。 不少的网友都很轻视知识产权,觉得自己是个人,大公司不会计较的。但,《中华人民共和国计算机信息网络国际联网安全保护管理办法》中第四条规定“任何单位和个人不得利用国际联网危害国家安全、泄露国家秘密,不得侵犯国家的、社会的、集体的利益和公民的合法权益,不得从事违法犯罪活动。”所以,如果你的网页需要引用别人的东西的话,要么你就和他联系一下,征求意见;要么就在明显的位置注明其版权归属。这并非多余,这是你的网页“长寿”的秘方! 当然,如果是你自己制作的图像或自己撰写的文章,你绝对有权声明版权归你自己所有! 不要懒于更新 某个N字头的个人网页聚居地上有很多的网页都是很久前建立而至今没有更新过的,姑且不说这是浪费公用资源的行为,访问过这些网页的人看见网页主人如此懒惰,你说他还会再去访问吗?谁能确定下次访问不会又是这般模样呢?因特网上的资源如此浩瀚,谁会去访问一个“从”不更新的网页呢? 我诚意地奉劝那些“霸占”了公用的个人网页存放地方的人,如果你们真的那么忙,为何不让出空间,给新的网友更多发展的机会呢?
摘自--网页制作学习园地
Q: 让你的主页更精彩 。 A: 说到制作主页大家一定会想到用Frontpage2000、Dreamweaver等专用制作软件,但现在笔者要向大家介绍的是用修改HTML源代码的方法,来给主页添加点小“点心”,把你的“网上小屋”装扮得再漂亮一点。下面请看第一道“点心”是什么……
1.浮动背景图像 当你拉住滚动条把页面向下拉动时,背景图像也跟着一起移动,这样就会导致浏览速度降慢。我们可以在语句中加入如下属性,就能产生主页内容向下滚动而背景图像不动的效果。 其中image.jpg就是你主页里的背景图像。
2.使你的主页自动被搜索引擎收录 你一定为了让你的网站名扬天下而去各个搜索引擎注册吧?在网上有很多机器人,它们自动搜寻关键字,你只要在网站上设立这样的关键字,就有可能被它们找到。
,economic″;charset=gb2312> 其中CONTENT这个属性主要让你放置一些你主页里的关键词,而且这些关键词最好容易使人想到。
3.提前下载图片 当你要访问一个内含很多图片的网页时,通常访问速度很慢;但我们可以在打开当前网页时提前下载下一页图片,以便能够提高浏览速度。要实现这个效果,我们可以在......语句中加入以下一行: 其中image.jpg就是你想要提前下载的图像名。
4.给某个链接添加说明信息 有些主页,当你把鼠标指向某个链接后,在状态栏会出现该链接的具体说明信息,是不是很方便呢?其实,我们只要在网页里的链接语句中加入以下的HTML代码,就可以实现这个功能了!
5.使网页自动定时刷新 你可以添加如下HTML代码来实现这个要求,请在和语句中加入:
其中10代表当前网页完全下载完成10秒后自动链接到指定的URL,把URL去掉就表示每隔10秒自动刷新一次主页。
摘自---网页制作学习园地
Q: 网页设计时应注意哪些问题 。 A: 网页设计,根据个人爱好以及网页内容的不同,版面的设计布置千变万化,换一下背景就是另一种感觉,什么样的布局好看,没有定式。笔者根据自己的经验体会特总结出如下要点:
1.网页内容的选择要不落俗套。 放眼望去,网上的许多个人主页简直就是"杂货店".内容包罗万象,题材千篇一律.人人都是"软件下载",个个都有"网络导航",从头到尾找不出一丝“鲜”意.所以,我们在设计网页时,要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”,如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。
2.内容确定下来以后,不要着急开始制作页面。我们应该对整个版面规划设计一下,好好的想一想,主题是什么,大概内容该怎么安排,接着最好在纸上把这个框架画出来——这就是排版。排版是很重要的,没有一条清晰的主线,那么整个版面将是混乱一团。
3.整个页面的主线理好以后,我们还必须对它进行补充,以保证页面的完整性和整体性。比方说,页面的标题内容要简洁明了,使人一看就能明白该网站有没有自己所需要的东西;遇到长文本时,用划线把它分隔开,以便人能一目了然地看清楚;重点段落要突出显示,这样人就能有选择性地获取信息;在网页上留下通讯地址或E-MAIL地址,有利于用户和你交流;网页中使用商标,不能侵犯版权;以上都是要考虑的一些细节问题。同时特别要考虑到以后网站的维护更新要方便。
4.制作时,内容不要和其他网站的内容相同,适当加入一些自己的文章,评论和见解,会使大家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程.毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在!
5.图象的制作要兼顾大小和美观,一般来说,掌握好photophop这个强大的工具,再配合其它一些专用图象软件如ulead、paint shop pro等,不难制作出漂亮的精美的图片。但图片是为主页内容服务的,不要让整个版面太花花绿绿,喧宾夺主。在网上就可以找到很多图片、图库和动画。
6.不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受,往往使浏览者没有耐心等页面全部显示出来,这样你的精心设计便毫无效果啦!
7.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示.
8.图片的下载较慢,要想使用户在图象没有传下来之前,就能够知道图象上的内容,我们就必须为图片加注解.这样一来,在图象没有显示出来时,可以通过注解的标注来帮助浏览者知道这是关于什么内容的图片,以方便用户作出选择,是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便。
9.设计Web页面时,一定要用640×480和800×600的分辨率来 分别观察。许多浏览器使用640×480的分辨率,尽管在800×600高分辨率下一 Web页面看上去很具吸引力,但在640×480的模式下可能会黯然失色。作一点小小的努力,设计一个在不同分辨率下都能正常显示的网页。
摘自--网页制作学习园地
Q: 主页制作五步曲 。 A: 我的经验——主页制作五步曲
第一步:确认主页题材
这一步是最关键的一步(主页制作重中之重),好比是做菜,在进入菜市场购买原料前,先
弄清楚你要让客人是吃满汉全席还是生猛海鲜(^0^),要不然的话,等你炒完所有的菜,可
能你就会端一桌叫化餐出来给大家品尝了!(~0~)
第二步:确定版面格式
“佛要金装,人靠衣装”,帅帅的小伙子总不能穿着一身叫化装吧??(穿叫化装还能叫帅
哥???)——虽然你题材好(的确应该是帅哥)
这一步你要确定些什么呢??版式(是用帧还是表格?……)、基本色调……
第三步:搜集素材
在确定主页主题及版面样式后,就可以据此搜集相关的题材了,还是拿作菜打比方吧!就是
去市场买原料(围绕主题并给合版式),要注意一个问题哟——你不要去买川味原料回家弄
海鲜哟!还得注意别买着变质的东西~0~
第四步:编写网页
好了,现在是看你的厨艺的时候了!清蒸??红烧??…………
1、制作工具 其实用windows下的记事本也可以作出来的(甚至可以在dos下用edit作出来),不过,有一
个好的工具会加快你写网页的速度和质量。 一般来说,FP2000和DW3大家用得多一些,所见即所得嘛!我个人习惯使用editplus写网 页。 2、脚本语言 很少看到一个网页只有HTML标签而没有使用SCRIPT的,有些网页甚至使用javaapplet 或是 activeX(不推荐使用这种东西,它会严重影响网页速度)。 一般来说,如果你熟悉C或是java,你可以使用javascript作脚本语言,如果你对VB或是 office的VBA熟悉的话,你可以选用vbscript作脚本。(VBSCRIPT是微软才用的东西,只支 持IE浏览器,NC嘛……那是压根儿就不认识。不信??你可以看我以前写的一个网站: http://www.pangolins.com,你要是用NC进去的话……惨不忍睹!) 3、样式表CSS
(敲键盘好累,这一点就省下吧!)
4、一点意见
现在很多网站都乐于在网页上弄一些小东西,比如告诉你的浏览器是哪种,操作系统是什 么……根据你进入时间分时进行问候(现在是X时X分X秒,XXXXX)……或是给鼠标弄些小花
样(在鼠标周围弄一些小星星……)……等等 这样做有什么坏处呢?? 一是增加了代码量,在我国目前这种“蜗牛”速度的网络上,为一个可有可无的小玩意增加
几KB的代码…………值得吗?? 二是喧宾夺主,这种东西好比是衣服上的小钮扣,难道你想在自己身上安一颗非常、十分漂
亮的小钮扣,而让来拜访你的客人老是盯着这颗钮扣看,而忘了你吗??我来看的是你的网
页,并不是来看你的小玩意的……
第五步:上传、调试、维护
菜炒好了,是不是该上桌了??上桌以后,要是觉得盐不够的话,那就加点盐吧!…… 转载---http://matrix.hongen.com/forum/bin/frame.pl?name=guest&userkey=360-3716962-4641933
Q: 制作个人首页的窍门 。 A: 1.首先主题选择不要落俗! 现在许多的个人主页就象"大锅饭".题材包罗万象,内容雷同 无味.人人都是"软件速递""音乐宝库""主页教程"等等.让我一看就赶紧"back",我可是花钱上 网的噢!题材的选择少而精,又能坚持天天更新的话,会很快受到大家的欢迎,另外提醒您的一 点就是,最好不要在主页里设有关hacker(解密,注册码)的资料,国内大部分的免费空间提供商 都不接受含此类信息的站点. 2.如果您准备建立新的个人首页,千万不要立刻开始制作页面。一定要好好的想一想, 总体规划一下整个网站的结构。特别要考虑到网站的维护更新方便。一时兴起,想到什么就 作什么,往往会使您的网站,虎头蛇尾,条理混乱,最终因维护困难而夭折。 3.开始制作请您千万不要急着许多页面一起制作.许多新手会及不可待的将收集到的各种 资料填入各个页面.转眼首页速成,成就感喔!可等您回过味来想要修改一些页面元素时,却发 现一页一页改的好辛苦! 建议您先制作有代表性的一页,将页面的结构,图片的位置,链接的方 式统统设计周全,例如:每页设置"返回首页"的链接,Email地址,版权信息等.然后copy成N个页 ,再将相应的内容"填空".这样制作的主页,速度快,整体性强.如果您能结合borders的使用,可 以天天轻松改变站点的风格. 4.制作时,内容不要全搬照抄他人的内容,适当加入一些自己的文章,评论和见解,会使大 家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程 .毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在 ! 5.每个页面不要使用超过2个的java程序,能够用javascript替代效果的则尽量不要使用 java.因为目前来讲java的运行速度实在慢的让人无法忍受.java会使您的网页速度减慢至少 50%.由于浏览器的版本,有时候等候半天,却告诉您java applent不能启动,这种经历相信您也 有! 6.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过 60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般 可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif 格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式 的图片在download时能交错显示. 7.设置一个专门的"what's new"页面.及时醒目的告诉来访者您主页最新更新的内容,这 样能方便常客浏览和寻找他们所需要的内容.许多好的主页干脆将首页的内容作成"what's n ew",让您一目了然,不致于层层深入,一无所获. 8.为您的图片加注解.图片的下载较慢,在没有显示出来时注解的标注有助于让浏览者知 道这是关于什么的图片,是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便, 您千万抽空为图片加一个注解.这是一个小地方,却体现一个网页的制作水准哦! 9. 备份您的主页.您要说了,这也算窍门?象在凑数!千万千万不要这样想."机有不测风云 ",现在系统大战,软件Bug百出,病毒横行的年代,您保不准什么时候机器罢工,辛辛苦苦制作的 网页付之东流.这样的"惨痛教训"我可不止一次了.算俺罗唆也好,杞人忧天也好,您就备份了 罢!
Q: 网页设计中排版与布局小基础 。 A: 有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻。可是,红花还需要绿叶陪衬。想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢? 我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先想好一个主题。"设 计,是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做, 而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话,那么,最终做出来的 东西最多局部看得觉得挺不错的,但全局就显得太复杂了。 页面上的构成,如果要让别人一眼望去觉得很BEAUTIFUL,这里面实际上是有很大 的学问的。 我们先来说说构成,"构成:是将造型按视觉效应、视觉力学和精神力学等原则组 成的,具备美好形态的造型"。 构成形式里,有空间构成(平面构成和立体构成) 和时间构成(静和动)。 我们的创作,就是要协调这里面的种种关系,顺应视觉 感受,才能够打动观看者的视觉,得到我们想要的效果。在这些形形式式里,都有 着如下的部件: 点:我们一般认为,点是指圆形的,但这是不正确的。只要在空间里有非常少量的 面积,无法形成一个视觉上感觉的图形,都是一个点。无论什么形状都可以。 线:点集合在一起就形成线。 面:一个平面。 体:一个物体。一般是指物体占据的空间,有三维形状。 那么,当点、线、面与体集结在一个页面上时,它们的关系要怎么协调呢?它们 之间都有什么作用呢? 点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时,一般由小向大看。 近距离的点引起面的感觉。 灵活运用点,可使你的页面有一些本质上的变化。 当点占据不同的空间时,它所引起的感觉是不同的。 (1) 居中引起视觉集中注意 。 (2) 上引起下跌落感。 (3) 在上左或上右引起不安定感。 (4) 下方中点,产生踏实感。 (5) 左下右下,增加了动感。 为什么会这样呢?因为人的视觉,都是经过对生活的感觉都得来的。 在下方的东西,一般联想到大地。 在上方的东西,一般联想到浮云。线、面、体亦然。 线,又分为直线和曲线。 直线:给人以速度,明确而锐利的感觉,具男性感。 曲线,则优美轻快,富于旋律。曲线的用法各异,需结合自己的需要。 而直线又分为斜线、水平线及垂直线。 水平线代表平稳、安定、广阔,具踏实感。 垂直线则有强烈的上升及下落趋势,可增加动感。 斜线,一般我没有怎么使用,因为它造成视觉的一种不安定。 人们每看到一个东西,都试图用横直来分析,斜、歪是人们所不愿意见到的,但 适当运用也可以达到一些特殊效果。 这个要靠个人的感觉。 面,指的是二度空间里的形。 面又分为几何形和任意形,我个人比较喜欢任意形,因为它往更具人情味。 几何形使人有一些机械感,但是,每一个图形里都会要用到几何形,请看它们各 代表什么: (1) 圆形:运动及和谐美 (2) 矩形:单纯而明确,稳定 (3) 平行四边形:有向一方运动的感觉。 (4) 梯形:最稳定,令人联想到山。 (5) 正方形:稳定的扩张。 (6) 正三角形:平稳的扩张。 (7) 倒三角形:不安定,动态及扩张、幻想。 我们在日常生活中所看到的东西,都是由于形与形、图与底的相互关 系。图形之间,图底之间,正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大,图形越清晰,对视觉的冲击力越大。 那么,平面上 有那么多的东西,我怎么才能够确定它是否是最主要的呢?请看:易于 成为"视觉中心"的条件: (1) 居于画面中心。 (2) 垂直或水平的比倾斜更易成为中心。 (3) 被包围。 (4) 相对于其它图形较大的。 (5) 色感要素强烈。 (6) 熟悉的图案,如果这件东西我们很熟,则一定会以它为焦点。 可以把自己认为最主要的东西做大一点,突出一点,色彩鲜艳一点,其它的东西小 而且色调不要那么鲜明,以免抢了主题的"风头"。 注意:图与底之间的关系是很重要的。 如果我们确定了背景,再确定主题,在做页面时不注意而将图与底的关系设置为 1:1,那么,我们也许发现,底与图的力场争夺非常激烈,即有时底被我们认为是 图。它们之间的关系只是相对,而非绝对。 一般来说,底要大于图,而图要鲜于底。 一副图,我们怎样才认为它是美的呢?这涉及到形、声、色的有机结合,打动视知觉,使观者产生美的共鸣。一般来说,有如下几点: (1) 稳定性:我们的视知觉总是试图找一个平衡点,若找不到则产生混乱。 (2) 对称性:相应的部位等量,易产于统一的秩序感,但比较单调,可采用增加 局部动势的方法,以取得鲜明、生动的效果。 (3) 非对称平衡:可以平衡为基础,调整尺寸形态结构。或者以形态各异的形, 经视觉判断,放置在确定的位置,以得到预想的平衡。这个和个人的审美有关系。 事实上,通过上述的一些方法,我们主要是为了创造秩序,使相互的东西能够在 没有互相干扰的系统中起作用。 混乱与秩序之间的对照唤起了我们的视知觉,我们于是通过平衡、比例、节奏、 协调,在迷乱中建立秩序,形成我们自己的风格。 形成自己作品的独特气质。 而如果注意自己作品的律动性,即旋律性,可通过重要一个基调实现,对于整个 页面应该有画龙点晴之效。 但要清楚的认识到,并非所有的节奏都产生律动性,有时候,听到一些音乐时觉 得它是垃圾,原理是一样的。 旋律要有情感因素,富于变化而又统一的节奏和总体的和谐。 流动的旋律,活泼、明快、自由、变化、生机勃勃。 也要注意到,反复、周而 复、单纯或渐变重复虽给人以视觉印象,但过于单调会使人疲劳并产生厌烦。必须 在反复中寻找动与静的完美结合,寻求单纯与复杂、细腻与奔放、定向与不定向之 间的对比,在构成方式上多探索,多借鉴,求新求变。 以下介绍这方面的方法: (1) 同质要素的统一,这个比较容易,只要自己多摸索就行了。 (2) 类似要素统一,大小类似,色明度类似就可以了。 (3) 不一样的要素的统一,由于形成对比,因此一般会形成对比,造成零散、 不统一的感觉,要令它产生节奏,一般是在要形成强烈焦点时才使用。 总之,我们要记住这一点: 在相同中求变化,在不同中求统一,使大部分相同,使小部分相异,可取得统一 又富有变化的感觉。 但是,也要注意差异的大小问题。差异是对规律进行突破及形成对比,富于变 化。但是,差异过大,易失去总体协调,过小易被规律淹没,就注意把握尺度, 以不失整体观感的适度对比为准。 我们怎样才能够让别人觉得我们的图片很协调呢? 方法如下: (1) 保留一个相近或近似的因素,自然的过渡 (2) 相互渗透 (3) 利用过渡形 在对比方面,必须有周密的编排,具体如下: (1) 方向对比 在基本有方向的前提下,大部分相同,小部分不同可形成对比 (2) 位置对比 在页面的安排不要太对称,以避免平板单调。应在不对称中找到 均衡,由此得到疏密对比。 (3) 虚实对比 事实上,虚与实是同等重要的,画黑则白出,造图则底成。应注 意双方平衡。 (4) 隐显对比 图与底比较,明度差大者显示,明度差小者隐藏。显与隐相辅相 成,能造成丰富的层次感。 在空间感方面,可以以点、线、面的排列,形成不同的空间感。 如以下方法: (1) 重叠 (2) 大小 (3) 倾侧,旋转,深度 (4) 弯曲 (5) 明度 (6) 投影 (7) 透视
摘自--网页制作学习园地
Q: 网页导航设计的注意要点 。 A: 一、注意超连结颜色与单纯叙述文字的颜色呈现 WWW的语言—HTML允许Webpage设计者特别标明单纯叙述文字与超连结的颜色,以便丰富Webpage的色彩呈现。如果您的网站充满知识性的信息,欲传达给访问者,建议您将网页内的文字与超连结颜色,设计成较干净素雅的色调,会较有利于阅读 ∶纯粹的叙述文字采用较暗、较深的颜色来呈现(如∶黑色、墨绿色、暗褐色),超连结文字则以较鲜明抢眼的色彩来强调 (如∶亮黄色、翠绿色、鲜橘色),至于探访过的超连结则采用较低于原超连结亮度的颜色做呈现。 二、测试所有的超连结与导览按钮的真实可行性 Webpage上线之后,第一件该做的事,是逐一测试每一页的每一个超连结与每一个导览按钮的真实可行性。彻底检验有没有失败的link无法连结到该连结的Webpage,却反而冒出“FileNotFound”的错误讯号出来。这是一个负责任、够水准的Webpage设计者对自己的作品应有的基本品质要求。 如果您果真有那么多的超连结必须提供给读者,不如将这些超连结以条列的方式,一笔一笔清楚地列在一选单页或目录页上,既不防碍走文的顺畅,又呈现一目了然的导览连结。 三、让超连结的字串长短适中且走文自然 抓住能传达主要讯息的字眼当做超连结的锚点(anchor),可有效地控制住超连结的字串长度,避免字串过长(如∶整行、整句都是锚点字串)或过短(如∶仅一个字当做锚点),而不利于读者的阅读或点取。 四、当导览按钮连结到目前此页时 各Webpage若重复使用同一组的导览按钮,无可避免地会产生某一导览按钮连结到目前此页的情形。为达成界面设计的一致性,并没有绝对的必要性拿掉此导览按钮,但Webpage设计者可让此按钮不再具有超连结的功能;或将此按钮的彩度、亮度降低(如∶深绿色变成淡绿色,亮红色变成暗红色),使读者可清楚地意识到∶这个暗设下来的导览按钮不再具有超连结的功能。 五、分析、说明您提供的bookmarks或coollinks 常常看到热心的Webpage设计者条列了精心收集的bookmarks或coollinks,以分享读者个人遨游WWW的美好经验。但多数Webpage设计者就只提供一大串links,并不分门别类,也不加以分析、说明为什么这个link好,值得推荐?那个link的主要内容精彩之处?又在哪?提供您的bookmarks或coollinks是一大善举,但未加以分析、说明,却变得功亏一篑。多花几分钟,将您提供的bookmarks或coollinks稍加分类、注解,可提供读者清晰的概念与无限的方便,也使您的站台的导览系统更加周全完善。未加以说明、注解的coollinks,其实一点也不cool。老实说,任何人都可以到Yahoo轻易地找到上百上千的links。您若未对这些推荐的links加以个人独特的评论、介绍,读者又何劳偏得到您的站台去找索引呢?任何一个分类索引或搜寻引擎都绝对比您条列的links还要更完备齐全。 六、在具有前后连续顺序的文件里提供必要的连结 将篇幅过长的文件分隔成数篇较小的Webpages大大地增加了界面的亲和性,但在导览按钮与超连结的配置上,Webpage设计者则要更细心周全地安排,使得读者不论身处您站台的哪一阶层,依然能够快速便捷地通往其他任何一个页面。Webpage设计者应特别注意∶ 1.提供“上一页”、“下一页”、“回子目录页”与“回首页”的导览按钮或超链结在一系列具前后连续顺序的文件里,每篇Webpage都至少应提供“上一页”、“下一页”、“回子目录页”与“回首页”的导览按钮或超连结,可使读者能够立即得知自己所在的页面,是属于一份较大文件内的一小部分。(考虑、体贴一下某读者不是从您的Home顺序连结至此页,而是依循别的站台的某个link跳跃连结至此)。并且可以借由这些links随时参考连结“上一页”、“下一页”与本页的连贯内容;直接点取“回子目录页”查寻其他相关的标题;或直接跳跃至homepage,浏览其他不同项目的信息。 2.简明扼要地标明此页、上一页与下一页文件的标题或内容梗概。 在一系列具有前后连续顺序的文件里,每篇Webpage都应加上一个具有说明性的标题,使读者一目了然,马上抓住这一页的重点。而完善的导览系统除了提供“上一页”、“下一页”的导览按钮或超连结外,更添加精简达意的上一页与下一页标题、内容提要,使读者即使尚未点取这些Webpages时,亦能先梗概地了解自己将连结至什么样的Webpage。 3.提醒读者某一系列文件已到尽头。 当读者已达某一系列文件的最后一页时,Webpage设计者应提供一小段告示提醒读者,同时不再提供“下一页”的导览按钮或超连结。但基于Webpage界面设计的一致性,或许有些Webpage设计者并不希望在同一系列的最后一篇Webpage里忽然少了一个先前每页都有的“下一页”导览按钮(尤其是精心设计过的图形化导览按钮)。为达此目的,可考虑将最后一页的“下一页”导览按钮颜色暗沉下来,且不赋予超连结的功能,并提供一小段告示提醒读者,此系列文件已到尽头,不再有“下一页”的内容。 七、在较长的Webpage内提供目录表与大标题 理想的Webpage长度以不超过三、四个荧幕页面为佳。但是如果基于某些特殊理由,您的Webpage一定要做得很长,那么不要忘了在此长篇的Webpage最上头,提供一个目录表,Webpage的内容也标上大小标题,以利清楚阅读。尤其重要的是,在这些标题与目录表的HTMLsource里分别设置锚点,并链接到锚点,以使您的Webpage真正发扬WWW的高互动性、高便捷性功能。 八、暂时不提供超连结到尚未完成的Webpage 超连结或导览按钮应该引导读者到一篇真正“有料”的Webpage,而不是以“挂羊头卖狗肉”的方式,事先将某一超连结描述得超级精彩、超级诱人,结果读者兴致勃勃地连结过去,却根本看不到任何精彩、诱人的内容,唯一所见的,只是一张无聊的告示牌“施工中”。 如果您急欲在网络上推出您的站台、展现您Homepage,但仍有少数几页Webpage尚未完成,建议您先暂时别让这些“施工中”的Webpage正式露面。(即先暂时别让这些连往“施工中”的Webpage的“超连结”,拥有真正的超连结功能。)等到您“几乎”完工之后(Webpage永远没有“真正”完工之时,总是需要不断地修改、增添、翻新),再正式开放连结也不迟。 倘若您急欲告诉读者,您即将提供一页超级精彩、超级诱人的Webpage在此站台,只是目前仍在努力赶制中,您大可直接摆一段告示在即将是“超连结”的文字旁(但目前仍不具超连结的功能),明白昭示世人,以节省读者徒然点取、徒然往返的时间;也免得读者满怀希望,却又落得失望而归。 九、不要在一篇短文里提供太多的超连结 适当、有效率地使用超连结,是一个优良的导览系统不可或缺的条件之一。但过份滥用超连结,造成短短的一篇文章里却处处是links,反而损害了Webpage行文的流畅与可亲性。在充斥着超连结的短文里,很可能其中不少是无意义、没必要的links。例如∶连结到一页只有两三行注解的link、连结到一页只放了“施工中”的招牌的link。在一篇长短适中的Webpage里(三、四个荧幕页面),文章里提供的文字式超连结最好不要超过10个以上,以使全页行文能够顺畅,而读者也不至于眼见一大堆超连结,反而不知从何点取才好。况且,连续、肩并肩地出现两三个文字式超连结,很容易被误认为只是一个长度较长的超连结,于是被读者忽略掉,便也失去了这些超连结的原本功能。
|