实训目的

网站建设及优化课程是电子商务专业的重要实践环节。通过实习使学生能够更进一步的领会电子商务网站建设的相关知识,熟悉和掌握网站规划、设计的基本流程和注意事项,熟练运用网站建设的各种开发工具。并希望通过网站建设课程设计来培养学生综合运用所学知识分析和解决实际问题的能力,为今后就业打下坚实的基础，开设该课设的实训主要目的为以下几点：

• 通过综合实训进一步巩固,深化和拓展学生的理论知识与专业技能
• 掌握规划网站的内容结构,目录结构,链接结构的方法
• 掌握页面的整体控制和头部内容设置的方法
• 熟练掌握网页页面布局的各种方法
• 熟练掌握在网页中输入,设置标题和正文文字的方法
• 熟练建立各种形式的超级链接的方法
• 掌握表单网页制作方法
• 掌握网站测试的方法

训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料动画和网页特效等。

培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。

培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力树立自信心。

实训内容

选择一个实训专题，以小组为单位设计所选专题的网站建设。综合运用网站开发平台、Dreamweaver 网页制作、Photoshop 平面设计、Axure RP8、MySQL、MariaDB、DIV+CSS、JS 等技术,实现的主要栏目有企业产品展示,在线订购、在线客服、企业信息发布。重点掌握网站开发平台的特性,特别是 DEDECMS 系统模板的调用和修改方法。

实训步骤与核心源程序

网页规划

HTML 前端页面

用户登录页面

用户注册页面

景点介绍后台

管理员后台登录界面

管理员登陆后前端页面

管理员登陆后后端编辑页面

管理员登陆后管理系统页面

管理员主页

景点列表

景点编辑页面

• 网页设计
• 注册和登录页面的设计与制作
• 注册和登录页面都调用到“登录注册.css”来进行网页设计的美观优化。

首页的设计与制作

首页的页面美化运用到“首页.css”以及 js 功能来进行更好的页面布局。

后台管理

管理员后台登录界面

管理员景点发布系统

通过在数据库添加景点来进行管理景点发布：

管理员管理系统页面

系统管理模块的主要作用是对网站信息进行管理，如对信息作搜索、编辑和删除等操作。

4 核心源程序

注册管理

用户没有登录账号，首先需要在注册页面注册一个新账号，载入数据库：

获取用户内容，允许用户入库：

注册成功与否，提示用户，成功即返回登录页让顾客登录，失败即提示注册失败：

登录管理

已经注册成功的用户（数据库中有载入记录），可直接登录：

登录验证，获取登录用户名和用户密码，调取数据库注册信息，用户名和密码是否一致：

信息一致，可弹出弹窗“登录成功”跳往首页，登录失败即弹出弹窗“登录失败”返回登录页面：

用户忘记密码

用户忘记密码会有弹窗提示，这部分如下：

实训结果

设计界面：

登录前进入主页：

点击确定后进入主页：

点击登录跳转至管理员登录界面：

没有账号，点击注册：

忘记密码，弹出提醒：

登录成功回到主页：

点击图标进入后台管理：

点击用户管理——用户列表——进入管理员列表，管理员可进行在线编辑用户：

点击景点信息管理——景点列表——进入景点列表，管理员可进行在线编辑景点列表：

点击景点信息管理——景点发布——进入景点发布列表，管理员可进行在线编辑景点发布列表：

设计组件：

管理员忘记密码可点击“忘记密码”按钮跳出弹窗

点击退出按钮可退后至登录界面

该图标按钮可实现退出登录界面

设计亮点：

设计主题鲜明。在目标明确的基础上，完成网站的构思创意即总体设计方案。队网站的总体风格和特色做出定位，规划网站的组织结构，做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。

页面布局合理简洁大方，流畅，表达和谐。新用户可注册再进行登录，如果用户忘记密码，点击“忘记密码”会弹出提示，充分为顾客考虑。

该项目采用使用较多的 js 文件以渲染页面达到美观的画面。

实训分析与心得体会

通过这一段时间的实训，我们初步掌握了网站建设的基本方法，在小组讨论的过程中，明确操作的具体步骤和建设网站的基本理念丰富了我们运用 HTML、CSS、JS、MySQL 结合起来的技巧，让我们掌握使用后台管理前台的基本技能。在解决问题的过程中，我们学会了从课本中寻找答案以及结合网上的相关知识解决我们所遇到的问题。实训的结果不仅仅是完成一个项目交上一份答案，而是让我们从多方面寻找解决问题的方法，让我们能够把所学到的东西运用到实践当中。