Dreamweaver簡單描述制作網頁的基本步驟

1、本教程主要是針對初學者，如何使用 Dreamweaver 制作一個網頁？這個教程具體詳細講 解了制作網頁的步驟，及注意的問題，并且拿一個實例來給大家做了一下詳細講解！ 創(chuàng)建網頁頁面1、 在Dreamveaver文件新建常規(guī)基本頁HTML，這樣就建好了一個頁面，英文版的默認的文件名為 untitled.htm。中文版的的默認的文件名為無標題文檔”。htm就表示這個網頁文件是一個靜態(tài)的 HTML 文件。給它改名為 index.htm。注：網站第一頁的名字通常是 index.htm 或 index.html 。其它頁面的名字可以自己取。 這也就是主頁，上傳后打開網頁默認連接到此頁。2、 在標題空格里

2、輸入網頁名稱，點擊修改頁面屬性，打開“頁面屬性 ”窗口。在這里 可以設置網站的標題、背景顏色或背景圖像，超級鏈接的顏色（一般默認即可），其他都保 持默認即可。3此時光標位于左上角，可輸入一句話，如 “歡迎來到我的主頁 ”。選取文字，用菜單 “窗口/屬性 ”打開屬性面板， 選取文字大小為 6，再使文字居中， 然后在文字前用幾個回車使 其位于頁面中間等。4如要選取字體， 則選擇字體中的最后一項： 編輯字體列表。 然后在對話框中選 +號， 接著在 “可用字體 ”欄中選擇需要加入到字體列表中的一種字體， 點擊中間的按鈕就可以加入 了。注：在網頁上最常用的是宋體字。不要將特殊的字體加到列表中使用，因為別

3、人電腦上未裝就看不到。如果需要用的話，要做成圖片后再使用。注：在網頁上打入空格的辦法是：把輸入法調為全角。注：在網頁上換行的辦法是：shift+Enter。只按Enter則為換段。下面拿一個現(xiàn)成的例子來給大家講解一下：現(xiàn)在，以下邊的簡單網頁為例， 敘述一下制作過程。 簡單網頁如下圖：在開始制作之前，我們先對這個頁面進行一下分析。看看這個頁面用到了哪些東西。網頁頂端的標題 “我的主頁 ”是一段文字。網頁中間是一幅圖片。最下端的歡迎詞是一段文字。網頁背景是一深紫紅顏色。構思好這個網頁的結構，我們就可以開始制作了。首先啟動Dreamweaver，確保你已經用站點管理器建立好了一個網站（根目錄）。為了

4、制作方便， 請您事先打開資源管理器， 把要使用的圖片收集到網站目錄images 文件夾內?！静迦霕祟}文字】進入頁面編輯設計視圖狀態(tài)。 在一般情況下， 編輯器默認左對齊， 光標在左上角閃爍， 光標位置就是插入點的位置。 如果要想讓文字居中插入， 點屬性面板居中按鈕即可。 啟動中 文輸入法輸入 “我的主頁 ”四個字。字小不要緊，我們可以對它進行設置。【設置文字的格式】 選中文字，在上圖屬性面板中將字體格式設置成默認字體，大小可任意更改字號。并選中“ B將字體變粗。設置文字的顏色】首先選中文字，在屬性面板中，單擊顏色選擇圖標，在彈出的顏色選擇器中用滴管選取顏色即可。設置網頁的標題和背景顏色】點擊“修

5、改”菜單選 “頁面屬性 ”。系統(tǒng)彈出頁面屬性對話框 （如下圖）請在標題輸入框填入標題 “我的主頁 ”。設置背景顏色： 網頁背景可以是圖片，也可以是顏色。此例是顏色。如上圖打開背 景顏色選擇器進行選取。 如果背景要設為圖片，點擊背景圖象 “瀏覽”按鈕， 系統(tǒng)彈出圖片選 擇對話框，選中背景圖片文件，點擊確定按鈕。設計視圖狀態(tài)， 在標題 “我的主頁 ”右邊空白處單擊鼠標， 回車換一行， 按照以下的步驟 插入一幅畫圖片， 并使這張圖片居中。 您也可以通過屬性面板中的左對齊按鈕讓其居左安放?！静迦雸D像】選擇以下任意一種方法：（1）使用插入菜單：在 “插入”菜單選 “圖像”，彈出“選擇圖像源文件 ”對話框

6、，選中該 圖像文件，單擊確定。如下圖：（ 2）使用插入欄：單擊插入欄對象按鈕選 按鈕，彈出 “選擇圖像源文件 ”對話框，其余操作同上。（3）使用面板組 “資源 ”面板（如下圖）：點按鈕，展開根目錄的圖片文件夾，選定該 文件，用鼠標拖動至工作區(qū)合適位置。注：為了管理方便，我們把圖片放在“ images文件夾內。如果圖片少，您也可以放在站點根目錄下。 注意文件名要用英文或用拼音文字命名而且使用小寫， 不能用中文， 否則要出 現(xiàn)一些麻煩。一個圖片就插入完畢了。（插入 *.swf動畫文件，選擇 插入”菜單媒體Flash）。 【輸入歡迎文字】在圖片右邊空白處單擊，回車換行。仍然按照上述方法， 輸入文字 歡迎您”然后,利用屬性面板對文字進行設置。保存頁面。一個簡單的頁面就這樣編輯完畢了。【預覽網頁】在頁面編輯器中按 F12 預覽網頁效果。 網站中的第一頁，也就