彈出式視窗怎麼做?

Tags: 網頁, 彈出式,

在我們瀏覽網頁的時候經常會發現,剛開啟一個一個頁面,總會彈出一個個的廣告頁。它們雖然很小,但總是浮動在網頁上,現在就來做一下!

工具/原料

Dreamweaver

步驟/方法

在這之前先有兩張圖片做素材,一張做瀏覽器開啟的效果,另一種是彈出式視窗圖片。兩張均為JPG格式的圖片,第一張檔名為“首頁”,第二張為“視窗”。如圖:

彈出式視窗怎麼做

彈出式視窗怎麼做

開啟C盤,在“Inetpub\wwwroot”下建立一個“我的站點”資料夾。然後將圖片儲存到這裡。

彈出式視窗怎麼做

開啟Dreamweaver軟體,右側找到“我的站點”資料夾,如圖:

彈出式視窗怎麼做

右擊“我的站點”然後“新建檔案”。這裡新建2個檔案,一個命名為“shouye”,一個為“chuangkou”。注意字尾名均為--html,檔名均為英文。

彈出式視窗怎麼做

雙擊“shouye.html”開啟文件,點選【插入】【影象】,然後自動彈出對話方塊中選擇“首頁.jpg”,點選確定,在彈出的對話方塊中點選確定。

彈出式視窗怎麼做

彈出式視窗怎麼做

彈出式視窗怎麼做

彈出式視窗怎麼做

影象開啟後效果如下,選中“body”將其居中,然後右擊上方將其儲存

彈出式視窗怎麼做

彈出式視窗怎麼做

用同樣的方法開啟“chuangkou.html”,【插入】【影象】然後居中,右擊將其儲存。

彈出式視窗怎麼做

彈出式視窗怎麼做

雙擊轉換到“shouye.html”下,點選右上角的【標籤】下拉選單,找到【行為】

彈出式視窗怎麼做

彈出式視窗怎麼做

然後點選右下角的下拉箭頭,選擇【開啟瀏覽器視窗】。在【要顯示的 URL】的右側【瀏覽】選擇“chuagnkou.html”,單擊確定。

彈出式視窗怎麼做

彈出式視窗怎麼做

彈出式視窗怎麼做

然後再原來的【開啟瀏覽器視窗】中輸入【寬度】和【高度】值分別為500和400.(如果後面測試不成功的話,可以勾選下面的選項再試一遍)單擊確定。注意右上角的變化:

彈出式視窗怎麼做

彈出式視窗怎麼做

按下F12鍵,彈出對話方塊點選【是】,彈出頁面後右擊“保持阻止內容”

彈出式視窗怎麼做

彈出式視窗怎麼做

彈出式視窗怎麼做

彈出式視窗怎麼做

相關問題答案