《網(wǎng)頁設(shè)計與制作教程HTML+CSS+Bootstrap》課件 項目四 創(chuàng)建姑蘇美食網(wǎng)

項目四

創(chuàng)建姑蘇美食網(wǎng)項目簡介文本和圖像作為網(wǎng)頁制作中最基本的構(gòu)成元素，在任何一個網(wǎng)頁中都是必不可少的，它們可以用最直接的方式向瀏覽者傳達有效信息。表格作為網(wǎng)頁布局的元老，在DIV+CSS布局網(wǎng)頁的時代仍然是網(wǎng)頁制作不可或缺的一類元素，用它可以有序的組織數(shù)據(jù)，讓信息顯示更加清晰。超鏈接作為網(wǎng)頁之間聯(lián)系的紐帶，是網(wǎng)站中使用頻率較高的一類元素。如何應(yīng)用CSS樣式將這些元素以一種更合理、更美觀、更便捷的方式進行排版設(shè)計，是本項目的主要學習內(nèi)容。項目目標本項目以《姑蘇美食》網(wǎng)站開發(fā)為例，介紹CSS、文本、圖像、表格、超鏈接和多媒體在網(wǎng)頁中的綜合應(yīng)用。要求理解CSS元素的屬性并掌握基本的樣式設(shè)置和調(diào)用方法，掌握在網(wǎng)頁中插入文本、編輯文本的方法，掌握在網(wǎng)頁中插入圖像、編輯圖像的方法，掌握在網(wǎng)頁中插入表格、編輯表格的方法，了解超鏈接的作用并能夠設(shè)置不同類型的超鏈接，了解多媒體的概念和基本屬性并能夠在網(wǎng)頁中插入多媒體。工作任務(wù)根據(jù)《姑蘇美食》網(wǎng)站設(shè)計與制作的要求，基于工作過程，以任務(wù)驅(qū)動的方式，應(yīng)用文本、圖像、多媒體等信息充實網(wǎng)站，通過CSS樣式美化網(wǎng)站，并利用超鏈接為網(wǎng)站中的網(wǎng)頁建立連接的橋梁。（1）編輯文本和圖像（2）制作餐廳排行表（3）創(chuàng)建超級鏈接（4）插入多媒體元素

餐廳排行榜通過以下兩個步驟的操作實踐掌握表格在網(wǎng)頁中的應(yīng)用，初步完成《姑蘇美食》網(wǎng)站“canting.html”餐廳頁面的制作，網(wǎng)頁效果如圖所示：1、插入并填充表格；2、編輯表格；任務(wù)目標按照餐廳網(wǎng)頁的需求分析，設(shè)計制作“canting.html”，在網(wǎng)頁中以表格的形式呈現(xiàn)最受歡迎的餐廳排行榜。掌握在網(wǎng)頁中插入表格、編輯表格、填充表格的方法。知識準備知識準備一

表格標簽<table><tr><th>第一列</th><th>第二列</th></tr><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></table>知識準備二

表格的基本屬性屬性值功能描述width表格的寬度height表格的高度border表格的邊框align表格的對齊方式cellpadding單元格內(nèi)容與單元格邊界之間的空隙cellspacing單元格之間的空隙bordercolor表格邊框顏色background表格背景圖片bgcolor表格背景色colspan跨多列rowspan跨多行任務(wù)實施步驟一

插入并填充表格任務(wù)實施步驟二

編輯表格任務(wù)四插入多媒體元素通過以下兩個步驟的操作實踐掌握多媒體在網(wǎng)站中的應(yīng)用，完成“yangsheng.html”網(wǎng)頁并在此網(wǎng)頁中插入視頻，同時在首頁“index.html”網(wǎng)頁中加入背景音樂。“yangsheng.html”網(wǎng)頁效果如圖所示：1、在“yangsheng.html”網(wǎng)頁中插入視頻媒體；2、在“index.html”網(wǎng)頁中插入音頻媒體；任務(wù)目標按照“yangsheng.html”網(wǎng)頁的需求分析，設(shè)計制作養(yǎng)生網(wǎng)頁，并在網(wǎng)頁中插入視頻；按照“index.html”網(wǎng)頁的需求分析，在首頁中插入背景音樂；掌握常見多媒體元素在網(wǎng)頁設(shè)計中的應(yīng)用。知識準備知識準備一多媒體1、多媒體（Multimedia）2、音頻（Audio）3、視頻（Video）知識準備知識準備二多媒體標簽1、音頻標簽Audio