2016-2017年WEB程序开发------开心网前台页面设计.docVIP

开心网前台页面设计 一、项目说明 本项目针对《Web程序开发基础》设置，任务是完成“开心网”前台静态页面的规划和设计工作。 希望通过本项目，提高练习者对网页设计技术，加固对网站结构、页面布局、HTML元素等知识的理解。 本项目主要使用 HTML、CSS、XML 等技术。 二、网站结构 三、总体设计要求 所有风格统一，简洁大方，采用 DIV + CSS 布局，表单部分可以使用表格布局。 所有显示样式全部采用 CSS 样式表，不允许使用 HTML 属性控制显示样式。 设计浏览器分辨率为 1024*768，页面宽度为 1000px，当用户浏览器分辨率更高时，页面居中显示，页面尺寸要求如下： 页面使用到的图片素材应统一存放在 images 子文件夹下。 四、具体页面设计要求 网站首页（index.html） 参考界面： 设计要求： 项目 要求 网站Logo 点击网站Logo之后可以连接到首页（其他页面同样有此要求）。 快速登录 通过左侧Email和密码可以实现快速登录，处理登录的程序为 login.aspx，采用 POST方式，登录成功后自动转到用户空间页面（myspace.html）。 顶部连接 使用无序列表实现，连接一般状态为“灰白色、下划线”，鼠标放在其上时字体变亮、下划线消失；点击时分别转到相应的目标页面 底部连接 使用无序列表实现，连接一般状态为“灰白色、下划线”，鼠标放在其上时字体变亮、下划线消失；点击时分别连接到相应的目标页面，点击“京ICP证XXXX号”在新窗口打开工业和信息化部备案网站（）；点击“联系方式”可以自动打开用户系统默认的邮件客户端程序向 master@ 发送邮件，邮件标题为“网友来信了” 页面主体 请根据图示完成 注册页面（reg.html） 参考页面： 设计要求： 项目 要求 网站Logo、快速登录、顶部连接、底部连接的设计要求与网站首页同（以下页面设计要求中将不再重复）。 左侧尺寸 140px 注册表单 注册表单的处理程序为 register.aspx，采用 POST 方式。 表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为黑色。 性别、生日、目前身份、隐私设置用单选按钮或下拉列表实现。 表单确认按钮字体大小为14px，按钮颜色为暗红色。 注册成功页面（reg_succeed.html） 参考页面： 设计要求： 项目 要求 感谢注册 采用 DIV 布局，字体大小为 14px。 注册成功后5秒钟页面自动跳转到登录页面（login.html）。 登录页面（login.html） 参考页面： 设计要求： 项目 要求 登录页面 通过Email和密码可以实现快速登录，处理登录的程序为 login.aspx，采用 POST方式，登录成功后自动转到用户空间页面（myspace.html）。 用户空间（myspace.html） 参考页面： 设计要求： 项目 要求 左侧列表 采用无序列表实现，连接一般状态为“蓝色、加粗、下划线”，鼠标放到其上显示为“红色、加粗、无下划线”。 右侧Tab菜单 采用无序列表实现，活动的Tab背景为白色，非活动的Tab背景为灰色 帮助中心页面（help.html） 参考页面： 设计要求： 项目 要求 右侧分类链接 用 DIV 标签实现三列布局，采用无序列表嵌套实现一级分类和二级分类。 链接一般状态为“12px、墨绿色、下划线”，鼠标放在其上时字体演示为红色。 分类帮助（help_account.html） 参考页面： 设计要求： 项目 要求 分类帮助 同一主题（如“账户”）的帮助信息在同一个页面中，点击“帮助主题索引”时页面跳转到相应帮助主题部分，点击帮助主题后的“Top”回跳到主题索引部分。 意见反馈意见（feedback.html） 参考页面： 设计要求： 项目 要求 意见反馈表单 表单交由 feedback.aspx 处理，采用 POST 方式；反馈类型从下拉列表中选择，联系方式文本框中默认有“请留下您的Email和姓名”等字样，呈现为灰色。 五、相关素材