WEB程序开发------开心网前台页面设计

1、 开心网前台页面设计一、项目说明1. 本项目针对Web程序开发基础设置，任务是完成“开心网”前台静态页面的规划和设计工作。2. 希望通过本项目，提高练习者对网页设计技术，加固对网站结构、页面布局、HTML元素等知识的理解。3. 本项目主要使用 HTML、CSS、XML 等技术。二、网站结构三、总体设计要求1. 所有风格统一，简洁大方，采用 DIV + CSS 布局，表单部分可以使用表格布局。2. 所有显示样式全部采用 CSS 样式表，不允许使用 HTML 属性控制显示样式。3. 设计浏览器分辨率为 1024*768，页面宽度为 1000px，当用户浏览器分辨率更高时，页面居中显示，页面尺寸要求

2、如下：4. 页面使用到的图片素材应统一存放在 images 子文件夹下。四、具体页面设计要求1. 网站首页（index.html）A. 参考界面：B. 设计要求：项目要求网站Logo点击网站Logo之后可以连接到首页（其他页面同样有此要求）。快速登录通过左侧Email和密码可以实现快速登录，处理登录的程序为 login.aspx，采用 POST方式，登录成功后自动转到用户空间页面（myspace.html）。顶部连接使用无序列表实现，连接一般状态为“灰白色、下划线”，鼠标放在其上时字体变亮、下划线消失；点击时分别转到相应的目标页面底部连接使用无序列表实现，连接一般状态为“灰白色、下划线”，鼠标

3、放在其上时字体变亮、下划线消失；点击时分别连接到相应的目标页面，点击“京ICP证XXXX号”在新窗口打开工业和信息化部备案网站（）；点击“联系方式”可以自动打开用户系统默认的邮件客户端程序向 发送邮件，邮件标题为“网友来信了”页面主体请根据图示完成2. 注册页面（reg.html）A. 参考页面：B. 设计要求：项目要求网站Logo、快速登录、顶部连接、底部连接的设计要求与网站首页同（以下页面设计要求中将不再重复）。左侧尺寸140px注册表单注册表单的处理程序为 register.aspx，采用 POST

4、 方式。表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为黑色。性别、生日、目前身份、隐私设置用单选按钮或下拉列表实现。表单确认按钮字体大小为14px，按钮颜色为暗红色。3. 注册成功页面（reg_succeed.html）A. 参考页面：B. 设计要求：项目要求感谢注册采用 DIV 布局，字体大小为 14px。注册成功后5秒钟页面自动跳转到登录页面（login.html）。4. 登录页面（login.html）A. 参考页面：B. 设计要求：项目要求登录页面通过Email和密码可以实现快速登录，处理登录的程序为 login.aspx，采用 POST方式，登录成功后自动转到用户空间

5、页面（myspace.html）。5. 用户空间（myspace.html）A. 参考页面：B. 设计要求：项目要求左侧列表采用无序列表实现，连接一般状态为“蓝色、加粗、下划线”，鼠标放到其上显示为“红色、加粗、无下划线”。右侧Tab菜单采用无序列表实现，活动的Tab背景为白色，非活动的Tab背景为灰色6. 帮助中心页面（help.html）A. 参考页面：B. 设计要求：项目要求右侧分类链接用 DIV 标签实现三列布局，采用无序列表嵌套实现一级分类和二级分类。链接一般状态为“12px、墨绿色、下划线”，鼠标放在其上时字体演示为红色。7. 分类帮助（help_account.html）A. 参考页面：B. 设计要求：项目要求分类帮助同一主题（如“账户”）的帮助信息在同一个页面中，点击“帮助主题索引”时页面跳转到相应帮助主题部分，点击帮助主题后的“Top”回跳到主题索引部分。8. 意见反馈意见（feedback.html）A. 参考页面：B. 设计要求：项目要求意见反馈表单表单