河南中医药大学：《Web前端开发》课程教学资源（项目实训）第四讲 静态网站开发

Web前端开发项目实训 第4讲:静态网站开发 18337149582/fengshunlei@51xuewebcn 201712

Web前端开发项目实训 第4讲：静态网站开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12 1

2 本讲主要内容 口静态开发的几点经验 口几个前端插件介绍

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 本讲主要内容  静态开发的几点经验  几个前端插件介绍 2

3 1静态开发的几点经验 i回 口善用浏览器调试模式 veeiv Iewrweper" stle'ataple sleet" 的1每 enutren-tncer sergi 6m14“r“at tnt, tros site (i.e. dt+feret .TLa-1) 1t111e 二:物影:我法 e,tm(弄以程名应x自ca E拉合绍:山

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 3  善用浏览器调试模式

4 1静态开发的几点经验 口尽量合并小图片 百度软件中心 提交软件 ri. baidu. com 123456789L★★★★★☆ 是交软件 提交软件 下载下载 a

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 4  尽量合并小图片

5 1静态开发的几点经验 口重置浏览器样式,减少默认 口样式可能带来的问题 户定转售组对同能响,用户可体 注意票元 u,的】eCt,《份 border.collapse: collapse: display:block:

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 5  重置浏览器样式，减少默认  样式可能带来的问题

6 1静态开发的几点经验 口合理的标签使用、清晰的代码结构、良好的注释、语乂准确的类名称与I r mode Text=['顺序攝放',‘单曲循环',随机播放’,‘列表循环’ var player- new MPlayer( t //容器选择器名称 container Selector:.mp //播放列表 songList aver son /专辑图片错误时显示的图片 defaultImg: 'img/mplayer error. png autoPlay: true /播放模式(0-)顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认)) playMode: 0, playList: 0 playSong: 0, 词距离顶部的距离 IrcTopPos: 34 表模板,用{变量名5入模板变量 listFormat:'s{name}s/tdssinger}s/td>/tr>', 音量滑块改变事件名称 1slideEventName: change lefaultvolume: 80

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 6  合理的标签使用、清晰的代码结构、良好的注释、语义准确的类名称与ID

7 1静态开发的几点经验 口尽量重用CsS base. css+common. CSs +page. css base提供最底层的、功能和粒度最小的的通用类样式,可以被所有页面引佣用,力求精简和通用 common则是模块化组件,即将功能相对独立的划分为模块,重复次数多的模块划分为组件,提取到 common层,这一层需要尽可能实现封装,对可能经常变化的部分提供灵活的接口 page是页面级别的样式表,提供各页面独有的样式,可以再根据需求细分如 page-index.css,page- connect. css

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 7  尽量重用CSS base.css+common.css+page.css base提供最底层的、功能和粒度最小的的通用类样式，可以被所有页面引用，力求精简和通用 common则是模块化组件，即将功能相对独立的划分为模块，重复次数多的模块划分为组件，提取到 common层，这一层需要尽可能实现封装，对可能经常变化的部分提供灵活的接口 page是页面级别的样式表，提供各页面独有的样式，可以再根据需求细分如page-index.css，page￾connect.css

8 1静态开发的几点经验 口尽量不要使用行内样式 div>

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 8  尽量不要使用行内样式

9 2、几个前端插件介绍 口可视化插件 Chars 33 Data-Driven documents D3. js

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2、几个前端插件介绍 9  可视化插件 Echars D3.js

10 2、几个前端插件介绍 口 Chars 口官网:htp;/ echarts baidu. com/ 开源免费 功能丰富 社区活跃 多维度数据分析 回由遇量,发 多图表联动造看

河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2、几个前端插件介绍 10  Echars  官网：http://echarts.baidu.com/