第6章 微课网网站制作静态.pptx

CONTENTS;编写静态代码;;;;;;;;; 2.标签式导航菜单 程序清单6-6：标签式导航菜 第一行中，通过添加.nav nav-tabs成为标签页，Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。.nav-tabs 类也依赖 .nav 基类。以一个带有 class .nav 的无序列表开始创建一个标签式的导航菜单，再添加 class .nav-tabs。 后续的其他行中把需要的导航以列表形式放入就可以了。 ; 3.课程简介 程序清单6-7：课程简介 ;; 4.页码 程序清单6-8：页码 页码是每一个页面都需要用到的组件，第二行中，页码(Pagination)也是非常常用的页面要素，Bootstrap提供两种风格的翻页组件。?一个是多页面导航，用于多个页码的跳转，它具有极简主义风格的翻页提示，能够很好应用在结果搜索页面。 ; 整个笔记详情页面非常的简单，除了标准的导航头部外，上面是笔记的详情，下面是对该笔记的回复，如图6-8 所示。程序清单6-9：笔记详情 ; 第一行div class=navbar-wrapper中类navbar-wrapper的作用是在我们的网页主体内容和导航之间形成一个边距。如图6-9 所示，是加了div class=navbar-wrapper这一句的， ; 如图6-10 所示，是不加div class=navbar-wrapper的。 第九到十二行的.media类为页面上笔记的发布者信息提供好看的样式。 ; 登陆页面是每一个网站都需要的。我们的登陆页面是有一张表单组成。 程序清单6-10：登陆页 ; 第一行中，form表单要引用bootstrap的表单样式form-signin，然后里面的布局也要用它相应的样式。 第二行中，两个输入框中间的div是故意加上去的，为了防止两个输入框贴在一起，input标签里面的required属性则是必填，加了这个属性后，输入框为空时，点击提交会提示用户输入，input标签里的autofocus属性则是自动获得焦点，在页面加载时，用户名这个输入框会自动获得焦点。;后台脚本编写;;;;; 第2行到第6行使用内联查询的方式，查询存在picture表，module表和pictureobj表里的跟巨幕相关的数据。 第7行，把查询得到的数据存在$indexjumbotron中。 第8行，把查询得到??数据条数存在$totalRows_indexjumbotron中。 得到查询数据后，修改程序清单6-3，加入动态语句，如程序清单6-13所示。 程序清单6-13：首页轮播图动态脚本 在第10行，用$row_indexjumbotron保存获得的第一个巨幕的数据。 在第11行中，把$row_indexjumbotron[Pictureadd]图片地址取出来给图片标签的src属性。 在第14行中，在标题1标签中加入课程名字 $row_indexjumbotron[ModuleName]。 ; 第15行，在段落标签中加入图片介绍说明$row_indexjumbotron[PictureIntr]。 第20行，用while()语句，取出其他的巨幕图片数据，包括课程名字，图片简介等。 第21-31行，循环在浏览器输出巨幕内容。 2.热门课程 热门课程部分的数据需要课程图片，课程说明，课程编号，课程点击率等。。在数据库module表中ModuleClickRate字段保存着用户的点击次数。因此这部分的查询内容为：程序清单6-15：热门课程动态脚本 第2-8行用内联的方式组合查询数据语句，降序排列（第7行DESC）、取前四位（第8行）。 ; 第9行，把数据从数据库中查询出来。存到$hotmodule变量中。 第10行，获得数据个数$totalRows_hotmodule。 得到查询结果后，对热门课程部分的静态脚本程序清单6-4进行修改。这部分的代码非常简单。 程序清单6-15：热门课程动态脚本 第6至10行中，用while语句获得查询得到的热门课程的数据，$row_hotmodule[Pictureadd]填入热门课程的缩略图，$row_hotmodule[ModuleName]填入课程名字里面。; 3.最新专题 在热门课程下面是我们的首页很重要的另外一部分，最新专题，在这里我们使用了跟热门课程不一样的UI元素media类。 程序清单6-16：最新专题查询脚本 这部分实现最新专题的查询功能，从数据库中获得最新的专题项目，ORDER BY topic.topicstart DESC，按项目开始时间降序排序。 程序清单6-17：最新专题动态脚本 这一段代码跟上一程序清单6-15一样，用while语句获得查询得到的热门专题的数据并且放入$row_topicmod