零基礎製作網頁：[7]網頁構成與源代碼比對?

一個網頁你都瞭解多少呢，想不想邊看網頁設計呢，那就一起來學習吧。

工具/原料

pc

瀏覽器

方法/步驟

首先我們選擇一個簡單美觀的網頁去複製他的源代碼進行學習。

我們先對整個網頁進行剖析。如下圖所示，將網頁分部分進行一一剖析，包括：logo，導航欄，側邊欄動態區，flash，動態展示區，正文標題區域，以及底部邊欄

那麼我們如何與代碼進行比對呢，我們需要在網頁的非flash區域點擊鼠標右鍵，點擊查看源文件，如下圖所示：

這時候網頁的源代碼會以記事本的形式打開。

我們需要用到前邊講過的Dreamweaver，新建一個空白網頁，刪掉自動生成的代碼內容。

將我們記事本形式打開的源代碼進行復制粘貼在Dreamweaver的源代碼文件中，這時候我們就可以利用Dreamweaver的所見即所得的代碼設計模式，將源代碼與網頁一一比對了，這對我們學習和認識網頁時非常有幫助的。下一篇我們經對網頁進行進一步的比對解析。

注意事項

網頁的學習也是一個循序漸進的過程，希望大家在學習的時候不要急躁，慢慢來。

如果您覺得對您有幫助一定要投一票或者評論一番哦，大家共同學習努力，當然我不是什麼高手，不足之處在所難免，請諸位嘴下留情哦