網(wǎng)頁設(shè)計【綜合案例篇】-2課件

標題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍色副標題:字體:微軟雅黑字號:24pt顏色:主題灰色網(wǎng)頁設(shè)計：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)篇綜合案例篇余蘭亭標題:網(wǎng)頁設(shè)計：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)綜合案例篇網(wǎng)站靜態(tài)頁面前端開發(fā)基礎(chǔ)餐飲類網(wǎng)站靜態(tài)頁面設(shè)計綜合案例篇網(wǎng)站靜態(tài)頁面前端開發(fā)基礎(chǔ)餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.第十章餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.1前期準備10.2網(wǎng)頁界面設(shè)計10.3

網(wǎng)站部分布局10.4網(wǎng)站動效表現(xiàn)10.第十章餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.1前期準備110.餐廳網(wǎng)站靜態(tài)頁面設(shè)計

本章案例來自優(yōu)藝客創(chuàng)始人、知名設(shè)計師韓雪冬“牛扒工廠”西式餐廳的官網(wǎng)設(shè)計作品，在此將全面詳解網(wǎng)站靜態(tài)頁面從無到有，集策劃、設(shè)計與制作于一體的誕生全過程。10.餐廳網(wǎng)站靜態(tài)頁面設(shè)計本章案例來自優(yōu)藝客創(chuàng)10.1.1項目背景10.1前期準備

現(xiàn)目前西式餐廳種類繁多，官網(wǎng)對于實體餐廳的意義在于一是展示品牌形象，把餐廳背后所沉淀的文化氣質(zhì)、菜品服務(wù)、品牌口碑通過官網(wǎng)展示出來，二是抓潛營銷、拓展銷售渠道，把菜品或服務(wù)傳播出去，讓更多有需求的用戶可以通過官網(wǎng)查詢到餐廳的地點、聯(lián)系方式，或者留下他的需求信息，從而產(chǎn)生銷售機會。本案例的服務(wù)對象是“牛扒工廠SteakFactory”——原創(chuàng)品牌餐廳。此餐廳是主要以扒類為主題的高檔新式西餐，針對的客源為高薪白領(lǐng)和時尚的顧客。在與客戶多次交流后，他們希望建立一個有別于市場上任何同類餐廳官網(wǎng)的網(wǎng)站，盡力突出電影色彩感效果的網(wǎng)站，并能借助官網(wǎng)的建立提升品牌知名度，從而制造新的銷售機會。于是我們擬定了網(wǎng)站的設(shè)計實施方案。對于前端設(shè)計的方案流程大概可以歸納成前期策劃——制定網(wǎng)站框架——交互原型設(shè)計——網(wǎng)站界面設(shè)計——網(wǎng)站布局——動效與表現(xiàn)這六個步驟。10.1.1項目背景10.1前期準備現(xiàn)目前西式餐廳10.1.2前期策劃

在項目開發(fā)之初，我們做了詳盡的市場調(diào)研與競品分析，從品牌定位、功能框架、界面布局、視覺風格多維度調(diào)查分析了國內(nèi)三家同類牛排西餐廳：我家牛排、西提牛扒、王品牛排10.1.2前期策劃在項目開發(fā)之初，我們做了詳盡的市網(wǎng)頁設(shè)計【綜合案例篇】--2課件

調(diào)查結(jié)果表明三家網(wǎng)站依據(jù)其品牌定位及服務(wù)特點，在頁面功能上雖略有差異，但基本功能一致，包括：關(guān)于品牌、菜品菜單、門市地點、會員活動、聯(lián)系我們這四個方面。布局上基本都使用了固定布局，只有西提牛扒選擇了固定布局+流動布局。要想與眾不同，我們決定從“牛扒工廠”西餐廳的一些具象入手，如神秘的后廚。有了這個靈感后我們參觀了餐廳及后廚的整體環(huán)境，策劃將神秘又神圣的后廚環(huán)境搬上網(wǎng)頁，突出其品牌的年輕、潮流和美食的新概念，吸引更多潛在用戶。調(diào)查結(jié)果表明三家網(wǎng)站依據(jù)其品牌定位及服務(wù)特點，10.1.3確定網(wǎng)站信息框架

完成前期調(diào)研與策劃后，在圍繞“牛扒工廠”的品牌定位和服務(wù)范圍的基礎(chǔ)上，我們對網(wǎng)站的信息結(jié)構(gòu)進行了初步梳理，將網(wǎng)站功能劃分為：首頁、我們、環(huán)境、菜品、服務(wù)、工作、推薦六個板塊。接著又向下細分了六個版塊的欄目內(nèi)容，確定了網(wǎng)站的信息框架。10.1.3確定網(wǎng)站信息框架完成前期調(diào)研與策劃10.1.3確定網(wǎng)站信息框架

在確定了網(wǎng)站信息框架后，我們選取了首頁、2個列表頁、1個詳細頁三類頁面中的頁面各一張制作成交互原型，便于團隊內(nèi)部和與客戶討論10.1.3確定網(wǎng)站信息框架在確定了網(wǎng)站信息框架網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.1整體視覺風格定位及首頁設(shè)計10.2網(wǎng)頁界面設(shè)計

前期策劃階段就擬定了將后廚環(huán)境引進網(wǎng)頁的想法，而在與客戶進一步的溝通中也得到了肯定。于是此時開始畫草圖逐步落實界面中的各個視覺元素以便營造后廚的氣氛，同時還要將網(wǎng)頁導(dǎo)航和功能菜單轉(zhuǎn)換成元素，合理地融入到畫面中。于是在草圖中我們不僅有櫥柜、廚師還插入了保溫燈、插單器等元素，讓這種后廚的氛圍更加逼真。10.2.1整體視覺風格定位及首頁設(shè)計10.2網(wǎng)頁界面設(shè)計接下來根據(jù)草圖創(chuàng)意中的各個界面元素進行資料的收集與整理。在本案例中，除了一些菜品的素材是客戶提供，其他大多素材都是自己拍攝，再經(jīng)過后期處理，統(tǒng)一成同樣的復(fù)古色調(diào)，使其擁有一種看電影的既視感。如插單器中的收據(jù)單自行找的打印單拍攝而成。接下來根據(jù)草圖創(chuàng)意中的各個界面元素進行資料的收集與整理。在本首先是首頁背景的設(shè)計制作，櫥柜與廚師的景象一次性拍攝成果幾乎不現(xiàn)實，因此干凈的后廚與廚師們忙碌的背影都是分開拍攝后，再統(tǒng)一色調(diào)，合成到一個場景中。注意光感的把握，既不能過于沉悶也不能太跳躍而搶鏡。首先是首頁背景的設(shè)計制作，櫥柜與廚師的景象一次性拍攝成果幾乎網(wǎng)頁設(shè)計【綜合案例篇】--2課件接著是前景的設(shè)計與制作。雖然大多素材都能找到近似的同類物品來代替，但對于金屬質(zhì)感超高的鋼化桌面和模擬點餐時的筆畫來說，最好的方法就是自己用軟件繪制了。接著是前景的設(shè)計與制作。雖然大多素材都能找到近似的同類物品來

最后繼續(xù)完善了首頁的其他視覺效果，同時還對之前的遺漏的社交功能（如微信、微博二維碼分享）、熱點菜品推廣功能、新聞功能進行了梳理與補充。最終的完整稿獲得了客戶的高度認可。最后繼續(xù)完善了首頁的其他視覺效果，同時還對之前的網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.2列表頁面設(shè)計

由于首頁效果表現(xiàn)的十分豐富，所以列表頁面的風格既要統(tǒng)一在視覺風格中，還要簡化其視覺元素讓界面布局更加輕盈。于是，導(dǎo)航菜單被固定到界面上方，突出了各列表選項。最終列表頁面在定稿時候，為了視覺效果既統(tǒng)一又有變化，各個列表頁面視覺元素均來自首頁，且每個頁面的元素各不一樣。10.2.2列表頁面設(shè)計由于首頁效果表現(xiàn)的十分豐富，網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.3詳細頁面設(shè)計

詳細頁面是列表的深入，因此細節(jié)在延續(xù)列表布局的基礎(chǔ)上，需要不受打擾的有序展示。以菜單版塊的詳細頁來看，就是讓某個具體的菜品在菜單之上完美展示。10.2.3詳細頁面設(shè)計詳細頁面是列表的深入，因此細10.3網(wǎng)站布局（html+css）10.2.1首頁制作

我們精心制作出的一張psd效果圖，并不能直接變成網(wǎng)頁。要先分析設(shè)計圖的布局特征，再轉(zhuǎn)換為html、css代碼，才能在網(wǎng)頁中顯示。除了之前講過的切圖格式技巧外，在編寫html、css代碼的過程中，還需要注意兩個概念：一是上下概念、二是層次概念。上下概念是指：編寫html、css代碼的時候從網(wǎng)頁布局的頂部寫到底部。層次概念是先寫內(nèi)層的html、css，再寫外層的html、css，如背景就在最內(nèi)層，而一般文字會放在最外層。10.3網(wǎng)站布局（html+css）10.2.1首頁制作

本節(jié)將帶領(lǐng)大家制作首頁。對應(yīng)設(shè)計稿來看，首頁需要特別注意菜單區(qū)和新聞區(qū)這兩塊都有很重要的導(dǎo)航功能。本節(jié)將帶領(lǐng)大家制作首頁。對應(yīng)設(shè)計稿來看，首頁需要

經(jīng)過分析，我們制作html、css的順序可以是：第一步，從上到下，從里到外，先制作背景區(qū)，即廚師在后廚里忙碌的圖像作為大圖背景；第二步，制作頂部的全局導(dǎo)航區(qū)，此導(dǎo)航由logo、菜單和語言切換標簽組成；第三步，制作網(wǎng)格展示區(qū)；第四步，制作頁腳，即折疊新聞區(qū)。具體制作方法如下：1.背景區(qū)

這里的背景是一張圖片hou.jpg，圖片如下圖所示：經(jīng)過分析，我們制作html、css的順序可以是：第一步這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和css代碼如下：這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和cs下面對上面的代碼進行詳細說明：首先，page的width設(shè)置為100%，說明頁面的寬度為瀏覽器的寬度。高度設(shè)置為固定的687px。position設(shè)置為absolute，表示它內(nèi)部的div使用絕對定位。絕對定位的意思是，其內(nèi)部的元素可以指定top，left等css屬性。top和left屬性，可以定義內(nèi)部元素左上角位于page中的位置。其次，page中包含一個indexg0，indexg0是一個661像素高的div，其實和hou.jpg這張圖片一樣高，剛好用于包含背景圖。indexg0的左上角位于page的(0,0)處。再次，indexg0中有一個寬度為1800，高為661的圖片，這就是背景圖，最終實現(xiàn)的效果如code/10/index1.html所示。下面對上面的代碼進行詳細說明：2.頂部全局導(dǎo)航區(qū)（1）logo

從上到下，接著要制作的是Logo，Logo的代碼如下所示：2.頂部全局導(dǎo)航區(qū)（1）logoLogo由一張圖和一個詞English組成，English是一個鏈接，用于切換網(wǎng)頁語言，它使用絕對定位，放在（273,15）的位置，顏色為白色（0xfff）。一般來說，Logo應(yīng)該包含在a標簽中，用于點擊，不過這里省略了。上面代碼實現(xiàn)的效果，如下圖所示：Logo由一張圖和一個詞English組成，Engli（2）菜單Logo制作完畢后就是本例中的導(dǎo)航菜單，它實現(xiàn)很有技巧。首先它是將一張繪制好的菜單圖放在設(shè)計圖設(shè)計的位置，然后當鼠標移動到文字上時，顯示一條斜線，形成菜單被勾畫的視覺效果。（2）菜單Logo制作完畢后就是本例中的導(dǎo)航菜單，它實現(xiàn)很首先，整個菜單上的文字，都是繪制到一張圖（qian.png）中的，所以首先將整個背景鋪上這張圖，實現(xiàn)背景圖的代碼如下所示：首先，整個菜單上的文字，都是繪制到一張圖（qian.png）

再仔細分析一下，菜單由若干列組成，一共有6列，每一列由若干行組成。這種結(jié)構(gòu)可以由嵌套的兩個ul，li組成，代碼形式如下所示：再仔細分析一下，菜單由若干列組成，一共有6列，每一列由（3）菜單效果

本例中，當鼠標移動到菜單上的時候，會在菜單上放置一個navbg.png圖標，表示選中。實現(xiàn)方式是先將圖標放到文字的上面，并且隱藏下來。當鼠標移動到文字上時，顯示圖標。實現(xiàn)這個效果的布局代碼已經(jīng)在上面講過了，下面來看看其css實現(xiàn)：（3）菜單效果本例中，當鼠標移動到菜單上的時候，會在菜單

這里通過#navli{float:left;margin-left:24px;}將li左浮動，這樣所有l(wèi)i都靠左邊排列。這樣第一個ul，li就橫向排列，菜單中的6個欄目就依次橫向排列了。這里通過#navli{float:left;mar第二個ulli需要豎向排布，所以沒有設(shè)置float屬性，因為li的float默認是豎向的。#navliullia設(shè)置寬度為68像素，高度為22像素，設(shè)置a標簽的背景圖為nb.png(一條線)，這樣，當鼠標移動到a標簽時，文字下面就會出現(xiàn)橫線了。第二個ulli需要豎向排布，所以沒有設(shè)置float屬性，因3.新聞?wù)郫B區(qū)（1）新聞區(qū)布局新聞?wù)郫B區(qū)中有一個News按鈕，當單擊圖標新聞向上彈出，用戶就能看到新聞幻燈片效果，而這里的布局（見圖10.16）就是我們要面對的第一個問題：3.新聞?wù)郫B區(qū)（1）新聞區(qū)布局其代碼如下：其代碼如下：（2）新聞的動效這里的動效主要由一個slider組成，相關(guān)的css代碼如下所示：（2）新聞的動效這里的動效主要由一個slider組成，相關(guān)的news使用了絕對定位，定位在坐標為（428,628）的位置，news的高度是200像素。opennews是一個圖標，點擊它，消息就可以從底部往上彈。再點一次則收回底部。newsbody是包含消息的一個div，寬度設(shè)置為100%，高度163像素，背景為nn.pngnewsc是一個ul，用來存放兩張幻燈片，這里用到了前一章的幻燈片插件（jquery.anythingslider）newscli是每一張幻燈片，里面包含一張圖片和一段文字。nimg是圖片的樣式?；脽羝膉s代碼如下所示：news使用了絕對定位，定位在坐標為（428,628）的位置網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.3.2列表頁制作另一個比較重要的知識點就是列表頁的制作。本小結(jié)將以餐單頁面中的列表頁作為案例進行講解。在此列表頁中展示的內(nèi)容是一個菜單。10.3.2列表頁制作另一個比較重要的知識點就是列表頁的制

列表頁由頂部的Logo和頂部全局導(dǎo)航區(qū)、中部的網(wǎng)格展示區(qū)組成。你可以在第10課的caidan.html中看到本部分的代碼。從設(shè)計圖中，經(jīng)過分析，我們制作html、css的順序可以是：先是背景，再是頂部全局導(dǎo)航區(qū)，接著是網(wǎng)格展示區(qū)，最后是頁腳。1.背景制作制作背景是從上到下，從里到外，背景實際上是張清晰廚師圖像，這張圖像最終被拉伸以填充整個頁面，形成一種模糊的效果。列表頁由頂部的Logo和頂部全局導(dǎo)航區(qū)、中部的網(wǎng)格展示網(wǎng)頁設(shè)計【綜合案例篇】--2課件實現(xiàn)背景的代碼如下：實現(xiàn)背景的代碼如下：

上面的代碼定義了2個div，都設(shè)置了abs類。Abs類表示絕對定位，這里是div的左上角都定位在（0,0）點。body-bg中的z-index屬性為-4，表示該div放在-4層，相比來說是在最底層。第一個div下面有一張cp-body-bg.png圖片，就是上面的廚師圖片，被拉伸到1280*696像素，所以會形成模糊的感覺。

另一個div營造出了點狀小網(wǎng)格的效果，grid類設(shè)置了body-bg2.png作為背景，這是一個寬度3像素，高度3像素的小網(wǎng)格元素，在gird中重復(fù)這個元素，就形成了效果圖中的點狀網(wǎng)格效果。不是太明白的同學，可以在瀏覽器中打開頁面看一下。

上面的代碼定義了2個div，都設(shè)置了abs類。Abs類2.頂部全局導(dǎo)航區(qū)頂部全局導(dǎo)航區(qū)由logo、菜單和語言切換標簽組成。這里的菜單是一個二級菜單，如下圖所示：實現(xiàn)這部分布局的代碼如下：2.頂部全局導(dǎo)航區(qū)頂部全局導(dǎo)航區(qū)由logo、菜單和語言切換標網(wǎng)頁設(shè)計【綜合案例篇】--2課件

首先header-bg在header區(qū)域設(shè)置了一張背景圖。Header中包含了3個div，分別是左邊的logo，中間的菜單，右邊的English字符。Logo直接是一個a標簽中嵌入一個img標簽實現(xiàn)。中間的菜單是一個ulli標簽實現(xiàn)。右邊的English字符是一個a標簽實現(xiàn)。首先header-bg在header區(qū)域設(shè)置了一張背景圖3.網(wǎng)格展示區(qū)網(wǎng)格展示區(qū)，由3行3列組成。3.網(wǎng)格展示區(qū)網(wǎng)格展示區(qū)，由3行3列組成。網(wǎng)格展示區(qū)的代碼如下：網(wǎng)格展示區(qū)的代碼如下：

此段代碼表示一個三行三列的網(wǎng)格，每個網(wǎng)格由一張圖片組成，這里使用dl,dt標簽實現(xiàn)這個效果。<dl><dt></dt><dd></dd></dl>稱為標題+列表型標簽。dt和dd是放于dl標簽內(nèi)，標簽dt與dd處于dl下相同級。也就是dt不能放入dd內(nèi)，dd也不能放入dt內(nèi)。在dl下，dt與dd處于同級標簽。dd標簽可以若干。同時不能不加dl單獨使用dt標簽或dd標簽。一般格式如下：此段代碼表示一個三行三列的網(wǎng)格，每個網(wǎng)格由一張圖片組

理解了dldtdd的語法規(guī)則，我們看看本例中是怎么應(yīng)用的。本例中每個dt代表一行，其中有3個a標簽，表示3個網(wǎng)格元素。a標簽中有3個span標簽，如下：理解了dldtdd的語法規(guī)則，我們看看本例中是怎么應(yīng)上面代碼的css如下:上面代碼的css如下:bg-a表示content-active1.png這張圖片。bg-b表示content-active2.png這張圖片，這張圖片默認為隱藏。這兩張圖片實現(xiàn)了鼠標移動到網(wǎng)格上時，網(wǎng)格變色的效果：content-active1.png和content-active2.pngbg-a表示content-active1.pnentent-cpdtaspan的樣式是：{width:320px;height:169px;top:0;left:0;position:absolute;cursor:pointer;background: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表示當鼠標移動到網(wǎng)格元素上時，顯示另一張圖片，從而起到高亮的效果。entent-cpdtaspan的樣式是：網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.4網(wǎng)站動效表現(xiàn)

一個網(wǎng)站中會有多個動效表現(xiàn)，本小結(jié)將以詳細頁中的菜單為重點案例來講解。詳細頁的動效每一個網(wǎng)格菜單下都有一個菜品介紹，是一個幻燈片加一個文字組成。10.4網(wǎng)站動效表現(xiàn)一個網(wǎng)站中會有多個動效表

點擊網(wǎng)格菜單，會彈出菜單菜品的詳細介紹，由于有多種菜品，所以使用slider效果實現(xiàn)，布局代碼如下所示：點擊網(wǎng)格菜單，會彈出菜單菜品的詳細介紹，由于有多種菜品類名為"centerclears"的div下面兩個div，一個在左邊，一個在右邊。左邊的那個div中包含一個幻燈片效果。右邊的div是對應(yīng)的菜品名?；脽羝褂昧宋覀兪煜さ膗lli方式的silder，使用anythingslider插件實現(xiàn)。最后需要實現(xiàn)的就是頁腳部分了，這里就不細講了。需要提醒大家的是，要完整的掌握html、css技術(shù)，必須多動手實踐，自己動手寫代碼，改錯誤，多做一些案例，這樣才能在技術(shù)上真正的提高。類名為"centerclears"的div下面兩個div，網(wǎng)頁設(shè)計【綜合案例篇】--2課件標題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍色副標題:字體:微軟雅黑字號:24pt顏色:主題灰色網(wǎng)頁設(shè)計：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)篇綜合案例篇余蘭亭標題:網(wǎng)頁設(shè)計：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(xiàn)綜合案例篇網(wǎng)站靜態(tài)頁面前端開發(fā)基礎(chǔ)餐飲類網(wǎng)站靜態(tài)頁面設(shè)計綜合案例篇網(wǎng)站靜態(tài)頁面前端開發(fā)基礎(chǔ)餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.第十章餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.1前期準備10.2網(wǎng)頁界面設(shè)計10.3

網(wǎng)站部分布局10.4網(wǎng)站動效表現(xiàn)10.第十章餐飲類網(wǎng)站靜態(tài)頁面設(shè)計10.1前期準備110.餐廳網(wǎng)站靜態(tài)頁面設(shè)計

本章案例來自優(yōu)藝客創(chuàng)始人、知名設(shè)計師韓雪冬“牛扒工廠”西式餐廳的官網(wǎng)設(shè)計作品，在此將全面詳解網(wǎng)站靜態(tài)頁面從無到有，集策劃、設(shè)計與制作于一體的誕生全過程。10.餐廳網(wǎng)站靜態(tài)頁面設(shè)計本章案例來自優(yōu)藝客創(chuàng)10.1.1項目背景10.1前期準備

現(xiàn)目前西式餐廳種類繁多，官網(wǎng)對于實體餐廳的意義在于一是展示品牌形象，把餐廳背后所沉淀的文化氣質(zhì)、菜品服務(wù)、品牌口碑通過官網(wǎng)展示出來，二是抓潛營銷、拓展銷售渠道，把菜品或服務(wù)傳播出去，讓更多有需求的用戶可以通過官網(wǎng)查詢到餐廳的地點、聯(lián)系方式，或者留下他的需求信息，從而產(chǎn)生銷售機會。本案例的服務(wù)對象是“牛扒工廠SteakFactory”——原創(chuàng)品牌餐廳。此餐廳是主要以扒類為主題的高檔新式西餐，針對的客源為高薪白領(lǐng)和時尚的顧客。在與客戶多次交流后，他們希望建立一個有別于市場上任何同類餐廳官網(wǎng)的網(wǎng)站，盡力突出電影色彩感效果的網(wǎng)站，并能借助官網(wǎng)的建立提升品牌知名度，從而制造新的銷售機會。于是我們擬定了網(wǎng)站的設(shè)計實施方案。對于前端設(shè)計的方案流程大概可以歸納成前期策劃——制定網(wǎng)站框架——交互原型設(shè)計——網(wǎng)站界面設(shè)計——網(wǎng)站布局——動效與表現(xiàn)這六個步驟。10.1.1項目背景10.1前期準備現(xiàn)目前西式餐廳10.1.2前期策劃

在項目開發(fā)之初，我們做了詳盡的市場調(diào)研與競品分析，從品牌定位、功能框架、界面布局、視覺風格多維度調(diào)查分析了國內(nèi)三家同類牛排西餐廳：我家牛排、西提牛扒、王品牛排10.1.2前期策劃在項目開發(fā)之初，我們做了詳盡的市網(wǎng)頁設(shè)計【綜合案例篇】--2課件

調(diào)查結(jié)果表明三家網(wǎng)站依據(jù)其品牌定位及服務(wù)特點，在頁面功能上雖略有差異，但基本功能一致，包括：關(guān)于品牌、菜品菜單、門市地點、會員活動、聯(lián)系我們這四個方面。布局上基本都使用了固定布局，只有西提牛扒選擇了固定布局+流動布局。要想與眾不同，我們決定從“牛扒工廠”西餐廳的一些具象入手，如神秘的后廚。有了這個靈感后我們參觀了餐廳及后廚的整體環(huán)境，策劃將神秘又神圣的后廚環(huán)境搬上網(wǎng)頁，突出其品牌的年輕、潮流和美食的新概念，吸引更多潛在用戶。調(diào)查結(jié)果表明三家網(wǎng)站依據(jù)其品牌定位及服務(wù)特點，10.1.3確定網(wǎng)站信息框架

完成前期調(diào)研與策劃后，在圍繞“牛扒工廠”的品牌定位和服務(wù)范圍的基礎(chǔ)上，我們對網(wǎng)站的信息結(jié)構(gòu)進行了初步梳理，將網(wǎng)站功能劃分為：首頁、我們、環(huán)境、菜品、服務(wù)、工作、推薦六個板塊。接著又向下細分了六個版塊的欄目內(nèi)容，確定了網(wǎng)站的信息框架。10.1.3確定網(wǎng)站信息框架完成前期調(diào)研與策劃10.1.3確定網(wǎng)站信息框架

在確定了網(wǎng)站信息框架后，我們選取了首頁、2個列表頁、1個詳細頁三類頁面中的頁面各一張制作成交互原型，便于團隊內(nèi)部和與客戶討論10.1.3確定網(wǎng)站信息框架在確定了網(wǎng)站信息框架網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.1整體視覺風格定位及首頁設(shè)計10.2網(wǎng)頁界面設(shè)計

前期策劃階段就擬定了將后廚環(huán)境引進網(wǎng)頁的想法，而在與客戶進一步的溝通中也得到了肯定。于是此時開始畫草圖逐步落實界面中的各個視覺元素以便營造后廚的氣氛，同時還要將網(wǎng)頁導(dǎo)航和功能菜單轉(zhuǎn)換成元素，合理地融入到畫面中。于是在草圖中我們不僅有櫥柜、廚師還插入了保溫燈、插單器等元素，讓這種后廚的氛圍更加逼真。10.2.1整體視覺風格定位及首頁設(shè)計10.2網(wǎng)頁界面設(shè)計接下來根據(jù)草圖創(chuàng)意中的各個界面元素進行資料的收集與整理。在本案例中，除了一些菜品的素材是客戶提供，其他大多素材都是自己拍攝，再經(jīng)過后期處理，統(tǒng)一成同樣的復(fù)古色調(diào)，使其擁有一種看電影的既視感。如插單器中的收據(jù)單自行找的打印單拍攝而成。接下來根據(jù)草圖創(chuàng)意中的各個界面元素進行資料的收集與整理。在本首先是首頁背景的設(shè)計制作，櫥柜與廚師的景象一次性拍攝成果幾乎不現(xiàn)實，因此干凈的后廚與廚師們忙碌的背影都是分開拍攝后，再統(tǒng)一色調(diào)，合成到一個場景中。注意光感的把握，既不能過于沉悶也不能太跳躍而搶鏡。首先是首頁背景的設(shè)計制作，櫥柜與廚師的景象一次性拍攝成果幾乎網(wǎng)頁設(shè)計【綜合案例篇】--2課件接著是前景的設(shè)計與制作。雖然大多素材都能找到近似的同類物品來代替，但對于金屬質(zhì)感超高的鋼化桌面和模擬點餐時的筆畫來說，最好的方法就是自己用軟件繪制了。接著是前景的設(shè)計與制作。雖然大多素材都能找到近似的同類物品來

最后繼續(xù)完善了首頁的其他視覺效果，同時還對之前的遺漏的社交功能（如微信、微博二維碼分享）、熱點菜品推廣功能、新聞功能進行了梳理與補充。最終的完整稿獲得了客戶的高度認可。最后繼續(xù)完善了首頁的其他視覺效果，同時還對之前的網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.2列表頁面設(shè)計

由于首頁效果表現(xiàn)的十分豐富，所以列表頁面的風格既要統(tǒng)一在視覺風格中，還要簡化其視覺元素讓界面布局更加輕盈。于是，導(dǎo)航菜單被固定到界面上方，突出了各列表選項。最終列表頁面在定稿時候，為了視覺效果既統(tǒng)一又有變化，各個列表頁面視覺元素均來自首頁，且每個頁面的元素各不一樣。10.2.2列表頁面設(shè)計由于首頁效果表現(xiàn)的十分豐富，網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.2.3詳細頁面設(shè)計

詳細頁面是列表的深入，因此細節(jié)在延續(xù)列表布局的基礎(chǔ)上，需要不受打擾的有序展示。以菜單版塊的詳細頁來看，就是讓某個具體的菜品在菜單之上完美展示。10.2.3詳細頁面設(shè)計詳細頁面是列表的深入，因此細10.3網(wǎng)站布局（html+css）10.2.1首頁制作

我們精心制作出的一張psd效果圖，并不能直接變成網(wǎng)頁。要先分析設(shè)計圖的布局特征，再轉(zhuǎn)換為html、css代碼，才能在網(wǎng)頁中顯示。除了之前講過的切圖格式技巧外，在編寫html、css代碼的過程中，還需要注意兩個概念：一是上下概念、二是層次概念。上下概念是指：編寫html、css代碼的時候從網(wǎng)頁布局的頂部寫到底部。層次概念是先寫內(nèi)層的html、css，再寫外層的html、css，如背景就在最內(nèi)層，而一般文字會放在最外層。10.3網(wǎng)站布局（html+css）10.2.1首頁制作

本節(jié)將帶領(lǐng)大家制作首頁。對應(yīng)設(shè)計稿來看，首頁需要特別注意菜單區(qū)和新聞區(qū)這兩塊都有很重要的導(dǎo)航功能。本節(jié)將帶領(lǐng)大家制作首頁。對應(yīng)設(shè)計稿來看，首頁需要

經(jīng)過分析，我們制作html、css的順序可以是：第一步，從上到下，從里到外，先制作背景區(qū)，即廚師在后廚里忙碌的圖像作為大圖背景；第二步，制作頂部的全局導(dǎo)航區(qū)，此導(dǎo)航由logo、菜單和語言切換標簽組成；第三步，制作網(wǎng)格展示區(qū)；第四步，制作頁腳，即折疊新聞區(qū)。具體制作方法如下：1.背景區(qū)

這里的背景是一張圖片hou.jpg，圖片如下圖所示：經(jīng)過分析，我們制作html、css的順序可以是：第一步這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和css代碼如下：這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和cs下面對上面的代碼進行詳細說明：首先，page的width設(shè)置為100%，說明頁面的寬度為瀏覽器的寬度。高度設(shè)置為固定的687px。position設(shè)置為absolute，表示它內(nèi)部的div使用絕對定位。絕對定位的意思是，其內(nèi)部的元素可以指定top，left等css屬性。top和left屬性，可以定義內(nèi)部元素左上角位于page中的位置。其次，page中包含一個indexg0，indexg0是一個661像素高的div，其實和hou.jpg這張圖片一樣高，剛好用于包含背景圖。indexg0的左上角位于page的(0,0)處。再次，indexg0中有一個寬度為1800，高為661的圖片，這就是背景圖，最終實現(xiàn)的效果如code/10/index1.html所示。下面對上面的代碼進行詳細說明：2.頂部全局導(dǎo)航區(qū)（1）logo

從上到下，接著要制作的是Logo，Logo的代碼如下所示：2.頂部全局導(dǎo)航區(qū)（1）logoLogo由一張圖和一個詞English組成，English是一個鏈接，用于切換網(wǎng)頁語言，它使用絕對定位，放在（273,15）的位置，顏色為白色（0xfff）。一般來說，Logo應(yīng)該包含在a標簽中，用于點擊，不過這里省略了。上面代碼實現(xiàn)的效果，如下圖所示：Logo由一張圖和一個詞English組成，Engli（2）菜單Logo制作完畢后就是本例中的導(dǎo)航菜單，它實現(xiàn)很有技巧。首先它是將一張繪制好的菜單圖放在設(shè)計圖設(shè)計的位置，然后當鼠標移動到文字上時，顯示一條斜線，形成菜單被勾畫的視覺效果。（2）菜單Logo制作完畢后就是本例中的導(dǎo)航菜單，它實現(xiàn)很首先，整個菜單上的文字，都是繪制到一張圖（qian.png）中的，所以首先將整個背景鋪上這張圖，實現(xiàn)背景圖的代碼如下所示：首先，整個菜單上的文字，都是繪制到一張圖（qian.png）

再仔細分析一下，菜單由若干列組成，一共有6列，每一列由若干行組成。這種結(jié)構(gòu)可以由嵌套的兩個ul，li組成，代碼形式如下所示：再仔細分析一下，菜單由若干列組成，一共有6列，每一列由（3）菜單效果

本例中，當鼠標移動到菜單上的時候，會在菜單上放置一個navbg.png圖標，表示選中。實現(xiàn)方式是先將圖標放到文字的上面，并且隱藏下來。當鼠標移動到文字上時，顯示圖標。實現(xiàn)這個效果的布局代碼已經(jīng)在上面講過了，下面來看看其css實現(xiàn)：（3）菜單效果本例中，當鼠標移動到菜單上的時候，會在菜單

這里通過#navli{float:left;margin-left:24px;}將li左浮動，這樣所有l(wèi)i都靠左邊排列。這樣第一個ul，li就橫向排列，菜單中的6個欄目就依次橫向排列了。這里通過#navli{float:left;mar第二個ulli需要豎向排布，所以沒有設(shè)置float屬性，因為li的float默認是豎向的。#navliullia設(shè)置寬度為68像素，高度為22像素，設(shè)置a標簽的背景圖為nb.png(一條線)，這樣，當鼠標移動到a標簽時，文字下面就會出現(xiàn)橫線了。第二個ulli需要豎向排布，所以沒有設(shè)置float屬性，因3.新聞?wù)郫B區(qū)（1）新聞區(qū)布局新聞?wù)郫B區(qū)中有一個News按鈕，當單擊圖標新聞向上彈出，用戶就能看到新聞幻燈片效果，而這里的布局（見圖10.16）就是我們要面對的第一個問題：3.新聞?wù)郫B區(qū)（1）新聞區(qū)布局其代碼如下：其代碼如下：（2）新聞的動效這里的動效主要由一個slider組成，相關(guān)的css代碼如下所示：（2）新聞的動效這里的動效主要由一個slider組成，相關(guān)的news使用了絕對定位，定位在坐標為（428,628）的位置，news的高度是200像素。opennews是一個圖標，點擊它，消息就可以從底部往上彈。再點一次則收回底部。newsbody是包含消息的一個div，寬度設(shè)置為100%，高度163像素，背景為nn.pngnewsc是一個ul，用來存放兩張幻燈片，這里用到了前一章的幻燈片插件（jquery.anythingslider）newscli是每一張幻燈片，里面包含一張圖片和一段文字。nimg是圖片的樣式。幻燈片的js代碼如下所示：news使用了絕對定位，定位在坐標為（428,628）的位置網(wǎng)頁設(shè)計【綜合案例篇】--2課件10.3.2列表頁制作另一個比較重要的知識點就是列表頁的制作。本小結(jié)將以餐單頁面中的列表頁作為案例進行講解。在此列表頁中展示的內(nèi)容是一個菜單。10.3.2列表頁制作另一個比較重要的知識點就是列表頁的制

列表頁由頂部的Logo和頂部全局導(dǎo)航區(qū)、中部的網(wǎng)格展示區(qū)組成。你可以在第10課的caidan.html中看到本部分的代碼。從設(shè)計圖中，經(jīng)過分析，我們制作html、css的順序可以是：先是背景，再是頂部全局導(dǎo)航區(qū)，接著是網(wǎng)格展示區(qū)，最后是頁腳。1.背景制作制作背景是從上到下，從里到外，背景實際上是張清晰廚師圖像，這張圖像最終被拉伸以填充整個頁面，形成一種模糊的效果。列表頁由頂部的Logo和頂部全局導(dǎo)航區(qū)、中部的網(wǎng)格展示網(wǎng)頁設(shè)計【綜合案例篇】--2課件實現(xiàn)背景的代碼如下：實現(xiàn)背景的代碼如下：

上面的代碼定義了2個div，都設(shè)置了abs類。Abs類表示絕對定位，這里是div的左上角都定位在（0,0）點。body-bg中的z-index屬性為-4，表示該div放在-4層，相比來說是在最底層。第一個div下面有一張cp-body-bg.png圖片，就是上面的廚師圖片，被拉伸到1280*696像素，所以會形成模糊的感覺。

另一個div營造出了點狀小網(wǎng)格的效果，grid類設(shè)置了body-bg2.png作為背景，這是一個寬度3像素，高度3像素的小網(wǎng)格元素，在gird中重復(fù)這個元素，就形成了效果圖中的點狀網(wǎng)格效果。不是太明白的同學，可以在瀏覽器中打開頁面看一下。

上面的代碼定義了2個div，都設(shè)置了abs類。Abs類2.頂部全局導(dǎo)航區(qū)頂部全局導(dǎo)航區(qū)由logo、菜單和語言切換標簽組成。這里的菜單是一個二級菜單，如下圖所示：實現(xiàn)這部分布局的代碼如下：2.頂部全局導(dǎo)航區(qū)頂部全局導(dǎo)航區(qū)由logo、菜單和語言切換標網(wǎng)頁設(shè)計【綜合案例篇】--2課件

首先header-bg在header區(qū)域設(shè)置了一張背景圖。Header中包含了3個div，分別是左邊的logo，中間的菜單，右邊的English字符。Logo直接是一個a標簽中嵌入一個img標簽實現(xiàn)。中間的菜單是一個ulli標簽實現(xiàn)。右邊的Engli