网站开发项目实训-网站说明文档详解.doc

第 PAGE 8页，共 NUMPAGES 8页 软件技术专业 《网站开发项目实训》 一、网站目的 本实训是软件技术专业的一门专业实训课程，其内容主要涉及网页制作及网站开发、JavaScript脚本技术，要求学生使用HTML、CSS、JavaScript开发具有良好用户体验的静态网站。本实训课程的目的是使学生通过从头到尾完成一个网站的开发，加深对网页制作主要技术的理解，提高网页制作能力，同时培养初步的项目开发能力，让学生具备独立完成一个属于自己风格的网站。 二、网站内容及文件说明安排 序号内容安排1实训内容介绍，网站分析2理解工作任务，熟悉和整理素材3制作header和footer部分4制作个人网站首页5制作属于自己的一些有个性的页面6制作个人网站中详情页面7添加日期事件8制作登录页面9制作注册页面 三、项目需求说明 下面的网站开发只是举个例子，因为每个人做的个人网站都有属于自己的风格，不会完全一样，只是简单要求有些网页必须存在。 以制作贵美商城网站为例，让学生自己制作属于自己有个性的网站。 案例如下所示： （一）header部分 说明： 1、显示的时间会自动更新。 2、导航菜单在鼠标悬停时呈现不同的样式，如下图所示： 3、点击顶部“购物车”，跳转到商品购买页面，点击“登录”跳转到登录页面，点击“注册”跳转到注册页面。这里的超链接文字不要变颜色。 4、导航菜单中“首页”链接到首页，“家用电器”、“手机数码”、“日用百货”、“书籍”都链接到产品列表页面。 （二）footer部分 说明： 友情链接各网站分别链接到对应的网站首页。 （三）商城首页 说明： 1、中间的广告图片有4幅，会自动轮换。对应的素材分别是ad-01.jpg ~ ad-04.jpg。图片中显示的数字1-4点击后可以直接显示对应的图片。 2、悬浮在页面左右两侧的广告图片位置固定，不随网页内容移动，可以点击上面的关闭按钮将它们隐藏。 3、页面右下方，鼠标移到“手机充值”上，???示如下内容： 鼠标回到“笔记本”上时再显示原来的另一块内容。 4、页面文字所有超级链接在鼠标悬停时变成橙色，如下图所示： 5、本页所有超链接如下： （1）页面左边商品分类中的每一个词（如“大家电”、“洗衣机”）在点击后都跳转到产品列表页面。 （2）页面中间商品列表中的每一种商品的文字在点击后都跳转到商品详情页面。 （3）页面右方“新品上架”中的每一种商品的文字在点击后都跳转到商品详情页面。 （四）产品列表页面 说明： 1、“全选”复选框可用来全部选中或全部取消所有商品的选择。 2、商品图片均为超链接，点击后跳转到商品详情页面。 3、商品图片右方的商品信息首行为超链接，点击后跳转到商品详情页面，鼠标悬停时文字变成橙色（与首页相同），如下图所示。 （五）商品详情页面 说明： 1、商品大图下方有5个小图，点击小图可以将大图换成与被点击小图相同的图片。 2、点击“立刻购买”，可以跳转到商品购买页面。 （六）商品购买页面 说明： 1、每一种商品的名称都是超链接，鼠标悬停时文字变成橙色（与首页相同，如下图所示），点击后跳转到商品详情页面。 2、点击“删除”，可以删除对应的商品（只要把这行隐藏起来，下面的总计价格不用改）。 3、点击“继续挑选商品”，跳转到首页。 4、地址栏的内容不可直接输入，点击“请点击填写地址”，弹出模态对话框，如下图所示，在对话框中输入后点击“确认”，地址自动出现在地址栏中。 5、点击“简易计算器”，打开一个新窗口，显示一个小型计算器可供使用（此功能不做要求，有兴趣的同学在做完整个网站以后可以试着做一做）。 （七）登录页面 说明： 1、点击“登录”按钮时，对输入的信息进行检查，如果没填或不符合要求则弹出相应的提示信息框。 2、点击“现在就注册”按钮跳转到注册页面。 （八）注册页面 说明： 1、点击“头像”旁边的“浏览”按钮选择图像文件后，在右边的空白处显示预览的头像。 2、点击“提交”按钮后检查输入信息是否完整，两次输入的密码是否一致，以及有要求的信息是否符合要求，如果信息完整且符合各项要求则跳转到首页，否则弹出信息框显示相应的提示信息。 3、点击“重填”按钮，清除输入的所有信息。 4、贵美网服务协议全文如下： 欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用G网站的各种工具和服务。 本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。 贵美的权利和义务 1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。 2.对用户在注册使用贵美网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。 3.对于