人機交互界面設(shè)計全書課件完整版ppt全套教學教程最全電子教案電子講義(最新)

1、人機交互界面設(shè)計第三章web基礎(chǔ)知識目錄01 了解萬維網(wǎng)、IP和域名、HTTP、FTP02 Dreamweaver基本操作03 網(wǎng)頁文件的基本操作04 認識HTML03-01 創(chuàng)建站點03-02 管理站點01 了解萬維網(wǎng)、IP和域名、HTTP、FTP萬維網(wǎng)WWW是環(huán)球信息網(wǎng)的縮寫，（亦作“Web”、“WWW”、“W3”，英文全稱為“World Wide Web”），中文名字為“萬維網(wǎng)”，環(huán)球網(wǎng)等，常簡稱為Web。超文本超文本（Hypertext）是由一個叫做網(wǎng)頁瀏覽器（Web browser）的程序顯示。網(wǎng)頁瀏覽器從網(wǎng)頁服務器取回稱為“文檔”或“網(wǎng)頁”的信息并顯示。網(wǎng)頁、網(wǎng)頁文件及網(wǎng)站網(wǎng)頁是網(wǎng)

2、站的基本信息單位，是WWW的基本文檔。它由文字、圖片、動畫、聲音等多種媒體信息以及鏈接組成，是用HTML編寫的。網(wǎng)頁文件是用HTML（標準通用標記語言下的一個應用）編寫的，可在WWW上傳輸，能被瀏覽器識別顯示的文本文件。其擴展名是.htm和.html。網(wǎng)站由眾多不同內(nèi)容的網(wǎng)頁構(gòu)成，網(wǎng)頁的內(nèi)容可體現(xiàn)網(wǎng)站的全部功能。HTTPHTTP是Hypertext Transfer Protocol的縮寫，即超文本傳輸協(xié)議。HTTP提供了訪問超文本信息的功能，是WWW瀏覽器和WWW服務器之間的應用層通信協(xié)議。01 了解萬維網(wǎng)、IP和域名、HTTP、FTP01 了解萬維網(wǎng)、IP和域名、HTTP、FTPIP地址和

3、域名IP即網(wǎng)絡(luò)之間互連的協(xié)議，英文縮寫為“Internet Protocol”，中文縮寫為“網(wǎng)協(xié)”。IP地址：網(wǎng)絡(luò)地址、網(wǎng)絡(luò)協(xié)議。域名：網(wǎng)站的名稱。FTPFTP 是File Transfer Protocol（文件傳輸協(xié)議）的英文簡稱，而中文簡稱為“文傳協(xié)議”。用于Internet上的控制文件的雙向傳輸。同時，它也是一個應用程序（Application）。02 Dreamweaver基本操作Dreamweaver是一款極為優(yōu)秀的可視化網(wǎng)頁設(shè)計制作工具和網(wǎng)站管理工具。它具有以下優(yōu)點：制作效率高網(wǎng)站管理便捷控制能力強02 Dreamweaver基本操作認識Dreamweaver界面屬性面板編輯窗口

4、對象面板03 網(wǎng)頁文件的基本操作創(chuàng)建站點123在啟動Dreamweaver時通過歡迎頁面創(chuàng)建在Dreamweaver工作環(huán)境下，單擊菜單欄中的“站點”-“新建站點”命令“文件”“管理站點”，在彈出窗口中點擊“新建站點”命令03 網(wǎng)頁文件的基本操作新建站點步驟二 站點標題步驟三 選擇服務器03 網(wǎng)頁文件的基本操作管理站點在“文件”面板中的“food”文件夾上單擊鼠標右鍵，則彈出一個快捷菜單。我們可以通過這個來管理站點。根據(jù)需求建立相應的文件及文件夾。04 認識HTMLHTML基本結(jié)構(gòu) 網(wǎng)站名稱 網(wǎng)站基本內(nèi)容 ENDTHANK YOU人機交互界面設(shè)計第四章HTML5基礎(chǔ)目錄01 html5基本結(jié)構(gòu)

5、標簽02 文本制作03 網(wǎng)頁圖片的顯示04 超鏈接02-01 認識標題、段落、短語元素02-02 特殊字符05 列表標簽05-01 無序列表05-02 有序列表05-03 定義列表06 html5媒體元素06-01 abject對象 06-04 audio對象06-02 embed對象 06-05 source 復數(shù)媒體元素06-03 video對象01 html5基本結(jié)構(gòu)標簽Div標簽該元素是用于分組 HTML 元素的塊級元素?？梢园阉醋魇且粋€容器，用來定義文檔中的分區(qū)。這是一個雙標簽，在使用時，必須關(guān)閉它。這是一個模塊內(nèi)容 書中這部分代碼有錯，以ppt為準01 html5基本結(jié)構(gòu)標簽he

6、ader標簽標簽定義文檔的頁眉，通常是一些引導和導航信息。它不局限于寫在網(wǎng)頁頭部，也可以寫在網(wǎng)頁內(nèi)容里面，表示網(wǎng)頁一個模塊內(nèi)容的頭部。它可以包括標簽，還可以包括表格內(nèi)容、標識、搜索表單、導航等。Header中至少要有一個標題元素或hgroup元素或nav元素用法： 頭部內(nèi)容 /標題元素，后面會詳解 頭部信息01 html5基本結(jié)構(gòu)標簽nav標簽nav標簽可以作為頁面導航的鏈接組。同樣可以包含標簽，或者其他列表，表單等用法： 這里顯示的是導航部分。section標簽該標簽用來定義文檔中的節(jié)。比如章節(jié)、某個模塊或文檔中的其它部分。一般用于成塊的內(nèi)容，會在文檔流中開始一個新的節(jié)。用法： 該模塊的標題

7、 該模塊的內(nèi)容01 html5基本結(jié)構(gòu)標簽article標簽是一個特殊的section標簽，具有更明確的語義，它代表一個獨立的、完整的相關(guān)內(nèi)容塊，可獨立于頁面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。用法： 這是文章標題 文章內(nèi)容詳情 /這里的是段落標簽，后面做詳解 這里可以是文章內(nèi)容 01 html5基本結(jié)構(gòu)標簽aside標簽1、可以表示包含在article元素中的附屬信息，如名次解釋，相關(guān)引用資料等。用法： 文章標題 文章內(nèi)容 本文出自2、也可以表示整個頁面或站點的附屬信息部分。如側(cè)邊欄、博客里面的其他文章列表，友情鏈接、單元廣告等。01 html5基本結(jié)構(gòu)標簽

8、footer標簽1、該標簽用于定義section、article或網(wǎng)頁的頁腳，包含了與內(nèi)容或頁面有關(guān)的信息，比如說文章信息（作者和日期）。作為頁面的頁腳時，一般包含了版權(quán)、相關(guān)文件和鏈接。它和標簽使用基本一樣，可以在一個頁面中多次使用，如果在一個區(qū)段的后面加入footer，那么它就相當于該模塊的頁腳了。用法： Copyright 2006-2015 重慶市巴南分局備案編號:11010500000001 html5基本結(jié)構(gòu)標簽hgroup標簽若在一模塊中需要含有一系列的標題元素，則可以用hgroup將他們包裹起來。用法： 標題1 標題2 01 html5基本結(jié)構(gòu)標簽figure標簽與figcap

9、tion標簽一段獨立的流內(nèi)容，一般表示文檔的一個獨立單元。這2個屬性常常在一起使用，figcaption元素為figure元素組添加描述信息?？梢杂糜趯υ氐慕M合，多用于圖片與圖片描述組合。用法： 這里可以插入一張圖片 這兒是圖片的描述信息02 文本制作段落：段落標簽顧名思義就是一個段落，可以理解為一些句子或文本組織在一起的塊級元素。用法：這里是一個段落。-認識標題、段落、短語元素標題：標題元素從h1到h6共六級。標題元素中包含的文本被瀏覽器渲染為“塊”元素，即會自動產(chǎn)生換行。所顯示的字號是最大的， 所顯示的字號最小span：行內(nèi)元素，本身沒有任何含義和任何樣式，但可以定義組合文檔中的部分文字

10、。用法：下面這是一段文字換行：在html中的換行顯示需要專門的標簽。該標簽單獨使用，不成對出現(xiàn)，是一種獨立標記。用法：這里將要換行。這里是第二行。02 文本制作制作效率高網(wǎng)站管理便捷控制能力強-認識標題、段落、短語元素短語元素：短語元素都是行內(nèi)元素。指的是要定義一個段落或者一句話里面的一部分文字。比如，要強調(diào)某個文字，傾斜某個文字，高亮某個文字等等。如要為：文字加粗這部分文字加粗強調(diào)文字強調(diào)這里的文字斜體文字這里的文字會有斜體效果。02 文本制作-認識標題、段落、短語元素短語元素（需要時可以查表） 標簽 用途縮寫：用于顯示文本的縮寫，配置title屬性加粗：文本沒有額外的重要性，但樣式采用加粗

11、字體引文或參考：用于顯示文本是引文或參考，通常傾斜顯示代碼：用于顯示文本為程序代碼，通常使用等寬字體術(shù)語定義：用于顯示文本為詞匯或術(shù)語定義，通常傾斜顯示強調(diào)：用于強調(diào)文本，通常傾斜顯示傾斜：文本沒有額外的重要性，但樣式采用傾斜字體輸入文本：用于顯示要用戶輸入的文本，通常用等寬字體顯示記號文本：文本高亮顯示（僅用于HTML5）示例文本：用于顯示程序的示例輸出，通常顯示為等寬字體小文本：用小字號顯示的免責聲明。強調(diào)文本：顯示文本強調(diào)或突出與周邊的普通文本，通常加粗顯示下標：用于顯示文本的下標上標：用于顯示文本的上標變量文本：用于顯示變量或程序輸出，通常傾斜顯示02 文本制作-認識標題、段落、短語元

12、素案例：根據(jù)效果圖，在Dreamweaver中寫出源代碼。02 文本制作-認識標題、段落、短語元素小貼士：什么是塊狀元素，什么是內(nèi)聯(lián)元素？塊級元素：這類元素的特征是添加該標簽后，會獨立的成一行顯示。行內(nèi)元素：也叫內(nèi)聯(lián)元素。這類元素的特征是增加其標簽后，不會換行。塊元素可以見下圖。02 文本制作控制能力強-特殊字符若我們需要在html頁面中顯示某些符號如：，&，”等等，在html代碼中直接輸入上述類似符號時，會與html中的關(guān)鍵字有沖突，因此不能直接在代碼中輸入，而是需要轉(zhuǎn)化為相對應的html代碼。符號HTML代碼'&空格02 文本制作制作效率高-特殊字符案例：根據(jù)效果圖，在Dream

13、weaver中寫出源代碼。03 網(wǎng)頁圖片的顯示插入圖片為插入圖片標簽。僅僅使用 標簽并不會在網(wǎng)頁中插入圖像。圖片必須要有圖片來源以及替代文本屬性，即src以及alt屬性。用法：src屬性代表的是圖片路徑，該路徑可以是絕對路徑也可以是相對路徑。alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內(nèi)容。03 網(wǎng)頁圖片的顯示案例操作題目要求在1.html內(nèi)插入01.jpg和02.jpg兩張圖片。文件結(jié)構(gòu)圖如下圖4.7所示。請寫出相應html代碼：03 網(wǎng)頁圖片的顯示小貼士：什么時候插入圖片，什么時候用背景圖片？當圖片作為頁面主體內(nèi)容，如新聞圖片時，使用插入圖

14、片。作為頁面整體背景或者點綴美化功能的時候可以作為背景圖片引入。相對路徑與絕對路徑（1）絕對路徑絕對路徑表示一個完整的路徑?？梢詠碓从诒緳C中的物理地址，例如src=D:/mysite/image/pic.jpg；也可以來源于internet的網(wǎng)絡(luò)路徑，例如src=/img/pic.jpg。（2）相對路徑相對路徑是以當前文檔所在的路徑和子目錄為起始目錄，進行相對于文檔的查找。制作網(wǎng)頁時通常采用相對路徑，這樣可以避免站點中的文件整體移動后，產(chǎn)生找不到圖片或其他文件等的現(xiàn)象。04 超鏈接文字超鏈接超鏈接指的是一個網(wǎng)頁指向一個目標的連接關(guān)系。這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可

15、以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序等。HTML 超鏈接主要由標簽對和屬性href 構(gòu)成。要實現(xiàn)鏈接的跳轉(zhuǎn)，必須要使用屬性href用法：鏈接的文字或圖片通過點擊鏈接的文字，具體的語法為：鏈接文字圖片超鏈接通過點擊圖片進行跳轉(zhuǎn)，具體的語法為：04 超鏈接錨點超鏈接1、確定鏈接跳轉(zhuǎn)的位置，設(shè)置錨點：目標位置（錨點的名字可以是任意的英文名）2、創(chuàng)建鏈接源，鏈接文字或者圖片注意：錨點名稱需要必須要與鏈接的href內(nèi)的錨點名稱匹配（相同）。郵件超鏈接需要建立郵件超鏈接時，點擊內(nèi)容會啟動電子郵件程序。具體用法為：發(fā)郵件04 超鏈接案例以下是關(guān)于超鏈接的一個知識鞏固案例。根據(jù)如圖所示

16、的網(wǎng)頁效果圖及文檔路徑，在Dreamweaver中寫出源代碼。（文檔路徑在書上有缺失，下圖為準）創(chuàng)建一個名為test.html頁面分別設(shè)置5個字段：link，百度圖標圖片，錨點鏈接，發(fā)郵件，這里是一段話為link字段增加鏈接到與test.html同級文件下的1.html為百度圖片圖片增加鏈接到百度官網(wǎng)為錨點鏈接字段增加錨點鏈接到“這里是一段話”為發(fā)郵件字段增加郵件超鏈接到05 列表標簽列表標簽是HTML中常用的一種標簽。具體分為無序有序列表定義列表。列表標簽的主要用途為：網(wǎng)頁導航、網(wǎng)頁列表頁、網(wǎng)頁圖文排列部分等05 列表標簽-無序列表無序列表（Unordered lists）是一個項目的列表，

17、在列表中每個項目前面加上列表符號。這種列表也可稱為項目列表。此項目列表使用粗體圓點（典型的小黑圓圈，屬于默認設(shè)置）、方塊、圓圈進行標記。 第一項 第二項 第三項 值 示例 disc（默認）圓點 square小方塊 circle圓環(huán) 創(chuàng)建一個無序列表要用方塊來標記他的項目符合，可以使用列表的type屬性值“square”，即05 列表標簽-無序列表案例在Dreamweaver中寫出標題與無序列表的源代碼05 列表標簽-有序列表有序列表（Unordered lists）有序就是有順序。有序列表可以使用數(shù)字（默認）、大寫字母、小寫字母、大寫羅馬數(shù)字、和小寫羅馬數(shù)字進行編號。 第一項 第二項 第三項創(chuàng)

18、建一個大寫字母 值 示例 1數(shù)字（默認） A大寫字母 a小寫字母 I大寫羅馬數(shù)字 i小寫羅馬數(shù)字05 列表標簽-有序列表案例在Dreamweaver中寫出標題與有序列表的源代碼05 列表標簽-定義列表定義列表（Unordered lists）用于常見問題及答案；或者一個列表包含多個術(shù)語及不同的解釋，就可以使用定義列表進行布局。如：名詞解釋的內(nèi)容05 列表標簽-定義列表案例在Dreamweaver中寫出標題與定義列表的源代碼06 html5媒體元素在網(wǎng)頁上插入音頻、視頻可以使其顯得更生動。如object對象標簽、embed嵌入對象。Html5增加了一些多媒體和交互元素，幫助我們更好的顯示音頻或視

19、頻，如video視頻播放audio聲音播放source媒體元素等06 html5媒體元素Object對象該元素用來將各式各樣的資料配置到網(wǎng)頁中，例如影像、圖片、動畫、甚至word文件等。Html5刪除了html4中object元素的很多屬性，支持html5的屬性如下表屬性 屬性說明data必要屬性，指定對象數(shù)據(jù)源的URL，在html4標準中，若屬性值為相對URL，將以codebase屬性的屬性值為基準URLtypedata屬性所指定的數(shù)據(jù)的mime形態(tài)uesmap將對象設(shè)定為客戶端的影像地圖，URL格式為”#mapname”，其中mapname對應于map元素的id屬性值width指定對象的寬

20、度，屬性至可為正整數(shù)的像素值或這百分比值height指定對象的高度，屬性至可為正整數(shù)的像素值或這百分比值06 html5媒體元素embed對象該元素用來嵌入對象，如多媒體對象flash。該元素為一個空元素，是一個單標簽。語法規(guī)則如下：。屬性 屬性說明Src必要屬性，指定嵌入對象的來源路徑type嵌入對象的mime類型width指定對象的寬度，屬性至可為正整數(shù)的像素值或這百分比值height指定對象的高度，屬性至可為正整數(shù)的像素值或這百分比值06 html5媒體元素video對象該元素是用來播放視頻的元素。但因各個瀏覽器在 video元素的可播放影片格式方面支持不一致，若要讓我們的網(wǎng)頁文件能夠兼

21、容各種主流瀏覽器，并通過video元素來播放影片，則至少需準備*ogg、*ogv、*mp4、*m4v這些類型的影片語法規(guī)則如下：。src設(shè)置影片播放來源路徑。屬性值僅能為單一來源的URL，不可復數(shù)指定poster指定影片開始播放前顯示的預覽圖片來源URLautoplay設(shè)置或返回是否在就緒（加載完成）后隨即播放視頻。若不加此屬性，當影片文件成功加載時在是并不會自動開始播放loop設(shè)置或返回視頻是否應在結(jié)束時再次播放。未加屬性時，結(jié)束后會停止播放，反之，則重復播放。preload設(shè)定影片是否要預先加載。取值可為none，auto，metadatacontrols設(shè)置或返回視頻是否應該顯示控件（比

22、如播放/暫停等）。06 html5媒體元素audio對象同理，該元素是用來播放聲音的元素。語法規(guī)則如下：。屬性 屬性說明src設(shè)置聲音播放來源路徑。屬性值僅能為單一來源的URL，不可復數(shù)指定autoplay設(shè)置或返回是否在就緒（加載完成）后隨即播放聲音文件。若不加此屬性，當聲音文件成功加載時在是并不會自動開始播放loop設(shè)置聲音文件是否應在結(jié)束時再次播放。未加屬性時，結(jié)束后會停止播放，反之，則重復播放。preload設(shè)定聲音文件是否要預先加載。取值可為none，auto，metadatacontrols設(shè)置是否應該顯示控件（比如播放/暫停等）。06 html5媒體元素source對象Sourc

23、e是video與audio元素的子元素?？梢岳胹ource元素來定義多個影片、聲音文件來源。注意：在audio和video元素中，可以同時使用多個source元素，由于使用了source屬性，不可再為video和audio設(shè)定src屬性，否則video與audio元素標簽的source元素等同無效。語法規(guī)則如下：屬性 屬性說明src設(shè)置影片、聲音播放來源路徑。屬性值僅能為單一來源的URL，不可復數(shù)指定Type指定播放來源用的mime類型Media指定播放來源是哪一種媒體或設(shè)備。取值可以是all/aural/ braille/ handheld/ projection /print/tty/t

24、v ENDTHANK YOU人機交互界面設(shè)計第五章CSS3詳解目錄01 css3概述02 css的配置方法03 css的聲明及選擇器04 css中的注釋05 css3基本屬性06 css3中的偽類和偽對象07 css3中的動畫05-01 背景屬性 05-03 列表屬性05-02 文本屬性 05-04 其他常用顯示屬性06-01 常用的css偽類06-02 結(jié)構(gòu)性偽類06-03 偽對象07-01 2d變形 07-03 3d變形07-02 css3過渡 07-04 animation動畫01 css3概述Css樣式表優(yōu)點CSS(Cascading Style Sheets)，即層疊樣式表。他用來設(shè)

25、置網(wǎng)頁中各種標簽的樣式，如設(shè)置文字大小，顏色，行高，背景等等?！皩盈B”是指當在 HTML文件中引用多個樣式文件時，瀏覽器將依據(jù)層疊順序及就近原則進行處理，以避免發(fā)生沖突。更多的排版和頁面布局控制?？梢钥刂谱痔?、行距、字間距、邊距、縮進等。樣式和結(jié)構(gòu)分離。文本格式和顏色可以獨立于網(wǎng)頁結(jié)構(gòu)內(nèi)容部分進行配置和存儲。方便修改。若需要更換某個模塊的字體顏色，只需要修改css樣式里面的文字顏色屬性即可，有利于網(wǎng)頁維護。文檔變得更小，提高加載速度。Css從文檔分離出來后，html的體積會變得更小。CSS3是CSS技術(shù)的升級版本CSS3語言開發(fā)是朝著模塊化發(fā)展的。在css3語言中，增加了更多的新模塊。這些模塊

26、包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局、動效等02 css的配置方法嵌入樣式：內(nèi)聯(lián)樣式：不提倡，因為他不能更好的實現(xiàn)結(jié)構(gòu)樣式分離，特殊情況下可以使用，只適合該特定元素的特定屬性外部樣式將外部的獨立的樣式表文件引入到 HTML 文件中。用法：導入樣式：在 HTML 文件初始化時，會被全部導入到 HTML 文件內(nèi)，作為文件的一部分import url(外部樣式表文件地址);03 css的聲明及選擇器Css的聲明ss的聲明指的是需要設(shè)置的css屬性（例如顏色）及其值。Css的聲明指的是需要設(shè)置的css屬性（例如顏色）及其值。它有一定的語法規(guī)則。不管是

27、外部鏈接還是嵌入樣式，導入式樣式，聲明css的方法都是一樣的。語法結(jié)構(gòu)如下：選擇符屬性1:屬性值;屬性2:屬性值;03 css的聲明及選擇器Css選擇器標簽選擇器id 選擇器類選擇器分組選擇器包含選擇器通配符選擇器03 css的聲明及選擇器標簽選擇器我們直接給標簽設(shè)置樣式的類型就是標簽選擇器例如：acolor:#ff0000;font-size:16px;03 css的聲明及選擇器類選擇器類選擇器也叫class選擇器，語法為:.類名屬性1:屬性值;例如：Css部分：.classcolor:#ff0000;font-size:16px;Html部分：點此鏈接203 css的聲明及選擇器id選擇器

28、但與class不同的是，id名不能重復. #類名屬性1:屬性值;例如：Css部分：#menucolor:#ff0000; font-size:16px;Html部分： 導航03 css的聲明及選擇器分組選擇器當多個選擇器聲明的樣式完全相同時，可以將他們統(tǒng)一進行聲明，各選擇器之間使用英文”,”分開語法為：標簽1,標簽2,標簽3屬性1:屬性值;屬性2:屬性值;例如：Css部分：#menu,.red,footercolor:#ff0000;font-size:16px;Html部分：標題導航這里是段落1這里是段落2這里是版權(quán)信息03 css的聲明及選擇器包含選擇器需要為一個容器里面的元素設(shè)置樣式時，

29、需要使用包含選擇器語法為：父選擇器 子選擇器屬性1:屬性值;屬性2:屬性值;父選擇器和子選擇器之間用空格隔開例如：Css部分：p acolor:#ff0000;font-size:14px;Html部分：鏈接1 點擊這里 跳轉(zhuǎn)到首頁 03 css的聲明及選擇器通配符選擇器它由星號*來表示選擇器的名稱，可以定義所有的網(wǎng)頁元素顯示格式。通配符一般用于統(tǒng)一瀏覽器設(shè)置例如：意思是，將該頁面的所有標簽樣式中的外邊距、內(nèi)邊距重置為0，來統(tǒng)一瀏覽器樣式*margin:0;padding:0;03 css的聲明及選擇器案例請完成如上圖的html及css樣式03 css的聲明及選擇器優(yōu)先級當有多個選擇器作用于同

30、一個元素時，最終會使用哪一個選擇器所設(shè)置的樣式？優(yōu)先級由高到低為：行內(nèi)樣式 id 選擇器 類選擇器 標簽選擇器。若一個頁面內(nèi)有不同類型的css文件，css文件的優(yōu)先級別為：行內(nèi)樣式表 內(nèi)嵌樣式表 鏈接樣式表 導入樣式表。04 css中的注釋注釋為了幫助理解和后期維護，在css中應該有一定的注釋即解釋，這些注釋是不會對css代碼產(chǎn)生影響的。如：/*-注釋內(nèi)容-*/html注釋和css注釋可以混用嗎？不行。05 css3基本屬性-背景屬性Css2的背景可以設(shè)置為純色，圖片，重復；css3的背景有很大程度的突破，如透明度，漸變色，背景剪裁，背景圖片大小，多背景背景顏色可以為顏色名稱的英文。對應的語法

31、為：background-color:blue;可以為顏色對應的16進制值。語法為：background-color:#0000ff;可以為顏色對應的rgb值。語法為：background-color:rgb(0,0,255)Css3提供了半透明的顯示。語法顯示為：background-color:rgba(0,0,0,0.6)。05 css3基本屬性-背景屬性背景圖片圖片路徑的設(shè)置與之前插入圖片一樣，分為相對路徑和絕對路徑。語法為background-image:url(圖片路徑)背景位置在網(wǎng)頁中需要將背景圖片放在我們希望的位置，所以可以通過background-position屬性來改變默

32、認的位置。background-position：top centerbackground-position:10px 10pxbackground-position:50% 50%background-position:left 20px top 10px05 css3基本屬性-背景屬性背景漸變繪制Css3中，支持背景的漸變。線性漸變linear-gradient徑向漸變radial-gradient重復的線性漸變repeating-linear-gradient重復的徑向漸變repeating-radial-gradient每一種漸變里面一定會有漸變方向，角度，起始顏色，終止顏色等用法如下

33、：background:linear-gradient(-90deg,#fff,#333);background: radial-gradient(center,circle,#f00,#ff0,#080);background: radial-gradient (50%,circle,#f00,#ff0,#080);05 css3基本屬性-背景屬性背景滾動屬性背景可以被固定在某一處，也可以跟隨網(wǎng)頁內(nèi)容的滾動更滾動。用法為：background-attachment：scrool/fixed;背景定位的盒子背景的左上角可以定位在邊框、內(nèi)邊距和內(nèi)容上用法為：background-origin:p

34、adding-box/border-box/content-box背景剪裁屬性背景由邊框開始剪裁的意思是，邊框以內(nèi)部分可見，背景由內(nèi)邊距開始剪裁的意思是，內(nèi)邊距以內(nèi)部分可見；背景由內(nèi)容開始剪裁的意思是，內(nèi)容以內(nèi)部分可見。用法為：background-clip:padding-box/border-box/content-box。05 css3基本屬性-背景屬性背景大小背景大小是css3的新屬性，background-size屬性可以用來定義背景圖片的尺寸。用法為：background-size:100px 200px/ 40%/cover/content。簡寫背景屬性部分屬性可以簡寫到back

35、ground屬性里面，用法為：background：#00ff00 url(images/01.jpg ) repeat-x top 30px left 30px scroll;05 css3基本屬性案例請完善html及css。將素材提供的bg.jpg放到頁面中間，并且可以根據(jù)頁面大小自動縮放，不重復，背景圖片以外填充#dff2f4天藍色。文字大小為20像素。-背景屬性05 css3基本屬性文字字體網(wǎng)頁中，文本的顏色，間距行距，字體大小，字體效果多種多樣，我們必須為之排版，才能使網(wǎng)頁看起來重點分明，簡明整潔-文本屬性設(shè)置文字字體屬性為 font-family，基本語法：font-family:

36、字體 1,字體 2,字體 3;文字大小通過font-size來控制文字大小，基本語法：font-size:尺寸/百分比/關(guān)鍵字。文字傾斜文字樣式為斜體時，使用font-style屬性?；菊Z法：font-style:normal/italic/oblique;05 css3基本屬性文字粗體-文本屬性文字需要為粗體顯示時，使用font-weight屬性?；菊Z法：font-weight:normal/bold/bolder/lighter/number; pfont-weight:bold;文字顏色設(shè)置顏色用color來定義。用法color:顏色名稱；color:#000000；color:rg

37、b(0,0,255)。英文字異體屬性為font-variant，作用是將所有小寫字母轉(zhuǎn)換為小型大寫字母，基本語法：font-variant:normal/small-caps; 05 css3基本屬性簡寫屬性-文本屬性與背景屬性一樣，font也有簡寫屬性，用法：font:italic bold 30px 微軟雅黑，文字修飾修飾文字是指為文字添加下劃線、刪除線和上劃線?；菊Z法：text-decoration: underline|oveline|line-through|blink|none; 英文字母大小寫轉(zhuǎn)換該屬性為text-transform，基本語法：text-transform:no

38、ne/capitalize/uppercase/lowercase05 css3基本屬性中文字符間距-文本屬性通過letter-spacing屬性可以用來調(diào)整中文字符或英文字符之間的間距，用法：letter-spacing:normal/長度，英文單詞間距屬性為 word-spacing，用來調(diào)整英文單詞之間的間距基本語法：word-spacing:normal/長度; 文本水平對齊方式text-align可以改變文本行之間的對齊方式基本語法：text-align:left/right/center/justify05 css3基本屬性段落首行縮進-文本屬性通常在段落的首行會有退格縮進，css

39、的表達方式為text-indent，用法：text-indent:長度/百分比，行高為了試段落文本看起來舒服，我們通常會調(diào)節(jié)行間距，該屬性為line-height基本語法：line-height:normal|數(shù)字|長度|百分比文本陰影屬性Css3中，使用text-shadow可以為文本增加陰影基本語法：text-shadow:5px 5px 5px #ff000005 css3基本屬性Css3自動換行-文本屬性Css3還增加了一個文本屬性為word-warp，表示可以允許文本在某個區(qū)域內(nèi)強制換行?？梢詮娭茖㈤L單詞拆分，并換行到下一行用法：pword-wrap:break-word;05 cs

40、s3基本屬性案例-文本屬性我們將完成以上視圖，請完善html及css。題目要求，將標題設(shè)置字體大小36，文字間距24px，頁面水平居中。設(shè)置正文字體14px，文字字體為微軟雅黑，英文字體首字母為大寫，行高為1.5em，首行縮進2em。圣誕節(jié)3個字設(shè)置下劃線并加粗顯示。05 css3基本屬性設(shè)置列表符號-列表屬性屬性為 list-style-type，用來設(shè)置列表項的符號類型，基本語法：list-style-type:屬性值; 屬性值屬性值說明disc黑色圓點，默認值circle空心圓圈square黑色正方形decimal 或 1數(shù)字，如：1，2，3，4，lower-roman 或 i小寫羅馬文

41、字，如：I，ii，iii，iv，upper-roman 或 I大寫羅馬文字，如：I，II，III，IV，V，lower-latin 或 a小寫拉丁文，如：a，b，c，zupper-latin 或 A大寫拉丁文，如：A，B，C，. Znone不顯示任何符號05 css3基本屬性設(shè)置列表項圖片-列表屬性可以用圖片美化列表項，其屬性為 list-style-image，語法為：list-style-image:url(圖片地址);設(shè)置列表位置列表項符號位于文本的左側(cè)，默認放置在文本以外，可以通過調(diào)整位置將其放置到文本以內(nèi)。屬性為 list-style-position，語法為：list-style-

42、position:outside/inside; 。簡寫屬性list-style也有簡寫屬性，語法為：list-style:none url(圖片地址) inside05 css3基本屬性案例-列表屬性完成如圖所示案例，完成html及css部分。在這個案例中為了美化效果，加入了前面背景、文字部分的css樣式05 css3基本屬性Css其他常用顯示屬性-列表屬性Display屬性display 屬性可以定義元素的顯示類型，屬性值block是以塊狀元素的方式顯示，inline是以內(nèi)聯(lián)元素的方式顯示，none是不顯示。Display：none/block/inline/inlin-blockover

43、flow屬性overflow 屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情overflow：visible/hidden/scroll/autoopacity屬性當我們需要對某些元素表現(xiàn)為半透明效果時，需要使用到opacity屬性。語法如下：opacity:0.5。取值范圍為0-1，1表示不透明，0表示完全透明。05 css3基本屬性小貼士-列表屬性如何在低版本的瀏覽器中顯示半透明？由于老版本的各個瀏覽器對opacity的支持不一致，我們可以通過瀏覽器前綴使兼容性更好。如Ie8以下filter:alpha (opacity=50)，firefox需要加瀏覽器前綴如-moz-opactiy:0.5。為了

44、滿足所有瀏覽器，需要寫5條-webkit-opacity:0.5;/*老safari和老Chrome瀏覽器*/-moz-opacity:0.5;/*低于Firefox0.9版本的*/-khtml-opacity:0.5;/*老式khtml內(nèi)核的Safari瀏覽器*/opacity:0.5;/*IE9以上和所有新版本瀏覽器*/filter:alpha(opacity=50);/*IE4-8*/06 css3中的偽類和偽對象常用的css偽類所謂“偽“，就是指不是真正的標簽，而是依附于結(jié)構(gòu)標簽的一種狀態(tài)。我們分為偽類和結(jié)構(gòu)性偽類，以及偽對象在網(wǎng)頁中，我們點擊超鏈接，會改變顏色或者變換樣式，這通常是c

45、ss中稱為偽類的技術(shù)實現(xiàn)的。屬性值屬性值說明:link默認鏈接時的樣式:visited訪問過后的樣式:focus元素獲得焦點時的樣式:hover鼠標經(jīng)過時候的樣式:active激活元素是的樣式06 css3中的偽類和偽對象結(jié)構(gòu)性偽類所謂偽元素選擇器，是指并不是針對真正的元素使用的選擇器，而是針對css中已經(jīng)定義好的偽元素使用的選擇器，語法如下，選擇器:偽元素屬性:值偽元素選擇器也可以與類配合使用，語法如下，選擇器 類名:偽元素屬性:值屬性值屬性值說明:first-of-type應用于指定類型的第一個元素:first-child應用于元素的第一個子元素:last-of-type應用于指定類型的最

46、后一個元素:last-child應用于元素的最后一個:nth-of-type(n)應用于置頂類型的第n個元素，n可以是數(shù)字，或者偶數(shù)（even）奇數(shù)（odd）06 css3中的偽類和偽對象偽對象偽元素是對元素中的特定內(nèi)容進行操作。設(shè)計偽元素的目的就是去選取諸如元素內(nèi)容第一個字或字母、文本第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。屬性值屬性值說明:first-letter將樣式應用于元素文本的第一個字或字母:first-line將樣式應用于元素文本的第一行:before在元素內(nèi)容的

47、最前面添加新內(nèi)容，與content結(jié)合，見后面案例:after在元素內(nèi)容的最后面添加新內(nèi)容，用法同上p:first-child:first-letter /*第一個段落里的第一個字母*/font-size:30px;font-weight:bold;07 css3中的動畫Css3已經(jīng)變得非常強大，以前網(wǎng)頁里必須靠flash或者js才能實現(xiàn)的動畫效果，現(xiàn)在可以靠純css代碼就可以完成。結(jié)合js，html5的canvas，還可以做出更炫的動畫。Css3中的動畫效果分為2d變形，3d變形，幀動畫使用該屬性時，Chrome 和 Safari 需要前綴 -webkit-；Internet Explore

48、r 9 需要前綴 -ms-。2d變形在2維空間中，元素可以被移位，傾斜，縮放，旋轉(zhuǎn)，2d變形工作在X軸和Y軸，也就是我們常說的水平軸和垂直軸。07 css3中的動畫-2d變形位移translateTranslate是指的一個方法，可以簡單的理解為：使用translate()函數(shù)，你可以把元素從原來的位置移動向x軸y軸移動，而不影響在X、Y軸上任何組件。translate()函數(shù)可以取一個值tx，也可以同時取兩個值tx和ty，語法為transform:translate(x,y)縮放scale縮放scale()函數(shù)可以讓元素根據(jù)中心原點進行縮放。默認值為1。語法為transform:scale(

49、x,y)，其中，x代表水平方向的縮放，y代表垂直方向的縮放。07 css3中的動畫-2d變形旋轉(zhuǎn)rotate旋轉(zhuǎn)rotate()函數(shù)通過設(shè)定的角度使元素根據(jù)原點進行旋轉(zhuǎn)。括號里面的值表示旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負值，元素相對原點中心逆時針旋轉(zhuǎn)。rotate()函數(shù)只接受一個值，其語法如下transform:rotate(deg)。若需要改變原點位置，可以通過transform-origin屬性重置元素的旋轉(zhuǎn)原點。例：Imgtransform-origin: top left; /*改變原點中心至左上角*/transform: rotate(45de

50、g); /*根據(jù)上訴原點位置順時針旋轉(zhuǎn)45度*/07 css3中的動畫-2d變形傾斜skew傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀。語法格式如下：transform: skew(xdeg,ydeg);矩陣函數(shù)matrix不常用，有需要查看參考資料07 css3中的動畫-2d變形案例頁面最終效果見上，完成html和css07 css3中的動畫-2d變形小貼士為什么在上述案例中transform屬性前

51、面都加上了瀏覽器前綴？根據(jù)不同的內(nèi)核，一些私有屬性的css前綴不一樣。Gecko內(nèi)核即火狐瀏覽器，css前綴為-moz-WebKit內(nèi)核即chrome瀏覽器，safari瀏覽器，搜狗瀏覽器，qq瀏覽器等等，css前綴為-webkit- Presto內(nèi)核即Opera(歐朋)瀏覽器等，css前綴為-o-Trident內(nèi)核即IE，360極速瀏覽器等，css前綴為-ms-IE內(nèi)核即ie瀏覽器，css前綴為“-ms”07 css3中的動畫-3d變形3d位移CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數(shù)。使用三維向量的坐標定義元素在每個方向移動多少。其基本語法

52、如下：translate3d(x,y,z)。三維變換使用基于二維變換的相同屬性，如果已經(jīng)掌握了2D變形，就會覺得3D變形的功能和2D變換的功能相當類似。差別在于X軸和Y 軸之外，還有一個Z軸07 css3中的動畫-3d變形3d縮放CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數(shù)。當scale3d()中X軸和Y軸同時為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。其基本語法如下：scale3d(x,y,z)。scaleZ()和scale3d()函數(shù)單獨使用時沒有任何效果，需要配合其他的變形函數(shù)一起使用才會有效果，如同時添加rotateX(45

53、deg)07 css3中的動畫-3d變形3d旋轉(zhuǎn)CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數(shù)scaleZ()和scale3d()函數(shù)單獨使用時沒有任何效果，需要配合其他的變形函數(shù)一起使用才會有效果，如同時添加rotateX(45deg)除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓一個元素在三維空間中旋轉(zhuǎn)之外，還有一個屬性rotate3d()函數(shù)。在3D空間，旋轉(zhuǎn)有三個程度的自由來描述一個轉(zhuǎn)動軸。軸的旋轉(zhuǎn)是由一個x,y,z向量并經(jīng)過元素原點。其基本語法如下：rotate3d(x,y,z,a)0

54、7 css3中的動畫-3d變形透視perspective屬性3D變形中，有一個很重要的屬性就是透視屬性，有了透視，立體感就有了，更能說明3D。用法如下transform:perspective(500px)注意：傾斜是二維變形，不能在三維空間變形。元素可能會在X軸和Y軸傾斜，然后轉(zhuǎn)化為三維，但它們不能在Z軸傾斜07 css3中的動畫-css3過渡變換的屬性名稱transition-propertyCSS 過渡（transition）是通過定義元素從 起點的狀態(tài) 和 結(jié)束點的狀態(tài) ，在一定的時間區(qū)間內(nèi)實現(xiàn)元素平滑地過渡或變化的一種補間動畫機制。通過transition你可以決定哪個屬性發(fā)生動畫效

55、果 (可以通過明確地列出這些屬性)，何時開始動畫 (通過設(shè)置delay), 動畫持續(xù)多久 (通過設(shè)置duration), 以及如何動畫 (通過定義timing函數(shù)，比如線性地或開始快結(jié)尾慢)。下面我們詳細的進行講解可以單獨指定元素的哪些屬性，如height，width等或者all全部屬性，指定為none時，動畫立即停止；語法規(guī)則為:選擇器transition-property:none/all/任意元素屬性07 css3中的動畫-css3過渡過渡持續(xù)時間transition-duration用來指定元素過渡過程的持續(xù)時間，時間值，1s(秒)，4000ms(毫秒)，其中1000ms=1s。其默認

56、值是0s，也可以理解為無過渡（transition）效果。語法規(guī)則為:選擇器transition-duration:2s/1000ms;過渡速率變化transition-timing-function指定CSS屬性的變換速率，簡單的來說就是先快后慢、先慢后快、勻速還是逐漸變慢。語法規(guī)則為:選擇器transition-timing-function:ease/ease-in-out/linear/ease-in/ease-out;07 css3中的動畫-css3過渡過渡延遲時間transition-delay該屬性指定一個動畫開始執(zhí)行的時間，即當改變元素屬性值后多長時間開始執(zhí)行“動畫效果”。語法

57、規(guī)則為:選擇器(transtition-delay:1s/500ms;)transition的簡寫屬性過渡屬性可以簡寫，即將多個屬性值寫到一個語句里語法規(guī)則為:Transition:width 2s ease 500ms,boreder 2s linear,background-color 1s ease-in 0.5s07 css3中的動畫-animation動畫Keyframes幀動畫animation確實非常強大，是css3的一大特色?？梢赃\用他完成網(wǎng)頁里面一些簡單的動畫。Keyframes的語法：keyframes 動畫名字 0% 屬性1:屬性值1; 屬性2:屬性值2; 20% 屬性1

58、:屬性值1; 屬性2:屬性值2; . 100% 屬性1:屬性值1; 屬性2:屬性值2; 07 css3中的動畫-animation動畫動畫名稱animation-name可以用來定義一個動畫的名稱。其語法為animation-name:動畫名;注意：這里的動畫名一定要與keyframes創(chuàng)建的動畫名一致，如果不一致，動畫將不能產(chǎn)生動畫時長animation-duration該屬性指元素的動畫持續(xù)時間，該元素與transition-duration使用方法一樣，取值范圍不再作詳解，如：選擇符:animation-duration:500ms;07 css3中的動畫-animation動畫動畫變換

59、速率animation-timing-function該屬性指元素動畫運動時的變換速率，使用方法也與transtion-timing-function相似動畫開始時間animation-delay該屬性用來指定元素動畫開始時間。與transition-delay使用方法一樣，如：選擇器animation-delay:1s;，表示1s之后執(zhí)行該動畫，其默認值也是0。循環(huán)播放次數(shù)animation-iteration-count該屬性用來指定元素播放動畫的循環(huán)次數(shù)。語法為：選擇器animation-iteration-count:number;，number的取值可以是1，2，.等數(shù)字，默認值為”

60、1”,如果需要無限循環(huán)，擇取值為“infinite”。07 css3中的動畫-animation動畫動畫播放方向animation-direction該屬性用來指定元素動畫播放的方向，有2個取值，分別為normal、alternate簡寫屬性animation語法為：animation:animation-name,animation-duration/animation-timing-function/;具體的用法如：animation:pic 2s ease-in 1s infinite alternate; ENDTHANK YOU人機交互界面設(shè)計第六章網(wǎng)頁布局基礎(chǔ)目錄01 盒子模型02