上節(jié)課將網(wǎng)頁的排版框架大致寫好秉氧。
這節(jié)課就來進行更具體的修改和增加所有元素的細節(jié)，完成整個網(wǎng)頁的編寫芹枷。
下載所有必須的圖片文件
按照上節(jié)課的方法，用調(diào)試工具分析代碼之后莲趣，可以下載好必須的圖片文件鸳慈。
關(guān)于當中專題的圖片，這里只下載了3個喧伞，更多的圖和文字留給大家自己去完成走芋。
主體排版調(diào)整
給table加上邊框線的目的是為了方便在開發(fā)編寫完成之前能夠隨時觀察排版的情況，方便進行調(diào)整絮识。
在排版樣式基本調(diào)整到位之后绿聘，就可以刪除table的邊框了。
來給下面2行的左右分別增加內(nèi)邊距為140px和120px次舌。
修改css代碼如下：
刷新頁面：
可以看到熄攘，下面2行的左右留白出現(xiàn)了，同時第2行和第3行之間有間距彼念，第3行的左右2個td之間也有間距挪圾。
雖然第3行的2個td的寬度比例不對，但是先不著急逐沙，下面按照次序一個一個元素來調(diào)整哲思。
實現(xiàn)最上面一排按鈕和鏈接
最上面一排左邊4個元素，右邊4個元素吩案，當中留白棚赔，因此一共9個td。
將左邊4個td和右邊4個td的寬度固定，剩余當中的一個td不設(shè)置靠益，那么瀏覽器窗口變化的時候丧肴，就不影響到左右的8個td的寬度。
僅僅影響到當中留白的那個td胧后。這是經(jīng)常使用的一種適應(yīng)不同瀏覽器在不同屏幕上不同寬度的一種方法芋浮。
修改css代碼，增加tda1到tda9的樣式壳快。
刷新頁面：
可以看到纸巷，基本的按鈕位置已經(jīng)到位，可以不需要table的邊框了眶痰。
刪除掉table的邊框樣式瘤旨，同時針對最上面一排的整個table的樣式table2增加一個下邊框的樣式，做出一條灰色的分割線出來凛驮。
修改css代碼如下：
刷新頁面：
接下來裆站，逐步添加圖片或者按鈕。
第一步黔夭，添加第一個圖片，logo圖片羽嫡。然后增加后面的2個icon圖標本姥，這里icon圖標要用到一個新的技術(shù)，就是css3的content屬性杭棵。
并且通過自定義字體文件婚惫，來顯示圖標類型的文字。具體內(nèi)容這里不深入講解魂爪，大家只要了解先舷，通過引入自定義字體文件的方式就可以將字體文件里面的特殊符號圖標形狀的文字顯示在網(wǎng)頁上。它看起來是一個圖標滓侍，但其本質(zhì)是一個文字蒋川。這是這個文字做成圖標樣子了。比如很多網(wǎng)頁中出現(xiàn)的各種箭頭圖標撩笆，很多都是文字捺球。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到，前面3個圖標都模仿編寫完成了夕冲。
接下來模仿搜索框部分氮兵。
搜索框可以用外面套一個div，div的背景色是灰色歹鱼，然后邊角做成圓角的泣栈。
當中放一個input標簽可以用于輸入,input標簽是一個新的標簽，具體的作用就是讓用戶可以輸入文本的。
后面的課程中會詳細講解的南片，這里不深入講解掺涛。
然后右邊放一個類似前面的圖標用i標簽并設(shè)置content自定義文字編碼來實現(xiàn)。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
接下來铃绒，修改右側(cè)的4個圖標和按鈕鸽照。
第1個很簡單，也是一個文字圖標颠悬，和前面的下載圖標一樣矮燎。
第2個是一個文字a鏈接，樣式為灰色文字赔癌。
第3個也是一個文字a鏈接诞外，注意邊框為圓角邊框，顏色為紅色灾票。
第4個也是一個文字a鏈接峡谊，底色為紅色，邊框為圓角刊苍，里面包含一個i標簽和文字既们，其中i標簽也是一個羽毛筆的圖標文字。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到正什，通過分析原始網(wǎng)頁的相關(guān)CSS樣式的值啥纸，然后模仿寫到自己的css文件里面，就能很方便的將網(wǎng)頁元素模仿編寫出同樣類似的效果婴氮。當然斯棒，模仿后和原來的不是百分之百一樣的，這很難做到主经，因為畢竟每個網(wǎng)頁的排版布局是不一樣的實現(xiàn)方式荣暮。只要掌握了這個方法，通過學(xué)習(xí)不同的網(wǎng)頁的實現(xiàn)方式罩驻，很快就能掌握如何編寫出自己的網(wǎng)站效果了穗酥。
接下來的實現(xiàn)過程，學(xué)哥就不再逐個元素的講解了鉴腻，直接將修改好的代碼呈現(xiàn)給大家迷扇。
大家也可以先不要往下看學(xué)哥的實現(xiàn)結(jié)果，可以自己先嘗試將網(wǎng)頁剩余的元素全部編寫出來爽哎。
實現(xiàn)下面左邊的專題按鈕
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到關(guān)于專題這部分已經(jīng)都做好了蜓席。由于專題太多了，而且都是重復(fù)的樣式课锌，這里就不做出所有的專題了厨内，做出3個作為代表性的例子就足夠了祈秕。
設(shè)置下面右邊的td的寬度
現(xiàn)在可以調(diào)整下面一行的左右td的寬度了，將右側(cè)的td的寬度固定為218px雏胃，左側(cè)的td不固定寬度请毛。
修改css代碼如下：
刷新頁面：
可以看到右側(cè)td的寬度變大了，左側(cè)的td的寬度變小了瞭亮。
如果瀏覽器窗口拉大或者縮小會發(fā)生什么情況呢方仿？
如果瀏覽器窗口放大的話，左側(cè)td的寬度也會自動變大统翩，是由于將table的寬度設(shè)置為100%了仙蚜。
一個table設(shè)置為100%，也就是根據(jù)瀏覽器寬度變化而變化厂汗，同時一個tr里面的td如果設(shè)置了絕對寬度則寬度就不跟隨瀏覽器變化而變化委粉，如果td沒有設(shè)置寬度，則這些td會根據(jù)內(nèi)容的比例進行分配寬度娶桦。
假如一行里面只有一個td沒有設(shè)置寬度贾节，則剩余的寬度都會分配給這個td，那么瀏覽器寬度變化的話就只有這個td會改變寬度衷畦。
將瀏覽器窗口拉大一些栗涂，效果如下：
可以看到，右側(cè)的td的寬度不變祈争，而左側(cè)的td的寬度變大了戴差。
同時可以看到最上面一排按鈕，只有當中留白的那個td也變大了铛嘱。其它按鈕的td并沒有變化。
這個設(shè)置table寬度自適應(yīng)瀏覽器寬度的方法袭厂，是一個比較好的控制瀏覽器寬度變化的方法墨吓。大家在編寫網(wǎng)頁時候要考慮到瀏覽器寬度的因素。
實現(xiàn)下面左邊的文章標題鏈接
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看見第3行的左邊部分纹磺，關(guān)于文章的內(nèi)容全部做好了帖烘。
主要是css代碼部分增加比較多。
實現(xiàn)下面右邊的大圖標按鈕和作者排行內(nèi)容
首先將第3行的左右2個td的垂直方向都靠上對齊：
修改css代碼如下：
然后橄杨，修改右側(cè)的大圖標和作者排行內(nèi)容秘症。
修改css代碼如下：
修改html代碼如下：
刷新頁面：
可以看到，所有的頁面代表性元素全部樣式都做成了式矫。
多瀏覽器測試和多設(shè)備測試
到這里乡摹，完成了模仿一個真實的網(wǎng)頁的全部工作，按照這種模式采转，可以模仿出各種各樣的網(wǎng)頁編碼聪廉。
接下來瞬痘，要將代碼部署到本地服務(wù)器上。
然后通過安裝不同的瀏覽器軟件板熊，例如IE瀏覽器框全，Chrome瀏覽器，Safari瀏覽器干签，F(xiàn)irefox瀏覽器進行不同瀏覽器的兼容性測試津辩。
保證在不同的瀏覽器上看到的網(wǎng)頁效果大致都一樣，不要出現(xiàn)明顯的不協(xié)調(diào)或不美觀之處容劳。
然后還要在不同的設(shè)備和操作系統(tǒng)上針對不同的瀏覽器做更大范圍的兼容性測試喘沿，這樣才能盡最大可能讓我們編寫的網(wǎng)頁程序能夠適應(yīng)更多的計算機環(huán)境，呈現(xiàn)最好的效果鸭蛙。
第2章總結(jié)
前面通過15小節(jié)的內(nèi)容摹恨，講解了如何編寫靜態(tài)內(nèi)容網(wǎng)站，如何部署到本地服務(wù)器娶视，如何運用瀏覽器調(diào)試工具來學(xué)習(xí)和模仿編寫網(wǎng)站晒哄，如何將網(wǎng)站程序部署到阿里云服務(wù)器，如何購買一個域名并解析到云服務(wù)器肪获，完整的通過2個實例演示了整個網(wǎng)站實現(xiàn)的過程寝凌。
下面來回顧一下每節(jié)課的內(nèi)容，并說明重點以及自學(xué)是需要注意的地方孝赫。
第2.1節(jié)较木，主要是講解關(guān)于網(wǎng)站的技術(shù)原理和要做的大概內(nèi)容。
第2.2節(jié)青柄，主要講一個最最簡單的網(wǎng)頁代碼是什么樣子的伐债，讓大家有一個最直觀的感受，從最簡單的開始致开，html標簽峰锁，head標簽，title標簽双戳，body標簽虹蒋，和使用文本編輯器。
第2.3節(jié)飒货，從一個網(wǎng)站的設(shè)計開始魄衅，然后講解了br標簽，b標簽塘辅，設(shè)置網(wǎng)頁網(wǎng)頁的背景色晃虫，關(guān)于CSS樣式定義以及顏色定義。
第2.4節(jié)莫辨，開始學(xué)習(xí)最重要的一個div標簽傲茄，包括設(shè)置背景色毅访，文字顏色，文字大小盘榨，尺寸單位喻粹，文字字體，文字斜體和加粗草巡。
第2.5節(jié)守呜，學(xué)習(xí)基本的CSS樣式之后，學(xué)習(xí)將CSS樣式和網(wǎng)頁內(nèi)容進行分離山憨，更方便開發(fā)查乒。
第2.6節(jié)，網(wǎng)頁顯示中很重要的寬度郁竟，高度玛迄，內(nèi)邊距，外邊距棚亩，邊框蓖议，可以將網(wǎng)頁元素修飾的更美觀大氣。
第2.7節(jié)讥蟆，在學(xué)會使用div進行頁面排版布局之后勒虾，再學(xué)習(xí)使用table表格來對網(wǎng)頁進行排版，掌握td的用法瘸彤，包括設(shè)置內(nèi)邊距和字體修然，以及邊框。
第2.8節(jié)质况，學(xué)習(xí)對table表格進行td合并以及設(shè)置排版樣式愕宋，說明特定元素通過id設(shè)置樣式，以及說明元素標簽嵌套關(guān)系和順序關(guān)系结榄。
第2.9節(jié)掏婶，學(xué)習(xí)設(shè)置背景圖片，以及img標簽顯示圖片的方法潭陪，以及一些HTML和CSS代碼注釋以及縮進的格式。
第2.10節(jié)最蕾，學(xué)習(xí)如何讓網(wǎng)頁進行遷移依溯，包括文字鏈接和圖片鏈接，以及類似按鈕的鏈接瘟则。
第2.11節(jié)黎炉，網(wǎng)頁基本編寫完成之后，將網(wǎng)頁部署到本地一個Web服務(wù)器醋拧，通過局域網(wǎng)可以訪問慷嗜。
第2.12節(jié)淀弹，將網(wǎng)站部署到阿里云服務(wù)器上，這樣可以通過互聯(lián)網(wǎng)訪問網(wǎng)站頁面庆械。
第2.13節(jié)薇溃，創(chuàng)建好域名之后，將域名解析到云服務(wù)器缭乘，這樣通過互聯(lián)網(wǎng)可以訪問域名就能看到網(wǎng)站頁面了沐序。
第2.14節(jié)，學(xué)習(xí)分析一個已經(jīng)存在的網(wǎng)站堕绩，并進行設(shè)計規(guī)劃策幼，進行模仿編寫網(wǎng)頁。
第2.15節(jié)奴紧，一邊分析網(wǎng)頁特姐，一邊開始模仿編寫網(wǎng)頁，一個元素一個元素的編寫黍氮，最終完整模仿整個網(wǎng)頁唐含。
通過整個15節(jié)課程，一步一步實現(xiàn)2個代表性網(wǎng)站頁面滤钱，掌握如果使用HTML加CSS代碼來編寫實現(xiàn)靜態(tài)內(nèi)容網(wǎng)站觉壶。
為將來實現(xiàn)動態(tài)內(nèi)容網(wǎng)站打下一個堅實的基礎(chǔ)。
第3章簡介
第2章的內(nèi)容是很多互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)件缸。同樣的铜靶，第3章的內(nèi)容也是互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)。
第3章開始講解JavaScript編程技術(shù)他炊，學(xué)習(xí)掌握如何通過代碼實現(xiàn)改變網(wǎng)頁顯示元素的技術(shù)争剿。
第3章以實現(xiàn)一個連連看網(wǎng)頁游戲作為主線，穿插講解關(guān)于JavaScript技術(shù)的方方面面痊末，讓大家在第3章結(jié)束之后蚕苇，掌握好使用JavaScript技術(shù)進行交互式網(wǎng)頁開發(fā)的技能。
