PHP網(wǎng)站開發(fā)項目式教程-設(shè)計email.php頁面_第1頁
PHP網(wǎng)站開發(fā)項目式教程-設(shè)計email.php頁面_第2頁
PHP網(wǎng)站開發(fā)項目式教程-設(shè)計email.php頁面_第3頁
PHP網(wǎng)站開發(fā)項目式教程-設(shè)計email.php頁面_第4頁
PHP網(wǎng)站開發(fā)項目式教程-設(shè)計email.php頁面_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

任務七163郵箱寫郵件功能實現(xiàn)說明文件email.php的內(nèi)容，對右圖所示的界面進行分析（不包括圖中右下部分的內(nèi)容）當用戶登錄成功之后進入該頁面7.1設(shè)計郵箱主窗口界面email.php頁面的功能特點說明email.php頁面右下部分是浮動框架子窗口，在該窗口內(nèi)部可以運行寫郵件頁面文件、收郵件頁面文件、閱讀郵件頁面文件等該頁面窗口寬度始終與瀏覽器窗口寬度一致，為了保證頁面的美觀，將頁面邊距設(shè)置為0整個頁面功能的實現(xiàn)包含了樣式代碼、頁面文件代碼和腳本代碼三個部分代碼的創(chuàng)建，分別使用email.css、email.php和email.js三個文件來完成頁面布局需要的div說明wshdiv的樣式要求為：寬度自動，高度50px，上右下左填充分別是10px、10px、0、10px，邊距0，下邊框6px、實線、顏色為#88f；思考：此處能否將寬度auto改為100%？為何？wshdiv的寬度問題不可將width:auto;改為width:100%原因說明：寬度取值為auto，使得內(nèi)容區(qū)的寬度能夠根據(jù)元素的邊框、邊距、填充等樣式值自動調(diào)整，保證整個元素的總寬度與窗口同寬若是改為100%，則無論邊框邊距填充取值如何，都是內(nèi)容區(qū)與窗口同寬7.1.1設(shè)計頂部區(qū)域

wshleft元素及樣式說明wshleft盒子的樣式要求為：邊距為0，向左浮動，內(nèi)部文本字號10pt；在盒子wshleft中包含了圖片163logo.gif（與右側(cè)文本框和超鏈接文本中線對齊），用于顯示賬號信息的文本框和“網(wǎng)易”、“幫助”、“退出”三個超鏈接，點擊“退出”時要返回登錄界面，其它兩個超鏈接的href屬性設(shè)置為#即可。文本框的樣式要求：使用class類選擇符emailaddr定義，寬度150px，無邊框，內(nèi)部字體加粗，只讀狀態(tài)；超鏈接的樣式要求：初始狀態(tài)、訪問過狀態(tài)和鼠標懸停狀態(tài)時都設(shè)置顏色#555、無下劃線效果。為emailaddr文本框設(shè)置內(nèi)容頁面中emailaddr文本框在頁面初始運行時就填入了用戶登錄時的賬號@163.com，例如登錄賬號是liuling，則此處顯示liuling@163.com思考問題：完成上面功能，需要設(shè)置文本框的什么屬性？該屬性的值來自何處？需要設(shè)置該文本框的value屬性值來實現(xiàn)上面功能，屬性值來自于服務器文件denglu.php使用變量$emailaddr所保存的登錄賬號信息為emailaddr文本框設(shè)置內(nèi)容代碼為value="<?phpecho$emailaddr.'@163.com';?>"denglu.php保存的數(shù)據(jù)服務器端文本框瀏覽器端為emailaddr文本框設(shè)置內(nèi)容思考問題在email.php文件中為什么能夠直接使用denglu.php頁面中變量$emailaddr的值，而不需要使用session來傳遞？因為email.php文件是在denglu.php文件中使用include包含的方式來運行的，隸屬于denglu.php文件，因而denglu.php文件中的變量可以直接在email.php文件中使用為emailaddr文本框設(shè)置內(nèi)容思考問題email.php中文本框內(nèi)容來自文件denglu.php的變量$emailaddr，如果要在denglu.php文件中使用輸出腳本代碼的方式，設(shè)置email.php文件emailaddr文本框內(nèi)容，實現(xiàn)代碼如何？如果將文本框元素更換為span元素，要如何定義樣式、添加內(nèi)容？7.1.1設(shè)計頂部區(qū)域

wshright元素及樣式說明盒子wshright的樣式要求為：向右浮動，邊距為0；盒子內(nèi)部包含的元素有：一個用于輸入搜索內(nèi)容的文本框和一個搜索圖片按鈕，圖片要使用align="top"屬性設(shè)置文本框與其頂端對齊文本框的樣式要求：使用class類選擇符search定義寬200px，高26px，邊框為灰色#ddd、1px、實線，使用placeholder設(shè)置提示文本“支持全文搜索”7.1.2設(shè)計左下部區(qū)域bot元素的添加樣式說明：寬度自動、高度自動、填充0、邊距0說明：該div的作用只是作為#leftdiv和.maindiv的父元素，保證浮動元素不會出現(xiàn)混亂leftdiv樣式說明樣式要求為：寬200px，高600px，邊距0，填充0，右邊框和下邊框?qū)挾?px、實線、顏色為#aaf，背景色為#eef，向左浮動。思考問題：盒子的總寬度是多少？Leftdivtop中超鏈接的添加在盒子leftdivtop中包含了圖片writerecieve.jpg，在該圖片上做了兩個圖像映射超鏈接寫信超鏈接href設(shè)置為writeemail.php，target設(shè)置為main（這是浮動框架的name）；收信超鏈接href設(shè)置為receiveemail.php，target也設(shè)置為main。leftdivbot中超鏈接的添加盒子內(nèi)部包含的元素是四個超鏈接，四個超鏈接使用段落來分開：段落上下邊距10px，字號10pt，超鏈接要求如下：鏈接初始狀態(tài)和訪問過狀態(tài)都是灰色#999，沒有下劃線；鼠標懸停時為藍色#ddf，顯示下劃線收件箱receiveemail.php，在main中顯示草稿箱（空鏈接）已發(fā)送（空鏈接）已刪除deletedemail.php，在main中顯示7.1.3設(shè)計右下部區(qū)域

maindiv的樣式及元素說明maindiv的樣式要求為：寬度和高度都是auto，邊距為0，填充為0，向左浮動與leftdiv排列在同一水平位置上在maindiv內(nèi)部的是一個浮動框架，浮動框架要求如下：為浮動框架定義的name和id都是main浮動框架初始時加載的頁面文件是writeemail.php浮動框架的寬度和高度都設(shè)置為自動（稍后將通過腳本來設(shè)置其寬度與高度值）滾動條設(shè)置為無浮動框架寬度說明整個郵箱主窗口界面的寬度始終與瀏覽器窗口寬度保持一致在盒子bot內(nèi)部左側(cè)的leftdiv的寬度是固定的（201px）右側(cè)的maindiv寬度為自動（實際寬度將根據(jù)內(nèi)部浮動框架寬度確定）因此要求maindiv內(nèi)部的浮動框架的寬度必須能夠適應瀏覽器窗口的變化，若窗口變寬，浮動框架寬度要變寬，若窗口變窄，浮動框架寬度要變窄，從而做到由浮動框架窗口的寬度來決定盒子maindiv的寬度。思考問題浮動框架子窗口的寬度要根據(jù)什么進行計算？回答問題：浮動框架main的寬度需要使用瀏覽器窗口寬度減去201得到思考問題：如何獲取瀏覽器窗口的寬度？獲取瀏覽器窗口寬度獲取瀏覽器窗口的寬度需要分別針對兩種情況來進行第一種情況，頁面中沒有使用xhtml的相關(guān)標準，即在頁面代碼開始時直接使用<html>標記時，需要使用代碼document.body.clientWidth獲取到瀏覽器窗口中可見區(qū)域的寬度第二種情況，頁面中使用了xhtml的相關(guān)標準（現(xiàn)在頁面普遍使用），需要使用代碼document.documentElement.clientWidth;獲取到瀏覽器窗口中可見區(qū)域的寬度定義函數(shù)實現(xiàn)浮動框架的寬度自適應創(chuàng)建email.js文件，定義函數(shù)iframeWidth()，實現(xiàn)如下功能使用代碼winWidth=document.body.clientWidth||document.documentElement.clientWidth獲取瀏覽器窗口的寬度，使用或運算符可以保證能夠獲取任何情況頁面所在瀏覽器窗口的寬度使用document.getElementById("main").width=winWidth-201設(shè)置浮動框架窗口寬度調(diào)用函數(shù)iframeWidth()首先在email.php文件中引用腳本文件email.js函數(shù)iframeWidth()的調(diào)用需要在兩種情況下進行第一種情況是，加載頁面文件email.php時，此時激活的事件是window對象的load事件，在函數(shù)定義完成的花括號后面使用代碼window.onload=iframeWidth;進行調(diào)用；第二種情況是，當用戶調(diào)整瀏覽器窗口大小時，此時激活的事件是window對象的resize事件，在函數(shù)定義完成的花括號后面使用代碼window.onresize=iframeWidth;進行調(diào)用。浮動框架高度設(shè)置為固定值存在的缺陷浮動框架子窗口的內(nèi)容總是根據(jù)點擊的超鏈接來加載，如果將其高度設(shè)置為固定值，存在如下缺陷：第一，若浮動框架初始高度小于加載進來的頁面高度，在內(nèi)部需要出現(xiàn)滾動條，存在了內(nèi)外雙滾動情況，會影響頁面的美觀性；第二，若浮動框架初始高度高于加載進來的頁面高度，浮動框架底部頁面內(nèi)容下方將出現(xiàn)大片的空白區(qū)域，也會影響頁面的美觀性。因此我們在項目中定義浮動框架時，其高度直接設(shè)置為auto思考問題浮動框架子窗口的高度要根據(jù)什么進行設(shè)置？浮動框架子窗口的高度要根據(jù)加載到子窗口內(nèi)部的頁面內(nèi)容的高度來設(shè)置獲取浮動框架子窗口中頁面內(nèi)容的高度獲取頁面內(nèi)容高度時，需要考慮運行頁面文件時使用的瀏覽器，在不同瀏覽器下面運行的頁面，有不同的方法來獲取加載到浮動框架中的頁面內(nèi)容的高度，主要分為IE內(nèi)核和webkit內(nèi)核兩種情況（下面的iframe1變量代表浮動框架）第一，若瀏覽器內(nèi)核為IE，則條件if(iframe1.contentWindow)成立，此時可以使用代碼iframe1.contentWindow.document.body.offsetHeight（或者scrollHeight）獲取頁面的高度第二，若瀏覽器內(nèi)核為webkit，則條件(iframe1.contentDocument)成立，此時可以使用代碼iframe1.contentDocument.documentElement.offsetHeight獲取頁面的高度定義函數(shù)iframeHeight()設(shè)置浮動框架子窗口的高度在email.js文件中定義函數(shù)iframeHeight()，實現(xiàn)如下功能：獲取浮動框架元素，保存在變量iframe1中根據(jù)瀏覽器的內(nèi)核，獲取頁面內(nèi)容的高度，保存在變量h1中使用iframe1.height=h1將h1設(shè)置為浮動框架的高度判斷h1若是超過600，設(shè)置浮動框架

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論