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

开心网前台页面设计 一、项目说明 本项目针对《Web程序开发基础》设置，任务是完成“开心网”前台静态页面的规划和设计工作。 希望通过本项目，提高练习者对网页设计技术，加固对网站结构、页面布局、HTML元素等知识的理解。 本项目主要使用 HTML、CSS、XML 等技术。 二、网站结构 三、总体设计要求 所有采用 DIV + CSS 布局用表格布局 设计浏览器分辨率为 1024*768，页面宽度为 1000px，当用户浏览器分辨率更高时，页面居中显示 页面使用到的图片素材应统一存放在 images 子文件夹下。 四、页面 网站首页（index.html）参考界面 设计要求： 项目 要求 网站Logo 点击网站Logo之后可以连接到首页（其他页面同样有此要求）。 快速登录 通过左侧Email和密码可以实现快速登录，登录成功后自动转到用户空间页面（myspace.html）。 顶部连接 使用无序列表实现，连接一般状态为色、下划线，鼠标放在其上时下划线消失；点击时分别到相应的目标页面 底部连接 ）；点击“联系方式”可以自动打开用户系统默认的邮件客户端程序向 master@ 发送邮件，邮件标题为“网友来信了” 页面主体 请根据图示完成 注册页面（reg.html）项目 要求 网站Logo快速登录顶部连接底部连接 左侧尺寸 140px 注册表单 注册表单的处理程序为 register.aspx，采用 POST 方式。 表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为黑色。 性别、生日、目前身份、隐私设置用单选按钮或下拉列表实现。 表单确认按钮字体大小为14px，按钮颜色为暗红色。 注册成功页面（reg_succeed.html）项目 要求 采用 DIV 布局，字体大小为 14px。 注册成功后5秒钟页面自动跳转到登录页面（login.html）。 登录页面（login.html）项目 要求 通过Email和密码可以实现快速登录，登录成功后自动转到用户空间页面（myspace.html）。 用户空间（myspace.html）项目 要求 采用无序列表实现，连接一般状态为“蓝色、加粗、下划线”，鼠标放到其上显示为“红色、加粗、无下划线”。 右侧Tab菜单 采用无序列表实现，活动的Tab背景为白色，非活动的Tab背景为灰色 帮助中心页面（help.html）项目 要求 用 DIV 标签实现三列布局，采用无序列表嵌套实现一级分类和二级分类。 链接一般状态为“12px、墨绿色、下划线”，鼠标放在其上时字体演示为红色。 分类帮助（help_account.html） 参考页面： 设计要求： 项目 要求 同一主题（如“账户”）的帮助信息在同一个页面中，点击“帮助主题索引”时页面跳转到相应帮助主题部分，点击帮助主题后的“Top”回跳到主题索引部分。 意见反馈意见（feedback.html） 项目 要求 表单交由 feedback.aspx 处理，采用 POST 方式；反馈类型从下拉列表中选择，联系方式文本框中默认有“请留下您的Email和姓名”等字样，呈现为灰色。 五、相关素材 enforced thermal insulation starts checking system, issued by the thermal insulation construction before you start to notice, transfer inspection of upper and lower operation and transfer of records. For outdoor operation, pipeline equipment to effectively carry out the insulation waterproof measures fail to install protective panels in part with three tarpaulin cover, to prevent insulation from moisture. Insulation seam Michael Jackson 5mm, joints, joints 100mm, insulation thickness tolerance +10MM~ – 5mm , appropriate material elastic banding, spacing according to the design requirements, rigid insulation soft materials for construction j