《網頁設計與制作教程HTML+CSS+Bootstrap》課件 項目五創(chuàng)建網站個人博客_第1頁
《網頁設計與制作教程HTML+CSS+Bootstrap》課件 項目五創(chuàng)建網站個人博客_第2頁
《網頁設計與制作教程HTML+CSS+Bootstrap》課件 項目五創(chuàng)建網站個人博客_第3頁
《網頁設計與制作教程HTML+CSS+Bootstrap》課件 項目五創(chuàng)建網站個人博客_第4頁
《網頁設計與制作教程HTML+CSS+Bootstrap》課件 項目五創(chuàng)建網站個人博客_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目五變換的CSS之個人博客

項目簡介

W3C標準提出，網頁主要由三部分組成：結構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。

本項目通過變換的CSS樣式來表現(xiàn)同樣的HTML內容，帶大家完成兩個網頁——“簡約商務風”的個人博客和“中國風”的個人博客。

項目目標

本項目以兩種不同風格的個人博客網頁為例，重點完成如下目標：

1.逐步練習手寫HTML代碼

2.根據(jù)需要設置CSS屬性，并逐步學會手寫CSS代碼

3.深刻理解WEB中的結構和表現(xiàn)相分離的思想

4.理解頁面重構的實現(xiàn)方法——相同的HTML結構，不同的CSS樣式

工作任務

本項目完成兩套不同風格的個人博客網頁，熟練掌握基于HTML5的DIV+CSS的頁面布局方法，并能夠根據(jù)需要進行頁面的重構。

(1)HTML+CSS構建簡約商務風個人博客頁面

(2)重構CSS創(chuàng)建中國風個人博客頁面

任務一個人博客之簡約商務風

網頁整體布局分析圖

任務目標

根據(jù)頁面效果圖和布局分析圖，建立站點文件夾，并在Dreamweaver2021中設計制作網站首頁的HTML結構。并根據(jù)結構分別添加網頁內容和設置相應的CSS樣式，最終達到理想的效果。1.外部樣式表<head><linkhref="mystyle.css"rel="stylesheet"type="text/css"></head>2.內部樣式表<head>

<styletype="text/css">

body{background-image:url("images/back40.gif");}

</style>

</head>3.內聯(lián)樣式<pstyle="color:#333333;margin-left:20px;">這是一個段落</p>

知識準備一在網頁中插入CSS樣式表的幾種方法一個樣式僅僅用于一處時，DIV設置id，CSS選擇器——#id名稱；一個樣式用于多處時，DIV設置class，CSS選擇器——.class名稱；推薦在大范圍的部分用id，小范圍的部分用class。知識準備二DIV+CSS之id與class

知識準備三DIV+CSS命名規(guī)則步驟一創(chuàng)建站點及首頁步驟二構建頁面整體結構

任務實施

任務實施——頁面HTML結構圖

步驟三完成網頁頭部步驟四完成導航菜單

任務實施步驟五完成主體部分側邊欄

任務實施步驟六完成網頁主體部分內容區(qū)

任務實施步驟七完成內容區(qū)三條日志步驟八完成網頁底部

任務實施

任務二個人博客之中國風

根據(jù)兩張頁面效果圖的對比，將任務一中的index1.html網頁另存為index2.html。并附加新的CSS樣式文件，調整相應的CSS樣式，最終達到想要的效果。

任務目標

知識準備一CSS的優(yōu)先級機制1.樣式的優(yōu)先級外部樣式<內部樣式<內聯(lián)樣式2.選擇器的優(yōu)先權步驟一另存網頁及附加新的樣式文件步驟二調整整體CSS樣式步驟三調整網頁

溫馨提示

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

最新文檔

評論

0/150

提交評論