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

項目三

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

任務目標按照網(wǎng)站需求分析，建立站點文件夾，并在Dreamweaver2021中建立站點，設計制作首頁文件，以及掌握在首頁中插入文本和圖像，并設置文本、圖像格式的方法。知識準備知識準備一CSS樣式一、定義二、功能三、特色（1）豐富的樣式定義（2）易于使用和修改（3）多頁面應用（4）層疊（5）頁面壓縮四、基本語法一條完整的CSS樣式語句包括selector（選擇器）、property（屬性）和value（屬性值）selector{property:value;}五、種類（1）內聯(lián)樣式表（InlineStyle）（2）內嵌樣式表（InternalStyleSheet）（3）外部樣式表（ExternalStyleSheet）六、選擇器（1）標簽選擇器（2）類選擇器（3）ID選擇器（4）偽類選擇器知識準備二

字體屬性1、font-family—字體類型2、font-size—字體大小3、font-style—字體風格4、font-weight—字體粗細5、font-variant—字體變量6、font—復合屬性7、color—字體顏色8、text-shadow—字體陰影知識準備三文本屬性1、word-spacing—單詞間距2、fletter-spacing—文本間距3、text-decoration—文本修飾4、ftext-align—文本對齊5、text-indent—段落縮進6、lint-height—行間距任務實施步驟一

創(chuàng)建首頁任務實施步驟二

編輯首頁任務二創(chuàng)建超鏈接通過以下三個步驟的操作實踐掌握超鏈接在網(wǎng)站中的應用，完成“菜譜”網(wǎng)頁以及錨記鏈接的創(chuàng)建，同時完成“小吃”網(wǎng)頁中圖像熱點鏈接的制作，最后通過超鏈接實現(xiàn)《姑蘇美食》網(wǎng)站各個頁面之間的互訪，網(wǎng)頁效果如圖所示：1、為“菜譜”網(wǎng)頁創(chuàng)建錨記鏈接；2、為“小吃”網(wǎng)頁創(chuàng)建圖像熱點鏈接；3、創(chuàng)建網(wǎng)站頁面之間的鏈接；

任務目標按照“菜譜”網(wǎng)頁的需求分析，設計制作菜譜網(wǎng)頁，并在網(wǎng)頁中用錨記鏈接的方式實現(xiàn)頁面內互相訪問的效果；按照“小吃”網(wǎng)頁的需求分析，設計制作小吃網(wǎng)頁，并在網(wǎng)頁中用圖像熱點鏈接的方式實現(xiàn)以地圖形式尋找姑蘇美食的效果；掌握各類超鏈接在網(wǎng)頁設計中的應用。知識準備知識準備一超鏈接的樣式a:link為超級鏈接的初始狀態(tài)a:hover為把鼠標放上去時懸停的狀態(tài)a:active為鼠標單擊時的狀態(tài)a:visited為訪問過鏈接后的狀態(tài)知識準備知識準備二超鏈接的類型鏈接路徑內部鏈接外部鏈接鏈接地址絕對鏈接相對鏈接知識準備知識準備三列表標簽標記描述<ul>無序列表<ol>有序列表<dir>目錄列表<dl>定義列表<menu>菜單列表<dt>、<dd>定義列表的標簽<li>列表項目的標簽知識準備知識準備四列表屬性1、list-style-type2、list-style-image3、