0301--靜態(tài)網(wǎng)頁制作(dreamweaver)-以“個(gè)人-在線瀏覽
2025-06-03 08:22本頁面
【正文】 年 月 日13學(xué)習(xí)單元六 以“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)授課內(nèi)容：以“個(gè)人主頁”項(xiàng)目為驅(qū)動(dòng)的階段復(fù)習(xí)學(xué)時(shí)：2學(xué)時(shí)（90分鐘）教學(xué)目標(biāo)：知識(shí)目標(biāo)：178。 強(qiáng)化樣式的綜合應(yīng)用178。 掌握浮動(dòng)布局和定位技能目標(biāo)：178。 靈活運(yùn)用盒子模型靈活設(shè)計(jì)網(wǎng)頁布局178。 培養(yǎng)學(xué)生團(tuán)隊(duì)合作意識(shí)178。授課內(nèi)容提綱： 復(fù)習(xí)舊課導(dǎo)出階段項(xiàng)目課程回顧（1）教師綜述 在前五個(gè)學(xué)習(xí)單元的課程中，我們分階段的以“計(jì)算機(jī)技術(shù)系網(wǎng)站”首頁項(xiàng)目為驅(qū)動(dòng)完成了網(wǎng)站首頁的制作，對(duì)于網(wǎng)站設(shè)計(jì)有了初步的認(rèn)識(shí)和了解，經(jīng)過階段學(xué)習(xí)，同學(xué)們已經(jīng)具備了獨(dú)立設(shè)計(jì)和制作網(wǎng)站首頁的能力。l 常用的布局方式有浮動(dòng)和定位。 教師簡(jiǎn)述本項(xiàng)目單元的重點(diǎn)、難點(diǎn)，讓學(xué)生有帶著任務(wù)、有重點(diǎn)跟隨老師授課。二、項(xiàng)目實(shí)施 教師簡(jiǎn)述項(xiàng)目單元教學(xué)目標(biāo)和教學(xué)內(nèi)容，明確本項(xiàng)目單元教學(xué)重點(diǎn)和難點(diǎn)教學(xué)目標(biāo)l 通過“個(gè)人主頁”真實(shí)完整網(wǎng)站首頁的制作，對(duì)知識(shí)進(jìn)行階段復(fù)習(xí)和綜合應(yīng)用l 明確網(wǎng)頁結(jié)構(gòu)與表現(xiàn)分離的意義l 強(qiáng)化盒子模型的應(yīng)用l 熟練應(yīng)用CSS+DIV技術(shù)對(duì)頁面進(jìn)行布局l 能夠通過浮動(dòng)或定位實(shí)現(xiàn)頁面的布局l 培養(yǎng)學(xué)生的團(tuán)隊(duì)合作意識(shí)教學(xué)內(nèi)容網(wǎng)站設(shè)計(jì)流程規(guī)劃網(wǎng)站目錄結(jié)構(gòu)利用HTML基本標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)利用浮動(dòng)或定位設(shè)計(jì)頁面布局（重點(diǎn)和難點(diǎn)）通過CSS樣式修飾（重點(diǎn)） 進(jìn)行網(wǎng)站測(cè)試（一）工作任務(wù)一：設(shè)計(jì)和制作“個(gè)人主頁”效果圖【任務(wù)背景】某同學(xué)要設(shè)計(jì)一個(gè)“個(gè)人主頁”，現(xiàn)已由網(wǎng)站策劃人員先期分析了網(wǎng)站的目的、功能定位及內(nèi)容規(guī)劃。【任務(wù)要求】根據(jù)與用戶溝通和交流做好的需求分析，設(shè)計(jì)和制作“個(gè)人主頁”效果圖。【任務(wù)實(shí)施】在PS中設(shè)計(jì)“個(gè)人主頁”效果圖，具體實(shí)現(xiàn)過程不做詳解，如下圖1所示：圖1 頁面效果圖（二）工作任務(wù)二：分析“個(gè)人主頁”首頁整體結(jié)構(gòu)【任務(wù)背景】某學(xué)院計(jì)算機(jī)技術(shù)系要建立本系部網(wǎng)站，現(xiàn)已由網(wǎng)站策劃人員先期分析了網(wǎng)站的目的、功能定位及內(nèi)容規(guī)劃，并根據(jù)功能定位先行設(shè)計(jì)了網(wǎng)站效果圖?！救蝿?wù)分析】效果圖導(dǎo)出之后，我們就可以使用這些素材在Dreamweaver著手進(jìn)行布局了，現(xiàn)在的布局技術(shù)包括表格布局和Web標(biāo)準(zhǔn)布局，也就是俗稱的DIV+CSS布局，本項(xiàng)目我們主要使用Web標(biāo)準(zhǔn)來布局頁面。圖2 頁面的布局形式(2) 打開在上一章節(jié)中已經(jīng)創(chuàng)建好的名為grzyWeb的站點(diǎn)。(4) 創(chuàng)建網(wǎng)站首頁，命名為“”，將其保存在站點(diǎn)根目錄下。(6) 將“”和網(wǎng)頁文件“”進(jìn)行了關(guān)聯(lián)。div id=top/divdiv id=nav/divdiv id=divMain div id=divLeft/div div id=divRight/div（三）工作任務(wù)三：制作“個(gè)人主頁”首頁頁眉【任務(wù)背景】在上一工作任務(wù)中，我們已經(jīng)實(shí)現(xiàn)了本項(xiàng)目DIV框架結(jié)構(gòu)布局，但是效果離我們要實(shí)現(xiàn)的網(wǎng)頁布局效果還相差甚遠(yuǎn)，僅僅依靠DIV標(biāo)簽是無法實(shí)現(xiàn)頁面布局的，我們必須要配合CSS來對(duì)網(wǎng)站的各個(gè)部分進(jìn)行更加精確的控制。【任務(wù)分析】完成ID名稱為top的DIV區(qū)塊的CSS設(shè)置。body{ padding:0。 background:url(../images/)。 /*將頁面中的三個(gè)大區(qū)塊設(shè)置水平居中*/ }banner{ width:600px。 }(2) 在“”中，在網(wǎng)頁的主題部分加入頁眉部分的圖片“”文件?！救蝿?wù)分析】完成ID名稱為nav的DIV區(qū)塊的CSS設(shè)置。【任務(wù)詳解】(1) 在名稱為“nav”的DIV結(jié)構(gòu)中輸入以下代碼div id=nav ul lia href=首頁/a/li lia href=心情日記/a/li lia href=Free/a/li lia href=一起走到/a/li lia href=從明天起/a/li lia href=紙飛機(jī)/a/li lia href=下一站/a/li /ul
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1