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

《web程序开发------开心网前台页面设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、00px，当用户浏览器分辨率更高时，页面居中显示，页面尺寸要求如下：4.页面使用到的图片素材应统一存放在images子文件夹下。四、具体页面设计要求1.网站首页（index.html）A.参考界面：B.设计要求：项目要求网站Logo点击网站Logo之后可以连接到首页（其他页面同样有此要求）。快速登录通过左侧Email和密码可以实现快速登录，处理登录的程序为login.aspx，采用POST方式，登录成功后自动转到用户空间页面（myspace.html）。顶部连接使用无序列表实现，连接一般状态为“灰白

3、色、下划线”，鼠标放在其上时字体变亮、下划线消失；点击时分别转到相应的目标页面底部连接使用无序列表实现，连接一般状态为“灰白色、下划线”，鼠标放在其上时字体变亮、下划线消失；点击时分别连接到相应的目标页面，点击“京ICP证XXXX号”在新窗口打开工业和信息化部备案网站（http://www.miibeian.gov.cn）；点击“联系方式”可以自动打开用户系统默认的邮件客户端程序向master@kaixin001.com发送邮件，邮件标题为“网友来信了”页面主体请根据图示完成1.注册页面（reg.h

4、tml）A.参考页面：A.设计要求：项目要求网站Logo、快速登录、顶部连接、底部连接的设计要求与网站首页同（以下页面设计要求中将不再重复）。左侧尺寸140px注册表单注册表单的处理程序为register.aspx，采用POST方式。表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为黑色。性别、生日、目前身份、隐私设置用单选按钮或下拉列表实现。表单确认按钮字体大小为14px，按钮颜色为暗红色。2.注册成功页面（reg_succeed.html）A.参考页面：A.设计要求：项目要求感谢注册

5、采用DIV布局，字体大小为14px。注册成功后5秒钟页面自动跳转到登录页面（login.html）。2.登录页面（login.html）A.参考页面：B.设计要求：项目要求登录页面通过Email和密码可以实现快速登录，处理登录的程序为login.aspx，采用POST方式，登录成功后自动转到用户空间页面（myspace.html）。3.用户空间（myspace.html）A.参考页面：A.设计要求：项目要求左侧列表采用无序列表实现，连接一般状态为“蓝色、加粗、下划线”，鼠标放到其上显示为“红色、加粗

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

7、题部分，点击帮助主题后的“Top”回跳到主题索引部分。1.意见反馈意见（feedback.html）A.参考页面：B.设计要求：项目要求意见反馈表单表单交由feedback.aspx处理，采用POST方式；反馈类型从下拉列表中选择，联系方式文本框中默认有“请留下您的Email和姓名”等字样，呈现为灰色。五、相关素材