《網(wǎng)頁設計與制作》課件-項目4 創(chuàng)建網(wǎng)頁_第1頁
《網(wǎng)頁設計與制作》課件-項目4 創(chuàng)建網(wǎng)頁_第2頁
《網(wǎng)頁設計與制作》課件-項目4 創(chuàng)建網(wǎng)頁_第3頁
《網(wǎng)頁設計與制作》課件-項目4 創(chuàng)建網(wǎng)頁_第4頁
《網(wǎng)頁設計與制作》課件-項目4 創(chuàng)建網(wǎng)頁_第5頁
已閱讀5頁，還剩74頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

主講教師：項目4創(chuàng)建網(wǎng)頁1.CSS美化網(wǎng)頁示例學習目標完善網(wǎng)頁內(nèi)容1類CSS的使用方法2掌握使用CSS美化網(wǎng)頁的方法3總結(jié)完善網(wǎng)頁內(nèi)容01類CSS的使用方法02掌握使用CSS美化網(wǎng)頁的方法03提示背景圖像與網(wǎng)頁內(nèi)容和主題相配；使用CSS變量和繼承來減少重復代碼，提高代碼的可維護性；確保文本顏色和背景顏色有足夠的對比度。思考題為了實現(xiàn)網(wǎng)頁中字體的加粗顯示，需要設置的字體屬性是（）font-sizefont-weightfont-stylefont-family100%D2.CSS樣式和

優(yōu)先級項目4創(chuàng)建網(wǎng)頁主講教師：概念CSS（層疊樣式表）是能將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。打開不需要編譯，直接由瀏覽器解釋執(zhí)行。作用對頁面的HTML元素和其他效果實現(xiàn)更加精準的控制。CSS樣式和優(yōu)先級學習目標CSS四種樣式1CSS優(yōu)先級2CSS四種樣式1.行內(nèi)樣式（InlineStyles）直接在HTML元素的style屬性中定義CSS樣式。例如：<pstyle="color:red;">行內(nèi)樣式。</p>優(yōu)點：快速應用樣式到單個元素。缺點：難以維護和重用樣式。CSS四種樣式2.內(nèi)部樣式表（InternalStyleSheets）例如：<head><style>p{color:blue;}</style></head>優(yōu)點：適用于單個網(wǎng)頁的樣式定義。缺點：不適用于多個網(wǎng)頁的樣式共享。CSS四種樣式3.外部樣式表（ExternalStyleSheets）例如：<head><linkhref="styles.css"rel="stylesheet"type="text/css"></head>styles.css文件內(nèi)容：p{color:green;}優(yōu)點：樣式可以跨多個網(wǎng)頁重用和維護。缺點：需要額外的文件請求，可能影響頁面加載速度（但可以通過緩存優(yōu)化）。CSS四種樣式4.導入樣式表（ImportingStyleSheets）在一個CSS文件中使用@import規(guī)則導入另一個CSS文件。例如：@importurl('reset.css');p{color:purple;}優(yōu)點：可以在一個文件中集中管理多個CSS文件。缺點：@import必須在CSS文件的最開始部分，且可能增加頁面加載時間（因為需要額外的HTTP請求，盡管可以合并為一個文件來優(yōu)化）。CSS優(yōu)先級來源順序（OrderofOrigin）!important聲明具有最高優(yōu)先級，但應謹慎使用以避免樣式?jīng)_突。重要性（Importance）內(nèi)聯(lián)樣式>ID選擇器>類選擇器、屬性選擇器、偽類>元素選擇器、偽元素。例如：#header（ID選擇器）比.nav（類選擇器）具有更高的特異性。選擇器特異（Specificity）?如果特異性相同，則后定義的樣式會覆蓋先定義的樣式（后者優(yōu)先）。瀏覽器默認樣式<用戶代理樣式表<作者樣式表（即你的CSS文件）<讀者樣式表（用戶自定義樣式，如瀏覽器擴展）。層疊順序（CascadingOrder）總結(jié)CSS四種樣式1CSS優(yōu)先級2提示盡可能使用外部樣式表； 使用ID選擇器時應謹慎；創(chuàng)建更靈活和可重用的樣式；了解并應用CSS優(yōu)先級規(guī)則。項目4創(chuàng)建網(wǎng)頁主講教師：3.插入圖像和視頻學習目標圖像文件類型1圖像主要屬性2視頻文件類型3視頻主要屬性4實例演示5圖像文件類型GIF（.gif）適用于照片和復雜圖像，支持有損壓縮，文件大小相對較小。JPEG（.jpg）適用于需要透明背景的圖像，支持無損壓縮，文件大小可能較大。PNG（.png）?適用于簡單的動畫和具有有限顏色的圖像，支持透明背景但顏色深度較低?；赬ML的矢量圖像格式，適用于縮放而不損失質(zhì)量的圖像，例如圖標和圖形。SVG（.svg）在網(wǎng)頁設計中，常用的圖像文件類型包括：圖像主要屬性源文件（Src）01指定圖像的路徑和文件名。替換（Alt）02為圖像提供文本描述，當圖像無法加載時顯示，有助于SEO和可訪問性。圖像主要屬性指定圖像的路徑和文件名。源文件（Src）為圖像提供文本描述，當圖像無法加載時顯示，有助于SEO和可訪問性。替換（Alt）網(wǎng)頁中視頻的格式AVI是將語音和影像同步組合在一起的文件格式。主要應用在多媒體光盤上，用來保存電視、電影等各種影像信息。SWF是Macromedia（現(xiàn)已被ADOBE公司收購）公司的動畫設計軟件Flash的專用格式，被廣泛應用于網(wǎng)頁設計動畫制作等領域，SWF文件通常也稱Flash文件。網(wǎng)絡上常用的文件格式有AVI（*.av）和SWF（*.swf）格式等?？偨Y(jié)網(wǎng)頁中圖像的格式1圖像的主要屬性2網(wǎng)頁中視頻的格式3插入圖像和視頻4思考題想要在網(wǎng)頁中插入Flash對象，應選擇的“媒體”選項是（）SWFFLVShockwave

Activex100%A4.超鏈接的分類和錨點鏈接項目4創(chuàng)建網(wǎng)頁主講教師：學習目標超鏈接的分類1錨點鏈接的概念2創(chuàng)建錨點鏈接的方法3超鏈接的分類目標類型01外部鏈接02內(nèi)部鏈接03錨點鏈接04電子郵件鏈接05文件鏈接超鏈接的分類1.外部鏈接：指向其他網(wǎng)站或資源的鏈接，通常用于提供額外信息或參考。超鏈接的分類2.內(nèi)部鏈接在同一網(wǎng)站內(nèi)，指向其他頁面的鏈接，有助于用戶在網(wǎng)站內(nèi)導航。超鏈接的分類3.錨點鏈接在同一頁面或不同頁面間，指向特定位置的鏈接，通常用于創(chuàng)建頁面內(nèi)的跳轉(zhuǎn)或“返回頂部”功能。超鏈接的分類4.電子郵件鏈接允許用戶通過點擊鏈接直接發(fā)送電子郵件的鏈接。超鏈接的分類5.文件鏈接指向本地或網(wǎng)絡上的文件（如PDF、Word文檔等）的鏈接。錨點鏈接錨點鏈接是指頁面里的某個位置的鏈接，也稱為書簽鏈接。允許用戶在同一頁面或不同頁面間快速跳轉(zhuǎn)到頁面中指定位置的內(nèi)容。它們通常用于長文檔或具有多個部分的網(wǎng)頁，以提高用戶體驗和導航效率。組成：命名錨記和建立錨點鏈接。錨點鏈接1.在同一頁面內(nèi)創(chuàng)建錨點鏈接：錨點鏈接2.在不同頁面間創(chuàng)建錨點鏈接：超鏈接的分類外部鏈接、內(nèi)部鏈接、錨點鏈接、電子郵件鏈接、文件鏈接。錨點鏈接的概念命名錨記和建立錨點鏈接。創(chuàng)建錨點鏈接同一頁面和不同頁面的錨點鏈接。總結(jié)思考題請創(chuàng)建一個錨點鏈接：假設我們有兩個頁面：index.html和about.html。在about.html中，我們希望用戶能夠跳轉(zhuǎn)到“我們的團隊”部分。5.圖像和電子郵件超鏈接項目4創(chuàng)建網(wǎng)頁主講教師：學習目標圖片超鏈接的概念1創(chuàng)建圖片超鏈接的方法2電子郵件超鏈接的概念3創(chuàng)建電子郵件超鏈接4圖像超鏈接的概念圖像超鏈接：是指在網(wǎng)頁中，將圖片作為鏈接的一部分，當用戶點擊圖片時，會跳轉(zhuǎn)到指定的網(wǎng)頁或頁面內(nèi)的某個位置。作用：圖像超鏈接不僅美觀，還能提高用戶的點擊意愿和導航效率。電子郵件超鏈接電子郵件超鏈接：使用“mailto:”協(xié)議，后跟電子郵件地址。例如，mailto:example@當用戶點擊該鏈接時，系統(tǒng)會提示用戶選擇郵件客戶端并填寫郵件內(nèi)容?？偨Y(jié)圖像和電子郵件超鏈接的概念1圖像超鏈接的創(chuàng)建2設置圖像熱區(qū)3創(chuàng)建電子郵件超鏈接4高效網(wǎng)頁的關鍵保持代碼的整潔性和規(guī)范性?？偨Y(jié)思考題為網(wǎng)頁創(chuàng)建圖像超鏈接和電子郵件超鏈接。6.文本超鏈接項目4創(chuàng)建網(wǎng)頁主講教師：學習目標超鏈接的概念、組成1插入超鏈接的方式2目標打開方式3鏈接路徑4超鏈接的概念、組成超鏈接是指從一個網(wǎng)頁指向一個目標的鏈接關系。目標另一個網(wǎng)頁相同網(wǎng)頁上的不同位置一張圖片一個電子郵件地址一個文件一個應用程序等超鏈接的概念、組成鏈接源：網(wǎng)頁中用來作為超鏈接的鏈接對象，一段文本或一張圖片。超鏈接的概念、組成鏈接目標：鏈接到的其他資源。目標另一個網(wǎng)頁相同網(wǎng)頁上的不同位置一張圖片一個電子郵件地址一個文件一個應用程序等目標打開方式目標打開方式_self：在當前窗口中打開鏈接（默認）。_blank：在新窗口中打開鏈接。_parent：在父框架中打開鏈接。_top：在整個窗口中打開鏈接，忽略所有框架。鏈接路徑鏈接路徑是指鏈接目標的URL地址。絕對路徑相對路徑鏈接路徑1.絕對路徑提供鏈接目標端點所需的完整URL地址。它適用于不同服務器之間的網(wǎng)絡連接，但測試鏈接時需要在Internet服務器上進行。鏈接路徑2.相對路徑用于在本地站點中的文檔間建立鏈接。當鏈接源和鏈接目標在同一目錄下時，只需指出鏈接目標的文件名即可?？偨Y(jié)目標打開方式鏈接源和鏈接目標超鏈接的概念、組成插入--超級鏈接插入方式?_self、_blank、_parent、_top絕對路徑和相對路徑鏈接路徑思考題請你創(chuàng)建兩個超鏈接，“目標”選項分別設置為“_self”和“_blank”，并用瀏覽器分別打開這兩個超鏈接，觀察瀏覽器的窗口有何不同？7.制作導航欄項目4創(chuàng)建網(wǎng)頁主講教師：示例網(wǎng)站導航的作用內(nèi)容架構(gòu)的體現(xiàn)01易用性評價和用戶體驗02提升用戶體驗03對用戶進行引導和消費轉(zhuǎn)化04學習目標水平導航的制作1超鏈接的建立24種偽類樣式34種偽類樣式a:hover未訪問過的鏈接。a:link已訪問過的鏈接。a:visited?鼠標懸停在鏈接上的狀態(tài)。鏈接被點擊時的狀態(tài)。a:active4種偽類樣式a:link{color:blue;/*未訪問鏈接的顏色*/text-decoration:none;/*移除下劃線*/}a:visited{color:purple;/*已訪問鏈接的顏色*/}4種偽類樣式a:hover{color:red;/*鼠標懸停時的顏色*/text-decoration:underline;/*添加下劃線*/}a:active{color:orange;/*點擊時的顏色*/}總結(jié)水平導航欄的制作1建立超鏈接24種偽類樣式3提示使用偽類樣式來增強用戶體驗，但不要過度使用，以免分散用戶的注意力?？紤]到可訪問性，確保鏈接在不同狀態(tài)下都有足夠的對比度，以便所有用戶都能輕松識別。思考題當鼠標指針移動到超鏈接上時樣式發(fā)生變化，需要設置（

）超鏈接偽類。linkvisitedhover

activex100%C主講教師：項目4創(chuàng)建網(wǎng)頁8.制作基本網(wǎng)頁制作基本網(wǎng)頁遵守結(jié)構(gòu)、欄目、風格的設計習慣；制作有個性、有特色、有吸引力的網(wǎng)站。學習目標利用div+CSS設計布局1在div標簽中嵌套div標簽2創(chuàng)建和使用CSS樣式3總結(jié)利用div+CSS設計布局01在div標簽中嵌套div標簽02創(chuàng)建和使用CSS樣式03提示使用Div標簽和CSS樣式可以創(chuàng)建靈活且響應式的網(wǎng)頁布局。思考題在CSS中，類樣式名稱前的標記符號是（）#.:;100%B項目4創(chuàng)建網(wǎng)頁主講教師：9.制作豐富多彩的網(wǎng)頁學習目標音頻文件類型1添加背景音樂方法2插入多媒體對象3屬性具體說明4音頻文件類型MIDI（.mid）是Windows操作系統(tǒng)的錄音文件格式，音質(zhì)好、體積大，存儲語音數(shù)據(jù)。WAV（.wav）存儲音樂、主流音頻格式。MP3（.mp3）?電子樂器演奏音樂

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論