静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 计算机系部网站-实训指导书5.docVIP

静态网页设计与制作（项目式） PAGE 218 PAGE 218 课程实训指导书 《静态网页制作（Dreamweaver）》 实训指导书 指导教师：张亚静 所在系别： 计算机技术系 所属专业： 网络技术 指导教师: 张亚静 专业负责人： 孙志成 PAGE PAGE 7 指导书填写要求 实训设计指导书由指导教师根据课题的具体情况进行设计填写，经学生所在专业的负责人审查、系领导签字后生效。此指导书应在实训开始前一周内填好并发给学生； 指导书填写的内容，必须和学生实训完成的情况相一致。若有变更，应当经过所在专业教研室及系主管领导审批后方可重新填写； 本指导书内有关“系”、“专业”等名称的填写，应写中文全称，学生的“学号”要写全，不能只写最后2位或1位数字； 有关年月日等日期的填写，一律用阿拉伯数字书写。如“2017年3月2日”或“2017-03-02”。 实训五、电子商务系统网站设计 一、实训的目的与要求 （一）实训目的 通过实训，进一步巩固、深化和扩展学生的理论知识与专业技能；训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力、团队协作精神，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等提高学生运用所学的理论知识和技能、最终提升学生开发网站的综合能力。 （二）实训要求 规划网站的内容结构、目录结构、链接结构。 应用DIV+CSS搭建网站布局。 应用网页特效增强网站视觉效果。 应用模板构建网站二级页面。 完成网站测试及发布。 二、实训的前期准备（设备、用具与软件环境） 操作系统： WIN10/WIN7/XP等操作系统 应用软件 Dreamwear网页编辑软件及 Flash动画设计软件、PS图形图像处理软件等。 三、实训的步骤 电子购物系统静态网站的的设计主要包括两部分：html基础知识、网页的设计，具体步骤参考如下： （一）html基础知识 HTML常用标签及使用，完成如图1.1注册页面 图1.1 用户注册界面 （二）网页的设计 1主页面的设计 图1.2 会员购物主界面 2会员登录及注册 读者以会员的身份登录之后方可在网站上进行购物。 （1 ）登录 如果读者已经是该系统的会员，则只需单击“用户名”和“密码”文本框，输入相应的用户名和密码，最后单击【登录】按钮即可进入图1.3的界面。 图1.3 登陆成功界面 （2） 注册： 如果读者是新用户，需要先注册，然后才能以会员身份进入在网上购物。 单击【登录】按钮，进入如图1.1所示的界面， 单击“用户名”、“真实姓名”、“密码”、“确认密码”、“所在城市”、“联系地址”、“邮政编码”、“证件号码”、“证件类别”、“联系电话”和“Email”文本框，输入相应的内容，最后单击【确认保存】按钮，系统会给予“注册成功”的提示字样。进行确认后即完成注册。最后单击“用户名”和“密码”文本框，输入相应的用户名和密码，最后单击【登录】按钮即可进入如图1.4所示会员购物界面。 图1.4 会员购物界面 单击【重新填写】按钮，可取消先前的内容。 注意：防止用户名重复，用户输入用户名之后，单击【检测用户名】按钮，系统自动进行检测，然后给予相应的提示。 3 会员资料修改 单击【会员资料修改】按钮，进入如图1.5所示的界面。 图1.5 会员资料修改 用户名不可以修改，单击其它任意一个文本框，修改相应的内容，最后单击【确定保存】按钮即可。 4搜索商品 如图1.6所示，选择查询条件，输入与查询条件相对应的内容，单击【搜索】按钮，界面下方自动显示相应的查询结果。 图1.6 搜索商品 5购买商品 单击任意一种商品右侧的【购买】按钮，可打开购物车界面，如图1.7所示。 图1.7 购物车界面 单击下方【修改数量】按钮， “数量”文本框，可输入相应的数量。 6去收银台结账 单击【去收银台结账】按钮，进入如图1.8所示的结账界面。 图1.8 收银台结账 在表单中，输入相应的内容，最后单击【提交】按钮即结账完毕，系统自动生成订单号。 7清空购物车 如果要清空购物车，只需单击【清空购物车】按钮，购物车即被清空，如果继续购物，单击【我要购买商品】按钮，即返回首页，继续购物。 8查询订单 单击【查看订单】按钮，即可显示相应的订单信息，如图1.9所示。 图1.9 查看订单 9销售排行 【销售排行】按钮，系统首页即显示相应的销售排行榜，如图1.10所示。如果想购买其中任意一种商品，单击其后的【购买】按钮即可。 图1.10 销售排行 10、后台管理页