web網(wǎng)頁設(shè)計與制作實(shí)習(xí)報告

《web網(wǎng)頁設(shè)計與制作實(shí)習(xí)報告》由會員分享，可在線閱讀，更多相關(guān)《web網(wǎng)頁設(shè)計與制作實(shí)習(xí)報告（11頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 網(wǎng)頁設(shè)計與制作 實(shí) 驗(yàn) 報 告 學(xué) 生 姓 名 班 級 學(xué) 號 指 導(dǎo) 教 師 文 志 華 2015.5.23 實(shí)驗(yàn)一 簡單網(wǎng)頁制作 一、實(shí)驗(yàn)?zāi)康? 1．熟悉 Dreamweaver軟件的操作

2、界面。 2．掌握建立本地站點(diǎn)的方法。 3．掌握簡單網(wǎng)頁制作方法。 4．掌握超鏈接的建立方法。 三、操作步驟 1．創(chuàng)建“潛水俱樂部”站點(diǎn) （ 1）在 D盤新建文件夾，命名為 shiyan1 ； （ 2）將 images 文件夾和 gallery 文件夾復(fù)制到中 shiyan1 中； （ 3）啟動 Dreamweaver，使用“站點(diǎn)｜新建站點(diǎn)”命令創(chuàng)建站 點(diǎn)。 2．制作“俱樂部首頁” 。 （ 1）新建網(wǎng)頁。 （ 2）使用“文件｜保存”命令保存網(wǎng)頁，命名為

3、 index.html 。 （ 3）在文檔工具欄上設(shè)置網(wǎng)頁標(biāo)題“泡泡潛水俱樂部歡迎 你”。 （ 4）從“文本 .txt ”中將首頁的相關(guān)文字粘貼到網(wǎng)頁中。 （ 5）設(shè)置一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、項(xiàng)目列表、編號列 表。 （ 6）插入圖像。 （ 7）在 Copyright 后插入版權(quán)符號 ?。 （ 8）在電話號碼之間插入半角空格。 （ 9）在電子郵箱地址上建立超鏈接， mailto: 。 （ 10）選中網(wǎng)頁內(nèi)容，然后單擊“插入 Div 標(biāo)簽”按鈕，分別 插

4、入 header、navigation 、mainContent 、footer 共 4 個 Div 。 （ 11）保存網(wǎng)頁，按 F12，預(yù)覽網(wǎng)頁。 四 . 實(shí)驗(yàn)結(jié)果 實(shí)驗(yàn)二 XHTML 語言 一、實(shí)驗(yàn)?zāi)康? 1．掌握 XHTML語法。 2．掌握 XHTML標(biāo)記及屬性。 3．掌握 XHTML標(biāo)記校驗(yàn)的方法。 二、實(shí)驗(yàn)內(nèi)容 制作“學(xué)校主頁 -新聞中心 -學(xué)校新聞 -校領(lǐng)

5、導(dǎo)赴包裝設(shè)計藝術(shù)學(xué)院調(diào)研” 的網(wǎng)頁 校領(lǐng)導(dǎo)赴包裝設(shè)計藝術(shù)學(xué)院調(diào)研 瀏覽： 2827 次 日期： 2015-03-21 三、操作步驟 1）創(chuàng)建站點(diǎn) （ 1）在 D 盤新建文件夾，命名為 shiyan2； （ 2）將“文本 .txt”和 images文件夾復(fù)制到中 shiyan2 中； 2）用記事本打開“文本 .txt”。 3）選擇“

6、文件 | 另存為”命令，將文件另存為 shiyan2.html。 4）在網(wǎng)頁中添加 XHTML 標(biāo)記和屬性。實(shí)驗(yàn)標(biāo)題 字體黑體 藍(lán)色 40px 日期 字體宋體 灰色 大小 12px 正文 字體楷體 大小 14px 5）用瀏覽器打開，并修改發(fā)現(xiàn)的錯誤。 四、實(shí)驗(yàn)制作結(jié)果 實(shí)驗(yàn)三 導(dǎo)航欄制作 一、實(shí)驗(yàn)?zāi)康? 1．掌握垂直導(dǎo)航條的制作方法。 2．掌握水平導(dǎo)航條的制作方法。 二、實(shí)驗(yàn)內(nèi)容 制作學(xué)校樣式

7、的導(dǎo)航條。 三、操作步驟

四、實(shí)驗(yàn)制作結(jié)果圖 實(shí)驗(yàn)四 應(yīng)用背景圖像 一、實(shí)驗(yàn)?zāi)康? 1．掌握 CSS 背景（ background）屬性。 2．掌握設(shè)置背景圖像位置的方法。 3．掌握使用背景圖像替換文本的方法。 4．掌握使用背景圖像制作圓角框的方法。 二、

12、實(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)五 浮動 (float) 頁面布局 一、實(shí)驗(yàn)?zāi)康? 1．掌握固定寬度網(wǎng)頁布局的方法。

13、 2．深入理解浮動的概念。 3．掌握三列布局網(wǎng)頁的典型邏輯結(jié)構(gòu)。 4．熟練掌握 CSS 浮動布局的方法。 二、實(shí)驗(yàn)內(nèi)容 制作一個簡易的博客首頁。 三、實(shí)驗(yàn)步驟 1. 整體布局與公共 CSS 定義 分析頁面主要分 5 大塊，頂部的 Logo、導(dǎo)航條 Nav、Banner、 Content、Footer， 2.布局 Logo 欄 首先我們需要把頁面上的 logo 給切割出來，其大小為 173*46, 名字為： logo.gif

14、 一般網(wǎng)站都會做到點(diǎn)擊 logo ，就會回到主頁，應(yīng)該怎么做呢，大家首先會想到，給圖片加上鏈接就可以了，代碼一般會這么寫 不過 KwooJan要介紹另外一種方法，將圖片做成鏈接 a 的背景，同 樣可以達(dá)到上面說的效果，并且 HTML代碼就會更精簡，少了 ，看看下面 Logo 欄的頁面代碼，紅色的為將 logo.gif 作 為背景的鏈接 3. 布局導(dǎo)航欄 Nav 4.Banner布局 第一

15、種：將圖片作為

背景 第二種：直接將圖片插入 之間，代碼： 5.內(nèi)容 Content 板塊布局 從圖片上我們看到，內(nèi)容板塊分為左右兩個區(qū)域，左邊 ContentL 寬 度是 600px，右邊 ContentR 寬度是 300px，但是由于我們要將內(nèi)邊距設(shè)置成 15px(這樣才會好看 )，所以 ContentL 的寬度在 CSS中就要設(shè)置成 600-15*2=570px,而右側(cè)的 ContentR 則需要設(shè)置成 300- 15*2=270px； 6.Footer 布局內(nèi)容左側(cè)板塊 (ContentL)布局 7.內(nèi)容右側(cè)板塊 (ContentR)布局 四、實(shí)驗(yàn)總結(jié) 在瀏覽器中的效果如下：