《網頁設計與制作教程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頁，還剩20頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目四

創(chuàng)建古詩文網項目簡介用CSS+DIV進行網頁布局與設置樣式是兩個不同的思維過程，CSS樣式主要是實現各種具體效果，而網頁布局更關注的是整個頁面的呈現效果。通過前面的學習，了解到DreamweaverCC2015支持HTML5語言。本項目中還將引入HTML5中的新語義元素來定義Web頁面的不同部分。項目目標本項目以《古詩文網》網站首頁頁面設計為例，初步掌握基于HTML5的CSS+DIV的頁面布局方法。了解網頁標準化的基本思想，理解CSS盒模型，學會使用HTML5中的新語義元素定義Web頁面的不同部分，掌握CSS+DIV進行網頁布局的一般流程和方法。工作任務根據《古詩文網》首頁頁面設計與制作的要求，基于工作過程，以任務驅動的方式，掌握基于HTML5的CSS+DIV的頁面布局方法。（1）構建網頁結構（2）定義網頁布局樣式任務一構建網頁結構通過創(chuàng)建《古詩文網》網站首頁結構的操作實踐來掌握基于HTML5構建網頁結構的方法：1、建立站點2、構建首頁結構；

任務目標按照網站需求分析，建立站點文件夾，并在DreamweaverCC2015中設計制作網站首頁頁面結構。知識準備知識準備一了解Web標準化

知識準備二認識DIV和DIV布局知識準備三理解CSS盒模型知識準備四認識HTML5中結構化元素任務實施步驟一

創(chuàng)建站點和首頁步驟二

構建網頁結構任務二

定義網頁布局樣式通過以下七個步驟的操作實踐來掌握DIV+CSS布局的一般流程和方法，完成《古詩文網》首頁的制作：1．定義網頁基本屬性；2．定義標題塊樣式；3．定義導航樣式；4．布局main、aside和footer；5．制作main部分；6．定義aside樣式；7．定義腳注塊樣式。任務目標構建出網頁的基本結構以后，就可以開始進行網頁布局。通過本任務掌握網頁布局的一般流程和方法，熟悉網頁布局中的常用CSS樣式屬性，初步掌握float屬性的使用技巧。知識準備知識準備一了解CSS的繼承性知識準備二

熟悉網頁布局中的常用CSS樣式屬性Width/Height（寬度/高度）Border（邊框）Margin（外邊距）知識準備三

網頁布局的基本形式自然布局浮動布局定位布局知識準備四float屬性任務實施步驟一定義網頁基本屬性1．設置頁面屬性。2．定義Div#container樣式。步驟二

構建網頁結構步驟二

定義網頁標題樣式步驟三

定義導航樣式步驟四

布局main、as

溫馨提示

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

評論

0/150

提交評論