頁面布局設(shè)計ppt課件-資料下載頁
2025-01-17 09:45本頁面
【正文】 1 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 AP元素 圖 AP DIV大小顯示 圖 第 42 頁 《 中小型網(wǎng)站建設(shè)與管理 》 任務(wù)三 ：編輯網(wǎng)頁內(nèi)容 （ 1）在“ layer2”中，插入圖片“ ”。 （ 2）在“ layer3”中，添加“ AP DIV”元素，并對網(wǎng)頁進(jìn)行布局，效果如圖 。 （ 3）在“ layer4”中，添加“ AP DIV”元素，并對網(wǎng)頁進(jìn)行布局，效果如圖 。 （ 4）利用相同的方法，在“ layer5”、“ layer6”中，添加“ AP DIV”元素，并對網(wǎng)頁進(jìn)行布局，效果如圖 。 （ 5）在已經(jīng)布局好的網(wǎng)頁中，插入圖片或文字，效果如圖 。 第 43 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 AP DIV元素的嵌套（一） 圖 DIV元素的嵌套（二） 第 44 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 AP DIV元素的嵌套（三） 圖 DIV布局效果圖 第 45 頁 《 中小型網(wǎng)站建設(shè)與管理 》 任務(wù)四 ：利用 spry構(gòu)件編輯“聯(lián)系方式”頁面內(nèi)容 Spry框架是一個 JavaScript庫， Web設(shè)計人員使用它可以構(gòu)建能夠向站點訪問者提供更豐富體驗的 Web頁。有了 Spry，就可以使用 HTML、 CSS和極少量的 JavaScript將 XML數(shù)據(jù)合并到 HTML文檔中，創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），向各種頁面元素中添加不同種類的效果。在設(shè)計上， Spry框架的標(biāo)記非常簡單且便于那些具有 HTML、 CSS和 JavaScript基礎(chǔ)知識的用戶使用。 （ 1）打開 ，將該文件另存在 files文件夾下面并命名為“ ”，在彈出的是否更新鏈接的對話框中，選擇“是”；刪除該頁面右側(cè)的表格。將光標(biāo)置于右側(cè)單元格中，插入一個“ AP DIV”元素“ layer1”，單擊常用插入面板下的下拉按鈕，選擇“ Srpy”命令。在“ spry”插入面板中單擊“ spry選項卡式面板”按鈕，如圖 。 （ 2）在單元格中插入了選項卡式面板，效果如圖 。 （ 3）選擇選項卡式面板外側(cè)的藍(lán)色標(biāo)題，執(zhí)行菜單欄中的“窗口” → “屬性”命令，打開屬性面板，如圖 。 第 46 頁 《 中小型網(wǎng)站建設(shè)與管理 》 （ 4）在網(wǎng)頁中直接修改選項卡名稱為“聯(lián)系方式 1”、“聯(lián)系方式 2”。要添加新的選項卡，則單擊屬性面板上的“添加面板”按鈕 ，并將其名稱修改為“聯(lián)系方式 3”、“聯(lián)系方式 4”。 （ 5）將光標(biāo)置于選項卡標(biāo)簽上，修改文本屬性，如圖 ，之后的效果如圖 。 （ 6）在屬性面板列表框中選中“聯(lián)系方式 1”選項，此時網(wǎng)頁中的面板顯示為“內(nèi)容 1”，輸入相關(guān)文字內(nèi)容，效果如圖 。 （ 7）重復(fù)步驟（ 6），完成“聯(lián)系方式 2”、“聯(lián)系方式 3”、“聯(lián)系方式 4”面板內(nèi)容的制作。 （ 8）保存網(wǎng)頁，預(yù)覽效果如圖 。 第 47 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 Spry面板 圖 Spry選項卡式面板 圖 Spry屬性面板 圖 設(shè)置 Spry屬性 第 48 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 添加 Spry選項 圖 Spry內(nèi)容 第 49 頁 《 中小型網(wǎng)站建設(shè)與管理 》 圖 Spry效果圖
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1