手把手教你電子商務網站建設，網站是由各種網頁所組成的，那么我們可以這么理解先做好網頁才能做成網站，下面我們就來說說電子商務網站建設。

　　手把手開始做第一個網頁

　　前幾篇我們已經安裝了Dreamweaver,并對它的界面做一介紹。那用Dreamweaver如何制作網站呢?現在我們就開始動手制作自己的第一個頁面。以下邊的網頁為例，敘述一下制作一個網頁的全過程。本節要制作的簡單網頁如下圖：

　　如果你還沒有下載安裝Dreamweaver查看：dreamweaver基礎教程：下載并安裝

　　如果你要了解Dreamweaver工作界頁請查看：Dreamweaver入門：工作區布局簡單介紹(界面介紹)

　　在開始制作之前，我們先對這個頁面進行一下分析。看看這個頁面用到了那些東西。

　　網頁頂端的標題“我的主頁”是一段文字。

　　網頁中間是一幅圖片。

　　最下端的歡迎詞是一段文字。

　　網頁背景是一深紫紅顏色。

　　知道了這個網頁的結構以后我們就來可以制作了。

　　首先啟動Dreamweaver MX 2004，確保你已經用站點管理器建立好了一個網站(根目錄)。

　　為了制作方便，請您事先打開資源管理器，把要使用的圖片收集到網站目錄images文件夾內。

　　【插入標題文字】

　　進入頁面編輯設計視圖狀態。在一般情況下，編輯器默認左對齊，光標在左上角閃爍，光標位置就是插入點的位置。如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動中文輸入法輸入“我的主頁”四個字。字小不要緊，我們可以對它進行設置。

　　【設置文字的格式】 選中文字，在上圖屬性面板中將字體格式設置成默認字體，大小可任意更改字號。并選中“B”將字體變粗。

　　【設置文字的顏色】首先選中文字，在屬性面板中，單擊顏色選擇圖標，在彈出的顏色選擇器中用滴管選取顏色即可。

　　【設置網頁的標題和背景顏色】

　　點擊“修改”菜單選“頁面屬性”。系統彈出頁面屬性對話框(如下圖)

　　請在標題輸入框填入標題“我的主頁”。

　　設置背景顏色：　網頁背景可以是圖片，也可以是顏色。此例是顏色。如上圖打開背景顏色選擇器進行選取。如果背景要設為圖片，點擊背景圖象“瀏覽”按鈕，系統彈出圖片選擇對話框，選中背景圖片文件，點擊確定按鈕。

　　設計視圖狀態，在標題“我的主頁”右邊空白處單擊鼠標，回車換一行，按照以下的步驟插入一幅畫圖片，并使這張圖片居中。您也可以通過屬性面板中的左對齊按鈕讓其居左安放。

　　【插入圖像】選擇以下任意一種方法：

　　(1)使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對話框，選中該圖像文件，單擊確定。如下圖：

　　(2)使用插入欄(如下圖)：單擊插入欄對象按鈕>選

　　按鈕，彈出“選擇圖像源文件”對話框，其余操作同上。

　　(3)使用面板組“資源”面板(如下圖)：點

　　按鈕，展開根目錄的圖片文件夾，選定該文件，用鼠標拖動至工作區合適位置。

　　注：為了管理方便，我們把圖片放在“images”文件夾內。如果圖片少，您也可以放在站點根目錄下。注意文件名要用英文或用拼音文字命名而且使用小寫，不能用中文，否則要出現一些麻煩。

　　一個圖片就插入完畢了。(插入*.swf動畫文件，選擇“插入”菜單>媒體>Flash)。

　　【輸入歡迎文字】

　　在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字“歡迎您……”然后，利用屬性面板對文字進行設置。

　　保存頁面。

　　一個簡單的頁面就這樣編輯完畢了。

　　【預覽網頁】在頁面編輯器中按F12預覽網頁效果。網站中的第一頁，也就是首頁，我們通常在存盤時取名為index.htm。

　　【小結】在今天的教程中我們制作了一個簡單的網頁。

　　內容有四：

　　①圖片插入和對齊設置;

　　②文字的格式、顏色和加粗等設置;

　　③背景顏色的設置;

　　④預覽網頁，查看實際效果。

　　第三課：Dreamweaver基礎教程之為頁面創建超級鏈接

　　我們前面已經學習了制作一個單獨的網頁(Dreamweaver教程：手把手開始做第一個網頁) 。然而一個網站不僅僅只有一張網頁，而是有很多張網頁組成，各網頁之間就是通過超級鏈接連在一起，本文來介紹使用 Dreamweaver如何來建立網頁的超鏈接。

　　在網頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會跳轉到相應的網頁中去。

　　1、在網頁中選中要做超級鏈接的文字或者圖片。

　　2、在屬性面板中單擊黃色文件夾圖標，在彈出的對話框里選中相應的網頁文件就完成了。做好超級鏈接屬性面板出現鏈接文件顯示。(如下圖)

　　3、按F12預覽網頁。在瀏覽器里光標移到超級鏈接的地方就會變成手型。

　　〖提示〗你也可以手工在鏈接輸入框中輸入地址。給圖片加上超級鏈接的方法和文字完全相同。

　　如果超級鏈接指向的不是一個網頁文件。而是其他文件例如zip、exe文件等等，單擊鏈接的時候就會下載文件。

　　超級鏈接也可以直接指向地址而不是一個文件，那么單擊鏈接直接跳轉到相應的地址。單擊鏈接就可以跳轉到網站制作教程網站。

　　【郵件地址的超級連接】

　　在網頁制作中，還經常看到這樣的一些超級鏈接。單擊了以后，會彈出郵件發送程序，聯系人的地址也已經填寫好了。這也是一種超級鏈接。制作方法是：在編輯狀態下，先選定要鏈接的圖片或文字(比如：歡迎您來信賜教!)，在插入菜單選“電子郵件鏈接”彈出如下對話框，填入E-Mail地址即可。

　　提示：還可以選中圖片或者文字，直接在屬性面板鏈接框中填寫“mailto：郵件地址”。

　　(如下圖)

　　創建完成后，保存頁面，按F12預覽網頁效果。

　　【制作圖片上的超級鏈接】

　　注意，我們這里所說的圖片上的超級鏈接是指在一張圖片上實現多個局部區域指向不同的網頁鏈接。比如一張中國地圖的圖片，單擊了不同的省跳轉到不同的網頁。可點的區域就是熱區。為了演示制作效果下面的中國地圖我加了一些鏈接，你可以用鼠標測試。鼠標移動到省份的熱區，會顯示提示.

　　【制作方法】

　　1、首先插入圖片。單擊圖片，用展開的屬性面板上的繪圖工具在畫面上繪制熱區。

　　2、屬性面板改換為熱點面板如圖：鏈接輸入框：填入相應的鏈接。替代框：填入你的提示文字說明。目標框：不作選擇則默認在新瀏覽器窗口打開。

　　3、保存頁面， 按F12預覽，用鼠標在設置的熱區檢驗效果。

　　提示：對于復雜的熱區圖形我們可以直接選擇多邊形工具來進行描畫。替代框填寫了說明文字以后，光標移上熱區就會顯示出相應的說明文字。

　　超級鏈接屬性面板中的目標選項。

　　“目標”我們稱它為目標區。也就是超級鏈接指向的頁面出現在什么目標區域。默認的情況下域中總有四個選項。

　　①_blank ：單擊鏈接以后，指向頁面出現在新窗口中。

　　②_parent：用指向頁面替換他外面所在的框架結構。

　　③_self：　將連接頁面顯示在當前框架中。

　　④_top：　 跳出所有框架，頁面直接出現在瀏覽器中。

　　創建完成后，保存頁面，按F12預覽網頁效果。

　　第四課：Dreamweaver基礎教程之表格的應用

　　表格應用

　　在網頁制作中，表格起著非常重要的作用。表格不但可以用來對網頁進行布局，還可以用來對網頁的數據進行顯示。本文就來介紹一下在Dreamweaver中表格的簡單應用。先來看看下圖

　　一張表格橫向叫行，縱向叫列。行列交叉部分就叫做單元格。

　　單元格中的內容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。整張表格的邊緣叫做邊框。

　　下面看看我們使用表格制作的頁面的實例

　　這幅頁面的排版格式，如果用以前我們所講的對齊方式是無法實現的。因此我們需要用到表格來做。實際上是用兩行兩列的表格來制作。

　　1、 在“插入”菜單>選“表格”。系統彈出表格對話框如下圖。這些參數我們都已經認識了。行：2。列：2。其余的參數都保留其默認值。。

　　2、 在編輯視圖界面中生成了一個表格。表格右、下及右下角的黑色點是調整表格的高和寬的調整柄。當光標移到點上就可以分別調整表格的高和寬。移到表格的邊框線上也可以調整。(如下圖)

　　3、 在表格的第一格按住左鍵不放，向下拖拽選中二格單元格。(如下圖)

　　然后在展開的屬性面板中選擇合并單元格按鈕(如下圖紅框所示)。將表格的單元格合并。如果要分割單元格，則可以用合并單元格按鈕右邊的按鈕。

　　合并結果如下圖。

　　4、 用鼠標拖拽表格的邊框調整到適當的大小。

　　5、 單擊左邊的單元格，然后輸入“攝影作品賞析”文字，并調整大小，因是豎排應每個字回車一次。如果需要調整格子的大小。只需要鼠標的光標移動到邊框上拖拽即可。

　　6、 在右邊上下單元格內分別插入圖片和文本。頁面的基本樣子有了。

　　7、 光標移動到表格的邊框上單擊。表格周圍出現調整框，表示選中整張表格。然后，在屬性面板中將“邊框”值設置適合的值，如果為0，邊框在編輯狀態，為虛線顯示，瀏覽時就看不見了。

　　一個符合要求的頁面在表格的幫助下做好了。

　　通過上面的操作我們對于表格有了一個初步的認識。還要提示一點，對整幅表格操作和對一個單元格操作的時候，相應的屬性面板是不同的。

　　表格顏色設置，選擇整幅表格后，利用屬性面板的顏色選擇器設置背景色。單元格也可單獨設置。鼠標在需要設置的單元格點一下，其余操作同上。

　　下面我們就來看看這些屬性面板的區別。

　　表格的屬性面板，要出現這個面板必須先選中整幅表格，方法上面已經提到過了。您可以在眾多選項中填入需要的參數。

　　選中了單元格之后屬性面板就發生如下變化了。選擇行或者列都屬于選中單元格。如下圖：

　　對表格操作的幾種常用方式：

　　合并：將選中的連續單元格合并成為一個單元格。

　　分割：將一個單元格分割成若干單元格。

　　水平對齊方式：分為(左)(中)(右)三種。

　　垂直對齊方式：分為(頂)(居中)(居底)(基線對齊)

　　表格還可以增加或者刪除行或者列。在一個單元格中單擊鼠標右鍵。在右鍵菜單中選擇表格選項>>選擇“插入行或列”。系統會彈出對話框如下。

　　在對話框里填入數據即可。最后要說的是選中表格中的各種元素的方法：

　　選中一行，把光標移到該行的最左邊單元格的左面，光標會變成箭頭狀。單擊就可以選中一行。

　　選中一列，把光標移到該列的最上邊單元格的上面，光標會變成箭頭狀，然后單擊可以選中一列。

　　選中整張表格，把光標移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會在周圍出現一個黑框表示整張表格選中了。請看如下示意：

　　選中單元格。單元格可以同時選中多個。選擇連續的單元格，光標先選中的一個單元格，按shift鍵不放，選取最后一個單元格。選不連續的單元格。按住Ctrl鍵，點取所需要的單元格即可。

　　到這里為止，對于表格的一般應用就已經全部講完了。如果要熟悉掌握，還要多多練習。

　　第六課：dreamweaver基礎教程：學習使用框架

　　我們平時在上網時，經常會看到這種網頁，導航在左邊或的上面。單擊導航后目標的內容會出現在右邊或下面。如果要實現這樣的功能，我們最好使用框架技術。為了更好的理解什么是框架。我們畫一張示意圖來進行討論。

　　這是一個左右型的框架，由三個網頁文件組成的。首先外部的框架是一個文件，圖中我們用index.htm命名。框架中左邊命名為A，指向的是一個網頁A.htm。右邊命名為B，指向的是一個網頁B.htm。

　　下面我們就來從頭開始制作一個框架。

　　1、點“文件”菜單>新建，彈出“新建文檔”對話框如下圖：

　　或在插入欄>布局>選"框架：左框架"如下圖：

　　Dreamweaver MX 2004生成一個空白的框架頁面，如下圖：

　　2、選擇「窗口」菜單>“框架”，彈出“框架”面板如下圖。從框架面板可知，系統對左右框架生成命名。左框架名為：leftFrame，右框架名為：mainFrame，當然您可以通過框架屬性面板對框架重新命名，了解這一點非常重要。創建超級鏈接時，要依據它正確控制指向的頁面。

　　3、保存框架。選擇“文件”菜單點擊“保存全部”。系統彈出對話框。這時，保存的是一個框架結構文件。我們按照慣例都命名為index.htm。

　　保存的時候如果虛線框籠罩的是周圍一圈就是保存框架結構。(下圖)

　　虛線籠罩在右邊就是保存框架中右邊網頁。(如下圖)

　　虛線籠罩在左邊就是保存框架中左邊的網頁：(如下圖)

　　三個頁面保存完畢。

　　4、下面我們要實現按左邊的超級鏈接，對應的頁面出現在右邊。在左邊的頁面中做上超級鏈接。指向一個已經存在的頁面。注意做好鏈接以后，要在目標欄中設置為mainFrame。(如下圖)

　　6、設置完畢，保存全部，按F12預覽網頁。鏈接指向的頁面出現在右邊框架中。

　　7、重復以上步驟，把左框架所有的鏈接做完，一個簡單的網站導航結構創建完成。

　　第七課：dreamweaver基礎教程：創建網站導航條

　　上篇文章中我們介紹了用框架創建網站導航的應用(dreamweaver基礎教程：學習使用框架)。本篇介紹另一種方式不使用框架創建網站導航條。由鼠標經過圖像變換按鈕的組成的導航條制作：

　　“鼠標經過圖像”是當訪問者用鼠標指針指向該圖像時，該圖像發生變化。

　　“鼠標經過圖像”由兩個圖片組成：頁面最初載入時顯示的原始圖像，訪問者將鼠標指針移到原始圖像上時顯示另一幅圖像。

　　提示：事先您要制作好按鈕圖像，確保每個按鈕的圖像都具有相同的寬度和高度(以像素為單位)。

　　請執行以下操作：

　　打開主頁 (index.htm)

　　在“文檔”窗口中，將插入點放置在要顯示導航條的位置。一般在導航條上邊要放置一個橫幅圖像(logo)，導航條就安排在logo下邊的位置。

　　選擇“插入”>“圖像對象”>“導航條”。彈出對話框如下：

　　在“插入導航條”對話框中，單擊頂部加號“+”按鈕，按照上圖所示①②③④⑤對應的文本框，填入相應的文件。即完成了一個按鈕的添加。

　　然后，單擊頁面頂部的加號“+”按鈕，添加另一個按鈕。重復以上步驟，直至您所需的按鈕添加完畢。

　　勾選“預先載入圖像”，在對話框底部的“插入”菜單中，選中“水平”。勾選“使用表格”。

　　單擊“確定”關閉該對話框，成功創建了導航條。

　　保存頁面。

　　按F12，預覽一下你的導航條，如果滿意了，可以將該頁面多次“另存為”其它頁面，分別指定不同的名稱。比如：p1.htm、p2.htm.....等。保存多少次視您的按鈕數量而定。然后，分別打開其它頁面進行編輯。

　　上述給大家介紹了一下DW的操作手法手把手教你電子商務網站建設，希望能幫助到大家。