项目3教育门户网站前台设计.ppt

3.7任务5必威体育精装版资讯页面 必威体育精装版资讯页和之前的专业介绍页比较类似，都是“列表型”网页，集中展示多项相似内容，因为资讯的内容比起专业介绍的内容要丰富一些，所以可以把该网页设计的较为丰富一些，在网页的内容区域可以做一个局部的“左右布局” 第三十页，共四十二页。 项目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的幻灯片插件，该插件能根据设定的文字自动播放，引用和调用都比较简单，资源方面所需要的仅仅是一副清晰度较高的图片 调用代码 linkhref=css/slider.cssrel=stylesheettype=text/css/ scripttype=text/javascriptsrc=js/jquery.cslider.js/script 第十八页，共四十二页。 3.4任务2学院首页 3.4.4图文区域1设计 该部