All articles| All Pictures| All Softwares| All Video| Go home page| Write articles| Upload pictures

Reading number is top 10 articles
初学PHP的朋友来看:PHP语法学习笔记_php资料_编程技术
修改MSSQL身份验证模式_[SQL Server教程]
探讨SQL2000对XML的支持_[SQL,Server教程]
js也可以有自定义事件,注入就是这么爽_.net资料_编程技术
简单介绍,ASP.NET,中的运算操作符_[Asp.Net教程]
PEAR简介_php资料_编程技术
开发保留标准的浏览器功能的AJAX应用_[AJAX教程]
delphi获取指定磁盘中剩余空间
ASP.NET技巧:获取本机上配置好的Oracle服务名_.net资料_编程技术
WML学习(四):锚和任务_[XML教程]
Reading number is top 10 pictures
奇趣的世界记录2
大人物的礼物
Get girl by your hand
So beauty, will let you spray blood1
Discharge accidentally Actresses by the breast3
张家界的玻璃桥
NeedWallpaper5
西游四格漫画(五)
The money of more than 100 countries and regions1
Sora aoi on twitter2
Download software ranking
matrix3
电车之狼R
Boxer's Top ten classic battle6
Unix video tutorial10
DreamWeaver8
Unix video tutorial9
打鸟视频
仙剑奇侠传98硬盘WINXP版
Tram sex maniac 2 (H) rar bag4
Sora aoi, the maid, students' uniforms
归海一刀 published in(发表于) 2014/1/30 1:19:09 Edit(编辑)
ASP.NET从零起步设计网站全过程(5)_[Asp.Net教程]

ASP.NET从零起步设计网站全过程(5)_[Asp.Net教程]

ASP.NET从零起步设计网站全过程(5)_[Asp.Net教程]
 四个任务:使用photoshop完成设计与切图

第三天,小问号又准时地来到我的办公室。
  小问号蒋老师,要是上学时就是这样,我一定不是现在这个样子,自己动手做一下,真是不一样!解决了以前很多迷惑,以前总感觉隔靴瘙痒!一切准备就绪,请进一步指示!
  蒋老师你打算怎么做呢?  
  小问号昨天晚上回去我研究了一下他们的资料,感觉我还是有信心做出来的,我准备今天开始设计数据库,明天开始写代码……
  蒋老师等等,你上学的时候是不是也这么努力啊,昨天晚上还加班了,精神可嘉!你是不是打算一个月后如果客户看不上你做的,重头再来!你会photoshop或者fireworks吗?
  小问号在蒋老师的教导下,只许成功,不许失败!我会photoshop,但这与photoshop有什么关系?
  蒋老师你去找美工部刘燕经理,她会告诉你如何做的,一定要自己动手啊!


☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆


严格来讲这个任务主要是网站美工的任务,你可以选择跳过,当然也可以了解一下并不多。


1、使用photoshop完成设计


  一个网站能否被客户看中,往往第一感觉并不是功能,而是界面!
  很多朋友往往误解为使用Dreamweaver开始设计网页,而第一步实际上是用photoshop或者Fireworks来完成的。这可是下面是小问号在刘燕部门的指导下,用了三天的功夫才搞定的主界面!如果你也打算试试,请继续。


    
2、使用photoshop进行切图

  小问号在刘燕的亲自指导下,经过三、四个小时的努力,终于完成了!小问号在给“中原市国土资源管理局”演示的时候还受到了表扬,小问号自语道:我也不笨啊,关键在于引导和用心啊!


  第一步:启动Photoshop并打开首页效果图。


第二步:使用“切刀”工具根据需求开始切割首页效果图。
  先打开Photoshop的工具箱,然后我们选择“切刀”工具

  然后我们先分析一下页面布局再开始切割图片,在此我们要先清楚切割图片的几项重要原则:

  1、切得细致:我们切割图片时要尽量切得细致一些,不要为了自己省事就粗略的切割几下了事,我们要时刻清楚一件事情,就是我们把图片切得越精细,网页运行时加载的速度越快越不失真,如果切得块太大或者切得时候多一像素少一像素的,那么网页显示的时候速度会慢很多而且非常毛糙,造成网页和设计图差别很大,失去设计图原有的美观。相信大部分浏览者都是喜欢看网页打开速度快、设计精美的网站,所以如果你不想被浏览者骂和图片设计者指责,那么请你用心去切,越精细越好。

  2、切得合理:这一点我们主要是为程序编写者考虑。图片切得越合理编写程序越省事,反之可能会给程序编写者或图片设计者增加很多工作量。以下我们以小问号的两位同学的做法进行举例比较,现在让他们二人开始“PK”:

  举例比较1:
  同学A的切法
  
同学B的切法
  我们分析一下这两位同学的切割方法,同学A是把整个网站菜单的背景图只切割了一刀,同学B切割了三刀。同学A的做法是把整个菜单部分的背景图切割成一张图片放在网页中,编程者在上面设置菜单时全部按照背景图片中菜单的个数和菜单的间距来设置。同学B的做法是把菜单的背景图分成三部分,切刀03作为整个菜单的背景色,切刀04作为鼠标经过的背景图片,切刀05作为鼠标离开时的背景图片。这样编程者放置菜单时可以根据菜单的个数和显示要求自由放置。
  优缺点:网站开发前客户要求网站上面有8个菜单,而制作的过程中客户突然提出要求增加两个菜单或减少两个菜单,那么根据同学A的做法,我们只能重新设计网页效果图并更改网站程序了,因为同学A把整个菜单背景图做成了一张,想改都改不了。而根据同学B的做法我们只需要单独增加两个或删除两个菜单的背景小图就行了。因为同学B是单独切割的,菜单的多少不受背景图片的约束,所以“来去自由”喽。
  本次PK,同学B胜。

  举例比较2:
  同学A的切法
  同学B的切法
  我们分析一下这两位同学的切割方法,同学A是把新闻版块的背景图只切割了一刀,同学B切割了三刀。同学A的做法是把整个新闻版块的背景图切割成一张图片放在网页中,编程者在上面设置文章列表时全部按照背景图片的高度来设置文章显示的条数和行间距。同学B的做法是把新闻版块的背景图分成三部分,切刀03作为新闻版块标题的背景,切刀04作为新闻版块的中间背景可以自动无限延伸或缩小,切刀05作为新闻版块尾部结束的背景图片。这样在上面设置文章列表时可以根据需求自由设置文章显示的条数和间距。
  优缺点:网站开发前客户要求网站首页中的新闻版块每块显示6条新闻,行间距为20px,而网站快要制作好了客户突然提出要求每块显示8条新闻,间距还要20px,那么根据同学A的做法,我们只能重新设计网页效果图并更改网站程序了,因为同学A把整个新闻版块背景图做成了一张,而当初设计者是根据显示6条文章的高度来设计的,现在显示8条的话要超出边界了,要想更改只能重新设计图片并让编程者重新更改程序了。而根据同学B的做法我们只需要让编程者设置一下显示8条就行了。因为同学B把背景图的中间部分单独切割出来可以根据内容显示的高度自动调整高度,文章显示条数的多少不受背景图片的限制,所以“来去自由”喽。
  本次PK,同学B胜。



添加到del.icio.us 添加到新浪ViVi 添加到百度搜藏 添加到POCO网摘 添加到天天网摘365Key 添加到和讯网摘 添加到天极网摘 添加到黑米书签 添加到QQ书签 添加到雅虎收藏 添加到奇客发现 diigo it 添加到饭否 添加到飞豆订阅 添加到抓虾收藏 添加到鲜果订阅 digg it 貼到funP 添加到有道阅读 Live Favorites 添加到Newsvine 打印本页 用Email发送本页 在Facebook上分享


Disclaimer Privacy Policy About us Site Map

If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)
Copyright ©2011-
uuhomepage.com, Inc. All rights reserved.