1、網(wǎng)頁入門及小技術(shù),樓斌 BBS ID：lou 生命科學(xué)學(xué)院 2004.03.26,網(wǎng)頁設(shè)計的工具 1、FrontPage 最易學(xué)，與word基本相似 2、所見即所得的網(wǎng)頁制作利器Dreamweaver 網(wǎng)頁按鈕制作工具 Ulead photoimpact 8.0 (橫幅、項目符號、按鈕、按鈕欄、圖標、導(dǎo)航條、分隔符） 圖片工作 Photoshop 、flash、firework,DREAMWEVAER初步認識,選 創(chuàng)建,代碼區(qū),所見即所得,Body區(qū)，網(wǎng)頁主體,Head區(qū)，主要設(shè)置字體編碼，網(wǎng)頁標題等,編輯窗口, 主菜單：編輯窗口的絕大部分功能； 工具欄 對象面板 屬性面板 面板組（又稱可?？?/p>

2、浮動面板） 快速啟動欄（又稱啟動面板） 編輯區(qū)域：以所見即所得的方式顯示被編輯網(wǎng)頁內(nèi)容,對象面板（Objects）,在網(wǎng)頁編輯的過程中，通過單擊對象面板的按鈕來為網(wǎng)頁添加相應(yīng)的元素，如圖片、表格、層、Flash。我們稱這些元素為為對象。單擊對象面板上的向下箭頭，能插入其他類型的對象，如特殊字符（Characters）、表單（Froms）等。,快速啟動欄,是切換到站點管理器，,是切換到行為面板，,是查看網(wǎng)頁源代碼。,查看歷史記錄,Properties屬性面板：Crtl+F3 CSS Styles樣式面板：Shift+F11Behaviors行為面板：Shift+F3 Objects對象面板：Cr

3、tl+F2,從最簡單的網(wǎng)頁開始,文字屬性面板,選擇鏈接對象,粗體、斜體、文字方式,設(shè)置文字顏色,DREAMWEVAER的小技巧,1、有些主頁，若把鼠標指向某個鏈接，在狀態(tài)欄會出現(xiàn)該鏈接的說明，是不是會感覺很方便？其實這不難做到，只要在鏈接語句中加入以下的內(nèi)容，就可以實現(xiàn)了！ 試試看！HTMLHEADTITLE鏈接說明/TITLE/HEADBODY 廈門大學(xué)/BODY/HTML,要在圖形上顯示文字，您可能立刻就會想到使用Java來實現(xiàn)這一功能。但這里，我要介紹給您的是直接用HTML的方法。用層技術(shù)？，非也！，方法非常簡單：使用表格，在表中鍵入文字，然后用您希望的圖形作為這個表格的背景文件。圖形的

4、大小需與表格相同。這樣您就已經(jīng)輕易地在圖形上顯示文字了。,2、在圖形上顯示文字,3、如何調(diào)整表格高度,有時當我們拖動表格的邊框，無論怎樣拖動，等到放下鼠標，表格卻又恢復(fù)到原來的樣子。試著拖動表格的邊框看看。 出現(xiàn)這種情況的原因在于我們已經(jīng)為表格提供了一個固定的高度，其直觀表象就是無論你怎樣拖動表格的邊框，表格的高度都不變化。 我們首先需要選定表格。比較簡單的方法是，將光標移動到表格內(nèi)，然后按“ctrl+a”，看看，不是就選中了與包含光標所在位置的最小的表格了嗎。 選定了表格以后，在properties框（屬性框）中點擊一下“clear row heights”圖標（下圖中帶紅框的按鈕），表格的

5、高度設(shè)定值就被取消了。這時表格的高度會按照表格的內(nèi)容自動的匹配高度。 不只有上面的一種方法，我們也可 以選中表格，在表格的屬性框中直接刪 除掉表格的height值就可以了。 同樣的，該方法也適用于改變表格 的寬度的情況，只不過，選定了表格以 后，刪除的不是行的高度，而是列的寬度。,若表格只需很小的一行高，如1象素，則可以從程序中 改為,4、輕松打造彈出窗口,1. 首先，從菜單欄中Window- Behaviors (窗口- 行為)或直接按快捷鍵Shift+F3調(diào)出行為面板。,2. 如圖所示，按行為面板左上角的“+”號添加行為，在彈出的菜單中選擇“Open Browser Window（打開瀏覽

6、器窗口）”行為，或選擇“彈出信息”。,通 知 28日春游.,【 4.1最基本的彈出窗口代碼】,以代碼方式實現(xiàn)：將代碼放在HTML的任意位置，和之間可以，間也可以，越前越早執(zhí)行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。 window.open (page.html) 用于控制彈出新的窗口page.html 如果page.html不與主窗口在同一路徑下，前面應(yīng)寫明路徑，絕對路徑(http:/和相對路徑(./)均可。,下面再說一說彈出窗口的設(shè)置。我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應(yīng)該頁面的具體情況。 參數(shù)解釋：top=0 窗口距離屏幕上方的象素值；left=0 窗口距

7、離屏幕左側(cè)的象素值；toolbar=no 是否顯示工具欄，yes為顯示；menubar，scrollbars 表示菜單欄和滾動欄。resizable=no 是否允許改變窗口大小，yes為允許；location=no 是否顯示地址欄，yes為允許；status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；,【4.2 經(jīng)過設(shè)置后的彈出窗口】,js腳本開始；,彈出新窗口的命令,彈出窗口的文件名,窗口高、寬度,彈出窗口的名字（不是文件名），非必須，可用空代替；,. 這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。怎么調(diào)用呢？ 方法一： 瀏覽器讀頁面時彈出窗口；方法

8、二： 瀏覽器離開頁面時彈出窗口；方法三：用一個連接調(diào)用：打開一個窗口 注意：使用的“#”是虛連接。 方法四：用一個按鈕調(diào)用：,【4.3 下面是一個完整的代碼，用函數(shù)控制彈出窗口】,如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中，可不是主頁面中，否則.)，讓它10秒后自動關(guān)閉是不是更酷了？ 首先，將如下代碼加入page.html文件的區(qū)： function closeit() setTimeout(“self.close()”,10000) /毫秒 然后，再用 這一句話代替page.html中原有的這一句就可以了。（這一句話千萬不要忘記寫啊！這一句的作用是調(diào)用關(guān)

9、閉窗口的代碼，10秒鐘后就自行關(guān)閉該窗口。）,【4.4 彈出的窗口之定時關(guān)閉控制】,【在彈出窗口中加上一個關(guān)閉按鈕】 呵呵，現(xiàn)在更加完美了！,【4.5 同時彈出2個窗口】,為避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調(diào)用即可。 注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全 部為空。,【4.6 終極應(yīng)用-彈出的窗口之Cookie控制】,首先，將如下代碼加入主頁面HTML的區(qū)：function openwin()window.open(page.html,width=200,height=20

10、0) function get_cookie(Name) var search = Name + =var returnvalue = ;if (document.cookie.length 0) offset = document.cookie.indexOf(search)if (offset != -1) offset += search.lengthend = document.cookie.indexOf(;, offset);if (end = -1)end = document.cookie.length;returnvalue=unescape(document.cookie.

11、substring(offset, end)return returnvalue;,function loadpopup()if (get_cookie(popped)=)openwin()document.cookie=“popped=yes”然后，用（注意不是openwin而是loadpop！）替換主頁面中原有的這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。,5.調(diào)查信息以Email形式發(fā)送,在一些頁面上我們經(jīng)常能看到調(diào)查信息，它是反饋瀏覽者信息的重要方式，這個例子是一個簡單的調(diào)查，填寫的信息將以電子郵件方式直接發(fā)送到指定信箱。, 你的姓名: Email: 你

12、對網(wǎng)頁制作技巧欄目的意見和建議: 注意：按下“發(fā)送”按鈕后你填寫的內(nèi)容將以電子郵件方式發(fā)送給我們(adsf ) ,6、這個E-mail地址可是與一般的不同喲!別人用軟件也抓不到這個地址了!,腳本說明: 把如下代碼加入?yún)^(qū)域中 ); document.write(user + + site + ); / End - ,7、給你的主頁加上彩色邊框, if (document.all) document.body.style.cssText=border:15 ridge red /“border:15”是寬度，“red”可以換成你需要的顏色，如“green(綠色)”，“blue(藍色)”等等。 以上

13、是加框框的代碼，直接修改加入您的主頁代碼body/body中即可。,8、滾動條樣式, BODY SCROLLBAR-FACE-COLOR: #3333FF;/滾動條凸出部分的顏色 SCROLLBAR-HIGHLIGHT-COLOR: #505050;/滾動條空白部分的顏色 SCROLLBAR-SHADOW-COLOR: #fc2400;/立體滾動條陰影的顏色 SCROLLBAR-3DLIGHT-COLOR: #5965c7;/滾動條亮邊的顏色; SCROLLBAR-ARROW-COLOR: #666666;/上下按鈕上三角箭頭的顏色 SCROLLBAR-TRACK-COLOR: #b2ddc7

14、;/滾動條的背景顏色 SCROLLBAR-DARKSHADOW-COLOR: #b4fc48;/滾動條強陰影的顏色 SCROLLBAR-BASE-COLOR: #333333;/滾動條的基本顏色 ,9、水紋特效,將以下代碼加入下 function f1() setInterval(mdiv.filters.wave.phase+=10,100); if (document.all) document.write() window.onload=f1 ,此處根據(jù)自己的圖片的位置來寫,水紋特效,PhotoImpact簡介,Firework簡介,1,2,注意此處要打鉤,架設(shè)自己的FTP服務(wù),1、從f

15、tp:/0/pub/server/ftp-server/ftp-serv-u/ 處下載serv-u 5.0進行安裝。 2、注冊（注冊碼：HsVRCjxHMe/HwDOrrUxqeMuChKO0DdlzUy2tCGgcdMVQDs/7P9EdwjKrowsPF/h4YObIvknAH/FHA95cfEyb3wzQp2v7UfOzCFEFq722 3、設(shè)置,網(wǎng)頁上傳,用IE上傳網(wǎng)頁 在IE的地址欄中輸入 FTP：/用戶名：密碼服務(wù)器地址 如ftp:/lou7 這樣就登陸上了服務(wù)器了。,一、什么是FTP？ FTP是英文File Transfer Proto

16、col(文件傳輸協(xié)議)的縮寫。 二、常用FTP軟件 在很久很久以前的UNIX的系統(tǒng)上的FTP程序是基于命令行的，有點象DOS的模樣?，F(xiàn)在的Window 95/98/NT仍然有基于命令行的字符界面的FTP程序，命令行的FTP使用起來自然不方便。 類似于Windows的圖形界面流行開之后，自然就有了圖形界面的FTP程序。WS_FTP是其中資格比較老的一個，CuteFtp相對年輕一些，而后來的Bullet Proof、Leaf FTP、Crystal就屬于比較前衛(wèi)的了。 另外，大部分瀏覽器，如IE、Netscape也支持FTP協(xié)議。如果你手頭還沒有FTP軟件，那就只好使用瀏覽器來下載安裝程序了。這是

17、最簡單的上傳主頁的辦法,整個操作就象在本地計算機操作文件一樣,通過復(fù)制、粘貼或多窗口拖放就能實現(xiàn)文件的上傳和下載,非常直觀。 缺點：速度慢！,用IE下載別人的程序,單擊查看文件,樣式文件,下拉菜單程序,將程序從Temporay Internet Files拷出，修改為自己所需的。,如：從中下載菜單下拉程序： hierArrays-frame.js hierMenus.js MENU.JS 用記事本打開hierArrays-frame.js arMenu1 = new Array(200,0, #224388,#224388, #ccdaf4,#b6cbea, #96abca,#96abca, 院部,xueyuan.htm,0, 生物系-微藻工程研究所,jg/weizao.htm,0, 生物系-生態(tài)學(xué)研究所,jg/shengtai.htm,0, 生物系-生化與分子生物學(xué)研究所,jg/shenghua.htm,0,) arMenu2 = new Array(200,0, #224388,#224388, #ccdaf4,#b6cbea, #96abca,#96abca, 博士碩士點、科學(xué)介紹、出版教材及專著情況、招生信息,jx.htm,0),代碼如下