Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/1/30 1:19:09 ASP.NET从零起步设计网站全过程(5)_[Asp.Net教程]
第三天，小问号又准时地来到我的办公室。 小问号：蒋老师，要是上学时就是这样，我一定不是现在这个样子，自己动手做一下，真是不一样！解决了以前很多迷惑，以前总感觉隔靴瘙痒！一切准备就绪，请进一步指示！ 蒋老师：你打算怎么做呢？ 小问号：昨天晚上回去我研究了一下他们的资料，感觉我还是有信心做出来的，我准备今天开始设计数据库，明天开始写代码…… 蒋老师：等等，你上学的时候是不是也这么努力啊，昨天晚上还加班了，精神可嘉！你是不是打算一个月后如果客户看不上你做的，重头再来！你会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胜。 赞 If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长) QQ:154298438 QQ:417480759
赞