啟訊IT企業項目培訓大綱

前言

內蒙古啟訊教育咨詢有限公司，主要從事軟件研發，教育培訓。軟件研發主要研發PHP

應用程序（家政派單系統，錫林海關及公安廳110報警系統，網頁，自治區公安廳），微信

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

計（本科）。

學習目標：

通過4個月的學習，掌握PHP后端技術及web前端技術的所有知識點，具體知識點包括

軟件界面和軟件功能。學完這些知識點要達到什么程度，一、網站前端開發、二、項目開發、

三、研發

學習方法：

認真聽課（技巧）-＞及時復習-＞及時練習

課程名稱：PHP軟件工程師

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

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

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

學習難度：中等難度

課程模塊：三個模塊

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

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

3.數據庫處理:php（26天）

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

1、呼和浩特信息港，關注這個公眾號。

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

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

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

6、盈利模式：

廣告：騰訊、公司的

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

非法集資

二、互聯網+下的創業計劃

作業：

自己使用word文檔書寫一個微信公眾號的創業計劃書。

三、云計算物聯網下軟件人才的需求

云計算：PHP,Java,網絡工程，運維

物聯網：電子商務，軟件開發，軟件開發語言，c,c++,java,php,javascript,等

四、軟件行業的發展趨勢

html5+javascript

五、PHP軟件開發課程

第一章：UI形象識別系統

1.1、VI圖像元素

VI是形象識別系統。形象識別系統，如log。，宣傳廣告，企業文化，展板等圖像元素。

一個企業必須有VI元素，這些VI元素構成了企業的文化。VI的中圖像元素的色彩都

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

需要注冊商標。

1.2、UI識別系統

UI就是VI加上文字注釋，構成的圖文元素。目前的UI范圍已經不僅限于圖標了，任

何的廣告都可以稱之為UL

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

第二章：常用的UI設計工具

1.1、PhotoshopCs6設計工具

Photoshop工具的工作界面

功能界面介紹：

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

鍵。

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

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

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

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

-＞【鍵盤快捷鍵】）

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

欄使用的。

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

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

＞狀態欄：顯示文件的相關信息

軟件的性能優化

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

＞內存分配：一般是內存容量的1/2最佳

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

用虛擬內存，最好使用物理內存。）

16G內置存儲器磁盤

運行內存：1G

歷史記錄

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

＞歷史記錄狀態

啟動軟件有多種方法

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

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

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

C:\ProgramFiles\AdobePhotoshopCS6\AdobePhotoshopCS6

第二步：我的電腦（計算機）-＞右鍵-＞屬性-〉高級-〉環境變量-＞系統變量-＞Path-＞編輯-〉

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

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

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

保持不變。

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

環境變量：系統的命令一般是一個exe文件，這個exe文件可以存放在磁盤的任何位置，

我們為客戶提供統一的入口，在入口中輸入的命令，系統如何才能正確找到應用程序呢，

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

找。

例如系統自帶的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;系統第一次是在這個路徑中查詢

C:\WIND0WS;系統第二次是在這個路徑中查詢

以此類推

＞點擊又關閉

＞ps按鈕關閉（可以使用window系統的alt+f4）

打開文件及文件格式

打開文件

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

＞第二種：拖拽圖片到ps工作區

＞第三種：雙擊ps的工作區

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

文件類型的區別：gif支持動畫，圖像分辨率低。支持壓縮適合在網絡上傳輸。jpeg可以使

用腳本來實現支持動畫，默認的jpeg圖片是不支持動畫的。jpeg圖片支持65536中顏色，

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

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

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

比較：

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

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

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

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

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

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

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

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

（重點）

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

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

如果制作的圖像只是在互聯網中使用，則選擇像素作為單位。

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

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

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

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

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

名片:300+

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

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

c、顏色模式

RGB顏色模式：互聯網顏色，這種顏色體系只適合在計算機中顯示。該模式下的顏色

都是理想狀態下的顏色。

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

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

d、背景內容

白色、背景色、透明

使用

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

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

、分散圖像到多個圖層?

第一步：打開一副圖片

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

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

第四步：創建多個圖層并粘貼

、圖層操作

a、創建圖層

點擊圖層面板的正數第6個按鈕.完成創建圖層

b、復制圖層（備份、拷貝基礎上進行修改）

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

c、刪除圖層

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

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

d、移動圖層

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

e、合并圖層

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

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

1.1.6、常用的ps快捷鍵

a、面板全屏/恢復：tab

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

c、打開文件:ctrl+o

d、新建畫布:ctrl+n

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

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

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

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

不停的按t鍵

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

h、取消選區：ctrl+d

工具欄

1、選區工具（矩形選框工具）

功能屬性應用

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

選擇內容移動、復制、刪除等選擇內部的內容

布爾新建、添加到選區、從選區減去、和選

區相交

羽化邊緣虛化

后設置羽化：shift+f6

技巧選區和路徑的關系。選區可以轉換為路徑進行編輯。路徑-＞選

區：ctrl+回車

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

第一步：創建畫布

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

第三步、使用布爾，從選區中減去

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

ctrl+d取消選擇，使用文字工具輸入內容，雙擊文字圖層，alt+左/右光標鍵，字間距調整

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

ctrl+enter-＞ctrl+d

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

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

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

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

2、套索工具（選區）

功能屬性操作

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

內容移動、復制、刪除等選擇內部的內容

布爾新建、添加到選區、從選區減去、和選區相

交

羽化邊緣虛化

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

具：摳圖

案例1、使用磁性套索工具實現摳圖

第一步：載入荷花圖片

【文件】-＞【打開】

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

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

3、魔棒工具（選區）

功能屬性應用

內容容差：容差越大，色彩范圍越廣選取相近的色彩

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

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

案例1、制作一個寶馬商標草圖。

第一步：創建一個500*500的白色背景畫布。

第二步：創建寶馬圖層

第三步：在該圖層中繪制如下內容

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

層

合并圖形

繪制矩形選區

產生選區并描邊

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

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

功能屬性應用

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

批量裁切切片工具

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

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

尺

4、修復畫筆工具

子工具功能操作

修復畫筆吸取圖像區域的色彩后溶解到目標區域Alt+鼠標左鍵點擊（吸

取）

修補工具目標區域、替換初始選區區域拖拽選區->移動選區

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

污點修復工將所選區域的顏色平均分布使用該工具拖拽區域

具

5、畫筆工具

子工具功能操作

畫筆工具根據畫筆的硬度，大小，筆形繪制內容直接拖拽

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

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

3、筆形：使用不同的筆形產生多種筆觸（畫筆屬性可以設置）

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

畫筆屬性距離

2、形狀動態：

作業：使用所學的工具繪制一枚印章

制作步驟：

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

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

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

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

司”。使用ctrl+t自由變換調整文字位置。

第五步：使用多邊形工具的繪制五角星，默認繪制的是路徑，需要使用ctrl+回車轉為選區,

再使用alt+delete填充紅色。

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

輯菜單選中定義畫筆預設。

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

案例：使用所學的工具制作一個創意logoo

6、仿制圖章工具

子工具功能操作

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

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

解功能）完成吸取操作->在目標

畫布拖拽鼠標繪制

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

擇圖案->繪制

用途擦除圖片的多余內容（圖片水印，祛痘）

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

原始圖效果圖

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

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

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

第三步：圖層-調整-亮度和對比度

案例二：擦除水印

原圖效果圖

步驟同上

7、漸變工具

子工具功能操作

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

性工具欄中的顏色->雙

顏色過渡

擊色標修改色標顏色->

拖拽

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

桶工具-〉點擊

8、鋼筆工具

子工具功能操作

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

可以形成多個點連續線段，如

果點擊點的時候鼠標沒有松

開，則可以產生圓角。

鋼筆工具繪制路徑

在鋼筆工具的情況

下：ctrl+[alt]調整路徑。

ctrl+回車鍵將路徑轉換為選

區。

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

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

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

轉換點工具

用途繪制任意路徑、摳圖

9、文字工具

子工具功能操作

選擇文字工具，點擊插入光標

并輸入文字，也可以拖拽區域

輸入文字。

橫排文字輸入橫排文字

alt+左光標或右光標，調整水

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

可以按ctrl+回車確認

選擇文字工具，點擊插入光標

直排文字輸入直排文字并輸入文字，也可以拖拽區域

輸入文字。

橫排文字蒙版輸入橫排選區文字

直排文字蒙版輸入直排選區文字

技巧將文字圖層柵格化（圖片文字）

10、多變形工具

子工具功能操作

矩形繪制矩形路徑

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

橢圓

多邊形

直線

自定義形狀

液化命令

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

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

濾鏡

濾鏡就是特效

【窗口】-＞時間軸-＞創建幀動畫-＞復制幀-＞為每個幀設置要顯示的圖層

第三章：網頁美工

3.1、企業網站美工示例

網頁的美工是分為：

banner條：一個網站的頭部，用來表示企業文化。

menu導航欄：訪問網站內容的入口，導航欄分為水平和垂直兩類

ppt幻燈片：網站中推廣的主要內容放在這里（js代碼）

content主體內容：網站頁面的主要內容

link友情鏈接：外鏈、內鏈、交叉鏈接、等

copyright版權信息：備案號？

第四章：移動終端美工

banner：手機頂端，詳細導航欄按鈕

content:內容區域、容納常用的導航欄

menu:主要分類導航欄

第五章：綜合美工案例

通過美工決定項目報價：

產品銷售項目：

1.PC端

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

后端：1500元

支付：1000元

購物模塊：3500元

域名+空間：1999元

2.移動端

wap:手機網頁：5500元

app:手機應用程序（Android,I0S）

普通的新聞類app：8000元+

交互性的:12000元+

im類：6萬+

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

一次性報價：12000

第六章HTML網頁設計

6.1、html標簽語言

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

html中文全稱叫超文本標記語言，嚴格來說不是一門編程語言，只是一門頁面描述性語言,

用來描述網頁元素的布局信息。html標簽語言中給我們提供了105個標簽。

html超文本標記語言的語法〈標簽名X/標簽名》

<html>

<head>

<metacharset"utf-8”>

<title></title>

</head>

<body></body>

</html>

我們在桌面上創建一個網頁文件，如index.html,使用記事本打開，輸入文檔結構代碼進

行調試。運行index,html網頁文件，只需要雙擊文件即可。

標簽的說明：

html標簽：這是網頁中最大的標簽，表示html文檔文件的開始和結束。

head標簽：這個標簽中的內容是不會輸出到瀏覽器中的，一般用來實現html文件的頭部控

制信息。如標題標簽就是旗下的子標簽。

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

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

title標簽：網頁的標題。

body標簽：網頁的主體內容，頁面中所有的圖像、文字、音頻、視頻等都可以放在此標簽

中。

注意：這個文檔結構在一個網頁中只能出現一次。

、圖像元素

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

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

屬性說明：

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

徑也可以是相對路徑。

相對路徑：從當前網頁文件出發去尋找目標文件。./表示當前文件位置，/子目

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

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

測試地址：

title="提示”鼠標滑到圖像上后顯示提示的文字

alt="文字”當圖片加載失敗的時候，圖片區域會被文字替代。

id="編號”給圖像標簽起個id值，多個圖像的id值不能重復，id值是方便js代碼

控制O

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

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

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

style="css代碼”使用css代碼修飾圖像元素（第七章學習）

、音頻及視頻元素

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

屬性說明：

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

這個標簽默認依賴系統的播放器，必須按照單機的播放器。

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

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

controls="true”是否讓播放器具備進度控制

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

src="視頻路徑”

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

插入音頻

controls="true"顯示控件

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

PC端的網頁代碼如下想自適應手機：<meta?name="viewport"id="viewport"

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

視頻轉換軟件:現在的手機支持大部分視頻格式,mp4,rmvb,rm,avi等（迅雷看看，暴風影音）

塞班系統諾基亞手機，“格式工廠”，“繪聲繪影”

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

、文字元素

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

中。

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

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

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

div標簽只能表示區域，但是本身不具備樣式。div必須通過css進行修飾。

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

span標簽進行局部修飾。

表單元素

表單是用來收集客戶信息的，客戶可以使用表單和服務器產生交互性。

1、input標簽

含義是輸入的意思

<inputtype="類型"name="名字"id="編號"value="默認值"readonly="只

讀”>

簡寫：〈inputtype="類型”>

用法:

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

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

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

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

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

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

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

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

<inputtype="submit">提交按鈕，可以將所在表單中的內容提交到遠程服務器上。

<inputtype二"resetn>重置,將所在表單中的內容重置。

示例代碼：

標簽記憶法：〈人身份證二”“姓名二““種族二““性別二““年齡二““職業二””

公司=“”>

文本框：<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標簽

文本區域：<textareaid二"編號”name二"名字"rows二"行"cols二"列”>默認值

</textarea>

3、select標簽

<select>

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

</select>

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

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

4、form標簽

我們所學的表單元素都需要放到該標簽中，只有存放在該標簽中的標簽元素的值才可以

提交給服務器。提交按鈕只會提交本表單的數據。

例如：

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

<form>

<inputtype="text”>

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

</form>

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

、字段集

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

<legend>目前學員狀態〈/legend》

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

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

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

</fieldset>

6、淘汰了的標簽

換行、水平橫線、刪除線、下滑線、上標、下標、大于、小于、版權、加粗、斜體、字體

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

<font></font〉等

7、超鏈接

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

例如：<ahref="">百度</a>點擊百度文字跳轉到百度官網

target="_blank”在新窗口打開

target=w_sleftM在自身的窗口打開

target="_parent

target="_top”；

target=wsearch”；

8、嵌入

<iframeid="編號"name="名字"src="嵌入的網頁"frameborder="邊框"

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

用法：

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

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

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

作業：使用己學的知識，開發erp軟件的后臺界面功能。使用ztree框架。

無序列表

<ul>

<li></li>

<li></li>

</ul>

有序列表

<ol>

<li></li>

<li></li>

</ol>

<dd>

<dt>

</dt>

</dd>

（前端淘汰）

<table>

<tr>

<th>第幾節</th>

</tr>

<tr>

<td></td>

</tr>

</table>

表格的屬性：

width="lOOpx”表格的寬度

height="50px”表格的高度

bgcolor="red”表格的背景色

border="2px"表格的邊框

bordercolorfred"表格邊框的顏色

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

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

cellpadding="2px"單元格和內容的距離

單元格的屬性：

width="lOOpx”單元格的寬度

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

bgcolor"red"單元格的背景色

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

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

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

cellpadding="2px"單元格和內容的距離

第七章CSS層疊樣式表

7.1v什么是css

CSS中文全稱層疊樣式表。

在網頁中輸入的任何數據都需要修飾，如何修飾呢，可以將文字等數據直接放入標簽中。因

為標簽有很多屬性可以使用。早期W3c（互聯網協議的制定者）制定了html的語法功能，己

經無法滿足現狀了。可以使用css進行擴展。

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

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;內容的水平對齊方式

7.2、存放位置

語法：<divstyle=wcss代碼”>內容</div>

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

詞匯：style樣式，type類型

行內寫法比較靈活，缺點是工作量大，重復代碼多。

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

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

css代碼

</style>

內部寫法是將css代碼和html相分離。可以實現css的宏觀修飾。

語法：#id值{css代碼}

ID選擇器實際上是行內寫法的一種分離方法。

示例：

<style>

#divl{font-size:20px;}/*修飾divl標簽*/

#div2{font-size:20px;}/*修飾div2標簽*/

</style>

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

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

注意：所有標簽的id值是不能重復的。

舉例：

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

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

語法：.名稱{css代碼}

調用：〈標簽class="名稱名稱2名稱3名稱4…”X/標簽》

哪個標簽需要被修飾了，就使用class調用對應的類選擇器（注意：調用的時候沒有點）。

示例：

<styletype="text/css”>

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

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

</style>

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

<divclass=^^bb”>內容二</div>被bb修飾

<divclass"bb”>內容三</div>被bb修飾

語法：標簽名{css代碼}

用法；修飾和標簽名相同的標簽

示例:

<style>

*{margin:Opx;padding:Opx;}*通配符，匹配所有標簽。

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

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

</style>

<div></div>

<div></div>

<div></div>

<span></span>

<span></span>

<span></span>

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

復合選擇器是利用標簽的層級關系進行修飾。（不推薦使用）

1、一層一層的修飾（從根節點開始出發）

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

<html>

<body>

<div>

<div>內容</div>

</div>

</body>

<html>

html,body可以省略。

2、從修飾的節點出發（不是從根節點開始）

.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>

案例：文章列表

網頁中的文章列表都是使用項目標簽來完成。

<style>

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

</style>

<ulclass="contentv>

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

Gi>內蒙古呼和浩特特大新聞2015-ll-30</li>

<li>內蒙古呼和浩特特大新聞2015Tl-30〈/li>

</ul>

ul這個標簽的結構一般不發生變化，我們推薦使用符合選擇器。

a、行內樣式：

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

靈活，代碼重復率高，效率低

b、內部樣式

<style>

標簽選擇器

類選擇器

ID選擇器

復合選擇器

</style>

作業：

1、閱讀10個demo文件。

2、復習筆記

3、背會html標簽和css的常用代碼

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

7.3、盒子模型（重點）

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

以被修飾成盒子，默認的文檔結構中只有html和body標簽可以被css修飾層盒子。

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

標簽分為兩種標簽：控制類型的標簽、顯示類的標簽

width:100px;

height:100px;

說明：無邊框的寬和高

邊框的12條代碼：

/*寬度*/

border-top-width:2px;/*上邊框寬度*/

border-right-width:2px;/*右邊框寬度*/

border-bottom-width:2px;/*下邊框寬度*/

border-left-width:2px;/*左邊框寬度*/

/*樣式*/

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;/*四個邊框寬度*/

/*樣式*/

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可以產生圓。

font-size:12px;字體大小14Px是網頁的標準字號

font-family:w宋體”；字形

font-weight:bold;加粗

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

text-indent:2em;縮進兩個字的位置

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

對齊

1、標簽相對于父標簽的對齊方式

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

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

margin:0pxauto;

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

本標簽的上邊框寬度；居中margin-top:父標簽的高度-本標簽的高度+本標簽的上下邊

框寬度

2、內容在標簽中的對齊方式

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

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

外邊距、內邊距

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

margin-right:lpx;右外邊距

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

margin-left:lpx;左外邊距

padding-top:lpx;上內邊距

padding-right:lpx;右內邊距

padding-bottom:lpx;下內邊距

padding-left:lpx;左內邊距

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

證盒子的寬和高不發生變化，我們可以將盒子的寬和高減去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的數,如0?1、0.2、0.3等

記憶：opa,city

7.3.8、鼠標形狀

語法:cursor:pointer

pointer手型

move移動

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

wait是等待的那種效果

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

e-resize是向右的箭頭

ne-resize是向右上的箭頭

n-resize是向上的箭頭

nw-resize是向左上的箭頭

w-resize是向左的箭頭

sw-resize是左下的箭頭

s-resize是向下的箭頭

se-resize是向右下的箭頭

auto是由系統自動給出效果

7.3.9、偽類

:hover{css代碼）鼠標滑過

示例代碼：

<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;靜態定位，參考點是父標簽及相鄰標簽

說明：偏移，margin

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

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

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

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

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

可以使用z-index:數字;盒子的垂直坐標。

d、position:fixed;固定定位

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

可以使用z-indexo

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

position考點）

靜態定位static父標簽及相鄰標簽無

相對定位父標簽及相鄰標簽自身

relative

絕對定位父標簽文檔原點

absolute

固定定位fixed父標簽瀏覽器窗口

2、定位和浮動的結合

一般網頁中的定位都是采用默認的靜態定位，所以在網頁布局的時候根本不需要考慮定

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

網頁的區域就是由行和列構成的。行區域和列區域。

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

列區域（行級元素）：span不具備寬和高，水平排列，環繞,默認display:inline;

div默認是行，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