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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這里的背景是一張圖片hou.jpg，圖片如下圖所示：經過分析，我們制作html、css的順序可以是：第一步這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和css代碼如下：這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和cs下面對上面的代碼進行詳細說明：首先，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的圖片，這就是背景圖，最終實現(xiàn)的效果如code/10/index1.html所示。下面對上面的代碼進行詳細說明：2.頂部全局導航區(qū)（1）logo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這里的背景是一張圖片hou.jpg，圖片如下圖所示：經過分析，我們制作html、css的順序可以是：第一步這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和css代碼如下：這幅圖片可以通過div中嵌入一個img來實現(xiàn)，html和cs下面對上面的代碼進行詳細說明：首先，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的圖片，這就是背景圖，最終實現(xiàn)的效果如code/10/index1.html所示。下面對上面的代碼進行詳細說明：2.頂部全局導航區(qū)（1）logo

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

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

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

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

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

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

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

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

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