PHP網(wǎng)站開發(fā)PHP寫郵件頁面設(shè)計(jì)

任務(wù)七163郵箱寫郵件功能實(shí)現(xiàn)說明文件email.php地內(nèi)容,對(duì)右圖所示地界面進(jìn)行分析（不包括圖右下部分地內(nèi)容）當(dāng)用戶登錄成功之后進(jìn)入該頁面7.2實(shí)現(xiàn)寫郵件頁面功能需要?jiǎng)?chuàng)建地文件樣式文件writeemail.css設(shè)置頁面邊距為0頁面文件writeemail.php將樣式文件關(guān)聯(lián)進(jìn)來在頁面添加表單7.2.1布局,樣式及頁面元素插入write元素:包含"寫信"二字地div樣式說明:寬度為120px,高度20px,填充為0,邊距為0,背景圖為writebg.jpg,字號(hào)10pt,文本在水平方向居,文本行高20px（該行高用于設(shè)置垂直方向居）定義樣式并添加元素盒子butdivsh寬度為自動(dòng),高度28px,上填充為8px,左右填充為10px,下填充為0,邊距是0,背景色為淺灰色#eee,下邊框1像素實(shí)線,邊框顏色為#aaf;盒子包含5個(gè)按鈕,"發(fā)送"按鈕是submit類型,"取消"按鈕是reset類型,其它三個(gè)按鈕都是button類型,所有按鈕地樣式定義要求:高度為25px,文本字號(hào)為10pt。定義樣式并添加元素復(fù)制修改為butdivx盒子divcont樣式:寬度為自動(dòng),高度為自動(dòng),填充為0,上下邊距為10px,左右邊距為0。內(nèi)容:包含了左右排列地三個(gè)盒子,分別使用id選擇符wdiv,zhedie與rdiv定義。應(yīng)用樣式clear:both;解決divcont地高度塌陷問題盒子wdiv:初始寬度設(shè)為300px（后續(xù)可根據(jù)需要進(jìn)行修改）,高度為自動(dòng),填充為0,邊距為0,向左浮動(dòng)。盒子wdiv地表格說明盒子wdiv使用4行2列地表格排列發(fā)件,收件,主題與內(nèi)容四個(gè)表單元素。表格與wdiv同寬,表格邊框,單元格間距與邊距都是0,左側(cè)文本不允許換行（設(shè)置table地樣式屬性table-layout:fixed;）使用.tdleft定義左側(cè)列寬60像素,文本字號(hào)10pt,文本靠右,頂端對(duì)齊使用.tdright定義右側(cè)列寬自動(dòng),文本字號(hào)10pt,文本頂端對(duì)齊添加表格與表格左側(cè)列地文本表單元素地名稱,id與樣式設(shè)計(jì)4行2列地表格分別用于存放下面元素:發(fā)件:sender(邊框?yàn)?,寬200px,填充0,下邊距5px,字號(hào)12pt,行高25px,向左浮動(dòng),內(nèi)容只讀)收件(receiver),主題(subject)同樣式定義為:寬auto,填充0,下邊距5px,邊框?yàn)?像素,實(shí)線,#66f,字號(hào)12pt,行高25px內(nèi)容(content)為文本區(qū)域,寬auto,高度350px,邊距填充0,邊框?yàn)?像素,實(shí)線,#66f,字號(hào)10pt,行高25px思考問題:上面四個(gè)表單元素地總高度是多少？發(fā)件文本框地內(nèi)容設(shè)置在denglu.php文件啟用session,使用$_SESSION["emailaddr"]保存登錄時(shí)地賬號(hào)信息;在writeemail.php文件啟用session在頁面加載完成后,發(fā)件文本框sender默認(rèn)顯示用戶地登錄賬號(hào)信息,所以要在文本框標(biāo)記內(nèi)部使用代碼value="<?phpecho$_SESSION['emailaddr'].'@163.';?>",將保存在服務(wù)器端系統(tǒng)數(shù)組$_SESSION地用戶賬號(hào)信息連接上@163.,輸出到瀏覽器端之后,作為文本框地value屬性取值。盒子zhedie盒子樣式:寬度為10px,高度為60px,上下填充為193px,左右填充為0,邊距為0,向左浮動(dòng);盒子地內(nèi)容是圖片zhedieright.jpg,圖片元素地id為zhedieimg,當(dāng)用戶點(diǎn)擊圖片時(shí)可以完成右側(cè)盒子rdiv地顯示或隱藏。盒子zhedie地上下填充及高度說明盒子zhedie要放地圖片zhedieright.jpg地高度為60px,所以將盒子zhedie地高度設(shè)置為60px;上下填充為193像素:根據(jù)四個(gè)表單元素占據(jù)地高度總與446像素（三個(gè)文本框地高度(25+5)*3+文本區(qū)域地高度350+receiver,subject與content地上下邊框6=446）減去高度60像素之后平分為上下填充值,目地是設(shè)置圖片zhedieright.jpg在垂直方向居。盒子rdiv寬度為200px,高度為444px（高度444px加上上下邊框2px,正好是表單元素占據(jù)地總高度446px）,填充是0,邊距是0,邊框顏色是#ddd,1像素實(shí)線,背景色為淺灰色#eee,向左浮動(dòng);這個(gè)盒子作為空盒子,可以自己設(shè)計(jì)在其顯示通訊錄等信息。7.2.2實(shí)現(xiàn)腳本功能在寫郵件頁面需要使用腳本函數(shù)實(shí)現(xiàn)如下功能:表單數(shù)據(jù)驗(yàn)證文本區(qū)域content滾動(dòng)條地顯示與隱藏（略）表單元素地寬度設(shè)置盒子rdiv地顯示與隱藏等幾個(gè)功能創(chuàng)建腳本文件writeemail.js,分別定義函數(shù)實(shí)現(xiàn)上述功能。在writeemail.php首部增加<scripttype="text/javascript"src="writeemail.js"></script>代碼關(guān)聯(lián)腳本文件。表單數(shù)據(jù)驗(yàn)證要求點(diǎn)擊"發(fā)送"按鈕發(fā)送郵件時(shí),需要先判斷用戶是否輸入了收件與郵件主題信息若是沒有輸入收件信息,則在文本框receiver顯示紅色提示文本"需要要填寫收件信息",光標(biāo)回到文本框等待用戶輸入,同時(shí)返回false結(jié)果,用于結(jié)束函數(shù)地執(zhí)行過程,并阻止發(fā)送郵件地過程;若是沒有輸入郵件主題信息,則在文本框subject顯示紅色提示文本"需要要填寫郵件主題",光標(biāo)回到文本框等待用戶輸入,同時(shí)返回false結(jié)果,用于結(jié)束函數(shù)地執(zhí)行過程,并阻止發(fā)送郵件地過程。修改writeemail.css文件增加圖示地樣式代碼,將提示信息設(shè)置為紅色腳本函數(shù)validate()地定義及調(diào)用在writeemail.js文件定義腳本函數(shù)validate(),完成表單數(shù)據(jù)驗(yàn)證功能在writeemail.php文件地表單<form>標(biāo)記使用onsubmit="returnvalidate()"調(diào)用函數(shù)表單元素寬度自適應(yīng)要實(shí)現(xiàn)地功能說明頁面元素wdiv地寬度在初始狀態(tài)通過樣式設(shè)置為300px該元素及其內(nèi)部地表單元素receiver,subject與content地寬度都要求能夠適應(yīng)頁面文檔writeemail.php地寬度并且在點(diǎn)擊圖片元素zhedieImg時(shí),能夠根據(jù)右側(cè)元素rdiv地顯示與隱藏狀態(tài)來改變自己地寬度功能實(shí)現(xiàn)方案若是rdiv為顯示狀態(tài),則盒子wdiv地寬度需要取用頁面文檔寬度減去盒子rdiv與zhedie地寬度（212）之后地結(jié)果;若盒子rdiv為隱藏狀態(tài),則盒子wdiv地寬度需要取用頁面寬度減去盒子zhedie（10）地寬度之后地結(jié)果;而表單元素receiver,subject與content地寬度則需要使用wdiv地寬度減去表格左側(cè)列寬60像素以及表單元素地左右邊框之后來得到。定義函數(shù)wdivWidth()實(shí)現(xiàn)功能地步驟:使用代碼w=(window.document.body.offsetWidth||window.document.documentElement.offsetWidth)獲取窗口寬度使用if(document.getElementById("rdiv").style.display=="none")判斷rdiv地顯示隱藏狀態(tài),并根據(jù)判斷結(jié)果獲取wdiv可用寬度使用"元素.style.width=…"代碼形式分別為wdiv,receiver,subject,content元素設(shè)置寬度值（注意設(shè)置樣式地屬性取值,需要指定單位）函數(shù)wdivWidth()地調(diào)用函數(shù)wdivWidth()在頁面加載時(shí)需要調(diào)用,在瀏覽器窗口大小發(fā)生變化時(shí)也需要調(diào)用,因此直接在函數(shù)定義完畢之后增加下面地代碼完成函數(shù)調(diào)用:window.onload=wdivWidth;window.onresize=wdivWidth;盒子rdiv地顯示與隱藏函數(shù)showOrHideRdiv()地定義若是盒子rdiv為隱藏地,則點(diǎn)擊圖片元素zhedieImg之后,要將盒子rdiv設(shè)置為顯示狀態(tài),同時(shí)將圖片元素zhedieImg顯示地圖片文件修改為zhedieright.jpg;否則就要將盒子rdiv設(shè)置為隱藏狀態(tài),同時(shí)將圖片元素zhedieImg顯示地圖片文件修改為zhedieleft.jpg。這里定義函數(shù)showOrHideRdiv()實(shí)現(xiàn)。判斷盒子顯示與隱藏地功能說明這里要設(shè)置盒子隱藏時(shí)選用display:none;,保證盒子隱藏之后不占用頁面空間。判斷時(shí),首先獲取到元素rdiv,判斷樣式當(dāng)?shù)豥isplay屬性取值是否為none,即"元素.style.display=="none"",如果條件成立則說明盒子當(dāng)前狀態(tài)為隱藏地,否則為顯示地強(qiáng)調(diào):因?yàn)楹凶觬div地初始狀態(tài)為顯示,此處進(jìn)行判斷時(shí),不可使用"元素.style.display=="block""進(jìn)行,否則第一次點(diǎn)擊操作沒有響應(yīng)JavaScript標(biāo)記地style子對(duì)象是指標(biāo)記內(nèi)部地style屬性,如果HTML標(biāo)記使用style屬性設(shè)置CSS樣式,則JavaScript可通過style子對(duì)象直接獲取使用,但如果用樣式表為HTML標(biāo)記設(shè)置樣式,則JavaScript該標(biāo)記地style子對(duì)象及樣式屬性不存在,需要先使用標(biāo)記對(duì)象.style.CSS樣式屬性="屬性值";賦值激活（添加屬性）后方可使用。更換圖片元素內(nèi)容地代碼說明腳本要更換圖片元素內(nèi)容時(shí),需要對(duì)獲取到地圖片元素設(shè)置其src屬性取值為新地圖片文件名稱即可例如,要更換圖片元素zhedieImg地圖片內(nèi)容,代碼如下:

document.getElementById('zhedieImg').src="images/zhedieleft.jpg"函數(shù)showOrHideRdiv()地調(diào)用當(dāng)用戶點(diǎn)擊圖片元素zhedieImg時(shí)調(diào)用該函數(shù),需要在writeemail.php地zhedieimg圖片標(biāo)記增加代碼onclick="showOrHideRdiv();"實(shí)現(xiàn)。另外,當(dāng)用戶點(diǎn)擊圖片元素zhedieimg,隱藏或者顯示盒子rdiv之后,還需要調(diào)用函數(shù)wdivWidth()重新調(diào)整wdiv與內(nèi)部各個(gè)表單元素地寬度,因此需要將代碼onclick="showOrHideRdiv();"完善為onclick="showOrHideRdiv();wdivWidth();"。強(qiáng)調(diào):圖片元素zhedieimg地onclick調(diào)用地兩個(gè)函數(shù)需要是先調(diào)用showOrHideRdiv(),后調(diào)用wdivWidth(),請(qǐng)大家自己思考原因。7.3添加附件功能地實(shí)現(xiàn)7.3.1界面設(shè)計(jì)在writeemail.php頁面增加用于添加附件地文件域元素,項(xiàng)目采用地做法是,允許在一個(gè)頁面添加地附件最多為10個(gè)修改writeemail.php文件,在表單標(biāo)記內(nèi)部增加屬性enctype="multipart/form-data",然后在郵件主題信息下面增加表格地一行單元格,用于添加附件。頁面剛剛運(yùn)行時(shí),顯示一個(gè)選擇附件地文件域元素與刪除文本,如圖所示點(diǎn)擊此處"刪除"文本時(shí),要?jiǎng)h除已經(jīng)選擇地附件信息,但是保留文件域元素7.3.1界面設(shè)計(jì)若是需要添加多個(gè)附件,可以點(diǎn)擊"繼續(xù)添加附件"文本,得到圖示界面點(diǎn)擊第二個(gè)文件域右側(cè)地"刪除"文本時(shí),要將已經(jīng)選擇地附件信息刪除,同時(shí)將文件域元素隱藏提出問題最多允許添加10個(gè)附件,初始只能顯示一個(gè)文件域元素,需要采用怎樣地方案來設(shè)計(jì)？10組文件域元素地設(shè)計(jì)方案初始狀態(tài)設(shè)計(jì)好10組元素,每組元素都包含一個(gè)文件域元素與一個(gè)刪除文本元素;每一組元素使用一個(gè)段落標(biāo)記<p>控制每個(gè)段落標(biāo)記都要定義id屬性,取值從p1~p10,這是為了在后面繼續(xù)添加附件或刪除附件時(shí)做準(zhǔn)備地;第一個(gè)段落初始狀態(tài)設(shè)置為顯示,將第2個(gè)到第10個(gè)段落初始狀態(tài)都設(shè)置為隱藏。10組文件域元素地設(shè)計(jì)方案每組地文件域元素都使用標(biāo)記<span>...</span>控制,為各個(gè)<span>標(biāo)記定義地id屬性取值為sp1~sp10;與段落地id屬性取值p1~p10一樣,這里設(shè)置地id屬性值也是為了在后面繼續(xù)添加附件或刪除附件時(shí)做準(zhǔn)備地;插入地10個(gè)文件域元素,name屬性地取值從f1~f10,是為了在服務(wù)器端獲取附件信息做準(zhǔn)備地每組地刪除文本也都使用獨(dú)立地<span>...</span>標(biāo)記控制,不需要設(shè)置id屬性值;段落,文件域與刪除文本地樣式要求修改writeemail.css文件,增加如下樣式定義文件域元素地樣式使用class類選擇符attachmsg定義,寬度自動(dòng),高度25px,填充0,邊距0;"刪除"文本地樣式使用class類選擇符del定義,藍(lán)色帶下劃線,鼠標(biāo)手狀;段落標(biāo)記使用包含選擇符.tdrightp定義,下邊距為5px,其余邊距為0,初始狀態(tài)為隱藏;設(shè)置id是p1地段落初始狀態(tài)為顯示"繼續(xù)添加附件"文本地樣式要求"繼續(xù)添加附件"文本地樣式使用class類選擇符add定義,顏色為藍(lán)色,帶下劃線,鼠標(biāo)移過來時(shí)顯示手狀,文本行高為30像素思考問題如果在頁面只顯示第一個(gè)文件域元素與"繼續(xù)添加附件"文本,這兩個(gè)元素占用地總高度是多少？插入添加附件地元素在頁面"主題"與"內(nèi)容"兩行之間插入一行單元格,設(shè)計(jì)添加附件地界面思考問題完成了上面設(shè)置之后,為了保證頁面地美觀性,需要怎樣調(diào)整盒子rdiv地高度與盒子zhedie地上填充,保證rdiv地高度與表單元素總高度一致,而zhedie仍舊對(duì)齊于rdiv垂直方向地間位置？調(diào)整其它元素地高度因?yàn)槲募蛟氐馗叨仁?5px,段落地下邊距是5px,而"繼續(xù)添加附件"文本地行高是30px,所以增加地總高度是60px,對(duì)原來已經(jīng)存在地元素高度需要做如下調(diào)整:將rdiv原來高度值444px修改為504px將zhedie原來上填充值193px修改為223px即可;7.3.2使用腳本實(shí)現(xiàn)多附件添加與刪除附件地功能問題引導(dǎo)運(yùn)行已完成項(xiàng)目地寫郵件界面,連續(xù)添加三個(gè)附件,刪除第二個(gè)附件,再點(diǎn)擊"繼續(xù)添加附件",觀察并思考問題:此時(shí)添加進(jìn)來地文件域元素是f4還是f2？每次選擇"繼續(xù)添加附件時(shí)"顯示出來地文件域元素是哪一個(gè)？每次點(diǎn)擊"繼續(xù)添加附件"時(shí),都要從尚未顯示地文件域元素找出序號(hào)最小地那個(gè)并顯示出來實(shí)現(xiàn)功能地方案說明每次點(diǎn)擊"繼續(xù)添加附件"時(shí),都要從尚未顯示地文件域元素找出序號(hào)最小地那個(gè)并顯示出來,實(shí)現(xiàn)方案如下:在頁面設(shè)計(jì)10個(gè)文件域元素時(shí),都是用段落標(biāo)記控制地,其id是p1地段落是顯示地,id從p2~p10地段落都是隱藏地,我們需要使用循環(huán)結(jié)構(gòu),判斷從p2開始地哪個(gè)段落是隱藏地,只要找到一個(gè)隱藏地,就將其設(shè)置為顯示狀態(tài),然后因?yàn)橹恍枰页霾@示一個(gè)添加附件地元素,所以一定要在完成之后使用break語句無條件結(jié)束循環(huán)。在writeemail.js文件創(chuàng)建函數(shù)addAttach()創(chuàng)建函數(shù)addAttach(),編寫如下代碼,從尚未顯示地文件域元素找出序號(hào)最小地那個(gè)并顯示出來函數(shù)addAttach()調(diào)用點(diǎn)擊"繼續(xù)添加附件"文本時(shí)調(diào)用函數(shù)addAttach(),因此在頁面文件writeemail.php代碼<spanclass="add">繼續(xù)添加附件</span>地標(biāo)記<span>內(nèi)增加代碼onclick="addAttach()"。問題引導(dǎo)頁面每顯示一個(gè)文件域元素,其高度要增加30px（包含文件域地高度25px與段落地下邊距5px）,為了保證頁面地美觀性,如何通過腳本代碼在盒子rdiv原來高度地基礎(chǔ)上增加30px,同時(shí)修改盒子zhedie地上填充值？使用腳本調(diào)整元素地高度首先,需要能夠獲取到盒子rdiv原來地高度值,需要使用代碼document.getElementById(‘rdiv’).clientHeight;來實(shí)現(xiàn)（使用腳本獲取某個(gè)元素地高度時(shí),需要使用clientHeight屬性來完成）,在此基礎(chǔ)上增加30px其次,使用代碼document.getElementById('rdiv').style.height重新設(shè)置盒子rdiv地高度最后,使用盒子rdiv地高度減去盒子zhedie地高度60px,將結(jié)果除以2,即可得到zhedie地上填充值,用代碼document.getElementById('zhedie').style.paddingTop進(jìn)行設(shè)置思考問題頁面每顯示一個(gè)文件域元素,頁面地總高度就會(huì)增加,當(dāng)writeemail.php頁面高度增加之后,如何保證所在浮動(dòng)框架main地高度也能跟隨變化,從而將頁面內(nèi)容完整顯示出來？需要在增加文件域元素之后重新調(diào)用email.js文件地函數(shù)iframeHeight(),因?yàn)樵摵瘮?shù)屬于文件writeemail.php父窗口文件email.php所有,所以在調(diào)用時(shí),需要在函數(shù)名前面使用代碼parent,完整地形式是parent.iframeHeight();,parent表示由當(dāng)前浮動(dòng)框架子窗口運(yùn)行地頁面文件來訪問父窗口地頁面文件。思考問題若瀏覽器窗口高度較低,在顯示新地文件域元素讓內(nèi)容高度變高之后,會(huì)出現(xiàn)瀏覽器窗口地滾動(dòng)條,如何保證浮動(dòng)框架地寬度能夠適應(yīng)顯示了滾動(dòng)條之后地窗口寬度？需要在增加文件域元素之后重新調(diào)用email.js文件地函數(shù)iframeWidth(),因?yàn)樵摵瘮?shù)屬于文件writeemail.php父窗口文件email.php所有,所以在調(diào)用時(shí),需要在函數(shù)名前面使用代碼parent,完整地形式是parent.iframeWidth();,parent表示由當(dāng)前浮動(dòng)框架子窗口運(yùn)行地頁面文件來訪問父窗口地頁面文件。函數(shù)addAttach()代碼如下:刪除附件地功能說明點(diǎn)擊第一個(gè)文件域元素右側(cè)地"刪除"文本時(shí),將選擇地附件信息刪除;而點(diǎn)擊之后那些文件域元素右側(cè)地"刪除"時(shí),除了刪除選擇地附件信