- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
标示旅游地图-AP元素的应用
進階篇 進階篇 進階篇 進階篇 關於 AP 元素 AP 元素與行為指令建製 建立地圖的連結區 繪製 AP 元素 將 AP 元素調整為巢狀結構 加入影像及套用 CSS 樣式 加入行為指令 設定 AP 元素水平置中 設定 AP 元素的字型、背景、方框 7-1-1 什麼是 AP 元素? 在 Dreamweaver 中,透過 插入 面板 版面 項目下的 繪製 AP Div 鈕,可以拖曳出一個外觀為矩形中空的方框,不但大小可以任意繪製,像是文字、影像與表格等網頁元件也都能輕易加入,完全不受傳統網頁編輯排版時的表格限制;而其中最重要的觀念即是: AP 元素,可獨立於整個網頁平面上,彼此任意重疊而不受網頁束縛。 AP 元素 (絕對定位元素) 可讓您以重疊並自由擺放的方式來配置網頁內容,此元素可以包含文字、影像或任何可放在 HTML 文件中的內容。 7-1 關於 AP 元素 7-1-2 AP 元素的 HTML 程式碼 當選按 繪製 AP Div 鈕繪製 AP 元素時,Dreamweaver 會在文件中插入一個 AP Div 的外框,並自動指定 Div 和 id 數值 (根據預設,apDiv1 就是第一個繪製的 div,apDiv2 就是第二個繪製的 div,依此類推)。 AP 元素也稱為 apDiv,apDiv 包括位置、寬高及 Z 軸 (亦稱為堆疊順序) 屬性值,其中 「# 」則是代表此 AP 元素的 ID 識別,每一個 AP 元素都有一個唯一 ID。 選取 AP 元素時,會顯示如下圖的 AP 元素 屬性 面板,也可在此 ID 欄位中以合適的名稱為 AP Div 重新命名。 7-1-3 AP 元素的屬性設定 「線上地圖」單元中如果僅以一整張靜態的影像做為說明,在表現的形式上會顯得有些呆板,此作品將直接在地圖影像上面,利用連結區與圖層的方式,讓地圖更加活潑。(地圖上的 標示代表為重要景點區,當以滑鼠指標滑過時會展示一張影像及景點資訊。) 想讓瀏覽網站的朋友更確切知道文章中所描述的景點位置嗎?想要簡單表現出此趟旅行的路線嗎?以地圖的方式整理、規納出所經過的景點以及回憶,是個既方便又令人印象深刻的設計。 7-2 AP 元素與行為指令建置 7-2-1 建立地圖的連結區 請進入「映象東京」範例網站,開啟 map.htm 檔案。請先為頁面中地圖影像建立十二個連結區域,以便讓 Dreamweaver 知道該於何處執行相關動作。 依照前面的操作步驟,參考下表說明,請完成另外十一個景點連結區的建置: 7-2-2 繪製 AP 元素 AP 元素是一個非常方便的網頁製作工具,可以讓文字、影像、表格...等擺放在任何位置,還可以調整物件的階層位置、大小、顯示與否...等,讓網頁製作更加靈活生動。當插入 AP Div 時,Dreamweaver 會在 設計檢視 模式中顯示 AP Div 的外框。 設計第一個 AP 元素 (apDiv1),並預備擺放地圖影像。 將剛才剪下的地圖影像貼入 AP 元素 (apDiv1) 內。 再次選按 繪製 AP Div 鈕,拖曳出第二個 AP 元素 (apDiv2),以放置景點影像。 最後選按 繪製 AP Div 鈕,拖曳出第三個 AP 元素 (apDiv3) ,預設為顯示說明文字,當滑鼠指標移至代表該景點的紅色圈圈標示上方會顯示該景點相關簡介。 7-2-3 將 AP 元素調整為巢狀結構 關於 AP 元素面板 網頁中的 AP 元素愈來愈多時,可選按功能表列 視窗 \ AP元素 開啟 AP 元素 面板管理。 調整結構 前面建置的三個 AP 元素,因為有絕對定位的特性,所以必須調整一下結構:第一個放置地圖影像的 AP 元素 (apDiv1),必須包含第二與第三個放置景點影像及文字的 AP 元素 (apDiv2、apDiv3),以便後續調整地圖影像的位置時,景點影像及文字也會隨著移動。 7-2-4 加入影像 接著要在 apDiv2 中加入景點影像,因為這個 AP 元素預設是隱藏的,所以請先選按功能表列 視窗 \ AP元素 開啟其相關面板,再選取 apDiv2 即可在編輯區顯示該 AP 元素。 請在 AP 元素 (apDiv2) 內加入一張影像。 請為 apDiv2 中的影像設定 ID 名稱與 邊框。 7-2-5 加入行為指令 這節中將利用三個行為指令設計滑鼠與連結區的親密關係: 當滑鼠指標移至該景點連結區時,會於地圖下方出現該景點的相關影像、景點名稱與簡述文字。 當滑鼠指標於該景點連結區上按一下滑鼠左鍵時,則會連結至 「名勝景點」 scenicspots.htm 頁面,並顯示相關景點的詳細介紹。 顯示隱藏元素 以 「東
文档评论(0)