PHP网站开发项目式教程-设计email.php页面_第1页
PHP网站开发项目式教程-设计email.php页面_第2页
PHP网站开发项目式教程-设计email.php页面_第3页
PHP网站开发项目式教程-设计email.php页面_第4页
PHP网站开发项目式教程-设计email.php页面_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务七163邮箱写邮件功能实现说明文件email.php的内容，对右图所示的界面进行分析（不包括图中右下部分的内容）当用户登录成功之后进入该页面7.1设计邮箱主窗口界面email.php页面的功能特点说明email.php页面右下部分是浮动框架子窗口，在该窗口内部可以运行写邮件页面文件、收邮件页面文件、阅读邮件页面文件等该页面窗口宽度始终与浏览器窗口宽度一致，为了保证页面的美观，将页面边距设置为0整个页面功能的实现包含了样式代码、页面文件代码和脚本代码三个部分代码的创建，分别使用email.css、email.php和email.js三个文件来完成页面布局需要的div说明wshdiv的样式要求为：宽度自动，高度50px，上右下左填充分别是10px、10px、0、10px，边距0，下边框6px、实线、颜色为#88f；思考：此处能否将宽度auto改为100%？为何？wshdiv的宽度问题不可将width:auto;改为width:100%原因说明：宽度取值为auto，使得内容区的宽度能够根据元素的边框、边距、填充等样式值自动调整，保证整个元素的总宽度与窗口同宽若是改为100%，则无论边框边距填充取值如何，都是内容区与窗口同宽7.1.1设计顶部区域

wshleft元素及样式说明wshleft盒子的样式要求为：边距为0，向左浮动，内部文本字号10pt；在盒子wshleft中包含了图片163logo.gif（与右侧文本框和超链接文本中线对齐），用于显示账号信息的文本框和“网易”、“帮助”、“退出”三个超链接，点击“退出”时要返回登录界面，其它两个超链接的href属性设置为#即可。文本框的样式要求：使用class类选择符emailaddr定义，宽度150px，无边框，内部字体加粗，只读状态；超链接的样式要求：初始状态、访问过状态和鼠标悬停状态时都设置颜色#555、无下划线效果。为emailaddr文本框设置内容页面中emailaddr文本框在页面初始运行时就填入了用户登录时的账号@163.com，例如登录账号是liuling，则此处显示liuling@163.com思考问题：完成上面功能，需要设置文本框的什么属性？该属性的值来自何处？需要设置该文本框的value属性值来实现上面功能，属性值来自于服务器文件denglu.php使用变量$emailaddr所保存的登录账号信息为emailaddr文本框设置内容代码为value="<?phpecho$emailaddr.'@163.com';?>"denglu.php保存的数据服务器端文本框浏览器端为emailaddr文本框设置内容思考问题在email.php文件中为什么能够直接使用denglu.php页面中变量$emailaddr的值，而不需要使用session来传递？因为email.php文件是在denglu.php文件中使用include包含的方式来运行的，隶属于denglu.php文件，因而denglu.php文件中的变量可以直接在email.php文件中使用为emailaddr文本框设置内容思考问题email.php中文本框内容来自文件denglu.php的变量$emailaddr，如果要在denglu.php文件中使用输出脚本代码的方式，设置email.php文件emailaddr文本框内容，实现代码如何？如果将文本框元素更换为span元素，要如何定义样式、添加内容？7.1.1设计顶部区域

wshright元素及样式说明盒子wshright的样式要求为：向右浮动，边距为0；盒子内部包含的元素有：一个用于输入搜索内容的文本框和一个搜索图片按钮，图片要使用align="top"属性设置文本框与其顶端对齐文本框的样式要求：使用class类选择符search定义宽200px，高26px，边框为灰色#ddd、1px、实线，使用placeholder设置提示文本“支持全文搜索”7.1.2设计左下部区域bot元素的添加样式说明：宽度自动、高度自动、填充0、边距0说明：该div的作用只是作为#leftdiv和.maindiv的父元素，保证浮动元素不会出现混乱leftdiv样式说明样式要求为：宽200px，高600px，边距0，填充0，右边框和下边框宽度1px、实线、颜色为#aaf，背景色为#eef，向左浮动。思考问题：盒子的总宽度是多少？Leftdivtop中超链接的添加在盒子leftdivtop中包含了图片writerecieve.jpg，在该图片上做了两个图像映射超链接写信超链接href设置为writeemail.php，target设置为main（这是浮动框架的name）；收信超链接href设置为receiveemail.php，target也设置为main。leftdivbot中超链接的添加盒子内部包含的元素是四个超链接，四个超链接使用段落来分开：段落上下边距10px，字号10pt，超链接要求如下：链接初始状态和访问过状态都是灰色#999，没有下划线；鼠标悬停时为蓝色#ddf，显示下划线收件箱receiveemail.php，在main中显示草稿箱（空链接）已发送（空链接）已删除deletedemail.php，在main中显示7.1.3设计右下部区域

maindiv的样式及元素说明maindiv的样式要求为：宽度和高度都是auto，边距为0，填充为0，向左浮动与leftdiv排列在同一水平位置上在maindiv内部的是一个浮动框架，浮动框架要求如下：为浮动框架定义的name和id都是main浮动框架初始时加载的页面文件是writeemail.php浮动框架的宽度和高度都设置为自动（稍后将通过脚本来设置其宽度与高度值）滚动条设置为无浮动框架宽度说明整个邮箱主窗口界面的宽度始终与浏览器窗口宽度保持一致在盒子bot内部左侧的leftdiv的宽度是固定的（201px）右侧的maindiv宽度为自动（实际宽度将根据内部浮动框架宽度确定）因此要求maindiv内部的浮动框架的宽度必须能够适应浏览器窗口的变化，若窗口变宽，浮动框架宽度要变宽，若窗口变窄，浮动框架宽度要变窄，从而做到由浮动框架窗口的宽度来决定盒子maindiv的宽度。思考问题浮动框架子窗口的宽度要根据什么进行计算？回答问题：浮动框架main的宽度需要使用浏览器窗口宽度减去201得到思考问题：如何获取浏览器窗口的宽度？获取浏览器窗口宽度获取浏览器窗口的宽度需要分别针对两种情况来进行第一种情况，页面中没有使用xhtml的相关标准，即在页面代码开始时直接使用<html>标记时，需要使用代码document.body.clientWidth获取到浏览器窗口中可见区域的宽度第二种情况，页面中使用了xhtml的相关标准（现在页面普遍使用），需要使用代码document.documentElement.clientWidth;获取到浏览器窗口中可见区域的宽度定义函数实现浮动框架的宽度自适应创建email.js文件，定义函数iframeWidth()，实现如下功能使用代码winWidth=document.body.clientWidth||document.documentElement.clientWidth获取浏览器窗口的宽度，使用或运算符可以保证能够获取任何情况页面所在浏览器窗口的宽度使用document.getElementById("main").width=winWidth-201设置浮动框架窗口宽度调用函数iframeWidth()首先在email.php文件中引用脚本文件email.js函数iframeWidth()的调用需要在两种情况下进行第一种情况是，加载页面文件email.php时，此时激活的事件是window对象的load事件，在函数定义完成的花括号后面使用代码window.onload=iframeWidth;进行调用；第二种情况是，当用户调整浏览器窗口大小时，此时激活的事件是window对象的resize事件，在函数定义完成的花括号后面使用代码window.onresize=iframeWidth;进行调用。浮动框架高度设置为固定值存在的缺陷浮动框架子窗口的内容总是根据点击的超链接来加载，如果将其高度设置为固定值，存在如下缺陷：第一，若浮动框架初始高度小于加载进来的页面高度，在内部需要出现滚动条，存在了内外双滚动情况，会影响页面的美观性；第二，若浮动框架初始高度高于加载进来的页面高度，浮动框架底部页面内容下方将出现大片的空白区域，也会影响页面的美观性。因此我们在项目中定义浮动框架时，其高度直接设置为auto思考问题浮动框架子窗口的高度要根据什么进行设置？浮动框架子窗口的高度要根据加载到子窗口内部的页面内容的高度来设置获取浮动框架子窗口中页面内容的高度获取页面内容高度时，需要考虑运行页面文件时使用的浏览器，在不同浏览器下面运行的页面，有不同的方法来获取加载到浮动框架中的页面内容的高度，主要分为IE内核和webkit内核两种情况（下面的iframe1变量代表浮动框架）第一，若浏览器内核为IE，则条件if(iframe1.contentWindow)成立，此时可以使用代码iframe1.contentWindow.document.body.offsetHeight（或者scrollHeight）获取页面的高度第二，若浏览器内核为webkit，则条件(iframe1.contentDocument)成立，此时可以使用代码iframe1.contentDocument.documentElement.offsetHeight获取页面的高度定义函数iframeHeight()设置浮动框架子窗口的高度在email.js文件中定义函数iframeHeight()，实现如下功能：获取浮动框架元素，保存在变量iframe1中根据浏览器的内核，获取页面内容的高度，保存在变量h1中使用iframe1.height=h1将h1设置为浮动框架的高度判断h1若是超过600，设置浮动框架

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论