UI基礎(chǔ)與項目實戰(zhàn)新

啟訊IT企業(yè)項目培訓(xùn)大綱

前言

內(nèi)蒙古啟訊教育咨詢有限公司，主要從事軟件研發(fā)，教育培訓(xùn)。軟件研發(fā)主要研發(fā)PHP

應(yīng)用程序（家政派單系統(tǒng)，錫林海關(guān)及公安廳110報警系統(tǒng)，網(wǎng)頁，自治區(qū)公安廳），微信

接口（公眾號），手機App（1.5萬），教育培訓(xùn)，PHP程序設(shè)計（大專及以上），Java程序設(shè)

計（本科）。

學(xué)習(xí)目標(biāo)：

通過4個月的學(xué)習(xí)，掌握PHP后端技術(shù)及web前端技術(shù)的所有知識點，具體知識點包括

軟件界面和軟件功能。學(xué)完這些知識點要達(dá)到什么程度，一、網(wǎng)站前端開發(fā)、二、項目開發(fā)、

三、研發(fā)

學(xué)習(xí)方法：

認(rèn)真聽課（技巧）-＞及時復(fù)習(xí)-＞及時練習(xí)

課程名稱：PHP軟件工程師

PHP是一門計算機語言，可以用來開發(fā)軟件項目。

漢語是一門人類的語言，可以用來交流和寫作。

類似：C語言、Java語言、basic語言等

學(xué)習(xí)難度：中等難度

課程模塊：三個模塊

1.軟件界面:ps,html,css家庭照片處理（10天）

2.界面特效:JavaScript（12天）

3.數(shù)據(jù)庫處理:php（26天）

一、微信公眾號的盈利模式

1、呼和浩特信息港，關(guān)注這個公眾號。

2、客戶群是誰，打算賺誰的錢。

3、定義一個大眾化的公眾號。

4、定義菜單及體驗功能（技術(shù)，PHP編程語言）

6、盈利模式：

廣告：騰訊、公司的

客戶群：私密的復(fù)制成功案例淘寶：資金池，上市

非法集資

二、互聯(lián)網(wǎng)+下的創(chuàng)業(yè)計劃

作業(yè)：

自己使用word文檔書寫一個微信公眾號的創(chuàng)業(yè)計劃書。

三、云計算物聯(lián)網(wǎng)下軟件人才的需求

云計算：PHP,Java,網(wǎng)絡(luò)工程，運維

物聯(lián)網(wǎng)：電子商務(wù)，軟件開發(fā)，軟件開發(fā)語言，c,c++,java,php,javascript,等

四、軟件行業(yè)的發(fā)展趨勢

html5+javascript

五、PHP軟件開發(fā)課程

第一章：UI形象識別系統(tǒng)

1.1、VI圖像元素

VI是形象識別系統(tǒng)。形象識別系統(tǒng)，如log。，宣傳廣告，企業(yè)文化，展板等圖像元素。

一個企業(yè)必須有VI元素，這些VI元素構(gòu)成了企業(yè)的文化。VI的中圖像元素的色彩都

是特定的，企業(yè)在規(guī)劃圖像元素時，顏色大小材料等都是約定好的，將來不發(fā)生改變。VI

需要注冊商標(biāo)。

1.2、UI識別系統(tǒng)

UI就是VI加上文字注釋，構(gòu)成的圖文元素。目前的UI范圍已經(jīng)不僅限于圖標(biāo)了，任

何的廣告都可以稱之為UL

VI只是一個圖形，在VI圖形的基礎(chǔ)上加上文字說明，就是UI。

第二章：常用的UI設(shè)計工具

1.1、PhotoshopCs6設(shè)計工具

Photoshop工具的工作界面

功能界面介紹：

>PS按鈕:右鍵操作包括移動，最大化，最小化，關(guān)閉，左鍵雙擊關(guān)閉，快捷鍵alt+空格

鍵。

>菜單:軟件所有功能的導(dǎo)航，快捷鍵alt+字母；如文件(F),激活可以使用alt+f,子

菜單也可以使用快捷鍵，例如圖像菜單中的圖像大小，可以使用alt+i+i激活，注意alt

一直按住，按一下i,雙手同時松開，再按i松開。（注意:快捷鍵分為兩種，一種是alt+

菜單鍵+子菜單鍵，另外一種是自定義的快捷鍵，如果想修改快捷鍵，可以使用【編輯】

-＞【鍵盤快捷鍵】）

＞屬性工具欄：將菜單中使用幾率很高的菜單項存放到工具欄中。這個工具欄是輔助工具

欄使用的。

＞畫布：圖像數(shù)據(jù)存放的區(qū)域。我們以后將所有的圖像文件都將在這個畫布中。

＞浮動面板:輔助屬性工具欄使用的，主要完成照片的色彩調(diào)整。

＞狀態(tài)欄：顯示文件的相關(guān)信息

軟件的性能優(yōu)化

步驟：【編輯】-＞【首選項】-＞【性能】

＞內(nèi)存分配：一般是內(nèi)存容量的1/2最佳

＞硬盤虛擬空間：虛擬內(nèi)存，暫存盤，設(shè)置的稍微大些。（在物理內(nèi)存不夠用的情況下使

用虛擬內(nèi)存，最好使用物理內(nèi)存。）

16G內(nèi)置存儲器磁盤

運行內(nèi)存：1G

歷史記錄

步驟：【編輯】-＞【首選項】-＞【性能】

＞歷史記錄狀態(tài)

啟動軟件有多種方法

＞第一種啟動方式：快捷鍵方式，【桌面圖標(biāo)】-＞雙擊

＞第二種啟動方式：命令（操作）

第一步：找到ps軟件的安裝路徑并復(fù)制

C:\ProgramFiles\AdobePhotoshopCS6\AdobePhotoshopCS6

第二步：我的電腦（計算機）-＞右鍵-＞屬性-〉高級-〉環(huán)境變量-＞系統(tǒng)變量-＞Path-＞編輯-〉

輸入"；C:\ProgramFiles\AdobePhotoshopCS6\AdobePhotoshopCS6”,

注意字符串前必須有分號隔開。

第三步：將ps軟件的啟動程序修改為快捷鍵命令名稱，如修改為ps.exe,注意擴(kuò)展名

保持不變。

第四步：開始-＞運行（win+r）-＞輸入ps.exe或ps回車。

環(huán)境變量：系統(tǒng)的命令一般是一個exe文件，這個exe文件可以存放在磁盤的任何位置，

我們?yōu)榭蛻籼峁┙y(tǒng)一的入口，在入口中輸入的命令，系統(tǒng)如何才能正確找到應(yīng)用程序呢，

就是使用path變量來完成。用戶輸入的每個命令系統(tǒng)都會在path變量指定的路徑中尋

找。

例如系統(tǒng)自帶的path值為：

PATH=C:\WIND0WS\system32;C:\WIND0WS;C:\WIND0WS\System32\Wbem;C:\Program

Files\Mythware\e-LearningClass\;C:\ProgramFiles\AdobePhotoshopCS6\Adobe

PhotoshopCS

路徑位置：

C:\WIND0WS\system32;系統(tǒng)第一次是在這個路徑中查詢

C:\WIND0WS;系統(tǒng)第二次是在這個路徑中查詢

以此類推

＞點擊又關(guān)閉

＞ps按鈕關(guān)閉（可以使用window系統(tǒng)的alt+f4）

打開文件及文件格式

打開文件

＞第一種：【文件】-＞【打開】或使用快捷鍵ctrl+o

＞第二種：拖拽圖片到ps工作區(qū)

＞第三種：雙擊ps的工作區(qū)

步驟：【文件】-＞【存儲為web格式】-＞選擇圖片文件類型

文件類型的區(qū)別：gif支持動畫，圖像分辨率低。支持壓縮適合在網(wǎng)絡(luò)上傳輸。jpeg可以使

用腳本來實現(xiàn)支持動畫，默認(rèn)的jpeg圖片是不支持動畫的。jpeg圖片支持65536中顏色，

所以說圖片的顏色色彩很豐富的話我們建議大家使用jpg格式。jpg格式支持壓縮。png是

一種高清格式，無壓縮。建議保持高清圖時使用。web中使用圖片最好是jpg格式，磁盤中

存儲相片最好使用png格式，如果只是保存簡單的顏色可以使用gifo

比較：

gif：顏色體系少，建議在web中使用，壓縮

jpeg：顏色體系多，建議在web中使用，壓縮（國際通用圖片格式）

png：顏色體系多，不建議在web中使用，無壓縮

打開文件-＞另存為（選擇保存的格式）

打開文件-＞存儲為web格式（支持gif動畫格式，以這個方式保存的圖像都具有壓縮功能）

打開文件-＞編輯-＞存儲為PSD格式（源文件格式，日后可以再次編輯）

畫布相等于一張白紙，可以在畫布中繪制任意的內(nèi)容。

步驟：【文件】-＞【新建】

（重點）

a、寬和高：單位使用px像素，厘米

單位:如果制作的圖像要使用打印機打印并張貼在墻上，這時使用厘米作為單位。

如果制作的圖像只是在互聯(lián)網(wǎng)中使用，則選擇像素作為單位。

像素是不分大小的：在相同的面積下像素點越多則圖像越清晰。

b、分辨率：分辨率越高圖像的清晰度越高

戶外廣告：15-30之間,幾米到幾十米。

寫真背板：120-300之間，幾厘米到幾米。婚紗等

書籍折頁等：300+,A4紙等

名片:300+

web圖像：72計算機中使用的圖像分辨率。

分辨率越大打印機越耗磨。

c、顏色模式

RGB顏色模式：互聯(lián)網(wǎng)顏色，這種顏色體系只適合在計算機中顯示。該模式下的顏色

都是理想狀態(tài)下的顏色。

CMYK顏色模式：打印機顏色。理想狀態(tài)下的顏色打印機一般無法打印。通過ps軟件

和打印機相連，ps軟件可以直接識別打印機的分辨率及顏色范圍。

d、背景內(nèi)容

白色、背景色、透明

使用

我們打開的每個圖像文件，這個圖像文件是由很多色彩構(gòu)成，色彩之間擁有獨立的區(qū)域。

可以將獨立的區(qū)域分別存放在各自的圖層中方便修改。

、分散圖像到多個圖層?

第一步：打開一副圖片

第二步：雙擊背景圖層解鎖

第三步：使用選區(qū)工具選擇圖像并剪切

第四步：創(chuàng)建多個圖層并粘貼

、圖層操作

a、創(chuàng)建圖層

點擊圖層面板的正數(shù)第6個按鈕.完成創(chuàng)建圖層

b、復(fù)制圖層（備份、拷貝基礎(chǔ)上進(jìn)行修改）

拖拽要復(fù)制的圖層到新建0按鈕上完成復(fù)制圖層

c、刪除圖層

拖拽要刪除的圖層到刪除回按鈕上完成刪除圖層，如果誤操作可以使用

ctrl+alt+z組合鍵撤銷刪除。（注意：QQ）,可以使用delete鍵實現(xiàn)快速刪除。

d、移動圖層

拖拽選中的圖層上下移動，可以改變圖像的垂直高度。

e、合并圖層

將多個圖層合并成一個圖層

點擊面板']'的?這個按鈕

1.1.6、常用的ps快捷鍵

a、面板全屏/恢復(fù)：tab

b、顯示/隱藏右側(cè)浮動面板：shift+tab

c、打開文件:ctrl+o

d、新建畫布:ctrl+n

e、畫布縮小和放大：alt+空格+鼠標(biāo)左鍵縮小/ctrl+空格+鼠標(biāo)左鍵放大

f、圖像縮放變形等：ctrl+t按完ctrl+t快捷鍵后全部松開

子快捷鍵:alt中心點、Ctrl相鄰邊動、ctrl+alt相鄰邊以中心動、ctrl+shift相

鄰變等比例水平或垂直變形、ctrl+alt+shift對稱縮放、[ctrl+shift+alt】+t旋轉(zhuǎn)復(fù)制，

不停的按t鍵

g、填充顏色：alt+delete前景色ctrl+delete背景色

h、取消選區(qū)：ctrl+d

工具欄

1、選區(qū)工具（矩形選框工具）

功能屬性應(yīng)用

描邊寬度、位置（內(nèi)部，中間，外部）【編輯】-＞【描邊】

選擇內(nèi)容移動、復(fù)制、刪除等選擇內(nèi)部的內(nèi)容

布爾新建、添加到選區(qū)、從選區(qū)減去、和選

區(qū)相交

羽化邊緣虛化

后設(shè)置羽化：shift+f6

技巧選區(qū)和路徑的關(guān)系。選區(qū)可以轉(zhuǎn)換為路徑進(jìn)行編輯。路徑-＞選

區(qū)：ctrl+回車

案例1、使月目選區(qū)工具制作一個名片

第一步：創(chuàng)建畫布

第二步：【窗口】-＞【圖層】-＞創(chuàng)建一個新圖層命名為“水平橫條”并創(chuàng)建選區(qū)

第三步、使用布爾，從選區(qū)中減去

第四步、alt+delete添加前景色，顏色#1343f4

ctrl+d取消選擇，使用文字工具輸入內(nèi)容，雙擊文字圖層，alt+左/右光標(biāo)鍵，字間距調(diào)整

第五步、點擊【工具欄】中的多邊形工具出現(xiàn)如下圖所示的符號面板

ctrl+enter-＞ctrl+d

第六步、使用文字工具，輸入下圖所示的文字，并排版

第七步：在百度中搜索“草料網(wǎng)”在線生成名片二維碼，并將二維碼合并到名片正面上。

選擇二維碼拖拽到名片文件中

點擊【文件】-＞【另存為】

2、套索工具（選區(qū)）

功能屬性操作

描邊寬度、位置（內(nèi)部，中間，外部）【編輯】-＞【描邊】

內(nèi)容移動、復(fù)制、刪除等選擇內(nèi)部的內(nèi)容

布爾新建、添加到選區(qū)、從選區(qū)減去、和選區(qū)相

交

羽化邊緣虛化

子工具套索工具：任意的選區(qū)、多邊形套索工具：多邊形選區(qū)、磁性套索工

具：摳圖

案例1、使用磁性套索工具實現(xiàn)摳圖

第一步：載入荷花圖片

【文件】-＞【打開】

第二步：使用磁性套索工具，繞著荷花邊緣拖拽選區(qū)。

第三步：反選選區(qū)（ctrl+shift+i）并刪除除荷花的其它圖像

3、魔棒工具（選區(qū)）

功能屬性應(yīng)用

內(nèi)容容差：容差越大，色彩范圍越廣選取相近的色彩

布爾選區(qū)相似的顏色并將多個選區(qū)合并添加到選區(qū)

子工具套索工具：魔棒工具、快速魔棒

案例1、制作一個寶馬商標(biāo)草圖。

第一步：創(chuàng)建一個500*500的白色背景畫布。

第二步：創(chuàng)建寶馬圖層

第三步：在該圖層中繪制如下內(nèi)容

使用alt+delete鍵填充前景色。使用布爾相交完成如圖所示的扇形選區(qū)。并創(chuàng)建一個新圖

層

合并圖形

繪制矩形選區(qū)

產(chǎn)生選區(qū)并描邊

選擇多邊形工具來繪制圓形路徑，路徑上是可以輸入文字的

4、裁切工具（重點-軟件UI界面切圖）

功能屬性應(yīng)用

單個裁切比例裁切裁切工具

批量裁切切片工具

子工具裁切工具、切片工具

技巧裁切之前先拖拽輔助線，輔助線具有吸附功能快捷鍵ctrl+r打開標(biāo)

尺

4、修復(fù)畫筆工具

子工具功能操作

修復(fù)畫筆吸取圖像區(qū)域的色彩后溶解到目標(biāo)區(qū)域Alt+鼠標(biāo)左鍵點擊（吸

取）

修補工具目標(biāo)區(qū)域、替換初始選區(qū)區(qū)域拖拽選區(qū)->移動選區(qū)

紅眼工具去除相片的紅眼使用紅眼工具點擊

污點修復(fù)工將所選區(qū)域的顏色平均分布使用該工具拖拽區(qū)域

具

5、畫筆工具

子工具功能操作

畫筆工具根據(jù)畫筆的硬度，大小，筆形繪制內(nèi)容直接拖拽

1、畫筆大小：lpx-5000px、快捷鍵：“[”縮小放大

普通屬性2、硬度：濃度、邊緣虛化0%硬度最小->100%硬度最大

3、筆形：使用不同的筆形產(chǎn)生多種筆觸（畫筆屬性可以設(shè)置）

1、畫筆的筆尖形狀（全局）：選取筆尖形狀、大小、翻轉(zhuǎn)、角度、硬度、

畫筆屬性距離

2、形狀動態(tài)：

作業(yè)：使用所學(xué)的工具繪制一枚印章

制作步驟：

第一步：創(chuàng)建一個500*500的畫布，背景色是透明的。

第二步：拖拽水平和垂直輔助線，找到畫布的中心點。

第三步：選中選區(qū)（選中區(qū)域）工具、按住alt鍵拖拽圓形選區(qū)并描邊10px的紅色。

第四步：選擇多邊形工具，按住alt鍵拖拽橢圓路徑，并使用文字工具輸入“內(nèi)蒙古某某公

司”。使用ctrl+t自由變換調(diào)整文字位置。

第五步：使用多邊形工具的繪制五角星，默認(rèn)繪制的是路徑，需要使用ctrl+回車轉(zhuǎn)為選區(qū),

再使用alt+delete填充紅色。

第六步：將所有的圖層合并為一個圖層，使用橢圓選區(qū)選中所有畫布內(nèi)容，點擊菜單中的編

輯菜單選中定義畫筆預(yù)設(shè)。

第七步：新建一個A4的畫布，選中畫筆工具并選中“印章”筆觸。

案例：使用所學(xué)的工具制作一個創(chuàng)意logoo

6、仿制圖章工具

子工具功能操作

仿制圖章工具選擇仿制圖章工具->按

吸取源畫布色彩到目標(biāo)畫布（沒有溶住alt鍵->單擊鼠標(biāo)左鍵

解功能）完成吸取操作->在目標(biāo)

畫布拖拽鼠標(biāo)繪制

圖案圖章工具直接將圖案繪制在畫布中選擇圖案圖章工具->選

擇圖案->繪制

用途擦除圖片的多余內(nèi)容（圖片水印，祛痘）

案例一：使用仿制圖章工具完成去痘效果。

原始圖效果圖

第一步：選擇仿制圖章工具，按住alt吸取相近的顏色，覆蓋到痘痘上。

參數(shù)：畫筆為15px,硬度為0,流量為35。

第二步：不停的吸取新色彩，反復(fù)覆蓋到痘痘上

第三步：圖層-調(diào)整-亮度和對比度

案例二：擦除水印

原圖效果圖

步驟同上

7、漸變工具

子工具功能操作

漸變工具點擊漸變工具->點擊屬

性工具欄中的顏色->雙

顏色過渡

擊色標(biāo)修改色標(biāo)顏色->

拖拽

油漆桶使用前景色填充畫布或選區(qū)選擇前景色->選擇油漆

桶工具-〉點擊

8、鋼筆工具

子工具功能操作

點擊第一個點，再點擊一個點，

可以形成多個點連續(xù)線段，如

果點擊點的時候鼠標(biāo)沒有松

開，則可以產(chǎn)生圓角。

鋼筆工具繪制路徑

在鋼筆工具的情況

下：ctrl+[alt]調(diào)整路徑。

ctrl+回車鍵將路徑轉(zhuǎn)換為選

區(qū)。

自由鋼筆工具繪制任意路徑

添加錨點工具在路徑上添加錨點

刪除錨點工具刪除指定的錨點

轉(zhuǎn)換點工具

用途繪制任意路徑、摳圖

9、文字工具

子工具功能操作

選擇文字工具，點擊插入光標(biāo)

并輸入文字，也可以拖拽區(qū)域

輸入文字。

橫排文字輸入橫排文字

alt+左光標(biāo)或右光標(biāo)，調(diào)整水

平文字間距。對文字修改完后

可以按ctrl+回車確認(rèn)

選擇文字工具，點擊插入光標(biāo)

直排文字輸入直排文字并輸入文字，也可以拖拽區(qū)域

輸入文字。

橫排文字蒙版輸入橫排選區(qū)文字

直排文字蒙版輸入直排選區(qū)文字

技巧將文字圖層?xùn)鸥窕▓D片文字）

10、多變形工具

子工具功能操作

矩形繪制矩形路徑

圓角矩形工具繪制圓角矩形路徑

橢圓

多邊形

直線

自定義形狀

液化命令

這個液化命令一般使用來對圖像進(jìn)行任意變形（柔化），可以使用該工具完成圖像變形，如

婚紗攝影中的瘦身增肥等。

濾鏡

濾鏡就是特效

【窗口】-＞時間軸-＞創(chuàng)建幀動畫-＞復(fù)制幀-＞為每個幀設(shè)置要顯示的圖層

第三章：網(wǎng)頁美工

3.1、企業(yè)網(wǎng)站美工示例

網(wǎng)頁的美工是分為：

banner條：一個網(wǎng)站的頭部，用來表示企業(yè)文化。

menu導(dǎo)航欄：訪問網(wǎng)站內(nèi)容的入口，導(dǎo)航欄分為水平和垂直兩類

ppt幻燈片：網(wǎng)站中推廣的主要內(nèi)容放在這里（js代碼）

content主體內(nèi)容：網(wǎng)站頁面的主要內(nèi)容

link友情鏈接：外鏈、內(nèi)鏈、交叉鏈接、等

copyright版權(quán)信息：備案號？

第四章：移動終端美工

banner：手機頂端，詳細(xì)導(dǎo)航欄按鈕

content:內(nèi)容區(qū)域、容納常用的導(dǎo)航欄

menu:主要分類導(dǎo)航欄

第五章：綜合美工案例

通過美工決定項目報價：

產(chǎn)品銷售項目：

1.PC端

前端：300元*MenuN=價格300*11=3300+2500+3500+2000=11000元

后端：1500元

支付：1000元

購物模塊：3500元

域名+空間：1999元

2.移動端

wap:手機網(wǎng)頁：5500元

app:手機應(yīng)用程序（Android,I0S）

普通的新聞類app：8000元+

交互性的:12000元+

im類：6萬+

商城App：8萬-50萬（有贊商城二次開發(fā)）

一次性報價：12000

第六章HTML網(wǎng)頁設(shè)計

6.1、html標(biāo)簽語言

HTML是用來完成網(wǎng)頁中文字，圖片等元素的布局的。html是網(wǎng)頁的骨架。

html中文全稱叫超文本標(biāo)記語言，嚴(yán)格來說不是一門編程語言，只是一門頁面描述性語言,

用來描述網(wǎng)頁元素的布局信息。html標(biāo)簽語言中給我們提供了105個標(biāo)簽。

html超文本標(biāo)記語言的語法〈標(biāo)簽名X/標(biāo)簽名》

<html>

<head>

<metacharset"utf-8”>

<title></title>

</head>

<body></body>

</html>

我們在桌面上創(chuàng)建一個網(wǎng)頁文件，如index.html,使用記事本打開，輸入文檔結(jié)構(gòu)代碼進(jìn)

行調(diào)試。運行index,html網(wǎng)頁文件，只需要雙擊文件即可。

標(biāo)簽的說明：

html標(biāo)簽：這是網(wǎng)頁中最大的標(biāo)簽，表示html文檔文件的開始和結(jié)束。

head標(biāo)簽：這個標(biāo)簽中的內(nèi)容是不會輸出到瀏覽器中的，一般用來實現(xiàn)html文件的頭部控

制信息。如標(biāo)題標(biāo)簽就是旗下的子標(biāo)簽。

meta標(biāo)簽:控制客戶端的瀏覽器使用的編碼，gb2312簡體中文，gbk擴(kuò)展的簡體中文、big5

繁體中文編碼（香港、繁體字），utf-8多國語言不區(qū)分大小寫

title標(biāo)簽：網(wǎng)頁的標(biāo)題。

body標(biāo)簽：網(wǎng)頁的主體內(nèi)容，頁面中所有的圖像、文字、音頻、視頻等都可以放在此標(biāo)簽

中。

注意：這個文檔結(jié)構(gòu)在一個網(wǎng)頁中只能出現(xiàn)一次。

、圖像元素

<imgsrc="路徑"title”提示"alt=w替換"id="編號"width="寬度”

height=M高度"onclick="事件"style="css代碼”>

屬性說明：

src="路徑”這個屬性是用來描述圖像標(biāo)簽所引入的圖像文件的路徑，可以使絕對路

徑也可以是相對路徑。

相對路徑：從當(dāng)前網(wǎng)頁文件出發(fā)去尋找目標(biāo)文件。./表示當(dāng)前文件位置，/子目

錄，../上級目錄上級的上級

絕對路徑：d:\images\a.jpg絕大部分瀏覽器不支持，

測試地址：

title="提示”鼠標(biāo)滑到圖像上后顯示提示的文字

alt="文字”當(dāng)圖片加載失敗的時候，圖片區(qū)域會被文字替代。

id="編號”給圖像標(biāo)簽起個id值，多個圖像的id值不能重復(fù)，id值是方便js代碼

控制O

widlh="寬度”圖像文件的寬，不是源文件的寬

height="高度”圖像文件的高，不是源文件的高

onclick="事件”鼠標(biāo)點擊圖像的時候觸發(fā)的js代碼（第八章講解）

style="css代碼”使用css代碼修飾圖像元素（第七章學(xué)習(xí)）

、音頻及視頻元素

1、<embedsrc="路徑"width="寬度"height=w高度”></embed>淘汰

屬性說明：

src="路徑"視頻文件的路徑，如src="video/a.wmv”適合于wmv、flv>swf格式

這個標(biāo)簽?zāi)J(rèn)依賴系統(tǒng)的播放器，必須按照單機的播放器。

2、<videocontrolsitrue"src="video/a.wmv"width="600"X/video>

這個標(biāo)簽是目前最新的視頻標(biāo)簽，支持pc端和手機端，標(biāo)簽中自帶播放器

controls="true”是否讓播放器具備進(jìn)度控制

這個標(biāo)簽是html5標(biāo)簽，必須是最新的瀏覽器才支持，>=ie9,谷歌最新瀏覽器等

src="視頻路徑”

3、<audiocontrols="true"src="video/a.mp3"X/audio>

插入音頻

controls="true"顯示控件

src="a.mp3”音頻的路徑

PC端的網(wǎng)頁代碼如下想自適應(yīng)手機：<meta?name="viewport"id="viewport"

content=//width=device-width,initial-scale=l”>

視頻轉(zhuǎn)換軟件:現(xiàn)在的手機支持大部分視頻格式,mp4,rmvb,rm,avi等（迅雷看看，暴風(fēng)影音）

塞班系統(tǒng)諾基亞手機，“格式工廠”，“繪聲繪影”

朋友圈：微視頻、微廣告（新媒體）

、文字元素

文字可以直接寫在body標(biāo)簽中，也可以寫在div或span標(biāo)簽中。文字可以寫在任意的標(biāo)簽

中。

k<div></div>這個標(biāo)簽的含義是劃分區(qū)域，支持css修飾（95%的標(biāo)簽都支持css修飾）

這個div標(biāo)簽可以在瀏覽器的任意位置布局。將文字放到這個標(biāo)簽中，這個標(biāo)簽可以通

過css進(jìn)行定位，從而實現(xiàn)了文字的定位。具備寬和高是一個塊級元素。

div標(biāo)簽只能表示區(qū)域，但是本身不具備樣式。div必須通過css進(jìn)行修飾。

2.<span></span>這個標(biāo)簽的含義是環(huán)繞，支持css的修飾，缺點是不具備寬和高。使用

span標(biāo)簽進(jìn)行局部修飾。

表單元素

表單是用來收集客戶信息的，客戶可以使用表單和服務(wù)器產(chǎn)生交互性。

1、input標(biāo)簽

含義是輸入的意思

<inputtype="類型"name="名字"id="編號"value="默認(rèn)值"readonly="只

讀”>

簡寫：〈inputtype="類型”>

用法:

<inputtype="text">text類型，文本框，可以輸入明文的數(shù)據(jù)

<inputtype="password”>password類型,密碼框，可以輸入隱藏的內(nèi)容

<inputtype="file”>file類型，文件域,上傳文件

<inputtypeiradio”>radio類型，單選,name屬性值相同可以實現(xiàn)單選功能

<inputtype="checkbox”>checkbox類型,多選

<inputtype="hidden”>hidden類型，隱藏域，用來獲取隱藏的信息，如ip地址等

<inputtype="image”>圖像按鈕,把圖像當(dāng)成按鈕（淘汰了）

<inputtype=nbutton>普通按鈕，支持自定義功能

<inputtype="submit">提交按鈕，可以將所在表單中的內(nèi)容提交到遠(yuǎn)程服務(wù)器上。

<inputtype二"resetn>重置,將所在表單中的內(nèi)容重置。

示例代碼：

標(biāo)簽記憶法：〈人身份證二”“姓名二““種族二““性別二““年齡二““職業(yè)二””

公司=“”>

文本框：<inputid="user"name=“user“type=“text"value=vadmin,,

readonly="readonly”>

密碼框:<inputid二”pwd”name二”pwd”type二"password”value二”123456””>

文件:<inputid二"f"name="f"type=“file"Xinputtype="buttonvalue二"

上傳”>

單選：<inputid="al“name二"sextype二"radio”value二“男”>男

<inputid=“a2”name二"sex”type="radio"value二“女”>女

多選：<inputid="ckl”name二“ck”type二"checkbox”value=”爬山”>爬山

<inputid=“ck2”name二“ck”type二"checkbox,,value二“游泳”>游泳

圖像按鈕：<inputid="btnl"name="btnl"type=“image”>

提交按鈕:<inputid=“si”name二“si”type二"submit”value=“提交”>

重置按鈕：<inputid="s2”name二“s2”type="reset”value=“重置”>

普通按鈕：<inputid=“s3”name二“s3”type二"button”value=n普通”>

2、textarea標(biāo)簽

文本區(qū)域：<textareaid二"編號”name二"名字"rows二"行"cols二"列”>默認(rèn)值

</textarea>

3、select標(biāo)簽

<select>

<optionvalue二”選項的我值”>選項名稱〈/option》

</select>

注意：選項名稱只起到顯示功能，真正提交到服務(wù)器上值為選項的值。

select詞匯，挑選，選擇option選項

4、form標(biāo)簽

我們所學(xué)的表單元素都需要放到該標(biāo)簽中，只有存放在該標(biāo)簽中的標(biāo)簽元素的值才可以

提交給服務(wù)器。提交按鈕只會提交本表單的數(shù)據(jù)。

例如：

<inputtype="text”>〃這個文本框不會被提交給服務(wù)器，原因是不在form中。

<form>

<inputtype="text”>

<inputtype="submit”value="注冊”>

</form>

說明：當(dāng)我們點擊注冊按鈕是，注冊按鈕所處的表單元素會被提交給服務(wù)器。

、字段集

<fieldsetstyle="width:500px;margin-top:20px;font-size:12px;”>

<legend>目前學(xué)員狀態(tài)〈/legend》

<divstyle="padding:10px;”>張三李四王五趙六張三李四王五趙六張三李四

王五趙六張三李四王五趙六張三李四王五趙六張三李四王五趙六張三李四

王五趙六張三李四王五趙六</div>

</fieldset>

6、淘汰了的標(biāo)簽

換行、水平橫線、刪除線、下滑線、上標(biāo)、下標(biāo)、大于、小于、版權(quán)、加粗、斜體、字體

<br>、<hr>><delX/del>><uX/u>、<supX/sup>><subX/sub>>>><>©><bX/b>><iX/i>>

<font></font〉等

7、超鏈接

<ahref="鏈接地址"target="打開目標(biāo)”>鏈接文字〈/a>

例如：<ahref="">百度</a>點擊百度文字跳轉(zhuǎn)到百度官網(wǎng)

target="_blank”在新窗口打開

target=w_sleftM在自身的窗口打開

target="_parent

target="_top”；

target=wsearch”；

8、嵌入

<iframeid="編號"name="名字"src="嵌入的網(wǎng)頁"frameborder="邊框"

width="寬度”height="高度”></iframe>

用法：

<ahref="lrdhl.html"target=>>mainright”>錄入電話量〈/a>

<iframenameimainright''width"300"height"300"></iframe>

說明：點擊"錄入電話量“，Irdhl.html頁面在iframe中打開。

作業(yè)：使用己學(xué)的知識，開發(fā)erp軟件的后臺界面功能。使用ztree框架。

無序列表

<ul>

<li></li>

<li></li>

</ul>

有序列表

<ol>

<li></li>

<li></li>

</ol>

<dd>

<dt>

</dt>

</dd>

（前端淘汰）

<table>

<tr>

<th>第幾節(jié)</th>

</tr>

<tr>

<td></td>

</tr>

</table>

表格的屬性：

width="lOOpx”表格的寬度

height="50px”表格的高度

bgcolor="red”表格的背景色

border="2px"表格的邊框

bordercolorfred"表格邊框的顏色

align="leftIcenter|right”表格相對于瀏覽器的水平對齊方式

cellspacing="2px"單元格和單元格的距離

cellpadding="2px"單元格和內(nèi)容的距離

單元格的屬性：

width="lOOpx”單元格的寬度

height="50px”單元格的高度

bgcolor"red"單元格的背景色

align="left|center|right”單元格中內(nèi)容的水平對齊方式

valign="top|middle|bottom”單元格中內(nèi)容的垂直對齊方式

cel1spacing="2px"單元格和單元格的距離

cellpadding="2px"單元格和內(nèi)容的距離

第七章CSS層疊樣式表

7.1v什么是css

CSS中文全稱層疊樣式表。

在網(wǎng)頁中輸入的任何數(shù)據(jù)都需要修飾，如何修飾呢，可以將文字等數(shù)據(jù)直接放入標(biāo)簽中。因

為標(biāo)簽有很多屬性可以使用。早期W3c（互聯(lián)網(wǎng)協(xié)議的制定者）制定了html的語法功能，己

經(jīng)無法滿足現(xiàn)狀了。可以使用css進(jìn)行擴(kuò)展。

CSS中文名稱為層疊樣式表，css提供了很豐富樣式。使用css可以修飾頁面中任意的標(biāo)簽。

css的語法有些類似json語法。

語法格式：屬性名：屬性值；

font-size:12px;字號

font-weight:bold;加粗

color:red;字體顏色

font-family:w宋體”；字形

width:lOOpx;寬度

height:lOOpx;高度

background-color:red;背景色

border:Ipxsolidred;邊框

border-radius:lOpx;圓角

text-align:left|center|right;內(nèi)容的水平對齊方式

7.2、存放位置

語法：<divstyle=wcss代碼”>內(nèi)容</div>

例如：<divstyle=wfont-size:lOOpx;w》今天是第二天課</div>

詞匯：style樣式，type類型

行內(nèi)寫法比較靈活，缺點是工作量大，重復(fù)代碼多。

使用內(nèi)部樣式可以宏觀的修飾css,內(nèi)部樣式提供了四種選擇器來修飾html元素。

語法：<styletype="text/css”>

css代碼

</style>

內(nèi)部寫法是將css代碼和html相分離?？梢詫崿F(xiàn)css的宏觀修飾。

語法：#id值{css代碼}

ID選擇器實際上是行內(nèi)寫法的一種分離方法。

示例：

<style>

#divl{font-size:20px;}/*修飾divl標(biāo)簽*/

#div2{font-size:20px;}/*修飾div2標(biāo)簽*/

</style>

<divid="divl”>divl</div>

<divid="div2”>div2</div>

注意：所有標(biāo)簽的id值是不能重復(fù)的。

舉例：

〈人身份證“姓名=“李春“性別"男"職業(yè)="教授”></人〉

<人身份證="“姓名=“李春"性別="男“職業(yè)="教授"X/人》

語法：.名稱{css代碼}

調(diào)用：〈標(biāo)簽class="名稱名稱2名稱3名稱4…”X/標(biāo)簽》

哪個標(biāo)簽需要被修飾了，就使用class調(diào)用對應(yīng)的類選擇器（注意：調(diào)用的時候沒有點）。

示例：

<styletype="text/css”>

.aa{color:red;}/*設(shè)置字體為紅顏色*/

.bb{font-size:20px;}/*設(shè)置字號為20px*/

</style>

<divclass="aabb"〉內(nèi)容一</div>被aa和bb的并集修飾

<divclass=^^bb”>內(nèi)容二</div>被bb修飾

<divclass"bb”>內(nèi)容三</div>被bb修飾

語法：標(biāo)簽名{css代碼}

用法；修飾和標(biāo)簽名相同的標(biāo)簽

示例:

<style>

*{margin:Opx;padding:Opx;}*通配符，匹配所有標(biāo)簽。

div{font-size:20px;color:red;}修飾頁面中所有的div標(biāo)簽

span{font-size:20px;}修飾頁面中所有的span標(biāo)簽

</style>

<div></div>

<div></div>

<div></div>

<span></span>

<span></span>

<span></span>

注意多個標(biāo)簽選擇器是可以批量書寫的，如div,span,p{font-size:30px;}

復(fù)合選擇器是利用標(biāo)簽的層級關(guān)系進(jìn)行修飾。（不推薦使用）

1、一層一層的修飾（從根節(jié)點開始出發(fā)）

htmlbodydivdiv{font-size:20px;color:black;}

<html>

<body>

<div>

<div>內(nèi)容</div>

</div>

</body>

<html>

html,body可以省略。

2、從修飾的節(jié)點出發(fā)（不是從根節(jié)點開始）

.bannerdiv{font-size:20px;}

<divclass="banner”>

<div>這個div會被修飾</div>

</div>

Saldivp{font-size:20px;}使用便捷

等價于

htmlbodydivdivp{font-size:20px}層次清晰

<divid="al”>

<div>

<p></p>

</div>

</div>

案例：文章列表

網(wǎng)頁中的文章列表都是使用項目標(biāo)簽來完成。

<style>

,contentli{font-size:14px;1ine-height:26px;}

</style>

<ulclass="contentv>

Gi〉內(nèi)蒙古呼和浩特特大新聞2015-ll-30</li>

Gi>內(nèi)蒙古呼和浩特特大新聞2015-ll-30</li>

<li>內(nèi)蒙古呼和浩特特大新聞2015Tl-30〈/li>

</ul>

ul這個標(biāo)簽的結(jié)構(gòu)一般不發(fā)生變化，我們推薦使用符合選擇器。

a、行內(nèi)樣式：

<divstyle="css代碼”></div>

靈活，代碼重復(fù)率高，效率低

b、內(nèi)部樣式

<style>

標(biāo)簽選擇器

類選擇器

ID選擇器

復(fù)合選擇器

</style>

作業(yè)：

1、閱讀10個demo文件。

2、復(fù)習(xí)筆記

3、背會html標(biāo)簽和css的常用代碼

4、仿照案例，編寫程序。

7.3、盒子模型（重點）

所謂的盒子模型指的是把html元素都看成平面盒子。但是不是頁面中所有的標(biāo)簽都可

以被修飾成盒子，默認(rèn)的文檔結(jié)構(gòu)中只有html和body標(biāo)簽可以被css修飾層盒子。

head,title,meta等標(biāo)簽屬于控制類型的標(biāo)簽，它們是無法修飾成盒子的。

標(biāo)簽分為兩種標(biāo)簽：控制類型的標(biāo)簽、顯示類的標(biāo)簽

width:100px;

height:100px;

說明：無邊框的寬和高

邊框的12條代碼：

/*寬度*/

border-top-width:2px;/*上邊框?qū)挾?/

border-right-width:2px;/*右邊框?qū)挾?/

border-bottom-width:2px;/*下邊框?qū)挾?/

border-left-width:2px;/*左邊框?qū)挾?/

/*樣式*/

border-top-style:solid;/*上邊框樣式*/

border-right-style:solid;/*右邊框樣式*/

border-bottom-style:solid;/*下邊框樣式*/

border-left-style:solid;/*左邊框樣式*/

/*顏色*/

border-top-color:red;/*上邊框顏色*/

border-right-color:red;/*右邊框顏色*/

border-bottom-color:red;/*下邊框顏色*/

border-left-color:red;/*左邊框顏色*/

上面的12行代碼可以簡寫為3行：

/*寬度*/

border-width:2px;/*四個邊框?qū)挾?/

/*樣式*/

border-style:dashed;/*四個邊框樣式*/

/*顏色*/

border-color:red;/*四個邊框顏色*/

上面的3行代碼可以簡化為：

border:Ipxsolidred;寬度樣式顏色

上面的1行代碼可以拆成4行代碼

border-top:Ipxsolidred;寬度樣式顏色

border-right:lpxsolidred;寬度樣式顏色

border-bottom:Ipxsolidred;寬度樣式顏色

border-left:lpxsolidred;寬度樣式顏色

案例：使用css修飾文本框。

圓角：border-radius:10px;圓角值是盒子寬的1/2可以產(chǎn)生圓。

font-size:12px;字體大小14Px是網(wǎng)頁的標(biāo)準(zhǔn)字號

font-family:w宋體”；字形

font-weight:bold;加粗

color:red;字體顏色〃錯誤：font-color

text-indent:2em;縮進(jìn)兩個字的位置

text-decoration:none|overline|underline;戈ij線

對齊

1、標(biāo)簽相對于父標(biāo)簽的對齊方式

a、水平對齊：左對齊：float:left;右對齊：float:right;

居中對齊:margin-left:auto;margin-right:auto;

margin:0pxauto;

b、垂直對齊：margin-top:Opx;頂端對齊margin-top:父標(biāo)簽高度/2-本標(biāo)簽高度/2+

本標(biāo)簽的上邊框?qū)挾?；居中margin-top:父標(biāo)簽的高度-本標(biāo)簽的高度+本標(biāo)簽的上下邊

框?qū)挾?/p>

2、內(nèi)容在標(biāo)簽中的對齊方式

a、水平對齊：text-align:left|center|right;左對齊、居中對齊、右對齊

b、垂直對齊：height:值；line-height:值；高和行高相等

外邊距、內(nèi)邊距

margin-top:lpx;上夕卜邊品巨

margin-right:lpx;右外邊距

margin-bottom:lpx;下夕卜邊星巨

margin-left:lpx;左外邊距

padding-top:lpx;上內(nèi)邊距

padding-right:lpx;右內(nèi)邊距

padding-bottom:lpx;下內(nèi)邊距

padding-left:lpx;左內(nèi)邊距

注意：padding的值設(shè)置為多少，則盒子的寬或高擴(kuò)大多少。在使用完padding后，為了保

證盒子的寬和高不發(fā)生變化，我們可以將盒子的寬和高減去pdding的值。

簡寫:margin:Opx;四個外邊距為Opx;

margin:10px20px;上下外邊距左右外邊距

margin:Ipx2px3px;上外邊距左右外邊距下外邊距

margin:Ipx2px3px4px;上右下左外邊距

padding:Opx;

padding:OpxOpx;

padding:OpxIpx2px3px;

padding:OpxOpxOpxOpx;解釋同上

垂直距離是塌陷、水平距離是相加。

background-color:red;背景色

background-image:url（圖片路徑）；背景圖

background-repeat:no-repeat|repeatIrepeat-x|repeat-y;背景平鋪方式

background-size:200px;背景圖大小

background-position:top|right|bottomIleft;背景圖的定位

opacity:0.5;取值:0T的數(shù),如0?1、0.2、0.3等

記憶：opa,city

7.3.8、鼠標(biāo)形狀

語法:cursor:pointer

pointer手型

move移動

text是移動到文本上的那種效果？

wait是等待的那種效果

default是默認(rèn)效果方向：n北s南w西e東

e-resize是向右的箭頭

ne-resize是向右上的箭頭

n-resize是向上的箭頭

nw-resize是向左上的箭頭

w-resize是向左的箭頭

sw-resize是左下的箭頭

s-resize是向下的箭頭

se-resize是向右下的箭頭

auto是由系統(tǒng)自動給出效果

7.3.9、偽類

:hover{css代碼）鼠標(biāo)滑過

示例代碼：

<styletype="text/css”>

.m{font-size:12px;background-color:red;color:white;width:120px;height:30px;line

-height:30px;text-align:center;}

.m:hover{background-color:black;font-weight:bold;}

</style>

<divclass=“in”>大家好</div>

7.3.10、定位（重點）

1、定位的參考點及偏移量

定位指的就是盒子相對【參考點】的布局。

a、position:static;靜態(tài)定位，參考點是父標(biāo)簽及相鄰標(biāo)簽

說明：偏移，margin

b、position:relative;相對定位，參考點是父標(biāo)簽及相鄰標(biāo)簽

說明：偏移，margin,相對于自身發(fā)生偏移left,top,right,bottom,自身發(fā)生偏移后不

會影響其它盒子，其它任然會按照原來的位置布局。（隱形盒子）

c、position:absolute;絕對定位，所有的盒子不在一個平面上

說明：偏移,margin參考點是父標(biāo)簽，支持left,bottom,rigt,top偏移參考點是body,

可以使用z-index:數(shù)字;盒子的垂直坐標(biāo)。

d、position:fixed;固定定位

說明：偏移margin參考點是父標(biāo)簽，支持left,bottom,right,top偏移參考點是窗口，

可以使用z-indexo

定位方式Margin偏移（參考點）Left,top,right,bottom偏移（參

position考點）

靜態(tài)定位static父標(biāo)簽及相鄰標(biāo)簽無

相對定位父標(biāo)簽及相鄰標(biāo)簽自身

relative

絕對定位父標(biāo)簽文檔原點

absolute

固定定位fixed父標(biāo)簽瀏覽器窗口

2、定位和浮動的結(jié)合

一般網(wǎng)頁中的定位都是采用默認(rèn)的靜態(tài)定位，所以在網(wǎng)頁布局的時候根本不需要考慮定

位，絕對定位和固定定位只有在網(wǎng)頁特效及特殊情況下才使用。

網(wǎng)頁的區(qū)域就是由行和列構(gòu)成的。行區(qū)域和列區(qū)域。

行區(qū)域（塊級元素）：div具備寬和高，垂直排列，劃分區(qū)域，默認(rèn)display:block;

列區(qū)域（行級元素）：span不具備寬和高，水平排列，環(huán)繞,默認(rèn)display:inline;

div默認(rèn)是行，float后是列

7.4、web前端排版（工作）

PC端頁面排版

布局：banner,menu,content,link,copyright

代碼如下：

<!doctypehtml>

<html>

<head>

<metacharset二〃utf-8〃〉

〈title》五布局〈/title)

<style>

*{margin:Opx;padding:Opx;}

body{background-color:black;}

,pageWidth{width:980px;margin-left:auto;margin-right:auto;}

.spacing{margin-bottom:Ipx;}

,banner{

height:120px;

background-color:Scdcdcd;

)

.menu{

height:30px;

back