新手入門必備課程：淘寶店鋪裝修基礎(chǔ).ppt

淘寶店鋪裝修基礎(chǔ) 新手入門必備課程 重慶泰岳優(yōu)才科技有限公司講師 Hans 網(wǎng)頁構(gòu)造原理 1 網(wǎng)頁實(shí)際上是一個(gè)大盒子 這個(gè)盒子里面裝著各種各樣的小盒子 2 各個(gè)盒子有著不同的屬性 大小 邊框 背景顏色 字體大小等 3 各個(gè)小盒子里面裝著各種元素 文字 圖片 動(dòng)畫 視頻等 工作職能 1 與交互設(shè)計(jì)師 視覺設(shè)計(jì)師協(xié)作 根據(jù)設(shè)計(jì)稿 把圖片形式的東西 制作 為可編輯的網(wǎng)頁形式 2 再根據(jù)網(wǎng)站要求 給相應(yīng)的地方添加上交互 鏈接 動(dòng)畫等 3 前端開發(fā)工程師 通常說的 網(wǎng)頁制作 網(wǎng)頁制作工程師 前端制作工程師 網(wǎng)站重構(gòu)工程師 都統(tǒng)稱為 前端 4 一名合格的前端開發(fā)工程師 應(yīng)該具有一定的審美能力和基礎(chǔ)的美工操作能力 能很好的與交互及視覺協(xié)作 課前演練 請(qǐng)學(xué)員們觀察這個(gè)店鋪 并討論他有哪些問題 店鋪裝修的重要性 1 引入流量 提升銷售 3 給買家提供便捷 能簡(jiǎn)捷快速的找到需要的產(chǎn)品 2 品牌識(shí)別 提升品牌知名度 4 讓賣家更好的對(duì)店鋪進(jìn)行管理 店鋪裝修流程 普通店鋪裝修 店鋪首頁和寶貝詳情頁等 告訴買家在購買前的注意事項(xiàng) 網(wǎng)頁形式 編輯并存儲(chǔ) 備份 方便以后我們修改 Dreamweaver Adobe 網(wǎng)頁三劍客 一 店鋪裝修工具介紹 實(shí)訓(xùn)環(huán)節(jié) 1 了解熟悉圖片空間各個(gè)功能 2 嘗試新建文件夾 并命名為 我的店鋪 3 上傳素材包里的 店招 jpg 圖片至 我的店鋪 4 打開Dreamweaver 新建一個(gè)頁面 插入圖片空間的 店招 jpg 二 制作店招 1 Html簡(jiǎn)介 超文本標(biāo)記語言 超文本 就是指頁面內(nèi)可以包含 圖片 鏈接 音樂 程序 非文字元素 Html基本組成部分 聲明 告知瀏覽器使用HTML或XHTML規(guī)范 文檔開始部分 解析語言 content 內(nèi)容類型 charset 編碼 頭部 文檔頭部 標(biāo)題 文檔標(biāo)題 主體內(nèi)容區(qū)域 HTML CSS JS之間的關(guān)系 HTML標(biāo)簽 HTML標(biāo)簽是HTML語言中最基本的單位 也是最重要的一部分 瀏覽器以某種方式顯示相應(yīng)的標(biāo)簽樣式 標(biāo)簽特點(diǎn) 開放 閉合 尖括號(hào) 成對(duì) 開始 結(jié)束 標(biāo)簽語義話 什么是標(biāo)簽語義化 重要性 去掉或樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu) 搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重 便于團(tuán)隊(duì)開發(fā)和維護(hù) 語義化標(biāo)簽就是盡量使用與結(jié)構(gòu)相對(duì)應(yīng)的含義的Html的標(biāo)簽 練習(xí) 1 跟著老師 打開Dreamweaver 用10分鐘時(shí)間試一下左邊這些標(biāo)簽各有什么作用 2 根據(jù)塊級(jí)元素和行內(nèi)元素的區(qū)別 完成下面的連線題 感謝聆聽