淘寶店鋪裝修所有的HTML中,最關鍵,最復雜,最有想象空間的當然是寶貝描述模塊了。在這只舉例寶貝描述的基本設計制作,其它的就可以舉壹反三。淘寶旺鋪左側都有壹條導購功能欄,這對買家的瀏覽和購買起到很大作用,但普通店鋪缺少這壹優勢,不過,沒關系,我們DIY,讓自己的店鋪同旺鋪功能類似,並更適合自己。(我們可以根據自身需要設計功能欄上下左右的位置,甚至可以自行推薦商品)
拿制作左側功能欄寶貝描述模塊為例:
1、收集所需的裝修圖片素材,需要背景透明的圖片請制作成.gif格式;存儲壹份需要鏈接的地址(如逛逛本店、收藏本店、寶貝分類等地址),方便設計時,直接粘貼使用。
2、打開Dreamweaver8,新建HTML,在設計中編輯。
①插入壹行兩列的基本框架表格。表格寬:945
;邊框:1;顏色:白色(與背景色相同,這樣看不出是表格的邊框)。插入表格在插入菜單欄裏選擇表格。
②在左側單元格內,插入需要表達的文字、圖片,並進行鏈接。插入圖片在插入菜單欄裏選擇圖像。圖片鏈接方法,擊活圖片並在圖片屬性的鏈接欄輸入地址即可。如果要求新窗口打開圖片鏈接,則在圖片屬性對話框目標欄中輸入_blank。左側功能欄列寬根據自身圖片寬度進行調整。
③在右側單元格內,就是正常的寶貝描述了,請把妳常規使用到的文字、圖片(如買家須知等等)設計編輯好。
如果想在右邊欄下方推薦寶貝,先將此單元格拆分為兩行,再將第二行拆分為四列,插入寶貝圖片完成。自行推薦的圖片比淘寶的大而且清晰。行寬自行調整。
④需要加入背景,在表格屬性對話框中背景欄輸入圖片地址。如圖:
預覽無修改後確認,這個類似於淘寶旺鋪的普通店鋪的寶貝描述就制作完成了。朋友們,可以先將所有的裝修素材圖片存在電腦硬盤中進行設計,模塊設計完成後,所需的圖片再上傳到自己的網絡相冊上,使用新的地址代替原來圖片的路徑。特別註意,Dreamweaver8不支持上傳的圖片後文件名中帶有中文,建議大家使用方便易懂的數字字母文件名。
現在發布壹寶貝,打開Dreamweaver8編輯好的模板,在設計中將發布寶貝的詳細文字和圖片插入在寶貝描述下方,然後點擊代碼,復制所有代碼,在淘寶寶貝描述下的編輯源文件中進行粘貼完成。
所有的設計制作不外乎這些操作,大家根據自身店鋪特點設計表格框架,做出有店鋪特色的模塊出來。再次提醒大家,插入的圖片太多,會影響買家瀏覽寶貝,買家能夠順利的瀏覽寶貝才是最重要的,請朋友們插入適當的圖片就好,不能壹味的追求華麗美觀。