【學習內容，目標】

• 理解什麼是web，什麼是前端，軟體架構分類，以及網站的分類
• 專案開發的流程（一個完整的專案，並不是一個人的頁面）
• 簡單使用PS中切片，裁剪，摳圖等功能
• 使用XMind梳理網站業務流程
• 使用Axure進行原型圖的設計，目的瞭解網頁的基本結構，為html學習打基礎
• 建立審美觀，從網站佈局結構配色方面分析

【什麼是web應用】

1、什麼是web？詳細

web本意是蜘蛛網和網的意思，在網際網路中是需要用瀏覽器瀏覽的網頁

2、什麼是web應用？

web應用就是應用在web上的應用，就是b/s架構模式

【b/s,c/s模式應用】

1、b/s Browser/Server 瀏覽器/伺服器詳細

2、c/s Client/Server 客戶端/伺服器詳細

區別：詳細

b/s 方便，不需要下載，跨平臺，主要利用遠端伺服器來處理業務
c/s 考慮跨平臺問題，在本地就能處理，資料是可以儲存在本地

【什麼是前端】

• 只要是使用者能看到的，在移動端，pc，tv，車載，都是前端做的詳細

【網站的開發流程】

1、需求分析—明白要做什麼（使用者有什麼需求-以及是否能夠實現）（產品經理）（售前開發工程師）
2、設計—做成什麼樣（確定軟體到底實現哪些功能）（UI工程師，美工）
3、編碼—具體實現（軟體開發工程師：前端開發工程師，後臺開發工程師，架構師）
4、測試—測試實現效果（測試工程師） 上線（實施工程師） 5、維護—維護應用，更新版本（運維工程師

【需求分析包括】

• 網站型別分析
• 使用者群體分析
• 市場價值及競品分析
• 業務功能分析
• 業務流程分析

【網站分類】

• 網站型別：推廣展示、機構企業、電子商務、多媒體、綜合門戶、搜尋引擎

• 網站技術：固定解析度、瀑布流、響應式

  瀑布流：好多定寬的列，每一列裡面的小專案高度不一樣。
  響應式：適配不同解析度的裝置
  固定：網頁的寬度是固定的

• 結構型別：封面型、國字型、拐角型、左右結構，上下結構

• 佈局型別：流式佈局、水平佈局、垂直佈局

【流程】

針對使用者考慮

使用者年齡、選擇素材、網站佈局、顏色搭配、使用者體驗、功能是否便捷

競品分析考慮

主要業務功能是否同樣滿足使用者
獨有的特殊功能的核心競爭力
使用者操作及體驗度是否優化
網站效能是否更加快捷
使用者對於網站的依賴程度及習慣度

業務功能分析

• 1、分析有多少個頁面，他們之間的關係
• 2、分析每個頁面都有什麼功能（功能模組/業務模組）
• 3、每個功能具體的操作（流程圖）

【XMind的使用】

• 建立分支 enter
• 建立子主題 tab
• 流程圖箭頭： ctrl+l

【開發軟體】

瀏覽器 chrome firefox IE
編輯器 webstrom
素材處理軟體 ps
流程圖、思維導圖 XMind
原型圖、流程圖 Axure

【axure】

線框圖，流程圖，原型圖
頁面區： 新增、刪除、修改頁面名稱
元件庫
母版： 公共部分設計
檢視：屬性 、說明 、樣式
概要：所有元件的目錄

設計的思路

• 一定是從大到小
• 先確定解析度（尺寸）
• 放縮工作區
• ctrl+滾輪（縮放）
• F5預覽

低保真

• 只有架構，結構，草圖，或者有簡單的連結，企業備案
• 對於咱們：理解網頁是怎麼搭建結構。
• 討論網頁結構
• 給設計是參考

中保真

• 有框架，有連結，有簡單的動態效果
• 給客戶看的
• 給設計師
• 給程式設計師

高保真

• 和上線的東西幾乎完全一樣
• 競標
• 給設計師看
• 給程式設計師看

【網站開發者工具的使用】

• 網頁上右鍵-檢查
• F12
• FN+F12

【UI給我們的設計稿】

• png圖片
• ps工程圖，psd工程圖
• 工具圖

【關於圖片】

GIF

• 佔記憶體小
• 質量低
• 支援動畫
• 支援透明度
• 用於小動圖

JPG

• 佔記憶體一般
• 質量一般
• 不支援動畫
• 不支援透明度
• 用於產品圖、banner圖、經常換的圖

PNG

• 佔記憶體大
• 質量高
• 不支援動畫
• 不支援透明度

• 用於logo圖，常年不換的小圖示，透明的

  PNG8與PNG24詳細區別

PNG24顏色值多，質量越好，佔記憶體大，支援全透明與半透明
PNG8顏色值少，質量一般，佔記憶體一般，支援全透明

【PS】

快捷鍵

• 關閉輔助線———-ctrl+H
• 放縮圖片————-ctrl+加號|減號
• 左右移動 ————ctrl+滾輪 按住空格，抓取圖片
• 視窗標尺 ————ctrl+R
• 資訊欄—————–F8 或者 視窗資訊欄畫勾
• 圖層——————–F7 或者 視窗圖層畫勾
• 移動工具————–v
• 選框工具————–m
• 魔棒工具————–w
• 切片工具————–c
• 變形——————–ctrl+t

套圖工具

M——圈住圖片——Ctrl+C——Ctrl+N——確認——Ctrl+V——Ctrl+S

撤銷

• 一次：Ctrl+Z
• 多次：Ctrl+Alt+Z

切片工具

儲存：ctrl+shift+alt+s
注意：選擇所有使用者切片

從psd圖片中獲取素材

• psd圖是由很多圖層組合而成
• 圖層與圖層是由層級關係
• 選擇移動工具-選擇圖層和自動選擇

【互動】

動態面板

• 做一些互動效果可以用
• 透明的

事件

• 使用者的操作：詳細

輪播圖

• 頁面一載入完，輪播圖自動播放
• 滑鼠一上去，會暫停，會顯示兩個按鈕
• 當移開的時候會繼續播放，按鈕會小時
• 點選兩個按鈕會播放

注：出現問題，滑鼠移動到左右按鈕的時候，出現的閃爍的效果
解決辦法：
1、把左右按鈕和動態面板組合到一起，把移入移出事件加給組上面
2、新增熱區

回到頂部

• 一直固定在某個位置—>把按鈕變成動態面板–>右鍵固定到某個位置
• 剛開始沒有，剛頁面的滾動距離大於某個值的時候出現
• 當滾動距離>=100 按鈕顯示
• 當滾動距離<100 按鈕隱藏
• 點選的時候滾上去，新增點選事件，讓滾動到某個地方，在頂部設定一個熱區

熱區是透明的

滑鼠懸停

• 新增滑鼠移入事件：改變圖片的尺寸
• 新增滑鼠移出事件：改回圖片的尺寸

就實現了滑鼠放上去圖片變大的效果

購物車

數值從0開始變

• 先設定全域性變數：專案-全域性變數-自定義一個-設定數值為0
• 新增點選事件-設定變數值-勾選定義的變數-點選fx-變數+1
• 在設定文字-勾選元件-fx設定為變數名
• 減法時新增判斷條件>0執行，不大於就不執行