實驗2HTML與靜態(tài)網(wǎng)頁

1、實驗 3-1 站點首頁的設計【實驗目的】1、了解 HTML各種標記語言的作用，以及如何制作一個靜態(tài)網(wǎng)頁2、掌握常用網(wǎng)頁制作軟件（如 Dreamwaver8.0）的使用【實驗條件】個人計算機一臺，預裝 Windows 2000 或 Windows XP 操作系統(tǒng) , 和Dreamwaver8.0軟件?！緦嶒炚f明】在網(wǎng)頁示例中，表格 t1 為網(wǎng)頁的頭部，放置公司的 logo ，公司名稱， 和一些圖片等等； t2 中的內(nèi)容為網(wǎng)頁的主要內(nèi)容； t3 是網(wǎng)頁的尾部，通 常顯示一些相同的網(wǎng)站版權、經(jīng)營許可證及網(wǎng)站聯(lián)系人等信息。 推薦學時： 1 學時【實驗內(nèi)容和步驟】步驟一： 分析該公司網(wǎng)站首頁，并對其進行

2、設計。以下圖中的網(wǎng)頁為例圖3-1 需要制作的網(wǎng)頁表 t1 ， t2 和 t3 縱向排列，并在網(wǎng)頁中居中顯示，其結構如圖所示。其 中，t2 第一行包含表 t21 ，第二行第一列包含表 t22 ，第二列包含表 t23 ， 表 t21 ，t22 和 t23 結構如圖所示2步驟二： 使用 Dreamweaver來進行網(wǎng)頁制作 1、使用 Dreamweaver新建網(wǎng)頁后，在設計頁面插入表格 t1 。具體表格的單元格大小見代碼。其內(nèi)容如下：背景圖片 插入圖片插入圖片背景圖片，并輸入公司名稱居中顯示插入圖片2、插入表格 t2 ，具體表格的單元格大小見代碼。對整個 t2設置背景圖 片，其它內(nèi)容如下：團隊精神

3、團隊介紹 公司目標 發(fā)展方向插入一條水平線，頂部顯示背景圖片，顯示“首頁”背景圖片，顯示“公司簡介”主要內(nèi)容背景圖片，顯示“產(chǎn)品介紹”背景圖片， 顯示“技術支持”背景圖片， 顯示“技術支持”3、插入 t3 ，具體表格的單元格大小見代碼。對整個 t3 設置背景顏色， 其它內(nèi)容如下：插入一條水平線輸入版權等信息步驟三： 保存網(wǎng)頁并運行。參照網(wǎng)頁代碼如下： 公司首頁 您的公司名稱 src=index_top3.gifwidth=618 height=68 團隊精神 團隊介紹 公司目標 發(fā)展方向 align=left 首頁 公司簡介 產(chǎn)品介紹 技術支持 在這里你可以看到您的公司的名稱， 描述，欄目的名

4、稱等等， 一切你輸入的東西都可以在這里顯示出來 . 如果你覺得這個頁面效果不理想，你也 可以變換頁面欄目的排版設置， 頁面的顏色， 直至更換成你喜歡的模板。 版權所有 公司地址 電話 相關知識】常見的 HTML標記及其的作用如下：標記含義作用文件聲明讓瀏覽器知道這是 HTML文件開頭提供文件整體信息標題定義文件標題，顯示在瀏覽器標題欄正文設計文件格式及內(nèi)文說明為文件加上說明，不在瀏覽器中顯示段落為字、圖像、表格等之間留一行空白換行讓字、圖像、表格更顯示于下一行水平線插入一條水平線居中讓字、圖像、表格顯示在中間層設定字、圖像、表格等的擺放位置不折行讓文字不因為太長而換行粗體標記產(chǎn)生字體加粗顯示的

5、效果強調字體出現(xiàn)斜體效果斜體字體出現(xiàn)斜體效果加上底線加上底線一級標題變粗變大加寬，程度和級數(shù)成反比二級標題將字體變粗變大加寬三級標題將字體變粗變大加寬四級標題將字體變粗變大加寬9五級標題將字體變粗變大加寬六級標題將字體變粗變大加寬文字格式設置字體、大小、顏色等錨點設置鏈接設置語言字符集 (Charsets) 的信息Table 標記有 定義表格， 定義表行 定義表元，定義表頭。常用的Table 標記屬性及其作用如下：標記屬性描述align設置或者獲取表格排列background設置或獲取表格中文本和圖像平鋪的背景圖片bgcolor設置或者獲取表格背景顏色border設置或者獲取表格邊框的寬度cellpadding設置或獲取單元格邊框和單元格內(nèi)容之間的空間總量cellspacing設置或獲取各單元格之間的空間總量height設置或獲取表格的整體高度style設置表格內(nèi)置樣式width設置或者獲取表格寬度表單 form 的常用屬性及作用如下：