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

;任务7实现163邮箱写邮件功能;任务7-1设计邮箱主窗口界面;用户登录成功之后，打开的是一个包含浮动框架子窗口界面的文件，在该文件内部的浮动框架子窗口中可以运行写邮件页面文件、收邮件页面文件、查阅邮件页面文件及已删除邮件页面文件等。

本任务要设计的主窗口界面文件email.php就是登录完成之后进入的页面，页面的宽度始终与浏览器窗口的宽度保持一致，页面效果如图7-1所示。;图7-1??email.php文件运行界面;图7-1是在登录界面中输入正确的账号和密码后得到的页面，该页面的整体布局分为上下两个区域，布局结构如图7-2所示。;上面区域中的内容除了用户账号信息会因为登录用户不同而不同外，其他内容都是固定的。

下面区域又分为左右两个部分，左边是几个固定的超链接，右边设计了一个浮动框架，浮动框架的内容将随用户所单击的超链接的变化而变化，写邮件、收邮件、阅读邮件等操作都在浮动框架中完成。

整个页面功能的实现包含样式代码、页面文件代码和脚本代码3个部分，分别对应email.css、email.php和email.js这3个文件。;7.1.1设计顶部区域;（2）高度说明。高度直接定义为固定高度50px即可。

（3）填充说明。考虑到顶部区域中的内容与浏览器窗口上边框和左右边框之间要留有一定的空白，因此设置上填充为10px，下填充为0px，左右填充为10px。

（4）边框说明：顶部区域下方的横线直接通过在类选择符.wshdiv中定义下边框来实现，边框宽度为6px，线型为实线，边框颜色为#88f。;2．区域内部的元素说明

元素divclass=wshdiv内部有靠左和靠右的两部分内容，靠左者使用向左浮动，靠右者使用向右浮动，分别使用类选择符.wshleft和.wshright定义样式。

;（1）类选择符.wshleft的样式要求：边距为0，向左浮动，内部文本字号为10pt。

类名为wshleft的div内容依次为：图片163logo.gif、文本框、超链接。

（2）类选择符.wshright的样式要求：向右浮动，边距为0。

类名为wshright的div内容包括一个文本框和图片search.png。

3．设计顶部区域的代码;7.1.2设计左下部区域;1．左下部区域的样式与功能说明

可将整个左下部区域设计为一个div，采用ID选???符#leftdiv定义样式，具体样式要求为：宽度为200px，高度为600px，填充为0，边距为0，右边框和下边框宽度为1px，线型为实线，边框颜色为#aaf，背景色为#eef，向左浮动。

2．设计左下部区域的代码

（1）样式代码。

（2）页面内容代码。;7.1.3设计右下部区域;类选择符.maindiv具体的样式要求为：宽度和高度都是auto，填充为0，边距为0，向左浮动。

元素divclass=maindiv的内容是浮动框架，浮动框架的name和id属性取值都为main，初始高度和宽度都为auto。在页面运行时，使用脚本函数设置相应的高度和宽度取值，边框设置为0，滚动条为no，初始加载的页面文件是writeemail.php。

2．设置右下部区域的样式代码和页面代码

（1）样式代码。

（2）页面代码。

;3．设置浮动框架的宽度

整个邮箱主窗口界面的宽度始终与浏览器窗口宽度保持一致，在元素divclass=bot的内部，左侧元素divid=leftdiv的总宽度固定为201px，右侧元素divclass=maindiv的宽度为auto，因此要求在元素divclass=maindiv内部的浮动框架的宽度必须能够适应浏览器窗口的变化。若窗口变宽，浮动框架就要变宽，若窗口变窄，浮动框架就要变窄，从而做到由浮动框架窗口的宽度来决定元素divclass=maindiv的宽度。;具体实现方法是：用浏览器窗口宽度减去元素divid=leftdiv的总宽度201px，将结果作为浮动框架的宽度。

4．设置浮动框架的高度

在一个使用了浮动框架子窗口的页面中，因为加载到浮动框架中的页面高度并不固定，所以要求浮动框架的高度能随着加载进来的页面内容高度的变化而变化，这样能够避免出现以下两个问题。

;（1）若浮动框架初始高度小于加载进来的页面内容高度，则内部需要出现滚动条，因此会存在“内外双滚动”情况，影响页面的美观。

（2）若浮动框架初始高度大于加载进来的页面内容高度，则浮动框架底部页面内容下方将出现大片的空白区域，也会影响页面的美观。

7.1.4email.php的完整代码;任务7-2实现写邮件页面功能;图7-3??写邮件界面;7.2.1布局、样式及页面元素插入;图7-