网页设计（综合案例篇）-2课件.ppt

1、网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇余兰亭综合案例篇网站静态页面前端开发基础餐饮类网站静态页面设计10.第十章餐饮类网站静态页面设计10.1 前期准备10.2 网页界面设计10.3 网站部分布局10.4 网站动效表现10.餐厅网站静态页面设计 本章案例来自优艺客创始人、知名设计师韩雪冬“牛扒工厂”西式餐厅的官网设计作品，在此将全面详解网站静态页面从无到有，集策划、设计与制作于一体的诞生全过程。10.1.1项目背景 10.1 前期准备 现目前西式餐厅种类繁多，官网对于实体餐厅的意义在于一是展示品牌形象，把餐厅背后所沉淀的文化气质、菜品服务、品牌口碑通过官网展示出来，

2、二是抓潜营销、拓展销售渠道，把菜品或服务传播出去，让更多有需求的用户可以通过官网查询到餐厅的地点、联系方式，或者留下他的需求信息，从而产生销售机会。本案例的服务对象是“牛扒工厂Steak Factory”原创品牌餐厅。此餐厅是主要以扒类为主题的高档新式西餐，针对的客源为高薪白领和时尚的顾客。在与客户多次交流后，他们希望建立一个有别于市场上任何同类餐厅官网的网站，尽力突出电影色彩感效果的网站，并能借助官网的建立提升品牌知名度，从而制造新的销售机会。于是我们拟定了网站的设计实施方案。对于前端设计的方案流程大概可以归纳成前期策划制定网站框架交互原型设计网站界面设计网站布局动效与表现这六个步骤。10.

3、1.2前期策划 在项目开发之初，我们做了详尽的市场调研与竞品分析，从品牌定位、功能框架、界面布局、视觉风格多维度调查分析了国内三家同类牛排西餐厅：我家牛排、西提牛扒、王品牛排 调查结果表明三家网站依据其品牌定位及服务特点，在页面功能上虽略有差异，但基本功能一致，包括：关于品牌、菜品菜单、门市地点、会员活动、联系我们这四个方面。布局上基本都使用了固定布局，只有西提牛扒选择了固定布局+流动布局。要想与众不同，我们决定从“牛扒工厂”西餐厅的一些具象入手，如神秘的后厨。有了这个灵感后我们参观了餐厅及后厨的整体环境，策划将神秘又神圣的后厨环境搬上网页，突出其品牌的年轻、潮流和美食的新概念，吸引更多潜在用

4、户。10.1.3确定网站信息框架 完成前期调研与策划后，在围绕“牛扒工厂”的品牌定位和服务范围的基础上，我们对网站的信息结构进行了初步梳理，将网站功能划分为：首页、我们、环境、菜品、服务、工作、推荐六个板块。接着又向下细分了六个版块的栏目内容，确定了网站的信息框架。10.1.3确定网站信息框架 在确定了网站信息框架后，我们选取了首页、2个列表页、1个详细页三类页面中的页面各一张制作成交互原型，便于团队内部和与客户讨论10.2.1整体视觉风格定位及首页设计10.2 网页界面设计 前期策划阶段就拟定了将后厨环境引进网页的想法，而在与客户进一步的沟通中也得到了肯定。于是此时开始画草图逐步落实界面中的

5、各个视觉元素以便营造后厨的气氛，同时还要将网页导航和功能菜单转换成元素，合理地融入到画面中。于是在草图中我们不仅有橱柜、厨师还插入了保温灯、插单器等元素，让这种后厨的氛围更加逼真。接下来根据草图创意中的各个界面元素进行资料的收集与整理。在本案例中，除了一些菜品的素材是客户提供，其他大多素材都是自己拍摄，再经过后期处理，统一成同样的复古色调，使其拥有一种看电影的既视感。如插单器中的收据单自行找的打印单拍摄而成。首先是首页背景的设计制作，橱柜与厨师的景象一次性拍摄成果几乎不现实，因此干净的后厨与厨师们忙碌的背影都是分开拍摄后，再统一色调，合成到一个场景中。注意光感的把握，既不能过于沉闷也不能太跳跃

6、而抢镜。接着是前景的设计与制作。虽然大多素材都能找到近似的同类物品来代替，但对于金属质感超高的钢化桌面和模拟点餐时的笔画来说，最好的方法就是自己用软件绘制了。最后继续完善了首页的其他视觉效果，同时还对之前的遗漏的社交功能（如微信、微博二维码分享）、热点菜品推广功能、新闻功能进行了梳理与补充。最终的完整稿获得了客户的高度认可。10.2.2 列表页面设计 由于首页效果表现的十分丰富，所以列表页面的风格既要统一在视觉风格中，还要简化其视觉元素让界面布局更加轻盈。于是，导航菜单被固定到界面上方，突出了各列表选项。最终列表页面在定稿时候，为了视觉效果既统一又有变化，各个列表页面视觉元素均来自首页，且每个

7、页面的元素各不一样。10.2.3 详细页面设计 详细页面是列表的深入，因此细节在延续列表布局的基础上，需要不受打扰的有序展示。以菜单版块的详细页来看，就是让某个具体的菜品在菜单之上完美展示。10.3 网站布局（html+css）10.2.1 首页制作 我们精心制作出的一张psd效果图，并不能直接变成网页。要先分析设计图的布局特征，再转换为html、css代码，才能在网页中显示。除了之前讲过的切图格式技巧外，在编写html、css代码的过程中，还需要注意两个概念：一是上下概念、二是层次概念。上下概念是指：编写html、css代码的时候从网页布局的顶部写到底部。层次概念是先写内层的html、css

8、，再写外层的html、css，如背景就在最内层，而一般文字会放在最外层。本节将带领大家制作首页。对应设计稿来看，首页需要特别注意菜单区和新闻区这两块都有很重要的导航功能。经过分析，我们制作html、css的顺序可以是：第一步，从上到下，从里到外，先制作背景区，即厨师在后厨里忙碌的图像作为大图背景；第二步，制作顶部的全局导航区，此导航由logo、菜单和语言切换标签组成；第三步，制作网格展示区；第四步，制作页脚，即折叠新闻区。具体制作方法如下：1.背景区 这里的背景是一张图片hou.jpg，图片如下图所示：这幅图片可以通过div中嵌入一个img来实现，html和css代码如下：下面对上面的代码进行

9、详细说明：首先，page的width设置为100%，说明页面的宽度为浏览器的宽度。高度设置为固定的687px。position设置为absolute，表示它内部的div使用绝对定位。绝对定位的意思是，其内部的元素可以指定top，left等css属性。top和left属性，可以定义内部元素左上角位于page中的位置。其次，page中包含一个indexg0，indexg0是一个661像素高的div，其实和hou.jpg这张图片一样高，刚好用于包含背景图。indexg0的左上角位于page的(0,0)处。再次，indexg0中有一个宽度为1800，高为661的图片，这就是背景图，最终实现的效果如co

10、de/10/index1.html所示。2.顶部全局导航区（1）logo 从上到下，接着要制作的是Logo，Logo的代码如下所示：Logo由一张图和一个词English组成，English是一个链接，用于切换网页语言，它使用绝对定位，放在（273,15）的位置，颜色为白色（0 xfff）。一般来说，Logo应该包含在a标签中，用于点击，不过这里省略了。上面代码实现的效果，如下图所示：（2）菜单 Logo制作完毕后就是本例中的导航菜单，它实现很有技巧。首先它是将一张绘制好的菜单图放在设计图设计的位置，然后当鼠标移动到文字上时，显示一条斜线，形成菜单被勾画的视觉效果。首先，整个菜单上的文字，都是

11、绘制到一张图（qian.png）中的，所以首先将整个背景铺上这张图，实现背景图的代码如下所示：再仔细分析一下，菜单由若干列组成，一共有6列，每一列由若干行组成。这种结构可以由嵌套的两个ul，li组成，代码形式如下所示：（3）菜单效果 本例中，当鼠标移动到菜单上的时候，会在菜单上放置一个navbg.png图标，表示选中。实现方式是先将图标放到文字的上面，并且隐藏下来。当鼠标移动到文字上时，显示图标。实现这个效果的布局代码已经在上面讲过了，下面来看看其css实现：这里通过#nav lifloat:left;margin-left:24px;将li左浮动，这样所有li都靠左边排列。这样第一个ul，l

12、i就横向排列，菜单中的6个栏目就依次横向排列了。第二个ul li需要竖向排布，所以没有设置float属性，因为li的float默认是竖向的。#nav li ul li a设置宽度为68像素，高度为22像素，设置a标签的背景图为nb.png(一条线)，这样，当鼠标移动到a标签时，文字下面就会出现横线了。3.新闻折叠区（1）新闻区布局新闻折叠区中有一个News按钮，当单击图标新闻向上弹出，用户就能看到新闻幻灯片效果，而这里的布局（见图10.16）就是我们要面对的第一个问题：其代码如下：（2）新闻的动效这里的动效主要由一个slider组成，相关的css代码如下所示：news使用了绝对定位，定位在坐标

13、为（428,628）的位置，news的高度是200像素。opennews是一个图标，点击它，消息就可以从底部往上弹。再点一次则收回底部。newsbody是包含消息的一个div，宽度设置为100%，高度163像素，背景为nn.pngnewsc是一个ul，用来存放两张幻灯片，这里用到了前一章的幻灯片插件（jquery.anythingslider）newsc li是每一张幻灯片，里面包含一张图片和一段文字。nimg是图片的样式。幻灯片的js代码如下所示：10.3.2 列表页制作另一个比较重要的知识点就是列表页的制作。本小结将以餐单页面中的列表页作为案例进行讲解。在此列表页中展示的内容是一个菜单。列

14、表页由顶部的Logo和顶部全局导航区、中部的网格展示区组成。你可以在第10课的caidan.html中看到本部分的代码。从设计图中，经过分析，我们制作html、css的顺序可以是：先是背景，再是顶部全局导航区，接着是网格展示区，最后是页脚。1.背景制作制作背景是从上到下，从里到外，背景实际上是张清晰厨师图像，这张图像最终被拉伸以填充整个页面，形成一种模糊的效果。实现背景的代码如下：上面的代码定义了2个div，都设置了abs类。Abs类表示绝对定位，这里是div的左上角都定位在（0,0）点。body-bg中的z-index属性为-4，表示该div放在-4层，相比来说是在最底层。第一个div下面有

15、一张cp-body-bg.png图片，就是上面的厨师图片，被拉伸到1280*696像素，所以会形成模糊的感觉。另一个div营造出了点状小网格的效果，grid类设置了body-bg2.png作为背景，这是一个宽度3像素，高度3像素的小网格元素，在gird中重复这个元素，就形成了效果图中的点状网格效果。不是太明白的同学，可以在浏览器中打开页面看一下。2.顶部全局导航区顶部全局导航区由logo、菜单和语言切换标签组成。这里的菜单是一个二级菜单，如下图所示：实现这部分布局的代码如下：首先header-bg在header区域设置了一张背景图。Header中包含了3个div，分别是左边的logo，中间的菜

16、单，右边的English字符。Logo直接是一个a标签中嵌入一个img标签实现。中间的菜单是一个ul li标签实现。右边的English字符是一个a标签实现。3.网格展示区网格展示区，由3行3列组成。网格展示区的代码如下：此段代码表示一个三行三列的网格，每个网格由一张图片组成，这里使用dl,dt标签实现这个效果。称为标题+列表型标签。dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd也不能放入dt内。在dl下，dt与dd处于同级标签。dd标签可以若干。同时不能不加dl单独使用dt标签或dd标签。一般格式如下：理解了dl dt dd的语法规则，我们看看本例

17、中是怎么应用的。本例中每个dt代表一行，其中有3个a标签，表示3个网格元素。a标签中有3个span标签，如下：上面代码的css如下:bg-a表示content-active1.png这张图片。bg-b表示content-active2.png这张图片，这张图片默认为隐藏。这两张图片实现了鼠标移动到网格上时，网格变色的效果：content-active1.png和content-active2.pngentent-cp dt a span的样式是：width:320px;height:169px;top:0;left:0;position:absolute;cursor:pointer;back

18、ground:url(img/content-bg1.png)no-repeat;这是一张content-bg1.png图片，每个span的宽度是320像素，高度是169像素。links-1到links-9是取content-bg1.png（见图10.23）图片中不同位置的图，它将不同的文字显示到不同的grid中。links-1:hover到links-9:hover表示当鼠标移动到网格元素上时，显示另一张图片，从而起到高亮的效果。10.4 网站动效表现 一个网站中会有多个动效表现，本小结将以详细页中的菜单为重点案例来讲解。详细页的动效每一个网格菜单下都有一个菜品介绍，是一个幻灯片加一个文字组成。点击网格菜单，会弹出菜单菜品的详细介绍，由于有多种菜品，所以使用slider效果实现，布局代码如下所示：类名为center clears的div下面两个div，一个在左边，一个在右边。左边的那个div中包含一个幻灯片效果。右边的div是对应的菜品名。幻灯片使用了我们熟悉的ul li方式的silder，使用anythingslider插件实现。最后需要实现的就是页脚部分了，这里就不细讲了。需要提醒大家的是，要完整的掌握html、css技术，必须多动手实践，自己动手写代码，改错误，多做一些案例，这样才能在技术上真正的提高。