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

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

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

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

3、 index.html 。 （ 3）在文檔工具欄上設(shè)置網(wǎng)頁(yè)標(biāo)題“泡泡潛水俱樂(lè)部歡迎 你”。 （ 4）從“文本 .txt ”中將首頁(yè)的相關(guān)文字粘貼到網(wǎng)頁(yè)中。 （ 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: 。 （ 10）選中網(wǎng)頁(yè)內(nèi)容，然后單擊“插入 Div 標(biāo)簽”按鈕，分別 插

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

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

6、文件 | 另存為”命令，將文件另存為 shiyan2.html。 4）在網(wǎng)頁(yè)中添加 XHTML 標(biāo)記和屬性。實(shí)驗(yàn)標(biāo)題 字體黑體 藍(lán)色 40px 日期 字體宋體 灰色 大小 12px 正文 字體楷體 大小 14px 5）用瀏覽器打開(kāi)，并修改發(fā)現(xiàn)的錯(cuò)誤。 四、實(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．制作泡泡俱樂(lè)部首頁(yè)。 三、實(shí)驗(yàn)步驟 1．制作圓角框。 （ 1）創(chuàng)建站點(diǎn)。 （ 2）創(chuàng)建內(nèi)部樣式表。在瀏覽器中的效果如下：制作圓角框 四、實(shí)驗(yàn)結(jié)果 實(shí)驗(yàn)五 浮動(dòng) (float) 頁(yè)面布局 一、實(shí)驗(yàn)?zāi)康? 1．掌握固定寬度網(wǎng)頁(yè)布局的方法。

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

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

15、種：將圖片作為

背景 第二種：直接將圖片插入 之間，代碼： 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- 15*2=270px； 6.Footer 布局內(nèi)容左側(cè)板塊 (ContentL)布局 7.內(nèi)容右側(cè)板塊 (ContentR)布局 四、實(shí)驗(yàn)總結(jié) 在瀏覽器中的效果如下：