電大電子商務(wù)專業(yè)網(wǎng)頁設(shè)計與制作課程匯編

1、網(wǎng)頁網(wǎng)頁設(shè)計公開課設(shè)計公開課2022-5-25珠海電大電子商務(wù)工作室鄧同學(xué) 1 1、網(wǎng)頁制作常用知識簡介。、網(wǎng)頁制作常用知識簡介。(1)(1)HTMLHTML語言的知識語言的知識(2)Dreamweaver(2)Dreamweaver軟件：網(wǎng)頁制作中構(gòu)造框架的主要軟件。軟件：網(wǎng)頁制作中構(gòu)造框架的主要軟件。(3)(3)FlashFlash軟件：動畫制作軟件。軟件：動畫制作軟件。(4)(4)PhotoshopPhotoshop軟件：圖片設(shè)計軟件。軟件：圖片設(shè)計軟件。網(wǎng)頁的基本知識網(wǎng)頁的基本知識一般來說，一個一般來說，一個html文件應(yīng)具有下面最基本的結(jié)構(gòu)：文件應(yīng)具有下面最基本的結(jié)構(gòu)：標(biāo)題標(biāo)題文件內(nèi)

2、容文件內(nèi)容 一個一個html文件最基本的結(jié)構(gòu)：文件最基本的結(jié)構(gòu)：和和表示文件的開始與結(jié)束，被放置在整個文件的開始與結(jié)束表示文件的開始與結(jié)束，被放置在整個文件的開始與結(jié)束之處。之處。和和用來標(biāo)示文件頭。在這組標(biāo)記里我們可以加入用來標(biāo)示文件頭。在這組標(biāo)記里我們可以加入和和這組標(biāo)記。這組標(biāo)記。和和用來指定瀏覽器窗口的標(biāo)題。用來指定瀏覽器窗口的標(biāo)題。和和在這組標(biāo)記里我們可以加入文件內(nèi)容。另，我們可以利用在這組標(biāo)記里我們可以加入文件內(nèi)容。另，我們可以利用做一些設(shè)定：做一些設(shè)定：【設(shè)定背景顏色】：【設(shè)定背景顏色】：其設(shè)定方法為其設(shè)定方法為。范例：范例：現(xiàn)在的背景顏色是黃色！現(xiàn)在的背景顏色是黃色！【設(shè)定背景

3、圖片】：設(shè)定背景圖片】：其設(shè)定方法為其設(shè)定方法為范例：范例：看看背景圖案是否不一樣了！注意：僅支持看看背景圖案是否不一樣了！注意：僅支持BMP跟跟gif格式的圖片，且圖片格式的圖片，且圖片bg02.bmp必須跟網(wǎng)頁在同一個路徑下。必須跟網(wǎng)頁在同一個路徑下。 構(gòu)成網(wǎng)頁的基本元素構(gòu)成網(wǎng)頁的基本元素1、分段元素與分行元素、分段元素與分行元素html的分段完全依賴于分段元素的分段完全依賴于分段元素?；剀嚮剀嚥荒苄纬煞侄危中袆t用不能形成分段，而分行則用2、居中鏈接簽、居中鏈接簽3、字體大小、顏色：字體大小、顏色：文字文字4、橫線：橫線：hr線長和線寬用線長和線寬用指定，指定，width是指線長，是指

4、線長， size 指線寬，單位指線寬，單位是象素是象素5、空格的表示方法：直接寫、空格的表示方法：直接寫&nbsp。6、插入圖片：、插入圖片：1、由文字鏈接到別處：由文字鏈接到別處：格式：格式：文字文字如：如： 廣西民族大學(xué)廣西民族大學(xué)2、由圖片鏈接到別處：、由圖片鏈接到別處：格式：格式：超文本鏈接超文本鏈接n1.2.1 標(biāo)題欄標(biāo)題欄n1.2.2 菜單欄菜單欄n1.2.3 插入欄面板插入欄面板n1.2.4 編輯窗口編輯窗口n1.2.5 文檔工具欄文檔工具欄n1.2.6 狀態(tài)欄狀態(tài)欄n1.2.7 屬性面板屬性面板n1.2.8 輔助設(shè)計工具輔助設(shè)計工具1.2 Dreamweaver 8的操

5、作界面的操作界面1.2 Dreamweaver 8的操作界面的操作界面1.2.1 標(biāo)題欄標(biāo)題欄1.2.2 菜單欄菜單欄1.2.3 插入欄面板插入欄面板插入欄提供了把特定對象插入到網(wǎng)頁中的一種簡易的方法。只要單擊面板上的按鈕就能把所需的對象插入到指定的位置， 1.2.4 編輯窗口編輯窗口1.2.5 文檔工具欄文檔工具欄文檔工具欄包含了對該網(wǎng)頁文件的常用操作 1.2.6 狀態(tài)欄狀態(tài)欄位于文檔窗口底部的是狀態(tài)欄。狀態(tài)欄由標(biāo)簽選擇器、窗口操作區(qū)、窗口大小設(shè)定區(qū)、文檔網(wǎng)絡(luò)屬性區(qū)4個區(qū)間組成。 1.2.7 屬性面板屬性面板屬性面板會根據(jù)對象的不同來顯示相應(yīng)的對象屬性。 1.2.8 輔助設(shè)計工具輔助設(shè)計工具

6、標(biāo)尺 1.2.8 輔助設(shè)計工具輔助設(shè)計工具輔助線用來輔助定位。 1.2.8 輔助設(shè)計工具輔助設(shè)計工具網(wǎng)格是一個有用的定位參考工具。 1.3 調(diào)整布局調(diào)整布局n1.3.1 顯示和隱藏面板顯示和隱藏面板n1.3.2 調(diào)整面板布局調(diào)整面板布局1.3.1 顯示和隱藏面板顯示和隱藏面板通過選擇“窗口”菜單，可以顯示/關(guān)閉各個面板。菜單中面板名稱前的“”表示該面板已經(jīng)顯示在頁面上。 1.3.2 調(diào)整面板布局調(diào)整面板布局面板布局同樣可以改變。用戶可以收藏面板，使頁面編輯區(qū)擴(kuò)大。 1.4 第一個站第一個站n1.4.1 設(shè)置本地站點(diǎn)位置設(shè)置本地站點(diǎn)位置n1.4.2 建立建立Dreamweaver 8本地站點(diǎn)本地

7、站點(diǎn)n1.4.3 網(wǎng)站框架和站點(diǎn)文件夾網(wǎng)站框架和站點(diǎn)文件夾n1.4.4 建立網(wǎng)頁文件建立網(wǎng)頁文件首先應(yīng)該先在硬盤內(nèi)創(chuàng)建文件夾作為將要建立站點(diǎn)的存儲位置 。1.4.1 設(shè)置本地站點(diǎn)位置設(shè)置本地站點(diǎn)位置在Dreamweaver中建立本地站點(diǎn)的方法很多，其中一個是使用它提供的“新建站點(diǎn)向?qū)А薄?1.4.2 建立建立Dreamweaver 8本地站點(diǎn)本地站點(diǎn)新建站點(diǎn) ：(1)在D盤新建一個文件夾“Myweb+學(xué)號”作為站點(diǎn)文件夾。(2)在文件夾“Myweb+學(xué)號”中再創(chuàng)建Images文件夾作為存放圖片的地方。(3)單擊“站點(diǎn)”新建站點(diǎn)，輸入站點(diǎn)名稱，如：web1，單擊“下一步”。(4)選擇“不使用服務(wù)

8、器技術(shù)”，單擊“下一步”。(5)選擇網(wǎng)頁的存儲位置為“D: Myweb+學(xué)號”，單擊“下一步”。(6)在“如何連接遠(yuǎn)程服務(wù)器”中選擇“無”，單擊“下一步”“完成”，即可在右邊的文件管理器中看見Web1站點(diǎn)。(7)右鍵單擊“站點(diǎn)Web1“，選擇”新建”文件，即可建立網(wǎng)站的第一個網(wǎng)頁文件，通常命名為index.html，并作為主頁。(8)保存網(wǎng)頁，并按F12預(yù)覽即可看到效果。1.4.2 建立建立Dreamweaver 8本地站點(diǎn)本地站點(diǎn) 建立站內(nèi)文件夾框架。新建立的站點(diǎn)可以進(jìn)行文件夾的移動、修改和刪除。 1.4.3 網(wǎng)站框架和站點(diǎn)文件夾網(wǎng)站框架和站點(diǎn)文件夾網(wǎng)頁各元素的設(shè)計網(wǎng)頁各元素的設(shè)計1 1、文

9、字：直接輸入，通過屬性設(shè)置其大小、顏色、字體、加粗等。、文字：直接輸入，通過屬性設(shè)置其大小、顏色、字體、加粗等。（與（與WordWord類似）類似）如果字體列表中沒有想要的字體，則需添加，方法：單擊“字體”“編輯字體列表”在“可用字體”中將需要的字體添加到右邊的“選擇字體”框中，單擊確定，再次單擊“字體”，選擇剛添加進(jìn)來的字體即可。Dreamweaver的文字插入的文字插入圖片圖片2 2、圖片、圖片 (1) (1) 為使站點(diǎn)圖片管理更規(guī)范，初學(xué)者最好將要插入的圖片先復(fù)為使站點(diǎn)圖片管理更規(guī)范，初學(xué)者最好將要插入的圖片先復(fù)制到網(wǎng)站的文件夾制到網(wǎng)站的文件夾imagesimages中。，然后再單擊中。，然后再單擊“插入插入”圖圖形，選擇圖形的來源，單擊確定即可。形，選擇圖形的來源，單擊確定即可。（2 2）