web網(wǎng)頁設計與制作實習報告.doc

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