私域流量社交電商軟件及相關(guān)增值服務(wù)提供商--HiShop海商

返回
HiShop / 電子商務(wù)解決方案 / 云建站 / 云建站行業(yè)資訊 /

手把手教你電子商務(wù)網(wǎng)站建設(shè)

2016-07-19|HiShop|閱讀量:
導(dǎo)讀:手把手教你電子商務(wù)網(wǎng)站建設(shè),網(wǎng)站是由各種網(wǎng)頁(yè)所組成的,那么我們可以這么理解先做好網(wǎng)頁(yè)才能做成網(wǎng)站,下面我們就來(lái)說(shuō)說(shuō)電子商務(wù)網(wǎng)站建設(shè)。...

  手把手教你電子商務(wù)網(wǎng)站建設(shè),網(wǎng)站是由各種網(wǎng)頁(yè)所組成的,那么我們可以這么理解先做好網(wǎng)頁(yè)才能做成網(wǎng)站,下面我們就來(lái)說(shuō)說(shuō)電子商務(wù)網(wǎng)站建設(shè)。

手把手教你電子商務(wù)網(wǎng)站建設(shè)

  手把手開(kāi)始做第一個(gè)網(wǎng)頁(yè)

  前幾篇我們已經(jīng)安裝了Dreamweaver,并對(duì)它的界面做一介紹。那用Dreamweaver如何制作網(wǎng)站呢?現(xiàn)在我們就開(kāi)始動(dòng)手制作自己的第一個(gè)頁(yè)面。以下邊的網(wǎng)頁(yè)為例,敘述一下制作一個(gè)網(wǎng)頁(yè)的全過(guò)程。本節(jié)要制作的簡(jiǎn)單網(wǎng)頁(yè)如下圖:

  如果你還沒(méi)有下載安裝Dreamweaver查看:dreamweaver基礎(chǔ)教程:下載并安裝

  如果你要了解Dreamweaver工作界頁(yè)請(qǐng)查看:Dreamweaver入門:工作區(qū)布局簡(jiǎn)單介紹(界面介紹)

  在開(kāi)始制作之前,我們先對(duì)這個(gè)頁(yè)面進(jìn)行一下分析。看看這個(gè)頁(yè)面用到了那些東西。

  網(wǎng)頁(yè)頂端的標(biāo)題“我的主頁(yè)”是一段文字。

  網(wǎng)頁(yè)中間是一幅圖片。

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

  網(wǎng)頁(yè)背景是一深紫紅顏色。

  知道了這個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)以后我們就來(lái)可以制作了。

  首先啟動(dòng)Dreamweaver MX 2004,確保你已經(jīng)用站點(diǎn)管理器建立好了一個(gè)網(wǎng)站(根目錄)。

  為了制作方便,請(qǐng)您事先打開(kāi)資源管理器,把要使用的圖片收集到網(wǎng)站目錄images文件夾內(nèi)。

  【插入標(biāo)題文字】

  進(jìn)入頁(yè)面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下,編輯器默認(rèn)左對(duì)齊,光標(biāo)在左上角閃爍,光標(biāo)位置就是插入點(diǎn)的位置。如果要想讓文字居中插入,點(diǎn)屬性面板居中按鈕即可。啟動(dòng)中文輸入法輸入“我的主頁(yè)”四個(gè)字。字小不要緊,我們可以對(duì)它進(jìn)行設(shè)置。

  【設(shè)置文字的格式】 選中文字,在上圖屬性面板中將字體格式設(shè)置成默認(rèn)字體,大小可任意更改字號(hào)。并選中“B”將字體變粗。

  【設(shè)置文字的顏色】首先選中文字,在屬性面板中,單擊顏色選擇圖標(biāo),在彈出的顏色選擇器中用滴管選取顏色即可。

  【設(shè)置網(wǎng)頁(yè)的標(biāo)題和背景顏色】

  點(diǎn)擊“修改”菜單選“頁(yè)面屬性”。系統(tǒng)彈出頁(yè)面屬性對(duì)話框(如下圖)

  請(qǐng)?jiān)跇?biāo)題輸入框填入標(biāo)題“我的主頁(yè)”。

  設(shè)置背景顏色: 網(wǎng)頁(yè)背景可以是圖片,也可以是顏色。此例是顏色。如上圖打開(kāi)背景顏色選擇器進(jìn)行選取。如果背景要設(shè)為圖片,點(diǎn)擊背景圖象“瀏覽”按鈕,系統(tǒng)彈出圖片選擇對(duì)話框,選中背景圖片文件,點(diǎn)擊確定按鈕。

  設(shè)計(jì)視圖狀態(tài),在標(biāo)題“我的主頁(yè)”右邊空白處單擊鼠標(biāo),回車換一行,按照以下的步驟插入一幅畫圖片,并使這張圖片居中。您也可以通過(guò)屬性面板中的左對(duì)齊按鈕讓其居左安放。

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

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

  (2)使用插入欄(如下圖):?jiǎn)螕舨迦霗趯?duì)象按鈕>選

  按鈕,彈出“選擇圖像源文件”對(duì)話框,其余操作同上。

  (3)使用面板組“資源”面板(如下圖):點(diǎn)

  按鈕,展開(kāi)根目錄的圖片文件夾,選定該文件,用鼠標(biāo)拖動(dòng)至工作區(qū)合適位置。

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

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

  【輸入歡迎文字】

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

  保存頁(yè)面。

  一個(gè)簡(jiǎn)單的頁(yè)面就這樣編輯完畢了。

  【預(yù)覽網(wǎng)頁(yè)】在頁(yè)面編輯器中按F12預(yù)覽網(wǎng)頁(yè)效果。網(wǎng)站中的第一頁(yè),也就是首頁(yè),我們通常在存盤時(shí)取名為index.htm。

  【小結(jié)】在今天的教程中我們制作了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。

  內(nèi)容有四:

 ?、賵D片插入和對(duì)齊設(shè)置;

 ?、谖淖值母袷?、顏色和加粗等設(shè)置;

  ③背景顏色的設(shè)置;

 ?、茴A(yù)覽網(wǎng)頁(yè),查看實(shí)際效果。

  第三課:Dreamweaver基礎(chǔ)教程之為頁(yè)面創(chuàng)建超級(jí)鏈接

  我們前面已經(jīng)學(xué)習(xí)了制作一個(gè)單獨(dú)的網(wǎng)頁(yè)(Dreamweaver教程:手把手開(kāi)始做第一個(gè)網(wǎng)頁(yè)) 。然而一個(gè)網(wǎng)站不僅僅只有一張網(wǎng)頁(yè),而是有很多張網(wǎng)頁(yè)組成,各網(wǎng)頁(yè)之間就是通過(guò)超級(jí)鏈接連在一起,本文來(lái)介紹使用 Dreamweaver如何來(lái)建立網(wǎng)頁(yè)的超鏈接。

  在網(wǎng)頁(yè)中,單擊了某些圖片、有下劃線或有明示鏈接的文字就會(huì)跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁(yè)中去。

  1、在網(wǎng)頁(yè)中選中要做超級(jí)鏈接的文字或者圖片。

  2、在屬性面板中單擊黃色文件夾圖標(biāo),在彈出的對(duì)話框里選中相應(yīng)的網(wǎng)頁(yè)文件就完成了。做好超級(jí)鏈接屬性面板出現(xiàn)鏈接文件顯示。(如下圖)

  3、按F12預(yù)覽網(wǎng)頁(yè)。在瀏覽器里光標(biāo)移到超級(jí)鏈接的地方就會(huì)變成手型。

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

  如果超級(jí)鏈接指向的不是一個(gè)網(wǎng)頁(yè)文件。而是其他文件例如zip、exe文件等等,單擊鏈接的時(shí)候就會(huì)下載文件。

  超級(jí)鏈接也可以直接指向地址而不是一個(gè)文件,那么單擊鏈接直接跳轉(zhuǎn)到相應(yīng)的地址。單擊鏈接就可以跳轉(zhuǎn)到網(wǎng)站制作教程網(wǎng)站。

  【郵件地址的超級(jí)連接】

  在網(wǎng)頁(yè)制作中,還經(jīng)??吹竭@樣的一些超級(jí)鏈接。單擊了以后,會(huì)彈出郵件發(fā)送程序,聯(lián)系人的地址也已經(jīng)填寫好了。這也是一種超級(jí)鏈接。制作方法是:在編輯狀態(tài)下,先選定要鏈接的圖片或文字(比如:歡迎您來(lái)信賜教!),在插入菜單選“電子郵件鏈接”彈出如下對(duì)話框,填入E-Mail地址即可。

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

  (如下圖)

  創(chuàng)建完成后,保存頁(yè)面,按F12預(yù)覽網(wǎng)頁(yè)效果。

  【制作圖片上的超級(jí)鏈接】

  注意,我們這里所說(shuō)的圖片上的超級(jí)鏈接是指在一張圖片上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁(yè)鏈接。比如一張中國(guó)地圖的圖片,單擊了不同的省跳轉(zhuǎn)到不同的網(wǎng)頁(yè)??牲c(diǎn)的區(qū)域就是熱區(qū)。為了演示制作效果下面的中國(guó)地圖我加了一些鏈接,你可以用鼠標(biāo)測(cè)試。鼠標(biāo)移動(dòng)到省份的熱區(qū),會(huì)顯示提示.

  【制作方法】

  1、首先插入圖片。單擊圖片,用展開(kāi)的屬性面板上的繪圖工具在畫面上繪制熱區(qū)。

  2、屬性面板改換為熱點(diǎn)面板如圖:鏈接輸入框:填入相應(yīng)的鏈接。替代框:填入你的提示文字說(shuō)明。目標(biāo)框:不作選擇則默認(rèn)在新瀏覽器窗口打開(kāi)。

  3、保存頁(yè)面, 按F12預(yù)覽,用鼠標(biāo)在設(shè)置的熱區(qū)檢驗(yàn)效果。

  提示:對(duì)于復(fù)雜的熱區(qū)圖形我們可以直接選擇多邊形工具來(lái)進(jìn)行描畫。替代框填寫了說(shuō)明文字以后,光標(biāo)移上熱區(qū)就會(huì)顯示出相應(yīng)的說(shuō)明文字。

  超級(jí)鏈接屬性面板中的目標(biāo)選項(xiàng)。

  “目標(biāo)”我們稱它為目標(biāo)區(qū)。也就是超級(jí)鏈接指向的頁(yè)面出現(xiàn)在什么目標(biāo)區(qū)域。默認(rèn)的情況下域中總有四個(gè)選項(xiàng)。

  ①_blank :?jiǎn)螕翩溄右院?,指向?yè)面出現(xiàn)在新窗口中。

  ②_parent:用指向頁(yè)面替換他外面所在的框架結(jié)構(gòu)。

  ③_self: 將連接頁(yè)面顯示在當(dāng)前框架中。

 ?、躝top:  跳出所有框架,頁(yè)面直接出現(xiàn)在瀏覽器中。

  創(chuàng)建完成后,保存頁(yè)面,按F12預(yù)覽網(wǎng)頁(yè)效果。

  第四課:Dreamweaver基礎(chǔ)教程之表格的應(yīng)用

  表格應(yīng)用

  在網(wǎng)頁(yè)制作中,表格起著非常重要的作用。表格不但可以用來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局,還可以用來(lái)對(duì)網(wǎng)頁(yè)的數(shù)據(jù)進(jìn)行顯示。本文就來(lái)介紹一下在Dreamweaver中表格的簡(jiǎn)單應(yīng)用。先來(lái)看看下圖

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

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

  下面看看我們使用表格制作的頁(yè)面的實(shí)例

  這幅頁(yè)面的排版格式,如果用以前我們所講的對(duì)齊方式是無(wú)法實(shí)現(xiàn)的。因此我們需要用到表格來(lái)做。實(shí)際上是用兩行兩列的表格來(lái)制作。

  1、 在“插入”菜單>選“表格”。系統(tǒng)彈出表格對(duì)話框如下圖。這些參數(shù)我們都已經(jīng)認(rèn)識(shí)了。行:2。列:2。其余的參數(shù)都保留其默認(rèn)值。。

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

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

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

  合并結(jié)果如下圖。

  4、 用鼠標(biāo)拖拽表格的邊框調(diào)整到適當(dāng)?shù)拇笮 ?/p>

  5、 單擊左邊的單元格,然后輸入“攝影作品賞析”文字,并調(diào)整大小,因是豎排應(yīng)每個(gè)字回車一次。如果需要調(diào)整格子的大小。只需要鼠標(biāo)的光標(biāo)移動(dòng)到邊框上拖拽即可。

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

  7、 光標(biāo)移動(dòng)到表格的邊框上單擊。表格周圍出現(xiàn)調(diào)整框,表示選中整張表格。然后,在屬性面板中將“邊框”值設(shè)置適合的值,如果為0,邊框在編輯狀態(tài),為虛線顯示,瀏覽時(shí)就看不見(jiàn)了。

  一個(gè)符合要求的頁(yè)面在表格的幫助下做好了。

  通過(guò)上面的操作我們對(duì)于表格有了一個(gè)初步的認(rèn)識(shí)。還要提示一點(diǎn),對(duì)整幅表格操作和對(duì)一個(gè)單元格操作的時(shí)候,相應(yīng)的屬性面板是不同的。

  表格顏色設(shè)置,選擇整幅表格后,利用屬性面板的顏色選擇器設(shè)置背景色。單元格也可單獨(dú)設(shè)置。鼠標(biāo)在需要設(shè)置的單元格點(diǎn)一下,其余操作同上。

  下面我們就來(lái)看看這些屬性面板的區(qū)別。

  表格的屬性面板,要出現(xiàn)這個(gè)面板必須先選中整幅表格,方法上面已經(jīng)提到過(guò)了。您可以在眾多選項(xiàng)中填入需要的參數(shù)。

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

  對(duì)表格操作的幾種常用方式:

  合并:將選中的連續(xù)單元格合并成為一個(gè)單元格。

  分割:將一個(gè)單元格分割成若干單元格。

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

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

  表格還可以增加或者刪除行或者列。在一個(gè)單元格中單擊鼠標(biāo)右鍵。在右鍵菜單中選擇表格選項(xiàng)>>選擇“插入行或列”。系統(tǒng)會(huì)彈出對(duì)話框如下。

  在對(duì)話框里填入數(shù)據(jù)即可。最后要說(shuō)的是選中表格中的各種元素的方法:

  選中一行,把光標(biāo)移到該行的最左邊單元格的左面,光標(biāo)會(huì)變成箭頭狀。單擊就可以選中一行。

  選中一列,把光標(biāo)移到該列的最上邊單元格的上面,光標(biāo)會(huì)變成箭頭狀,然后單擊可以選中一列。

  選中整張表格,把光標(biāo)移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會(huì)在周圍出現(xiàn)一個(gè)黑框表示整張表格選中了。請(qǐng)看如下示意:

  選中單元格。單元格可以同時(shí)選中多個(gè)。選擇連續(xù)的單元格,光標(biāo)先選中的一個(gè)單元格,按shift鍵不放,選取最后一個(gè)單元格。選不連續(xù)的單元格。按住Ctrl鍵,點(diǎn)取所需要的單元格即可。

  到這里為止,對(duì)于表格的一般應(yīng)用就已經(jīng)全部講完了。如果要熟悉掌握,還要多多練習(xí)。

  第六課:dreamweaver基礎(chǔ)教程:學(xué)習(xí)使用框架

  我們平時(shí)在上網(wǎng)時(shí),經(jīng)常會(huì)看到這種網(wǎng)頁(yè),導(dǎo)航在左邊或的上面。單擊導(dǎo)航后目標(biāo)的內(nèi)容會(huì)出現(xiàn)在右邊或下面。如果要實(shí)現(xiàn)這樣的功能,我們最好使用框架技術(shù)。為了更好的理解什么是框架。我們畫一張示意圖來(lái)進(jìn)行討論。

  這是一個(gè)左右型的框架,由三個(gè)網(wǎng)頁(yè)文件組成的。首先外部的框架是一個(gè)文件,圖中我們用index.htm命名。框架中左邊命名為A,指向的是一個(gè)網(wǎng)頁(yè)A.htm。右邊命名為B,指向的是一個(gè)網(wǎng)頁(yè)B.htm。

  下面我們就來(lái)從頭開(kāi)始制作一個(gè)框架。

  1、點(diǎn)“文件”菜單>新建,彈出“新建文檔”對(duì)話框如下圖:

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

  Dreamweaver MX 2004生成一個(gè)空白的框架頁(yè)面,如下圖:

  2、選擇「窗口」菜單>“框架”,彈出“框架”面板如下圖。從框架面板可知,系統(tǒng)對(duì)左右框架生成命名。左框架名為:leftFrame,右框架名為:mainFrame,當(dāng)然您可以通過(guò)框架屬性面板對(duì)框架重新命名,了解這一點(diǎn)非常重要。創(chuàng)建超級(jí)鏈接時(shí),要依據(jù)它正確控制指向的頁(yè)面。

  3、保存框架。選擇“文件”菜單點(diǎn)擊“保存全部”。系統(tǒng)彈出對(duì)話框。這時(shí),保存的是一個(gè)框架結(jié)構(gòu)文件。我們按照慣例都命名為index.htm。

  保存的時(shí)候如果虛線框籠罩的是周圍一圈就是保存框架結(jié)構(gòu)。(下圖)

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

  虛線籠罩在左邊就是保存框架中左邊的網(wǎng)頁(yè):(如下圖)

  三個(gè)頁(yè)面保存完畢。

  4、下面我們要實(shí)現(xiàn)按左邊的超級(jí)鏈接,對(duì)應(yīng)的頁(yè)面出現(xiàn)在右邊。在左邊的頁(yè)面中做上超級(jí)鏈接。指向一個(gè)已經(jīng)存在的頁(yè)面。注意做好鏈接以后,要在目標(biāo)欄中設(shè)置為mainFrame。(如下圖)

  6、設(shè)置完畢,保存全部,按F12預(yù)覽網(wǎng)頁(yè)。鏈接指向的頁(yè)面出現(xiàn)在右邊框架中。

  7、重復(fù)以上步驟,把左框架所有的鏈接做完,一個(gè)簡(jiǎn)單的網(wǎng)站導(dǎo)航結(jié)構(gòu)創(chuàng)建完成。

  第七課:dreamweaver基礎(chǔ)教程:創(chuàng)建網(wǎng)站導(dǎo)航條

  上篇文章中我們介紹了用框架創(chuàng)建網(wǎng)站導(dǎo)航的應(yīng)用(dreamweaver基礎(chǔ)教程:學(xué)習(xí)使用框架)。本篇介紹另一種方式不使用框架創(chuàng)建網(wǎng)站導(dǎo)航條。由鼠標(biāo)經(jīng)過(guò)圖像變換按鈕的組成的導(dǎo)航條制作:

  “鼠標(biāo)經(jīng)過(guò)圖像”是當(dāng)訪問(wèn)者用鼠標(biāo)指針指向該圖像時(shí),該圖像發(fā)生變化。

  “鼠標(biāo)經(jīng)過(guò)圖像”由兩個(gè)圖片組成:頁(yè)面最初載入時(shí)顯示的原始圖像,訪問(wèn)者將鼠標(biāo)指針移到原始圖像上時(shí)顯示另一幅圖像。

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

  請(qǐng)執(zhí)行以下操作:

  打開(kāi)主頁(yè) (index.htm)

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

  選擇“插入”>“圖像對(duì)象”>“導(dǎo)航條”。彈出對(duì)話框如下:

  在“插入導(dǎo)航條”對(duì)話框中,單擊頂部加號(hào)“+”按鈕,按照上圖所示①②③④⑤對(duì)應(yīng)的文本框,填入相應(yīng)的文件。即完成了一個(gè)按鈕的添加。

  然后,單擊頁(yè)面頂部的加號(hào)“+”按鈕,添加另一個(gè)按鈕。重復(fù)以上步驟,直至您所需的按鈕添加完畢。

  勾選“預(yù)先載入圖像”,在對(duì)話框底部的“插入”菜單中,選中“水平”。勾選“使用表格”。

  單擊“確定”關(guān)閉該對(duì)話框,成功創(chuàng)建了導(dǎo)航條。

  保存頁(yè)面。

  按F12,預(yù)覽一下你的導(dǎo)航條,如果滿意了,可以將該頁(yè)面多次“另存為”其它頁(yè)面,分別指定不同的名稱。比如:p1.htm、p2.htm.....等。保存多少次視您的按鈕數(shù)量而定。然后,分別打開(kāi)其它頁(yè)面進(jìn)行編輯。

  上述給大家介紹了一下DW的操作手法手把手教你電子商務(wù)網(wǎng)站建設(shè),希望能幫助到大家。

相關(guān)推薦

推薦閱讀
產(chǎn)品推薦
  • 移動(dòng)云商城
    一款會(huì)賺錢的網(wǎng)上商城系統(tǒng)——移動(dòng)云商城,讓零售企業(yè)轉(zhuǎn)型電商更簡(jiǎn)單!獨(dú)創(chuàng)6合一全網(wǎng)營(yíng)銷模式、裂變式推廣分傭快速吸粉引流,不論微信、APP、手機(jī)觸屏還是PC端網(wǎng)上購(gòu)物商城,只要1個(gè)后臺(tái)即可掌控全網(wǎng)最火爆的6大商城!詳情
關(guān)注HiShop

電話咨詢 預(yù)約演示 0元開(kāi)店