電子商務網(wǎng)頁制作-項目六

1、項目六 設計與制作中小企業(yè)網(wǎng)站首頁面項目綜述 本項目主要通過對浙江內利信息技術有限公司的企業(yè)形象展示網(wǎng)站首頁的制作,使學生掌握首頁制作的主流流程。具體包括通過Photoshop軟件來完成首頁效果圖的切片處理及導出,生成網(wǎng)頁基礎素材以及通過Dreamweaver軟件來完成最后的首頁面的制作與測試。項目目標能力目標：學習完本項目后,學生應當能夠依據(jù)網(wǎng)站的主題按照網(wǎng)站制作的標準流程進行頁面的設計與制作,包括:(1)利用Photoshop軟件完成頁面效果圖的切片及導出。(2)利用Dreamweaver軟件完成頁面的具體制作。知識目標：(1)Photoshop的切片工具和切片選擇工具。(2)Dreamw

2、eaver的基本操作。(3)Dreamweaver表格的創(chuàng)建和設置。(4)Dreamweaver各網(wǎng)頁元素屬性面板。Part 01任務一首頁效果圖切片處理及導出任務引導 本任務的目標本是基于浙江內利信息技術有限公司的企業(yè)形象網(wǎng)站的首頁效果圖來完成切片的處理及導出。任務實施1.啟動Photoshop，打開網(wǎng)頁效果圖2.設置標尺和參考線3.使用切片工具4.使用切片選擇工具5.切片的導出及生成知識分析1.切片的作用切片的作用在于依據(jù)網(wǎng)頁布局及參考線將大圖切割成小圖,從而加快網(wǎng)頁圖片的下載速度,降低網(wǎng)頁的整體大小。2.切片工具的使用（1）選擇工具箱上的“切片工具”。（2）依據(jù)參考線,通過拖動鼠標的方式

3、進行圖片的切割,在通過切片工具創(chuàng)建切片時,按住“Shift”鍵并拖動可使切片為正方形,按住“alt”鍵可使切片從中心向四周擴展。知識分析 （3）如果要對切片做細微的調整,可以選中相應的切片, 在彈出的菜單中選擇“編輯切片選項”,在彈出的對話框中可以對切片的大小及位置做精確的設定 。 （4）如果需要切片的圖片布局比較簡潔,也可以采用基于參考線的切片來完成圖片的切割。 （5）執(zhí)行“存儲為Web和設備所用格式”命令,可以完成切片的導出,在彈出的對話框中將保存類型設為“HTML和圖像(*.html)”,將切片設為“所有用戶切片”,最后點擊“保存”按鈕即可。3.切片時的注意事項 各個切片的邊界盡應可能多

4、的處于同一橫坐標或縱坐標上。這樣便于調整每個切片的邊界,也便于在Dreamweaver中編輯。拓展練習 對提供的購物網(wǎng)站首頁效果圖源文件進行切片處理及導出。習題1.下載一個韓國電子商務平臺的網(wǎng)頁PSD模板,在Photoshop中進行簡單修改后,執(zhí)行切片導出。2.了解切片選擇工具欄中 的作用。Part 02任務二內利公司形象網(wǎng)站首頁的設計與制作任務引導 本任務的目標是使用Dreamweaver軟件完成內利公司形象網(wǎng)站首頁的制作。任務實施1.新建站點及首頁文件2.制作網(wǎng)站頭部3.制作網(wǎng)頁主體部分4.制作網(wǎng)站版權部分知識分析 1. 表格布局的作用 為了使頁面元素準確定位,可以采用表格進行頁面布局。通

5、過表格布局的頁面在不同的瀏覽器跨平臺時有較好的兼容性,表格布局是網(wǎng)頁中最常用的布局方式之一。在表格布局的時候通常會遵循這樣的方法,即先使用較大的表格對網(wǎng)頁的版面進行大致的控制和區(qū)域的分配,再使用嵌套表格對細節(jié)進行刻畫。為了使網(wǎng)頁的顯示不受顯示器分辨率的影響,外部表格的寬度和高度一般以像素為單位,而嵌套表格的寬度和高度一般以百分比為單位。知識分析 2.表格的常規(guī)操作 (1)創(chuàng)建表格。 點擊“插入”菜欄的表格后,彈出“表格”對話框 。在對話框中進行參數(shù)的設置完成表格的創(chuàng)建。 (2)設置表格屬性。 表格由行和列組成,行和列交叉的部分稱為單元格。當選中整個表格時“屬性”面板會顯示表格屬性面板 。 (3)設置單元格、行或列屬性。當選中一個或多個單元格,或者選中表格的一行或多行、一列或多列單元格時,“屬性”面板會顯示對應的單元格或者行、列屬性面板,可設置這些單元格的相關屬性。拓展練習 要求基于任務一拓展練習的網(wǎng)站首頁效果圖,使用Dreamweav