版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
第八章設置DIV+CSS布局
隨著Web
2.0網(wǎng)站的盛行,符合Web標準的設計成為目前網(wǎng)站設計所要遵循的首要原則。而基于Web標準的網(wǎng)站設計其核心在于實現(xiàn)內(nèi)容與表現(xiàn)相分離,DIV+CSS恰恰是目前比較主流的一種網(wǎng)頁布局方法,它有別于傳統(tǒng)的表格布局模式,可以真正實現(xiàn)這一核心標準。本章即是基于“DIV+CSS”技術(shù),使用Dreamweaver來實現(xiàn)“個人網(wǎng)站”的設計與制作。知識目標(1)掌握Web的標準。(2)了解XHTML的基礎。(3)掌握DIV的概念。(4)掌握CSS語法規(guī)則。(5)了解模板和庫的概念和應用。學習完本章后,學生應當能夠依據(jù)前期的網(wǎng)站策劃及效果圖完成個人網(wǎng)站的DIV+CSS布局,包括:(1)學會利用“DIV+CSS”完成頁面的布局,靈活運用該技術(shù)的布局思路及方法。(2)學會使用“模板和庫”進行網(wǎng)頁的布局。第一節(jié)個人網(wǎng)站首頁的制作本節(jié)的目標是依據(jù)“個人網(wǎng)站”的首頁效果圖,使用DIV+CSS技術(shù),完成網(wǎng)站首頁的制作一、繪制首頁結(jié)構(gòu)布局草圖根據(jù)首頁效果圖,利用Photoshop軟件繪制首頁的結(jié)構(gòu)布局草圖,效果如圖8-2所示。對照布局草圖,首頁中各個版塊的內(nèi)容如下:(1)top,主要放置LOGO或者配套文字。(2)lan,設置歡迎語樣式。(3)leftblank,設置區(qū)塊樣式。(4)pic,主要放置個人相冊圖片展示。(5)rightdiv,放置常用的鏈接文字及首頁導航條。(6)midmainleft,放置美文欣賞及一些標簽文字鏈接。(7)xian,放置版塊分割線。(8)rightcontent,放置音樂推薦及圈子好友推薦。(9)bottom,放置網(wǎng)頁的版權(quán)信息。二、新建站點新建個人網(wǎng)站的站點“gerenwangzhan”,創(chuàng)建好的站點效果如圖8-3所示。三、制作頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中設置頁面類型為“CSS”,點擊“創(chuàng)建”按鈕,如圖8-4所示。(2)打開文件“Default.html”,切換到“代碼”視圖,在<head>和</head>之間輸入代碼:<link
href=″css/Default.css″
rel=″stylesheet″
type=″text/css″/>用于實現(xiàn)將CSS樣式文件鏈接到當前的網(wǎng)頁。(3)在新建的CSS文件中輸入代碼:(4)切換到“Default.html”的代碼視圖,在<body>和</body>之間添加div,代碼如下:(5)切換到CSS文件,繼續(xù)添加CSS樣式,代碼如下:(6)繼續(xù)在網(wǎng)頁的代碼視圖下添加代碼,具體如下:<div
class=″leftblank″></div><div
class=″pic″><a
href=″#″><img
src=″images/001.jpg″
border=″0″></a></div><div
class=″rightdiv″><ul><li
onmouseover=″this.style.background='url(imageslanli.jpg)
no-repeat'″onmouseout=″this.style.background
='url(images/linews
jpg)
no-repeat'″><a
href=″#″>圈子好友</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)no-repeat'″><a
href=″#″>美文欣賞</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews.jpg)
no-repeat'″><a
href=″#″>個人相冊</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)
no-repeat'″><a
href=″#″>音樂推薦</a></li></ul></div>(7)切換到CSS文件,新建自定義樣式“.leftblank”“.pic”“.rightdiv”“.rightdiv
li”,代碼如下:.leftblank{
width:36px;/*設置區(qū)塊的寬度*/
height:169px;/*設置區(qū)塊的高度*/
float:left;/*設置區(qū)塊浮動方向為左*/
background:#000;
/*設置區(qū)塊背景色*/}.pic{
padding-left:70px;/*設置區(qū)塊左邊距為70像素*/
float:left;
width:542px;
height:169px;}.rightdiv{padding-top:7px;
padding-left:l0px;
width:245px;
height:162px;
float:left;
background:#cac75e;
}
.rightdiv
li{
font-family:″黑體″;/*設置字體*/
padding-top:3px;/*設置上邊距為3像素*/
font-size:15px;/*設置字號*/
font-weight:bold;/*設置字體加粗*/
line-height:
31px;
padding-left:50px;
padding-bottom:5px;
background:url(images/linews.jpg)
no-repeat;/*設置背景色為圖片,其相對路
徑為images/linews
jpg*/
width:188px;
height:31px;第二節(jié)
個人網(wǎng)站子頁面的制作一、創(chuàng)建網(wǎng)站與頁面模板(1)打開網(wǎng)站的首頁文件“Default.html”,執(zhí)行“文件|另存為模板”命令,將網(wǎng)站保存為模板文件Default.dwt,如圖8-12所示。(2)刪除并調(diào)整模板文件中的Flash動畫所在的div中的部分代碼,修改后的代碼如圖8-13所示。(3)將光標定位在“<td></td>”中間,在菜單欄選擇“插入”→“模板對象”→“可編輯區(qū)域”,在彈出的對話框中點擊“確定”按鈕,即可插入可編輯區(qū)域,名稱為EditRegion3,二、通過模板生成“店鋪公告”頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中選擇“模板中的頁”選項,然后在站點列表中選擇站點“gerenwangzhan”,接著選擇模板文件“Default”,點擊“創(chuàng)建”按鈕即可基于模板創(chuàng)建網(wǎng)頁,并將頁面保存為mwxs.html,(2)將光標定位至網(wǎng)頁文件“mwxs.html”的可編輯區(qū)域中,輸入如下代碼:<div
class=″middl″>
<div
class=″woman″>治愈系圖片欣賞</div>
<div
class=″contentl″></div></div><div
class=″xianl″></div><div
class=″rightct″><div
class=″rightcontenttitle″>查看更多美文</div><div
class=″rightlist″></div>打開樣式表文件“Default.css”,添加樣式文件,具體代碼如下:.xianl{
background:
url(images/rightbian.jpg);
width:22px;
float:left;
height:
300px;
}.rightct{
padding-left:15px;
width:310px;
float:left;
height:300px;
}.middl{
width:521px;
height:300px;
float:left;
padding-left:106px;}</div>.contentl{
line-height:18px;
float:left;
height:146px;
width:518px;
padding-left:0px;
}.litlepicl{
width:124px;
height:124px;
float:left;
border:0px;
margin-left:
2px;
border:1px
#000
solid;
}(3)切換到網(wǎng)頁文件的代碼窗口,在“<div
class=″contentl″></div>”之間嵌套代碼,具體如下:<div
class=″litlepicl″><a
href=″#″><img
src=″images/010.jpg″border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″images/007.jpg″
border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″im
溫馨提示
- 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. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025項目法律服務合同
- 2023八年級英語下冊 Unit 4 Why don't you talk to your parents Section A 第1課時（1a-2d）說課稿 （新版）人教新目標版
- 7多元文化 多樣魅力《多彩的世界文化》（說課稿）-統(tǒng)編版道德與法治六年級下冊
- 2025合同模板承包合同書（車輛）范本
- 2025中外合資公司勞動合同協(xié)議書
- 直飲水施工方案
- 食堂餐廳售賣設備施工方案
- 2024年春七年級語文下冊 第4單元 13 葉圣陶先生二三事說課稿 新人教版
- 《1 信息并不神秘》說課稿-2023-2024學年華中師大版信息技術(shù)三年級上冊
- Unit 2 Expressing yourself Part A Lets spell（說課稿）-2024-2025學年人教PEP版（2024）英語三年級下冊001
- SWITCH塞爾達傳說曠野之息-1.6金手指127項修改使用說明教程
- 2022-2023學年廣東省佛山市順德區(qū)高三（下）模擬英語試卷
- 節(jié)后復工培訓內(nèi)容五篇
- GB/T 33322-2016橡膠增塑劑芳香基礦物油
- GA 1051-2013槍支彈藥專用保險柜
- 某水毀公路維修工程施工方案
- 家庭病房工作制度和人員職責
- 建設工程監(jiān)理合同示范文本GF-2018-0202
- 2022質(zhì)檢年終工作總結(jié)5篇
- 江蘇省中等職業(yè)學校學業(yè)水平考試商務營銷類（營銷方向）技能考試測試題
- 國際商務談判雙語版課件(完整版)
評論
0/150
提交評論