搜索
项目3（进阶项目）教育门户网站前台设计主讲教师：李琳知识目标知识目标：掌握响应式网页设计方法掌握多网页站点设计方法能力目标能力目标：能使用Bootstrap进行响应式网页设计能设计多网页站点目录3.1项目介绍3.2知识准备3.3任务1网站规划与设计3.4任务2学院首页3.5任务3专业介绍页面3.6任务4关于我们页面3.7任务5最新资讯页面3.8任务6联系我们页面3.9任务7项目进阶3.10任务8课外实践3.1项目介绍本项目将设计一个教育机构的门户网站，以多页面的形式展示该教育机构的各项信息3.2知识准备3.2.1Bootstrap样式框架Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。目前最新的版本为v3.3.43.2知识准备3.2.1Bootstrap样式框架1、布局容器2、栅格系统3、表格4、表单5、按钮6、图片形状3.2知识准备3.2.2JavaScript基础JavaScript是一种轻量级的编程语言，一般嵌入在HTML页面中，由浏览器执行3.2知识准备3.2.2JavaScript基础1、JavaScript语法特点2、JavaScript变量3、JavaScript基本数据类型4、数据类型的转换•（1）Undefined类型：当声明的变量未初始化时，该变量的默认值是undefined•（2）Null类型：null用于表示尚未存在的对象•（3）Boolean类型：它有两个值true和false•（4）Number类型：这种类型既可以表示32位的整数，还可以表示64位的浮点数•（5）String类型：字符串，没有固定大小3.2知识准备3.2.2JavaScript基础5、JavaScript分支语句6、JavaScript循环语句7、JavaScript测试语句8、消息框9、JavaScript内置对象10、JavaScript函数3.3任务1网站规划与设计3.3.1网站设计需求客户需求，是指学校创建门户网站的目的和对网站提出的特定要求。了解客户需求，是建好学校门户网站的前提3.3任务1网站规划与设计3.3.2网站风格定位对于本项目从以下三个方面来学习该网站的风格定位•1．色彩•2．排版•3．特效3.3任务1网站规划与设计3.3.3网站结构布局网站的整体布局为上、中、下，上方为标题区域，用于显示网站标题和导航；中部为内容区域，用于放置页面的具体内容；下方为版权区域，用于放置网页版权、机构信息3.4任务2学院首页常见的手段是“巨屏宣传画+图文内容”的组合方式3.4任务2学院首页3.4.1标题区域设计网页标题区域分为左右2部分，左边为具体标题（h1），右边是一个搜索框（表单）当屏幕比较小的情况下，显示效果如下图3.4任务2学院首页3.4.2导航区域设计屏幕较大的情况下，显示所有菜单项的内容3.4任务2学院首页3.4.2导航区域设计屏幕较小的情况下，隐藏文字菜单项，仅显示图标菜单项和展开按钮，点击展开按钮，展开文字菜单项3.4任务2学院首页3.4.3巨屏区域设计巨屏区域使用了一个名为jquery.cslider.js的幻灯片插件，该插件能根据设定的文字自动播放，引用和调用都比较简单，资源方面所需要的仅仅是一副清晰度较高的图片调用代码linkhref=css/slider.cssrel=stylesheettype=text/css/scripttype=text/javascriptsrc=js/jquery.cslider.js/script3.4任务2学院首页3.4.4图文区域1设计该部分是一个4列的图文区域，每列由图片、标题、内容组成。因此，该部分既要对每列进行响应式布局（使用bootstrap的栅格系统），又要对每列内部的元素进行布局3.4任务2学院首页3.4.5图文区域2设计该部分是一个2列的图文区域，其中，左边区域仅有图片，右边区域仅有标题和内容3.4任务2学院首页3.4.6图文区域3设计这又是一个4列的图文区域，与图文区域1不同的是，该部分的内容使用了owl.carousel.js这个javascipt插件，实现了滚动效果3.4任务2学院首页3.4.7版权区域设计版权区的内容就是文字，所以只需要设置定位方式以及内部文字元素的样式即可3.5任务3专业介绍页面专业介绍页面是一个典型的“列表型”网页，以列表的形式展示多项内容，通常情况下会需要“分页”，为了能让浏览者在列表中就预览某个专业的简介，可以在列表项中增加简介文字和图片。该部分是一个2列的图文区域，其中，左边区域仅有图片，右边区域仅有标题和内容3.5任务3专业介绍页面页面布局如图3.5任务3专业介绍页面3.5.1标题区域设计专业介绍页的网页标题区和版权区与首页基本一致，唯一不同的是，在网页标题区使用了一个背景图片，这个图片在首页被用于巨屏幻灯，这样设计有助于提高网站的整体性3.5任务3专业介绍页面3.5.2图文区域设计该图文区域包含一个专业的介绍，包括：专业名称、专业简介、图片、超链接按钮3.6任务4关于我们页面关于我们这个页面是每个网站都需要的一个页面。页面中的内容要尽可能的简单明了，让浏览者很方便的获取所需信息关于我们上部分效果图3.6任务4关于我们页面关于我们这个页面是每个网站都需要的一个页面。页面中的内容要尽可能的简单明了，让浏览者很方便的获取所需信息关于我们下部分效果图3.6任务4关于我们页面关于我们页面布局图3.7任务5最新资讯页面最新资讯页和之前的专业介绍页比较类似，都是“列表型”网页，集中展示多项相似内容，因为资讯的内容比起专业介绍的内容要丰富一些，所以可以把该网页设计的较为丰富一些，在网页的内容区域可以做一个局部的“左右布局”3.7任务5最新资讯页面最新资讯页面布局图3.7任务5最新资讯页面3.7.1资讯区域设计资讯区包括：标题、图片、内容、更多按钮3.7任务5最新资讯页面3.7.2侧边区域设计侧边区域从上到下依次为：资讯统计、广告位、资讯标签、邮件订阅3.7任务5最新资讯页面3.7.2侧边区域设计侧边区域从上到下依次为：资讯统计、广告位、资讯标签、邮件订阅3.7任务5最新资讯页面3.7.2侧边区域设计侧边区域从上到下依次为：资讯统计、广告位、资讯标签、邮件订阅3.8任务6联系我们页面联系我们页面和关于我们页比较类似，不需要有十分吸引眼球的图片，但是需要简单易读的文字信息，最好在加上一个留言板之类的表单3.8任务6联系我们页面3.8.1联系方式设计3.8任务6联系我们页面3.8.2在线提问设计3.9项目进阶本项目是一个较为综合的门户网站，设计了1个首页、4个二级页面，在设计过程中考虑的多屏幕浏览的情况，是一个“响应式”网站。网站的核心样式是在style.css文件中实现的，请参考style.css文件中的各个样式，制作一个blue-style.css文件，实现在不修改网页html元素的前提下，通过切换css文件，实现网站的风格的转换3.10课外实践请自行设计一个企业门户，包括：首页、企业简介、产品列表、留言板、招贤纳士等页面