網(wǎng)頁設計從界面布局到視覺表現(xiàn)

1、標題:字體: 微軟雅黑粗體字號: 32-36pt顏色: 主題藍色副標題:字體: 微軟雅黑字號: 24pt顏色: 主題灰色網(wǎng)頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)篇綜合案例篇網(wǎng)頁設計從界面布局到視覺表現(xiàn)第1頁綜合案例篇網(wǎng)站靜態(tài)頁面前端開發(fā)基礎餐飲類網(wǎng)站靜態(tài)頁面設計網(wǎng)頁設計從界面布局到視覺表現(xiàn)第2頁9. 網(wǎng)站靜態(tài)頁面前端開發(fā)基礎9.1 html基礎9.2 css基礎9.3 javascript腳本基礎9.4 案例幻燈片效果網(wǎng)頁設計從界面布局到視覺表現(xiàn)第3頁9.1.1 html介紹 9.1 html基礎 我們精心制作出一張psd效果圖，并不是能夠被瀏覽器或者手機展示出來網(wǎng)站。要讓瀏覽器

2、或者手機能夠顯示網(wǎng)站，必須將效果圖轉換為瀏覽器或者手機能夠認識語言，這種語言就是html語言。 html英語意思是 Hypertext Marked Language，即超文本標識語言。為何是超文本呢？其實還能夠翻譯為超級文本，它意思是能夠比我們平時寫書信要強很多文本，能夠加入圖片、聲音、動畫、影像，還能夠從網(wǎng)頁中一個鏈接跳轉到另一個頁面。這就是為何叫超文本標識語言原因。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第4頁9.1.2 html文檔結構 對于從來沒有過編程經(jīng)驗同學，學習html可能會比較難，因為，它既不像漢語也不像英語，能夠直接從左到右讀出一個語義出來。當前計算機極難直接了解人類自然語言，所以必須

3、以一個特殊格式來表示網(wǎng)頁外觀。這種格式就是html文檔格式，以下是一個簡單html頁面代碼：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第5頁html文檔主要由3部分組成：html部分、文檔頭head、文檔體body：（2）文檔頭 頭部以標簽開始，以標簽結束。這部分包含顯示在網(wǎng)頁導航欄中標題和其它在網(wǎng)頁中不顯示信息。 標題包含在和/title標簽之間，表示這個網(wǎng)頁頁面標題，以下： .網(wǎng)頁設計從界面布局到視覺表現(xiàn)第6頁（3）主體部分 主體部分以標簽開始，以標簽結束。主體部分包含再網(wǎng)頁中顯示文本、圖像和鏈接等，以下： .網(wǎng)頁設計從界面布局到視覺表現(xiàn)第7頁9.1.3 慣用標簽 html語言一些基本語法單位，我們稱為

4、標簽，也稱為html標簽或者html元素。html標簽能夠大寫、也能夠小寫，如標題和所表示意思是一樣，不過當前html規(guī)范中，推薦使用小寫，這也是一個好書寫習慣。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第8頁html標簽有以下一些特點，需要引發(fā)我們注意： （1）標簽是由尖括號包圍，比如 （2）標簽普通式成對出現(xiàn)，比如和需要成對出現(xiàn)，表示開始，表示結束。不過也有單獨出現(xiàn)標簽，如圖像標簽就是單獨出現(xiàn)，不過需要在反堅括號()前加一個斜線（/），表示結尾。成對出現(xiàn)標簽和單獨出現(xiàn)標簽有什么區(qū)分呢？主要是成對出現(xiàn)標簽，在兩個標簽中間有內容，如我們，而單獨出現(xiàn)標簽是沒有內容，如網(wǎng)頁設計從界面布局到視覺表現(xiàn)第9頁標題標簽

5、html標題是經(jīng)過 、 等標簽進行定義，它們表示不一樣大小標題文字，和word一樣，一級標題最大，六級標題最小，以下代碼：下面介紹一些慣用標簽：這是一級標題這是二級標題這是三級標題這是四級標題這是五級標題這是六級標題網(wǎng)頁設計從界面布局到視覺表現(xiàn)第10頁標題標簽代碼在瀏覽器顯示效果也如標題標簽一樣呈遞減方式。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第11頁段落標簽 另一個慣用標簽是標簽，表示段落，段落就是寫文章時候分段。代碼以下：這是第一段落。這是第二段落。 段落標簽代碼在瀏覽器顯示效果也會如段落一樣行距間隙較大。鏈接標簽 鏈接標簽用表示，它用來實現(xiàn)從一個頁面跳轉到另一個頁面功效，普通鏈接標簽下有一條橫線，

6、表示鏈接意思。下面是三個鏈接到BAT（baidu、阿里巴巴、騰訊）首頁a標簽例子：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第12頁 淘寶 騰訊 baidu鏈接標簽代碼在瀏覽器顯示效果會引導、提醒用戶點擊。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第13頁 圖像標簽 網(wǎng)頁中圖像是用標簽來表示，img標簽有src屬性，表示圖像在磁盤或者網(wǎng)絡中存放位置。普通來說，我們也需要定義一張圖像在網(wǎng)頁中大小，使用寬度(width)和高度(height)屬性來定義圖像大小。下面用代碼表示一個寬為80像素，高為45像素logo圖像，就能在瀏覽器中顯示出來了。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第14頁 文本格式化標簽html定義了很多格式化輸出標

7、簽，比如斜體字、粗體字、強調字等。標簽表示文字加粗。標簽表示斜體字。表示強調字，它意思是在一段文字中，標簽修飾字更突出。下面是一些慣用文本格式化標簽： Document body background-color: #aa0; 加粗字 斜體字 大號字 強調字 刪除字 中國 北京 文字 上標 網(wǎng)頁設計從界面布局到視覺表現(xiàn)第15頁對du應上面文本格式化標簽代碼次序，在瀏覽器顯示效果各不相同。 表格標簽 表格由標簽來定義。每個表格都有若干行（由標簽定義），每行被分割為若干單元格（由標簽定義）。字母td指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格內容。數(shù)據(jù)單元格能夠包含文本、圖片、列表、段落、表單

8、、水平線、表格等正當html標簽。表格代碼以下所表示：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第16頁左面表格標簽代碼在瀏覽器顯示成了一個消費統(tǒng)計表格網(wǎng)頁設計從界面布局到視覺表現(xiàn)第17頁9.2.1 css介紹 9.2 css基礎 我們看到豐富多彩網(wǎng)頁，它外觀是由什么決定呢？網(wǎng)頁外觀是由css定義。css是Cascading Style Sheet(級聯(lián)樣式表)縮寫。它是為網(wǎng)頁添加布局效果一個樣式語言，因為它使用簡單方便，凡是編寫網(wǎng)頁代碼，都需要學習它。 css主要用于定義html布局、外觀。比如，某個字體顏色、字體大小、內外邊距。圖像寬度、高度等。下面我們將對css進行詳細介紹。網(wǎng)頁設計從界面布局到視覺表

9、現(xiàn)第18頁 一個css語法規(guī)則由兩部分組成：選擇器、一條或者多條樣式語句。selector declaration1; declaration2; . declarationN selector是選擇器，表示需要改變html元素。declaration表示樣式語句，用來定義一個樣式，普通是一個屬性和一個值組成。9.2.1 css介紹 比如設置h1字體為深灰色，字號為16像素里h1就是選擇器（selected）,表示選擇h1標簽，對h1標簽進行外觀和布局設置。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第19頁9.2.3 css屬性選擇器 為了靈活選擇html中標簽，設置標簽布局。css定義了幾個選擇器：id選

10、擇器、類選擇器、屬性選擇器等。（1）id選擇器Id選擇器選擇特定idhtml標簽，并為它們指定樣式。id選擇器以“#”來表示。如右圖：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第20頁（2）css類選擇器并不是每個html標簽（如div）都需要一個id，也能夠使用類來定義html標簽布局和外觀。在 css 中，類選擇器以一個點號顯示，以下：.red color:#ff0000;在上面例子中，全部屬于red類html標簽字體均設置為紅(#ff0000)。在下面 html 代碼中，h1 和 p 元素都有 red類。這意味著二者都將恪守 .red 選擇器中規(guī)則。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第21頁（3）css 屬

11、性選擇器 css 屬性選擇器用來對帶有指定屬性html標簽設置樣式，當類選擇器和id選擇器使用不太方便時候，能夠使用屬性選擇器。需要注意是，在低版本瀏覽器上（如IE6）是不支持屬性選擇器，這是因為，這些瀏覽器已經(jīng)開發(fā)了超出，css一些新特征最近幾年才出來。不過不用擔心，這些瀏覽器已經(jīng)退出了歷史舞臺，當前極少使用了。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第22頁屬性選擇器還有一些變種，用來實現(xiàn)更強大屬性選擇器，見下表：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第23頁下面代碼是屬性選擇器慣用形式： css 屬性選擇器制訂各種形式網(wǎng)頁設計從界面布局到視覺表現(xiàn)第24頁9.2.4 網(wǎng)頁中應用樣式表 要想在瀏覽器中顯示出預期c

12、ss樣式表效果，就要讓瀏覽器識別并正確調用css。這里介紹三種在html頁面中插入css樣式表方法：一是鏈入外部樣式表；二是內部樣式表、三是內嵌樣式。（1）鏈入外部樣式表鏈入外部樣式表是把樣式表保留為一個樣式表文件，擴展名為css。然后在頁面中用標識導入樣式文件到網(wǎng)頁中。這個標識必須放到頁面區(qū)內，以下：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第25頁 一個外部樣式表文件(如mystyle.css文件)能夠應用于多個頁面。當你改變這個樣式表文件時，全部頁面樣式都隨之而改變。在制作大量相一樣式頁面網(wǎng)站時，非常有用，不但降低了重復工作量，而且有利于以后修改、編輯，也降低了瀏覽器重復下載代碼樣式表文件，這對提升網(wǎng)

13、站訪問速度是很主要，也是當前用得最多一個樣式導入方式。使用外部樣式表時，只需要在外部樣式表中寫上樣式就能夠了，使用任何文本編輯器都能夠書寫，這里推薦大家使用dreamweaver、sublime等流行工具。下面是一個mystyle.css例子：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第26頁（2）內部樣式表內部樣式表是把樣式表放到頁面區(qū)里，這些定義樣式就應用到頁面中了，樣式表是用標識插入，從下例中能夠看出標識使用方法：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第27頁3、內嵌樣式表內嵌樣式表是在html標簽中使用，用這種方法，能夠很簡單對某個元素單獨定義樣式。內嵌樣式使用是直接將在html標簽中加入style屬性。而s

14、tyle屬性內容就是css屬性和值，以下例：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第28頁9.2.5 css慣用屬性 1）css 背景css能夠使用純色作為背景，也能夠使用一幅圖片作為背景。能夠使用 background-color 屬性為標簽設置背景色。這個屬性接收任何正當顏色值。下面這條規(guī)則設置全部div背景為紅色：div background-color: red;background-color其默認值是transparent。transparent 是透明意思。也就是說，假如一個元素沒有指定背景色，那么背景就是透明，這么其上層元素背景才能可見。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第29頁（2）css

15、文本屬性css文本屬性用來定義文本外觀，如顏色、字體大小，對齊方式，縮進等。text-indent 屬性實現(xiàn)文本縮進，這個屬性用來將首段首行進行縮進，下面語句，將p標簽縮進2個em單位。p text-indent: 2em;text-align屬性用來定義一個元素中文本對齊方式。它值普通有l(wèi)eft、center、right，分別表示左對齊、居中、右對齊。text-decoration 屬性是一個慣用屬性，普通用來對文字添加下劃線，比如鏈接標簽a，默認就帶有下劃線。 text-decoration能夠取none、underline、overline、line-through和blink。它們意思

16、分別是：none：表示關閉原本應用到一個標簽上全部樣式，比如a標簽默認有下劃線，假如將text-decoration設置為none，那么就表示去掉下劃線。underline：會對元素加下劃線overline：overline 與underline恰好相反，會在文本頂端畫一個上劃線。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第30頁line-through：在文本中間畫一條線。blink：讓文本閃爍起來，不過有瀏覽器不支持這個特征，需慎重使用。line-height屬性非常主要，使用也非常多，表示文字行間高度。下面規(guī)則表示設置p標簽行高為24像素：pline-height:24px下面代碼總結了一些慣用css

17、文本屬性：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第31頁上面代碼在瀏覽器中各種文本效果在實際設計表現(xiàn)中利用頻率很高。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第32頁（3）css 字體屬性css 字體屬性定義文本字體名字、大小、加粗和格調（如斜體）等。使用字體名字，能夠使用font-family 屬性，以下定義了body中全部文本使用微軟雅黑字體。bodyfont-family:微軟雅黑假如用戶電腦上沒有微軟雅黑，可能出現(xiàn)一個不確定字體，這時候，能夠多指定幾個字體，以下：bodyfont-family:微軟雅黑,宋體,楷體這么會從左到右，選擇字體。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第33頁9.2.6 css盒模型 css盒

18、子模型又稱框模型，它是html+css最關鍵知識之一，了解這個概念能夠更加好了解html各個元素是怎樣布置在瀏覽器頁面中。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第34頁 上面這個圖表示html每個標簽都可以具有這些屬性，它分別定義了每個標簽外邊距(margin)、邊框（border)、內邊距（padding) 和內容（content)。這幾個屬性含義分別是：外邊距（margin)：最外層外邊距，和另一個html元素距離，當然可認為0。外邊距是透明，沒有顏色，肉眼無法看到。邊框(Border）：圍繞在內邊距和外邊距之間邊框，可以有寬度，而且也可以有顏色。邊框也可以有樣式，如點畫線，實心線等，后面會詳細介紹

19、。內邊距(Padding)：內容和邊框之間距離，內邊距是透明。內容(content)：內容區(qū)表示盒子模型內容，主要顯示文本、圖像、鏈接等。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第35頁（1）外邊距（margin）屬性margin屬性定義了外邊距，它能夠單獨設置上，下，左，右邊距，也能夠一次改變全部屬性。單獨設置上下左右邊距好處是：能夠設置左邊距為10px，右邊距為0px。這么能夠靈活控制元素總體大小。單獨指定上下左右邊距屬性是：上邊距（margin-top）、（下邊距）margin-bottom、（左邊距）margin-left、（右邊距）margin-right。全部邊距能夠取以下值：網(wǎng)頁設計從界面布

20、局到視覺表現(xiàn)第36頁除了寫出完整margin-left，marging-right等，margin也能夠簡寫。普通情況margin能夠有四個值，以下：margin:35px 40px 65px 90px;表示：上邊距為35px右邊距為40px下邊距為65px左邊距為90px細心讀者，會發(fā)覺margin:35px 40px 65px 90px等價于margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:90px;網(wǎng)頁設計從界面布局到視覺表現(xiàn)第37頁margin也能夠接收3個值，以下：margin:35px 40px 65p

21、x;表示：上邊距為35px左右邊距為40px下邊距為65px等價于：margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:40px;margin也能夠接收2個值，以下：margin:25px 50px;上下邊距為25px左右邊距為50px等價于margin-top:25px;margin-right:50px;margin-bottom:25px;margin-left:50px;margin也能夠接收1個值，以下：margin:25px;全部4個邊距都是25px等價于margin-top:25px;margin-ri

22、ght:25px;margin-bottom:25px;margin-left:25px;網(wǎng)頁設計從界面布局到視覺表現(xiàn)第38頁2）邊框（border）屬性邊框（border）屬性允許你指定一個元素邊框樣式和顏色。css邊框有以下屬性：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第39頁左面代碼在瀏覽器中效果將有虛線紅色邊框和實線綠色邊框兩種。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第40頁（3）填充(padding）屬性填充(padding）屬性定義元素邊框與元素內容之間空間。padding取值和margin相同，可認為30px、10%、auto等類似值。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第41頁（4）盒模型完整示例下面代碼是

23、一個完整盒模型示例（見圖9.15），代碼中它設置了內邊距padding、邊框border、外邊距margin：（圖）填充屬性應用效果網(wǎng)頁設計從界面布局到視覺表現(xiàn)第42頁網(wǎng)頁設計從界面布局到視覺表現(xiàn)第43頁經(jīng)過本例，我們還需要了解盒模型整個元素占用總寬度和總高度，其計算公式分別以下：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第44頁 假如將靜態(tài)網(wǎng)頁比作成一個人，那么html就是人骨骼、css則是血肉、而javascrpit就是人動態(tài)。而了解javaScript現(xiàn)在最好方式之一就是了解它歷史。這有利于全方面了解javaScript在整個計算機理論和工業(yè)界中所處主要位置。9.3 javaScript腳本基礎網(wǎng)頁設

24、計從界面布局到視覺表現(xiàn)第45頁9.3.1 javaScript介紹 javaScript誕生于1995年前后，這是有當初非常牛逼Netscape(網(wǎng)景)企業(yè)創(chuàng)造。javaScript最初主要用來處理網(wǎng)頁前端驗證，如當用戶輸入密碼時候，驗證密碼是否包含字母和數(shù)字。 經(jīng)過20多年發(fā)展，javaScript當前功效已經(jīng)非常強大了。我們現(xiàn)在所看到網(wǎng)站大多數(shù)效果，都是用javaScript實現(xiàn)，所以掌握javaScript是制作網(wǎng)站很主要技能之一。另外，在工業(yè)界中，大家常把javaScript簡稱為js，所以javaScript和js實則表述為同一腳本語言。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第46頁9.3.2

25、 html中使用javaScriptjavaScript必須放在html 與 標簽之間。以下文：上面代碼， 和 會指明了javaScript 開始和結束。瀏覽器會將 和 之間代碼，了解為javaScript。可能你在有些教材中，發(fā)覺有以下寫法：傳統(tǒng)javaScript代碼， 標簽中使用 type=text/javaScript，但現(xiàn)在瀏覽器默認使用javaScript作為腳本語言，所以不需要顯示指定腳本屬于哪一個語言了。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第47頁9.3.3 javscript變量 了解javaScript語法，我們先從變量開始。變量是javaScript中表示計算結果或值一個抽象概念

26、，和數(shù)學中變量x、y、z差不多。變量能夠經(jīng)過變量名訪問。變量名命名規(guī)范需要恪守兩條簡單規(guī)則： 一是第一個字符必須是字母、下劃線(_)或美元符號($)，不能以數(shù)字開始； 二是后面字符能夠是下劃線、美元符號、任何字母或數(shù)字字符. 下面變量都是正當： 上面var表示申明一個變量，var是javaScript關鍵字，不能用作變量名。變量賦值直接使用等號(=)，以下代碼：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第48頁9.3.4 javaScript操作html標簽 很多時候我們都需要使用javaScript來操作html，以下這幾個情況是經(jīng)常發(fā)生： 一是登錄失敗時候，改變某個html標簽顯示內容，以提醒用戶名或者

27、密碼錯誤；二是改變某個html標簽css樣式，如改變標簽顏色、字體大小、背景色等。 javaScript使用document.getElementById(id) 方法來操作某個html標簽，id表示某個html標簽唯一標識。下面是一個改變標簽內容例子：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第49頁9.3.5 javaScript注釋 當代碼寫多了，難免有不好了解和閱讀地方，這時候，你需要給代碼寫一些注釋。寫注釋是一個很好習慣，它不但能夠幫助你在未往返想起代碼意思，而且能夠幫助您團體組員了解你代碼意圖。javaScript注釋分單行和多行注釋，單行注釋以/開始，下面是使用單行注釋例子：多行注釋以 /*

28、開始，以 */ 結尾，下面是使用多行注釋例子：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第50頁9.3.6函數(shù)一個函數(shù)代碼包含了一對花括號中，用關鍵詞function來表示函數(shù)，以下函數(shù)也能夠帶有參數(shù)，傳入?yún)?shù)不一樣，返回結果可能也不一樣。函數(shù)也能夠帶有參數(shù)，傳入?yún)?shù)不一樣，返回結果可能也不一樣。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第51頁 這里是一個加法函數(shù)，傳入2個參數(shù)x和y，函數(shù)功效是把x加y和返回。function是函數(shù)關鍵字，不能更改，add是函數(shù)名，x和y是參數(shù)。 當寫好函數(shù)需要執(zhí)行，調用函數(shù)代碼以下：當寫好函數(shù)需要執(zhí)行，調用函數(shù)代碼以下：這里total值是3+4和為7。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第5

29、2頁9.3.7 javaScript運算符 javaScript運算符和數(shù)學中運算符差不多，前面我們接觸了=、+等運算符，其意義也和數(shù)學中意義一樣。javaScript主要有：算數(shù)運算法、賦值運算符、關系運算符等。1.算數(shù)運算符算數(shù)運算符主要執(zhí)行變量之間算數(shù)運算，下表取y=4，解釋了慣用算數(shù)運算符運算規(guī)則：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第53頁2.賦值運算符 賦值運算符用于給變量賦值，下面表格解釋賦值運算符賦值規(guī)則，設x=10，y=5：網(wǎng)頁設計從界面布局到視覺表現(xiàn)第54頁3.關系運算符 關系運算符主要用于比較功效，每一個關系運算符都返回一個布爾值。布爾值是一個特殊值，它要么為真(true)，要么

30、為(false)。 如姚明是一個籃球運動員？這句話為真，所以其布爾值為真(true)。 又如姚明是女性？這句話是假，所以其布爾值為假(false)。 慣用關系運算符有小于()、小于等于(=)。下面是2個例子，注釋中是得到布爾值。網(wǎng)頁設計從界面布局到視覺表現(xiàn)第55頁9.3.8 javaScript三種流程控制編程語言中有三種流程控制結構，分別是次序結構、條件結構和循環(huán)結構。1.條件結構條件結構就是按照條件執(zhí)行對應語句。首先我們來看一下條件語句，條件語句依據(jù)不一樣條件，執(zhí)行不一樣代碼。慣用條件語句有以下三種：（1）if語句當條件為true時，執(zhí)行花括號中語句。（2）if.else. 語句網(wǎng)頁設計從界面布局到視覺表現(xiàn)第56頁（2）if.else if.else 語句if.else if.else 語句，當