在Dreamweaver?中如何為設(shè)計(jì)對(duì)話框？

設(shè)計(jì)對(duì)話框

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC,新建HTML5文檔。選擇“文件” | “新建”命令，打開“新建文檔”對(duì)話框，在該對(duì)話框中選擇“啟動(dòng)器模板”選項(xiàng)，設(shè)置“示例文件夾”為“Mobile起始頁”，“示例頁”為“jQuery Mobile (本地）”，設(shè)置“文檔類型”為HTML5,然后單擊“確定”按鈕，完成文檔的創(chuàng)建操作。

第2步，按Ctrt+S快捷鍵，保存文檔為index.html。此時(shí)，Dreamweaver CC會(huì)彈出對(duì)話框提示

第3步，在編輯窗口中，拖選2~4個(gè)視圖框架，然后按Delete鍵刪除。

第4步，切換到代碼視圖，修改標(biāo)題、鏈接信息和腳注文本，設(shè)置<a>標(biāo)簽為外部鏈接，地址為dialog.html,并添加data-rel=”dialog”屬性聲明，定義打開模態(tài)對(duì)話框，詳細(xì)設(shè)置如圖所示。

第5步，另存index.html為dialog.html,保持HTML5文檔基本結(jié)構(gòu)基礎(chǔ)上，定義一個(gè)單頁視圖 結(jié)構(gòu)，設(shè)計(jì)模態(tài)對(duì)話框視圖。定義標(biāo)題文本為“主題”，內(nèi)容信息為“簡單對(duì)話框！”，如圖所示

第6步，在移動(dòng)設(shè)備中預(yù)覽該首頁，單擊“打開對(duì)話框” 鏈接，即可顯示模態(tài)対話框。該對(duì)話框以模式的方式浮在當(dāng)前頁的上 面，背景深色，四周是圓角的效果，左上角自帶一個(gè)關(guān)閉按鈕，單擊該按鈕，將關(guān)閉對(duì)話框。