项目3(进阶项目)教育门户网站前台设计

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,项目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.4,3.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,的,的幻灯片插件，,该,该插件能根据设,定,定的文字自动播,放,放，引用和调用,都,都比较简单，资,源,源方面所需要的,仅,仅仅是一副清晰,度,度较高的图片,调用代码,3.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课外,实,实践,请自行,设,设计一,个,个企业,门,门户，,包,包括：,首,首页、,企,企业简,介,介、产,品,品列表,、,、留言,板,板、招,贤,贤纳士,等,等页面,ThankYou!,