青鸟科教·清华IT102前端二班JavaScript慕课网项目总结-第四小组

一、设计理念

       本网站定位本身是仿照集团门户网的一个平台页面系统。在展示之余也有推销网站的功效，站点分为有课程、课程路径、实战、猿问等各个方面子页面.

 本站页面主要展示的是本组成员在学完JavaScript课程做的一个项目，整体页面使用到了CSS层样式技术、div布局等技术的应用。 

二、设计流程

      通过在网络相应参考模板，并更改为适合网站主题风格定位的网站效果，且根据相应要求到网上寻找相应的图片素材以及应用到Photoshop图片设计结束。最后应用HTML网站设计技术使用DIV+CSS进行页面布局的定位设计，并使用JavaScript以及jQuery制作网站交互特效。 

三、使用的工具与技术

网页制作工具:Dreamweaver CS6、HBuilder

多媒体设计制作工具:Photoshop

应用到的设计技术：HTML、CSS、HTML5、CSS3、JavaScript、jQuery

指导老师：青鸟科教崔姣崔老师

四、网站设计说明

网站名称:仿慕课网

首页作为网站的形象页，作为网站的欢迎页面，引入的元素大致有网站名称、LOGO、形象图片、宣传文字、栏目导航等要素，是彰显网站整体风格的重要页面。

网站形象页的设计突出展示主题，通过文字、形象、图片的巧妙烘托，令页面富有层次感，达到赏心悦目的效果。

网页富有动感，通过CSS3、JavaScript、jQuery展示了特效页面.   

网站采用边制作边调试的方式。保证了页面在各个浏览器间的相互兼容性。

五、页面结构布局

(1)、首页布局 

     首页使用jQuery制作了导航条以及侧边栏和轮播图的特效，使得整体效果富有动感。更值得一提的是，当用户缩放浏览器时，网页全部统一缩小在浏览器中间的位置。

如下图可见：

本小组成员为了达到此效果，通过课余自学累计新知识：使用HTML5+CSS3进行布局，保证了页面美观、规范。

在首页的导航条处，使用jQuery特效集登录注册为一个整体，且实现透明黑色笼罩层遮挡住首页整体，无论用户将滚动条滑到哪个地方，浮在透明黑色笼罩层登录注册页面都会跟随用户的滑动而滚动。

登录注册页面的具体实现用到了JavaScript的选项卡特效，通过老师教学之余自己的思考实现了升华版的选项卡。

如下图可见：

  由图可见，在登录页面点击右下角的两张不同的图片可随机跳转登录页面的两个子页面，实现了更多的特效。

 (2)、网站子页面介绍

小组成员董文慧制作

页面——慕课云：

当用户互动滚动条至一定高度时，该慕课云页面的导航条会随着高度的改变而改变其导航条的背景颜色，使得最后的背景颜色为白色。

且用户滑动该页面时导航条会根据用户的滑动而滚动。

 页面——jQuery基础(四)：基础篇

该页面使用HTML+CSS进行布局，使得页面整洁、美观。即使用户缩放该页面，也不会导致页面变形或凌乱。这需要在绘制页面时就注意细节部分，一边调试一边编写代码。无异于考验本组该成员的细致程度。

 小组成员罗霞制作

页面——Python：

 页面——企业合作：

页面布局看似简单，却是考验耐心的时候。文字排版清晰、整洁且规范。

小组成员黎天怡制作

页面——猿问：

该页面使用HTML5的技术实现了用户上传文件的效果。当用户点击“浏览...”按钮时，浏览器会打开的电脑的文件资源管理器，已达到上传图片的效果。

如下图所示：

小组成员谢衡制作

页面——名师介绍：

该页面的特殊点在于图片的棱角处，因为这一效果的实现，使得页面别具一格。

小组成员罗峰制作

页面——意见反馈：

当用户在该文本区域输入文字时，文本框右下角的数字会随着用户输入文字逐次递减。

效果如下图所示：

 页面——职业路径：

该页面主要运用HTML+CSS的技术进行页面布局。

效果如下图：

 六、制作网站的心得

本次制作的仿慕课网由团队合作共同完成，小组成员包括董文慧、罗霞、黎天怡、谢衡和罗峰。完成首页共5个，子页面共14个。制作项目所用的时长为15天。

在页面合并时，遇到链接图片重名的问题，通过齐心协力的尝试，解决了该问题。我们将所有文件夹放在一起，通过相对路径去访问每一个完善的子页面，这样就无误得将所有的页面合并成一个完整的网站。这个问题的解决，使得今后在进行页面合并时方便、快捷且万无一失！

团队的力量是强大的，这一点可以从项目制作的时长看出来。近20个页面在两周的时间完成。也多亏老师的督促！