Asp.Net DropDownList 下拉式表單.ppt

第十章 Week06Asp NetDropDownList下拉式表單加入頁框以多元化網頁 下拉清單DropDownList 面版Asp Net上 選其他標籤彈出的 標籤選擇程式 中展開左邊Asp Net標籤 網站伺服器控制項右邊選asp Image然後按 插入 鈕及 關畢 鈕面版Asp Net上 選asp 下拉式清單 鈕並設定SelectedIndexChanged事件勾選 自動回傳 第十章 加入頁框以多元化網頁 頁框功能可以在單一畫面上同時顯示多個頁面內容 也就是將網頁畫面作最大化的運用 尤其對於需要不會隨著連結而變換的內容或圖片而言都可以利用頁框功能來完成 本章將從探討頁框的組成結構開始陸續介紹頁框的建立方式以及和頁面的組合操作 同時也會對頁框的各項設定作詳細說明 最後再以內置頁框的建立方式簡介如何使用擴充元件 第十章 加入頁框以多元化網頁 10 1頁框的觀念10 2建立頁框網頁10 2 1取消頁框的輔助功能10 2 2各種頁框建立方式10 2 3設定頁框名稱10 2 4儲存頁框組檔案10 3組合頁框畫面10 4頁框的調整10 4 1調整頁框寬高尺寸10 4 2巢狀頁框組的觀念10 4 3頁框的其他設定10 5內置頁框10 5 1利用程式碼建立10 5 2使用擴充元件 10 1頁框的觀念 頁框是一個同時具有 單一頁面 及 容器特性 的網頁檔案 如圖中最中央的位置就是一個頁框檔案 接著我們將頁框檔案的畫面利用工具再分割為三個部份 稱為頁框 而每一個部份都可以再放置一個單獨頁面 如圖中的Top Menu A與B等頁面 10 2建立頁框網頁 頁框的建立方式很簡單 各位可以從插入列中選擇頁框的分隔類型來建立頁框畫面 或是在開新檔案時直接選用預設頁框格式頁面 10 2 1取消頁框的輔助功能 頁框在建立時會出現的 輔助功能設定視窗 是Dreamweaver預設的設定之一 為了讓各位可以更快速學習頁框的設計操作所以在此先將此輔助功能關閉起來 請執行 編輯 偏好設定 10 2 2各種頁框建立方式 Dreamweaver中有二種建立頁框的方式 我們先來看第一種 請執行 視窗 頁框 以開啟 頁框面板 後 再執行 檔案 開新檔案 10 2 3設定頁框名稱 頁框名稱是頁框畫面上各個區塊的名稱 同時也是網頁畫面在連結顯示時的依據 目前畫面上所看到的 topFrame leftFrame 以及 mainFrame 是Dreamweaver在新增頁框頁面後的預設名稱 各位可以選擇不更動 或是改用更易於記憶的名稱 我們這裡就把預設名稱更改為 top left 以及 main 10 2 4儲存頁框組檔案 頁框組和頁框內容是不同的檔案 以目前畫面上來看 頁框組是最外圍的框架頁面 而頁框內容則是指在每一個框架內所要顯示的頁面 因為現在還沒有指定各個框架內的網頁畫面 所以我們先儲存最外圍的框架頁面 請執行 檔案 儲存頁框組 各位在儲存頁框時也要先點取頁框面板中的任一個頁框位置而非點取頁面上的位置 否則只能執行 檔案 儲存頁框 而非 檔案 儲存頁框組 10 3組合頁框畫面 目前完成的頁框畫面還是沒有任何的頁面資料 而這也是我們接下來所要完成的工作 請先將範例檔案中的 frame 資料夾內的所有檔案複製到 graphic 網站資料夾中 這裡包含組合頁框畫面時所需的網頁畫面及其影像檔案 Looktheexampleonthebook P10 9 10 4頁框的調整 頁框建立之後還必須做些調整才能使各個頁面內容正確顯示 而且調整的方式並不複雜 相信各位都能快速的熟悉 10 4 1調整頁框寬高尺寸 範圍愈大的頁框區塊可以顯示更多的頁面內容 不過在調整時並不是愈大愈好 而是要在頁框中的所有頁面內容取一個視覺上的平衡點才會看起來美觀 手動拖曳調整使用數值設定頁框的寬高尺寸單位 10 4 2巢狀頁框組的觀念 巢狀頁框組與巢狀表格的使用觀念一樣 因為頁面中的表格及頁框都不具有能交叉分割的特性 所以利用巢狀重疊的方式來產生交錯的頁框效果 這裡先從單一頁框組開始介紹 單一頁框組的分配方式巢狀頁框組的分配方式頁框與連結目標的關係 10 4 3頁框的其他設定 頁框的其他設定包括框線與捲軸 在此一併為各位介紹 框線的顏色及寬度捲軸的啟動 10 5內置頁框 內置頁框是種較為特殊的頁面編方式 它可以在網頁中劃分一小塊區域以用於顯示另一個頁面的內容 它雖然網頁語法中的一個功能 不過Dreamweaver並沒有提供可直接建立的元件而是採用輸入語法的方式來產生 10 5 1利用程式碼建立 請先新增一個空白檔案後並將檔名儲存為 iframe htm 並且執行 檢視 程式碼 以切換到程式碼撰寫模式 新增內置頁框利用圖層來移動內置頁框內置頁框的語法參數 10 5 2使用擴充元件 既然Dreamw