一 網(wǎng)站策劃設(shè)計階段
1 策劃構(gòu)思及設(shè)計流程
1.1 了解客戶需求
創(chuàng)建網(wǎng)站結(jié)構(gòu)示意圖。
1.2 網(wǎng)站策劃：
1.2.1 按照功能對網(wǎng)站欄目分類。
1.2.2 欄目要表達的中心思想和主題。
1.2.3 網(wǎng)站頁面基調(diào)。
1.3 網(wǎng)站結(jié)構(gòu)規(guī)劃，
1.3.1 確定制作網(wǎng)站要采取的技術(shù)。
1.3.2 制作網(wǎng)站頁面布局草圖。
1.4 準備必要的素材:
1.4.1 包括圖片
1.4.2 動畫
1.4.3 文字資料
2 網(wǎng)站設(shè)計初樣制作
2.1 網(wǎng)站頁面設(shè)計 利用用戶提供的圖片和參照網(wǎng)址，使用photoshop設(shè)計出網(wǎng)站頁面樣式。
2.2 頁面樣式采集 使用ImageReady切割圖片為網(wǎng)頁大小，并保證圖片質(zhì)量，用來和用戶溝通設(shè)計樣式。
二 網(wǎng)站創(chuàng)建
1 建立站點：
1.1 使用DreamWear工具建立站點。
1.2 新建站點目錄結(jié)構(gòu)。
1.2.1 Image文件夾。用來存放站點中的圖片。
1.2.2 Style文件夾。用來存CSS樣式表文件。
1.2.3 Html文件夾。 用來放置Html文件。
1.2.4 Flash文件夾。用來放置動畫文件。
1.2.5 temp文件夾。 用來存放臨時文件。
(注釋：如果網(wǎng)站過大，可以根據(jù)欄目分類把Html文件夾按照功能劃分，并且子目錄存放對應(yīng)功能的 Image,Style,flash,temp文件。)
2 創(chuàng)建樣式表：
樣式表分類：
2.1 元素樣式：
2.1.1 Body樣式
2.1.2 表樣式。
1 單元格樣式
2.1.3 表單樣式
1 List元素樣式
2 Select元素樣式
3 input元素樣式
4 Check元素樣式
5 Textarea元素樣式
6 p樣式
7 a樣式
2.2 類樣式： 根據(jù)功能命名并填充
2.3 ID樣式： #加上表識符聲明的Html元素ID的樣式
2.4 偽元素、偽類樣式：
2.4.1 偽類：
1 偽類定義：
對元素進行分類是基于特征, 當(dāng)用戶和文檔進行交互時一個元素可以獲取或者失去一個偽類
2 偽類類型：
:link用在為訪問的連接上。
:visited用在已經(jīng)訪問過的連接上。
:active用于獲得焦點（比如，被點擊）的連接上。
:hover hover用于鼠標(biāo)光標(biāo)置于其上的連接。
:after after用于顯示緊跟在元
素后面的內(nèi)容 content。
3 偽類用途： Menu菜單，超鏈接
2.4.2 偽元素：
1 偽元素定義：
偽元素是創(chuàng)造關(guān)于文檔語言能夠指定的文檔樹之外的抽象。
例如文檔語言不能提供訪問元素內(nèi)容第一字或者第一行的機制。
偽元素允許設(shè)計師引用它們，否則這是難以辦到的。
偽元素還提供樣式設(shè)計師給在源文檔中不存在的內(nèi)容分配樣式。
2 偽元素類型： :first-line，:first-letter，:before，:after。
3 偽元素用途： 文檔語言對象。
3 制作網(wǎng)站首頁
3.1 導(dǎo)入樣式表
3.2 設(shè)置頁面標(biāo)題
3.3 設(shè)置頁面屬性
3.4 制作頭部表格
3.5 制作公告欄
4 制作正文表格
4.1 左側(cè)欄制作。(一般包括：1 業(yè)務(wù)指南；2站內(nèi)搜索；3 頁面導(dǎo)航等)
4.2 制作Banner
4.3 制作新聞區(qū)
4.4 友情鏈接區(qū)
5 制作尾部版權(quán) 尾部導(dǎo)航
6 調(diào)整頁面
6.1 表格與表格之間合理布局
6.2 層與層之間合理布局
7 制作網(wǎng)站模板
</p>
7.1 創(chuàng)建模板
7.1. 1 將首頁另存為模板
7.1.2 創(chuàng)建模板可編輯區(qū)，并保存
7.2 使用庫
7.2.1 把模板中的menu表格建成庫文件，共給其它頁面使用
7.2.2 把頁腳文件建成庫文件
8 應(yīng)用模板創(chuàng)建子欄目(功能欄所在的頁面是二級頁面)
8.1 從模板新建網(wǎng)頁
8.2 編輯可編輯區(qū)
9 應(yīng)用模板制作三級頁面(功能欄頁面中的子頁面為三級頁面)
三級頁面要以二級頁面為基準而建立三 開發(fā)網(wǎng)站中需要注意的問題
1 準備相關(guān)素材
1.1 網(wǎng)站模板
1.2 CSS樣式
1.3 動畫(Flash,Swish2.0)
1.4 圖片(photoshop)
2 定制CSS樣式
3 如果更新頁面布局，請更新網(wǎng)頁模板
