項目六 全省一等獎

項目六應(yīng)用Div+CSS布局網(wǎng)頁任務(wù)一Div+CSS布局基礎(chǔ)任務(wù)二Div+CSS布局中的定位方式任務(wù)三應(yīng)用Spry布局對象任務(wù)一Div+CSS布局基礎(chǔ)任務(wù)說明下面我們首先在“任務(wù)實施”中講解Div+CSS布局的基礎(chǔ)知識，如Web標準和Div的概念，以及創(chuàng)建和選擇Div的方法等，然后在“任務(wù)實施”中通過構(gòu)建“伊韻”網(wǎng)站主頁結(jié)構(gòu)來鞏固所學知識。預備知識一、Web標準概述Web標準可從結(jié)構(gòu)、表現(xiàn)和行為三方面來衡量。這些標準大部分由W3C（萬維網(wǎng)聯(lián)盟，WorldWideWebConsortium）起草和發(fā)布，也有一些是其他標準組織制訂的?？梢哉f符合Web標準的網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。二、Div簡介Div相當于一個容器，由起始標簽<Div>和結(jié)束標簽</Div>之間的所有內(nèi)容構(gòu)成。在它里面可以內(nèi)嵌表格（table）、文本（text）等HTML代碼。其中所包含的元素特性由Div標簽的屬性來控制，或使用樣式表塊來控制。三、創(chuàng)建DivDiv標簽與表格、圖像等網(wǎng)頁對象的插入方法類似，所不同的是，在插入Div標簽的同時可以為其設(shè)置樣式。四、選擇Div要對Div執(zhí)行某項操作，首先需要將其選中。在DreamweaverCS5中選擇Div的方法有兩種。將鼠標光標移至Div周圍的任意邊框上，當邊框顯示為紅色實線時單擊鼠標左鍵可將其選中。將插入點置于Div中，然后單擊“標簽選擇器”中相應(yīng)的<div>標簽，同樣可將其選中。任務(wù)實施——構(gòu)建“伊韻”網(wǎng)站主頁結(jié)構(gòu)在學習了Div的創(chuàng)建方法后，下面通過構(gòu)建“伊韻”網(wǎng)站主頁的結(jié)構(gòu)，來進一步鞏固前面所學知識（具體操作見視頻6-1）。任務(wù)二Div+CSS布局中的定位方式任務(wù)說明要熟練應(yīng)用Div+CSS布局網(wǎng)頁，必須掌握在頁面中定位網(wǎng)頁元素的方法。在使用Div+CSS方式布局網(wǎng)頁時，我們可以使用多種方式定義Div或其他元素框在頁面中的位置，其中最常用的有相對定位、絕對定位，以及浮動定位。預備知識一、相對定位與絕對定位在CSS中用于元素定位的屬性是“position”，它主要通過兩個屬性值來進行定位，一個是“relative”，表示相對定位，一個是“absolute”，表示絕對定位，下面分別說明。1．相對定位相對定位是指通過設(shè)置垂直或水平位置，讓Div或其他元素框“相對于”設(shè)置定位屬性之前的位置進行移動，其書寫格式為：“position:relative;”，如以下代碼。#lay{position:relative;top:80px;left:50px;}2．絕對定位絕對定位是指以距元素最近的已定位的父級元素為參照來進行定位，如果元素沒有已定位的父級元素，那么它的位置將相對于最初的包含塊（如頁面左上角）進行定位。絕對定位的書寫格式為：“position:absolute;”，如以下代碼：#lay{position:absolute;top:80px;left:50px;}3．在Dreamweaver中定位元素在新建樣式或編輯樣式時打開CSS規(guī)則定義對話框后，切換到“定位”屬性設(shè)置界面，在“Position”（位置）屬性下拉列表中選擇“relative”（相對定位）或“absolute”（絕對定位）屬性值，然后在“Placement”設(shè)置區(qū)設(shè)置Top、Right、Bottom或Left值即可（通常設(shè)置Top和Left值）。二、浮動定位在CSS中，我們可以將任何元素都設(shè)為浮動，使元素向左或向右移動，直到它的邊緣碰到包含框或另一個浮動元素的邊緣為止。如果浮動更多的元素，它們將一個挨一個排列，排列不下的元素將轉(zhuǎn)到下一行繼續(xù)排列。任務(wù)實施——為“伊韻”網(wǎng)站主頁設(shè)置樣式在學習了Div+CSS布局中的網(wǎng)頁元素定位方式后，下面通過為“伊韻”網(wǎng)站主頁設(shè)置樣式（也就是構(gòu)建表現(xiàn)形式），來進一步鞏固前面所學（具體操作見視頻6-2）。任務(wù)三應(yīng)用Spry布局對象任務(wù)說明Spry是Dreamweaver內(nèi)置的代碼塊，使用它可以在網(wǎng)頁中添加Spry菜單欄、Spry選項卡式面板、Spry折疊式和Spry可折疊面板，本任務(wù)將分別介紹。預備知識一、Spry菜單欄Spry菜單欄是一系列導航菜單按鈕，當光標指向某個按鈕時可以彈出項目的子菜單。使用Spry菜單欄可以在有限的空間內(nèi)顯示大量的導航信息。二、Spry選項卡式面板Spry選項卡式面板是一系列可以在收縮的空間內(nèi)存儲內(nèi)容的面板。瀏覽者可以單擊相應(yīng)面板標簽在各個面板之間切換。定位插入點后，單擊“插入”面板“布局”類別中的“Spry選項卡式面板”即可將其插入。三、Spry折疊式Spry折疊式是一系列可以在收縮的空間內(nèi)存儲內(nèi)容的面板窗口。瀏覽者可以通過單擊面板標題來顯示或隱藏面板內(nèi)容。定位插入點后，單擊“插入”面板“布局”類別中的“Spry折疊式”即可將其插入。四、Spry可折疊面板Spry可折疊面板是一個可以在收縮的空間內(nèi)存儲內(nèi)容的面板，用戶可通過單擊面板標簽來顯示或隱藏面板內(nèi)容。定位插入點后，單擊“插入”