网页设计技巧Word文档下载推荐.docx
- 文档编号:16892685
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:14
- 大小:58.38KB
网页设计技巧Word文档下载推荐.docx
《网页设计技巧Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网页设计技巧Word文档下载推荐.docx(14页珍藏版)》请在冰豆网上搜索。
举个例子,拿当当网来说,一般用户来买东西是有着明确目的的,他知道自己要买的东西是哪个类别,而对于主站的内容只是给用户的一个推荐。
但是对于cnblogs来说,显然内容应该是大于导航的。
所以其实在我看来,博客园的设计其实是并不合理的。
当当网首页
cnblogs首页
对于三栏式布局来说,最大的好处就在于容纳的信息量比较大,但是重点不突出,降低了用户对网站的可控性,因此一般意义上不推荐。
当然,如果当用户需要比较多样化的时候,也可以让用户自由来设计布局,多常见于个人博客。
2、页面的通透性
页面的通透性是指尽量使整个页面的模块比例统一,同时通过线条,颜色等视觉元素增加各模块间的区分度,使得用户的视线轨迹可以有规则地通过各个模块,而不会被模块之间不规则的交叉所打断。
此外,根据“F”原则,也应该尽量将重要地,用户所关系地内容放在页面的左上角位置。
3、页面的配色方案
每个网站都要有自己的主色调,主色调指的就是页面色彩的主要色调,总趋势,其他配色的综合不能超过主色调的50%(白色背景除外)。
在选择颜色的时候,不仅仅要考虑颜色本身所代表的含义,如安全,浪漫等,还有考虑以下几种因素。
A.目标用户群体。
不同的用户群体对于颜色的审美爱好以及理解都不同,其中包括性别,年龄,职业等。
B.当地文化风俗。
如中国把红色作为喜庆的颜色,而欧洲大部分却把红色作为杀戮的象征。
C.网站的类型。
如电子商务站一般用暖色调来刺激用户购买,而SNS站则营造一个轻松的氛围。
而垂直类网站一般都与自己的领域特色相关。
D.品牌形象。
我总结一句话就是根据自己的Logo以及企业形象来选择色调。
比如IBM就一定会选择蓝色作为主色调。
4、页头和页尾
页头分为设计型头部和简约型头部。
一般的大型网站,由于已经有着一定的网站知名度,所以无需在通过渲染头部来提高网站对用户的吸引力,加深印象。
所以一般采用比较简单的简约型头部,比如新浪,腾讯,都是这样的效果。
对于一些小网站来说,采用设计性头部给用户留下深刻印象,创造品牌效应,但是当设计性头部过于繁杂时,却使得内容的容纳量变小,从而造成一种头重脚轻的感觉。
所以这个需要设计师的一种折中。
在页头上最重要的就是Logo,在现代网站的设计中,Logo起到两个作用,一个是标识,一个是让用户回到首页。
页尾一般来说并不重要,用户可到达的机会也少,所以尽量地去简化它,避免它占用内容所占据的位置。
5、搜索区
现在的网站一般都带有站内搜索的功能,目前有两种设计方式。
一种将搜索淡化,因为搜索只是一种手段,适用于浏览型网站,我并不鼓励你搜索,而是希望你一条一条地看下去。
比如说豆瓣。
我希望你去看社区的动态,而不是希望你来豆瓣为了找人。
一种是搜索为主,最简单的就是淘宝。
一般来说用户来电子商务站都是有着明确的目的,所以搜索是用户找到他想要商品的最主要方式。
另外,对于搜索框来说,如果你鼓励用户使用搜索框,在页面刚刚打开的时候,就可以让光标在搜索框上,这样用户可以直接搜索内容,而省去了一次操作。
但是如果并非如此,就不要让光标在文本框上,因为这样用户变没有办法使用键盘来让整个页面下移。
6、登陆和注册
首先是究竟是淡化登陆注册还是强调登陆注册,这个取决于该站点的目的。
两个典型便是新浪和豆瓣。
对于新浪来说,需要的只是网站的浏览量,与是否注册关系不大,所以只是将登陆弱化,没有登录一样可以享受基本所有权利,其中包括“匿名”评论等功能。
而豆瓣以及很多SNS站点都需要来通过用户注册来扩展好友关系,所以在豆瓣的首先都是将登陆注册放在最显眼的位置,然后用一些优点来煽动用户注册。
但是个人认为随着SNS站点的逐渐做大,虽然不会像新浪等资讯站一样如此弱化用户的登陆注册,但是也不会在将登陆注册变为浏览,发帖等必须的一部,而会将匿名作为可选的一项。
而新浪等资讯站随着发展,也会逐渐地走向社交网络,从而在网络中达到一种资讯站与SNS的折中。
7、关于广告
广告从来都是互联网的主要盈利手段之一。
可是不得不承认,没有人喜欢看广告。
因此广告主和用户之间总是存在着无可避免的直接矛盾,而且一定意义上,网络广告没有任何约束,这也就导致了网站广告的混乱和不合理性。
但是我们在网站中穿插广告时,应该保证我们自己网站不会影响用户的浏览。
首先,据调查,用户最能接受的广告形式是游动式广告和横幅式广告,而弹出广告和邮件广告是用户最讨厌的。
其次,从布局上看,我们不能让广告切断页面的相关内容,因为很多用户一旦看到广告就会习惯性地认为该页面的内容已经中止,不在继续浏览了,所以这样的话会影响整个网站内容的关联性。
然后,我们要避免过多的广告同时出现。
也要规范网站广告的尺寸大小。
8、表单的布局设计
这里就从注册来看,这个是最典型的表单。
从布局上讲分为三种方式,其中包括垂直对齐,左对齐和右对齐。
垂直对齐的优势在于可大量减少眼睛一动和填写表单的时间,但是缺点在于增加了垂直的空间,当注册项较多时,会增加页面的滚动。
适用于搜集的信息和资料是熟悉的,需要较少的完成时间。
左对齐便于用户浏览标签,同时会减少垂直空间。
但是如果某标签过长,则会造成文字与文本框距离过远。
适用于对所需的信息不熟悉,而且标签文字不会太长。
右对齐则让左边参差不齐的空包让用户很难快速检索表单要填写的内容。
另外,在设计时,最好将注册时相关的项进行分组,这样可以让用户以尽可能少的视觉元素来分出关系,避免视觉噪音。
对于很多选项来说,不妨提供默认选项,来尽量减少用户的操作。
并且给予适当的提示来给予用户帮助,记得一定是适当的,不要过多。
此外,还可用一些较大的字体以及间距,不要让用户产生局促感。
9、模块标签
模块标签,就是用于页面内某模块中,在内容上方使用一列标签形式的链接进行切换。
使用模块标签时,首先一定要具备一个最基本的前提,内容必须都相对独立,不能存在上下文的关系。
在设计模块标签与下面模块内容时,我总结为两点:
突出对比和加强关联。
突出对比是说,突出已选中标签和未选中标签的对比,而加强关联是说加强以选中标签和其内容模块的关联。
10、按钮
首先要用较大的,与背景色形成鲜明对比的按钮来使所需主要强调的按钮从网页中跳跃出来。
其次,我们需要根据按钮的主次来选择性强调和弱化某按钮。
但是同一个方式的弱化,可能到另一个方面则会是强调。
这个需要根据经验来结合之前的知识来考虑。
还有也要注意按钮的摆放位置,比如说用户的视线是从上向下,从左至右,这样用户也会依照这样的顺序做出选择。
11、反馈
Nielsen可用性原则中有一条痕重要的原则,就是系统必须提供必要的反馈。
其中包括成功提示和失败提示。
成功提示是最简单的一种提示,他应该仅仅起到提示的作用,而不该中断用户的操作。
我们应该只需要让用户知道就可以了。
不应该让用户进行任何不必要的操作,比如弹层就是一个非常愚蠢的做法。
失败提示是很重要的提示,从理论上说分为两种方式,一种是直接在网页上用文字提示,一种是弹出警告框来提示。
但是我个人认为弹出警告框是非常不可取的,因为最重要的一点是alert的时候会发出声音,这样的用户体验是非常差的,所以自己做一个弹出层倒是一个折中的做法。
还有一个很重要的是错误页面,比如说404页面,优秀的404页面应该能够改善用户的不良体验,减少用户的挫败感,还应该将用户引导到他原本打算去往的相关联的去处,以减少用户的流失率。
关于进度条,据研究表明,超过1秒就要提供相应的提示信息,比如进度条,而超过10秒就不仅仅需要提示信息,还需要提供完成的百分比。
12、其他个人想法About验证码
比如说验证码,验证码是用来防止恶意注册的,但是不是用来防止正常用户的,我们不应该让用户因为验证码产生挫败感。
如果让我设计一个验证码,我会将英文的“O”和数字的“0”,英文的“L”和数字的“1”都排除在验证码之外。
此外我有个想法是觉得,首先,密码是在post回去的过程中是无法保存原有状态的,所以唯一的办法只能是ajax回发验证。
但是在何时Ajax,只能是在失去焦点时。
所以我认为最好把验证码放在页面最顶端,这样用户比较容易离开焦点从而触发Ajax验证
rn本篇文章来源于A9站长网原文链接:
如何导入动-Dreamweaver的小秘诀
如何在一张图片上添加多个不同的链接-切片篇
问帮手
给我写信
RSS订阅
邮件订阅
244人关注
网站承诺:
阿邦网坚持写作客观独立的立场,永远不受金钱影响。
秉承为人民生活服务的宗旨,与您分享特邀帮手的经验和知识,帮您解决生活问题,提高生活品质。
本文系阿邦网独家稿件,未经许可,任何媒体和个人,不得全部或部分转载,违者必究。
如何在一张图片上添加多个不同的链接-切片篇来源:
黄超
[点击放大]
给图片上的不同区域加链接的方法已经介绍了两种,它们是热点法、CSS属性定位法,下面介绍第三种方法:
切片法。
切片法不同于前两种方法的地方是将一张较大的图片分割成几张小图,而前两种方法用的都是完整图片。
切片的方法有两种,一种是用photoshop中的裁切工具将图片裁切出来,另一种方法是利用切片工具将图片区域划分出来,直接生成所需小图片,其实这种方法和第一种方法类似,但属于半自动方式,便于控制。
说起切片,不得不先跨界讲一讲photoshop中切片工具的应用了。
首先,准备一张练习用的图片(我还是以前两篇文章中用的那张为例),如图一。
以“软件样样通”和“高”字为链接中心。
下面来简单介绍一下切片工具。
打开photoshop,点击“K”键切换到切片工具,鼠标就会变成一个小刀的图标。
先用小刀在“软件样样通”划一个方框,随即在图片上会生成垂直、水平相交的几条线,这就是形成的切片。
然后以“软件样样通”方框下方为顶线,在“高”字外划一个正方形,切片的线又多了几条,这样就完成了两个主要切片区域的制作,如图一中所示。
接下来就是保存步骤,这步相当重要。
点击photoshop工具栏中的文件—存储为web所用格式,或直接点击Ctrl+Shift+Alt+S组合键,如图二所示。
然后会弹出存储选项窗口,在这里你可以用切片工具选中制作好的切片区域单独设置保存质量,也可以按Ctrl+A把所有切片全部选中一起设置,右侧的保存格式设为JPG,质量为高,品质为60即可,然后点击存储。
最后又弹出一个窗口,这里提示的是文件存储的地址和文件名,如图三所示。
需要注意的是,“保存类型”一项需要选择“HTML和图像”。
然后点击保存。
找到文件存储的文件夹,你会看到刚才存储的网页文件和一个images的图片目录。
用Dreamweaver打开网页,点击“软件样样通”和“高”字,可以看到它们都被切成了小图片单独出现,如图四,这样给它添加链接就会很容易了,点击图片,在下面属性面板上添加链接就可以了。
其它两种方法请参阅以下文章:
如何在一张图片上添加多个不同的链接-定位篇
如何在一张图片上添加多个不同的链接-热点篇
Dreamweaver的小秘诀一、背景分析
对想要在视觉化环境下制作复杂网页的专业网页制作者来说,Dreamweaver已经渐渐在网页编辑工具中展露头角,成为专业人士编写网页的最佳选择根据Macromedia公司的调查,Dreamweaver目前已累积有超过七十万名的使用者,占有率在网页编辑工具中居冠,像“AdobeGoLive”和“NetObjectsFusion”等竞争者都被遥遥抛在后头因此一般地预估Dreamweaver的使用群体将会持续的增加
在这种势不可挡的普及率席卷之下,可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全在这次我们的介绍中,就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能事不宜迟,以下我们介绍如何善用Dreamweaver里的一些功能以下密技共有十二项,可分成四个主题分别是:
设计网页页面(Dreamweaver里具有弹性的页面设计功能)、搭配Macromedia其它产品一起使用Dreamweaver(制作动画和图片不求人)、自订使用界面(享受个性化的使用经验)和最后的加渗透Dreamweaver扩充程序(在网页中载入扩充高级功能)二、设计网页页面的秘诀
不管你是要运用HTML原始语法逐字逐字来编写网页,或是运用标准化窗口来进行网页的视觉设计,以下的小秘诀都可以派得上用场
秘诀1:
让网页页面大小更有弹性
有些网页开发者称以下要介绍的这种技巧为“liquid”,在这儿则把这种技巧叫做是“弹性延伸的技巧”这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此如果窗口过大就不会有空白处;
窗口过小边缘就不会跑出上下移动的拉条其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是如果是网页里用到很多不同的框架及表格,网页页面大小就很难自动弹性地调整通常网页设计者会用混合运用固定宽度的框架,和GIF图片作为间隔来设计网页页面,这样一来不论是用InternetExplorer或是用NetscapeNavigator,页面大小都会固定而不会跑掉用Dreamweaver4.0可以轻而易举的设计出会自动弹性调整的网页要怎么做呢?
具体做法:
用工具面板(Objectpalette)上的按钮打开网页,并且转换到“格式查观”(Layoutview)这时可以看到文字方块的栏度,每一栏的方框上方中间还有一个小小的下拉式箭头,点选想要设置弹性显示的栏上方的小箭头,接着选择“将栏设为弹性显示”(MakeColumnAutostretch)(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线,而不是原本表示栏度的数字Dreamweaver会自动制作出固定版面的空格图片,这个空白图片是以栏上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设置(在第一次增加空白图片时会跳出一个对话框问你是否要使用内置图片,为求效果,我们建议你让Dreamweaver自动产生一个,不然就不用使用空白图片来填充版面)
秘诀2:
创造个人调色板
Dreamweaver新的“Assetspanel”(属性控制面板)是一种可以在编辑网站时根据文件格式,例如图片、样式等来管理文件的新工具★具体做法:
当你定义新站点时(点选SiteNewSite),所有类型的物体会自动增加到“Assetpanel”里的适当表框中这个新加渗透的“Assetspanel”属性控制面板里也有颜色框,储存你网站里所用到的所有色彩,包含文字的颜色、背景的颜色,以及超链接的颜色等这是一个为使用者量身定做的网站导航颜色盘只要启动“Assetspanel”(先选“Window”再点“Assets”),接着点左方那个小小的色彩卷轴,就可以看到你网站里各式各样的颜色选项当然你可以将这些颜色拉到某些特定选取的文字中甚至当你选择某种颜色时,画面上会出现这种颜色的十六进位值的色彩淡浓度,和三原色对照码(RGB)如果想将调色板工具栏缩小一点,甚至可以仅加入某些颜色到调色板的“俺的最爱”里只需将选取的颜色反白、点选窗口里一个叫做“新增到偶滴最爱的”按钮(最下方靠右的按钮),就可以完成了
秘诀3:
制作弹出式菜单导航系统
原本要制作弹出式菜单导航系统(Pop-upMenuNavigationSystem)要用到很多的一些javascript的语法和技巧,但是如果你有Dreamweaver、FireworksStudio,即可轻轻松松快速办到
首先在“Fireworks”里开始,选择某个图片,然后在“SetPop-UpMenu”的对话框里点选“InsertPop-UpMenu”,你可以输入项目(items)的名称并点“Plus”(加入)按钮,来新增该项目你可以继续在跳出来的信息框里进行细项设置,例如设置该项目所要用的文字及超链接,当然也可以新增子菜单,并重新安排下一层的设置完成时,点选“Next”(下一步),继续设置各种参数值,例如颜色、字体等等这时菜单完成后,既可以预览HTML语法,也可预览图象再点“Finish”(完成)这时当鼠标移动到原来的图片时,会出现菜单系统的内容一览接着将制作好的文件导出时,“Fireworks”会自动生产出所有Dreamweaver需要用到的HTML、javascript,以及图象文件
秘诀4:
让图片动起来
如果你同时安装有Dreamweaver、FireworksStudio,这两种软件搭配的完美程度将使你赞不绝口即使你不是专业的图片设计者,在设计网页时也多多少少想把一些GIF图片修改得活灵活现Dreamweaver可以让你制作动画不求人
在标准窗口里选择要进行修改的图片,然后在“PropertyInspector”里点选“编辑”(Edit)如果你安装的Dreamweaver里附有“Fireworks”,“Fireworks”就是Dreamweaver预设图片编辑器,这时图片就会自动载入到“Fireworks”(如果仔细看,你会发现Fireworks的画面会出现“EditingFromDreamweaver”这样的文字和图样,指示你可以在Dreamweaver里进行图片编辑)好了,现在在“Fireworks”里点选要编辑的图片,选择“ModifyAnimateAnimateSelection”接下来完成“Animatedialogbox”里的设置,选定动画的帧数,动画移动的方向、透明度等等设置你也可以点选“Frames”工具设置移动速度,选择“Object”面板来改变设置要导出文件时,只要点选“Optimize”工具栏,在文件类型的地方选择“AnimatedGIF”完成以后,“Fireworks”就会自动将图片以最佳化设置导出,并且自动将GIF图片更新,还会在Dreamweaver里将更新过的图片显示出来点选“FilePreviewinBrowser”,这样就可以在浏览器里预览刚刚制作完成的可爱图片
秘诀5:
让按钮有闪动效果
在Dreamweaver中,不用有Flashs,也可以制作有闪动效果的Flash按钮物体Dreamweaver内置有好几个Flash按钮物体,可以制作好几个不同形式的按钮
点选“InsertInteractiveImagesFlashButton”就可看到有那些内置按钮在对话框内甚至可以用鼠标指到想要使用的按钮形式,然后观看在浏览器里的效果如何用鼠标指针把要用的按钮形式选定,再依顺序输入参数,例如按钮上的文字、字形、颜色、超链接等,或是自设文件名字按下OK接下来就会有一个“SWF”格式的文件产生,文件并会自动导入你的网页中按一下这个做好的文件,会看到“PropertyInspector”(属性明细)中会显示出文件的属性将文件属性显示出来时,如果扩展文件属性明细表,会出现“Play”(播放),点选之后可以不用打开浏览器来预览按钮的闪动效果很抱歉,因为您在网易相册发布了违规信息,账号被屏蔽被屏蔽期间他人无法访问您的相册
用工具面板(Objectpalette)上的按钮打开网页,并且转换到“格式查观”(Layoutview)这时可以看到文字方块的栏度,每一栏的方框上方中间还有一个小小的下拉式箭头,点选想要设置弹性显示的栏上方的小箭头,接着选择“将栏设为弹性显示”(MakeColumnAutostretch)(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线,而不是原本表示栏度的数字Dreamweaver会自动制作出固定版面的空格图片,这个空白图片是以栏上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设置(在第一次增加空白图片时会跳出一个对话框问你是否要使用内置图片,为求效果,我们建议你让Dreamweaver自动产生一个,不然就不用使用
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 技巧