PHP网站开发项目式教程（微课版）（第2版）任务7 实现163邮箱写邮件功能 .pdf

任务7实现163邮箱写邮件功能

写邮件并发送邮件是邮箱项目的核心功能。接下来需要完成

的任务如下。

/设计邮箱的主口界面。

/设计写邮件的表单界面。

/设计添加附件的界面，实现附件的添加与删除。

/实现发送邮件和系统退信功能。

©®

蹴啷籍窕窗［□麝

A需要解决的核心问题

•如何在主口界面或写邮件界面的文本框中显示用户登录时的

账号信息？

•如何使用JavaScript代码获取浏览器口的宽度？

•如何使用JavaScript代码获取浮动框架内部页面文件的高度？

•浏览器口大小变化之后触发的是哪个事件？

用户登录成功之后，打开的是一个包含浮动框架子口界面

的文件，在该文件内部的浮动框架子口中可以运行写邮件页面

文件、收邮件页面文件、查阅邮件页面文件及己删除邮件页面文

件等。

本任务要设计的主口界面文件email,php就是登录完成之

后进入的页面，页面的宽度始终与浏览器口的宽度保持一致，

页面效果如图7-1所示。

图7Temail,php文件运行界面

图7-1是在登录界面中输入正确的账号和密码后得到的页面,

该页面的整体布局分为上下两个区域，布局结构如图7-2所示。

.wshdiv

.wshleft；.wshright

.leftdivtop

.maindiv

.leftdivbot

#leftdiv

图7-2email,php的布局结构

上面区域中的内容除了用户账号信息会因为登录用户不同而

不同外，其他内容都是固定的。

下面区域又分为左右两个部分，左边是几个固定的超链接,

茴

右边设计了一个浮动框架，浮动框架的内容将随用户所单击的超

链接的变化而变化，写邮件、收邮件、阅读邮件等操作都在浮动

框架中完成。

整个页面功能的实现包含样式代码、页面文件代码和脚本代

码3个部分，分别对应email.cssemail,php和email,js这3个

文件。

7.1.1设计顶部区域

10个区域的皆就说B

可将整个区域定义为一个盒子，这里采用类选择符.wshdiv定

义样式，样式要求如下。

(1)宽度与边距说明。页面运行之后，页面宽度与浏览器口的

宽度保持一致，而且需要随着口大小的变化而变化，因此顶部

区域的宽度需要取用浏览器口的宽度，具体做法是设置width为

auto,左右边距为0,上下边距为0。

(2)高度说明。高度直接定义为固定高度50px即可。

(3)填充说明。考虑到顶部区域中的内容与浏览器口上边框和

左右边框之间要留有一定的空白，因此设置上填充为10px,下填

充为0px,左右填充为10px。

(4)边框说明：顶部区域下方