web網(wǎng)頁設(shè)計(jì)與制作實(shí)習(xí)報(bào)告.doc

網(wǎng)頁設(shè)計(jì)與制作實(shí) 驗(yàn) 報(bào) 告 學(xué)生姓名班級(jí)學(xué)號(hào)指導(dǎo)教師文 志 華2015.5.23實(shí)驗(yàn)一 簡(jiǎn)單網(wǎng)頁制作一、實(shí)驗(yàn)?zāi)康?熟悉Dreamweaver軟件的操作界面。2掌握建立本地站點(diǎn)的方法。3掌握簡(jiǎn)單網(wǎng)頁制作方法。4掌握超鏈接的建立方法。三、操作步驟1創(chuàng)建“潛水俱樂部”站點(diǎn)（1）在D盤新建文件夾，命名為shiyan1；（2）將images文件夾和gallery文件夾復(fù)制到中shiyan1中；（3）啟動(dòng)Dreamweaver，使用“站點(diǎn)新建站點(diǎn)”命令創(chuàng)建站點(diǎn)。2制作“俱樂部首頁”。（1）新建網(wǎng)頁。（2）使用“文件保存”命令保存網(wǎng)頁，命名為index.html。（3）在文檔工具欄上設(shè)置網(wǎng)頁標(biāo)題“泡泡潛水俱樂部歡迎你”。（4）從“文本.txt”中將首頁的相關(guān)文字粘貼到網(wǎng)頁中。（5）設(shè)置一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、項(xiàng)目列表、編號(hào)列表。（6）插入圖像。（7）在Copyright后插入版權(quán)符號(hào)。（8）在電話號(hào)碼之間插入半角空格。（9）在電子郵箱地址上建立超鏈接，mailto: vipBubbleU。（10）選中網(wǎng)頁內(nèi)容，然后單擊“插入Div標(biāo)簽”按鈕，分別插入header、navigation、mainContent、footer共4個(gè)Div。（11）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。四.實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)二 XHTML語言一、實(shí)驗(yàn)?zāi)康?掌握XHTML 語法。2掌握XHTML標(biāo)記及屬性。3掌握XHTML 標(biāo)記校驗(yàn)的方法。二、實(shí)驗(yàn)內(nèi)容制作“學(xué)校主頁-新聞中心-學(xué)校新聞-校領(lǐng)導(dǎo)赴包裝設(shè)計(jì)藝術(shù)學(xué)院調(diào)研”的網(wǎng)頁校領(lǐng)導(dǎo)赴包裝設(shè)計(jì)藝術(shù)學(xué)院調(diào)研瀏覽：2827次 日期：2015-03-21三、操作步驟1）創(chuàng)建站點(diǎn)（1）在D盤新建文件夾，命名為shiyan2；（2）將“文本.txt”和images文件夾復(fù)制到中shiyan2中；2）用記事本打開“文本.txt”。3）選擇“文件 | 另存為”命令，將文件另存為shiyan2.html。4）在網(wǎng)頁中添加XHTML標(biāo)記和屬性。實(shí)驗(yàn)標(biāo)題 字體黑體 藍(lán)色40px 日期 字體宋體 灰色 大小12px 正文 字體楷體 大小14px5）用瀏覽器打開，并修改發(fā)現(xiàn)的錯(cuò)誤。四、實(shí)驗(yàn)制作結(jié)果實(shí)驗(yàn)三 導(dǎo)航欄制作一、實(shí)驗(yàn)?zāi)康?掌握垂直導(dǎo)航條的制作方法。2掌握水平導(dǎo)航條的制作方法。二、實(shí)驗(yàn)內(nèi)容制作學(xué)校樣式的導(dǎo)航條。三、操作步驟導(dǎo)航欄制作body,div,ul,li,h1,h2,h3,h4,h5,h6margin:0px;padding:0px;#navwidth:800px;height:51px;margin:100px auto;background:url(nav_bg.jpg) repeat-x;#nav ullist-style-type:none;#nav ul lifloat:left;width:100px;height:51px;background:url(nav_01.jpg) no-repeat right center;#nav ul li adisplay:block;width:100px;height:51px;line-height:51px;text-align:center;color:#ffffff;text-decoration:none;#nav ul li a:hoverwidth:100px;height:51px;background:url(nav_03.jpg) no-repeat; 學(xué)校概況 學(xué)科建設(shè) 科學(xué)研究 師資隊(duì)伍 教學(xué)管理 招生就業(yè) 對(duì)外交流 學(xué)校首頁 四、實(shí)驗(yàn)制作結(jié)果圖實(shí)驗(yàn)四 應(yīng)用背景圖像一、實(shí)驗(yàn)?zāi)康?掌握CSS背景（background）屬性。2掌握設(shè)置背景圖像位置的方法。3掌握使用背景圖像替換文本的方法。4掌握使用背景圖像制作圓角框的方法。二、實(shí)驗(yàn)內(nèi)容1制作圓角框。2制作泡泡俱樂部首頁。三、實(shí)驗(yàn)步驟1制作圓角框。（1）創(chuàng)建站點(diǎn)。（2）創(chuàng)建內(nèi)部樣式表。在瀏覽器中的效果如下：制作圓角框四、實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)五 浮動(dòng)(float)頁面布局一、實(shí)驗(yàn)?zāi)康?掌握固定寬度網(wǎng)頁布局的方法。2深入理解浮動(dòng)的概念。3掌握三列布局網(wǎng)頁的典型邏輯結(jié)構(gòu)。4熟練掌握CSS浮動(dòng)布局的方法。二、實(shí)驗(yàn)內(nèi)容制作一個(gè)簡(jiǎn)易的博客首頁。三、實(shí)驗(yàn)步驟1. 整體布局與公共CSS定義分析頁面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，2.布局Logo欄首先我們需要把頁面上的logo給切割出來，其大小為173*46,名字為：logo.gif一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了，代碼一般會(huì)這么寫不過KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達(dá)到上面說的效果，并且HTML代碼就會(huì)更精簡(jiǎn)，少了，看看下面Logo欄的頁面代碼，紅色的為將logo.gif作為背景的鏈接3.布局導(dǎo)航欄Nav4.Banner布局第一種：將圖片作為背景第二種：直接將圖片插入之間，代碼：5.內(nèi)容Content板塊布局 從圖片上我們看到，內(nèi)容板塊分為左右兩個(gè)區(qū)域，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由于我們要將內(nèi)邊距設(shè)置成15px(這樣才會(huì)好看)，所以ContentL的寬度在CSS中就要設(shè)置成600-15*2=570px,而右側(cè)的ContentR則需要設(shè)置成300-1