資源簡介

(共24張PPT)
網頁的數據呈現
01.
02.
03.
目錄
網頁數據呈現的方式
CSS樣式
網頁數據的交互方式
04.
樣式表的基本結構
1
網頁數據呈現的方式
呈現方式
網站為了保證網頁風格的整體性,在制作過程中往往要求文本、色彩等樣式要協調統一，可以對網頁數據各種呈現的效果進行樣式的設置。
HTML定義了網頁的內容結構，即網頁呈現的文字、圖文、視頻等內容，用HTML設計網頁外觀樣式時需要使用大量的標記，代碼相對多而復雜，使用CSS可以有效地對網頁中數據的布局、字體和背景等效果實現更精確的控制，同時可以將網頁的結構和格式分離，實現解耦比如對網站所有頁面的風格可以應用一個CSS，只要修改這個CSS文件就可以更新所有頁面的風格樣式，既提高了更新和維護的效率，同時又縮減了網頁的代碼，提高了網頁的瀏覽速度。
文字圖像數據
視頻數據
靜態頁面
01
靜態頁面是指在網頁上顯示固定內容的頁面，如文本、圖片、視頻等。
03
靜態頁面的缺點是內容更新需要手動修改，無法實現動態交互。
02
靜態頁面的優點是加載速度快，易于維護和管理。
04
靜態頁面通常用于展示企業介紹、產品介紹、新聞資訊等固定內容。
動態頁面
動態頁面：使用JavaScript、CSS等編程語言實現頁面元素的動態效果
01
優勢：提高用戶體驗，增加頁面互動性
02
常見動態效果：滾動、滑動、彈出、展開等
03
應用場景：網站首頁、產品介紹、新聞列表等
04
響應式設計
響應式設計是一種網頁設計方法，可以根據不同的設備屏幕尺寸和分辨率自動調整布局和樣式。
01
響應式設計的優點包括：提高用戶體驗，降低開發成本，提高搜索引擎排名等。
02
響應式設計的實現方法包括：使用CSS媒體查詢，使用JavaScript和CSS框架等。
03
響應式設計的挑戰包括：處理不同設備的交互方式，處理不同設備的性能問題等。
04
2
CSS樣式
認識CSS樣式
CSS全稱為層疊樣式表 (Cascading Style Sheets)，也是一種標識語言，CSS樣式可以方便地設置網頁效果如網頁中文字的字號、字體、顏色、位置以及圖片的大小等，都涉及網頁顯示信息的樣式。如圖8-1和圖8-2所示，是添加了樣式表的網頁效果的前后對比圖。
圖8-1 未加樣式的HTML樣式
圖8-2 添加樣式的HTML樣式
添加樣式代碼
圖8-2所示的網頁是在標簽之前添加了以下cSS字體、顏色等樣式的代碼。

知識鏈接
級聯樣式表級聯樣式表 (Cascading Style Sheet，簡稱CSS是由國際組織制定的一套延伸HTML樣式的新標準，用來控制網頁內容的外觀格式，包括版面的精確位置、特定字體和格式，甚至圖像、表格和圖層等的位置和格式，稱為“級聯”的主要原因是支持應用多個樣式表到同一張網頁中。
4
網頁數據的交互方式
鼠標操作
單擊：選擇對象或激活鏈接
雙擊：打開文件或網頁
右鍵單擊：顯示上下文菜單
拖動：移動或復制對象
滾輪：滾動頁面或縮放視圖
鼠標懸停：顯示提示信息或操作按鈕
鼠標手勢：快速執行特定操作，如前進、后退等
鍵盤操作
方向鍵：上下左右移動頁面
空格鍵：滾動頁面
Enter鍵：提交表單
Esc鍵：取消操作
Tab鍵：切換焦點
快捷鍵：如Ctrl+C、Ctrl+V等，實現快速操作
3
2
1
4
5
6
觸摸操作
觸摸屏：通過手指直接觸摸屏幕進行操作
01
滑動操作：通過手指在屏幕上滑動進行翻頁、滾動等操作
02
縮放操作：通過雙指捏合或拉伸進行縮放
03
點擊操作：通過手指點擊屏幕進行選擇、確認等操作
04
長按操作：通過長按屏幕進行更多選項或功能顯示
05
拖拽操作：通過手指拖動屏幕上的元素進行移動或排序
06
謝謝

展開更多......

收起↑