电子课件单元7 项目实践-制作传统文化网站首页

1、 内容可修改实践任务项目介绍与项目准备项目介绍任务1 建立站点并完成页面整体布局任务2 制作网页头部和导航任务3 制作banner和最新更新栏目任务4 制作国学百家栏目任务5 制作传统节日栏目任务6 制作底部版权区域与CSS代码优化思政小贴士中国传统文化是民族历史上道德传承、各种文化思想、精神观念形态的总体，主要由儒、佛、道三家文化为主流组成。文字、语言、书法、音乐、武术、曲艺、棋类、节日、民俗等都属于传统文化的范畴。中国传统文化是中华民族在几千年的传承和发展中所形成的思想精华，是值得每个中华儿女学习和传承的宝贵财富。实践任务项目介绍与项目准备实践任务制作网页头部和导航本任务要求制作传统文化网

2、站的头部和导航部分，效果如图所示。任务描述分析传统文化网站的头部效果，可以看出网页的头部分为上下两行。第一行通栏显示，其内容居中显示，内部包含欢迎词和菜单两个模块，第二行内容是也居中显示，内部包含logo和搜索框两模块，logo中包含图片、标题和文本；搜索框模块中包含一个单行文本框和一个按钮。任务分析实践任务 制作banner和最新更新栏目本任务要求制作传统文化网站的banner和最新更新栏目，效果如图所示。任务描述banner最新更新栏目ulimgdivh2pul任务分析实践任务 制作国学百家栏目本任务要求制作传统文化网站的国学百家栏目，效果如图所示。任务描述标题栏左边内容右边内容imgah

3、2h2paul任务分析实践任务 制作传统节日栏目本任务要求制作传统文化网站的传统节日栏目，效果如图所示。任务描述标题栏左边内容右边内容imgah2spanul任务分析实践任务 制作底部版权区域与CSS代码优化任务1 制作传统文化网站的底部版权区域任务2 对CSS代码进行优化任务描述CSS代码优化的意义1可以减少占用网页字节，在同等条件下缩短浏览器下载CSS代码时间，相当于加快网页打开速度。2简化和标准化CSS代码让CSS代码减少，也便于日后维护。3让自己写的CSS代码更加专业。1. 缩写CSS代码 在CSS代码中margin、padding、font、border等属性均可以用一行来代替很多行

4、设置。例如：padding-top: 10px;padding-bottom: 10px;padding-left: 0;padding-right: 0;可以写成：padding: 10px 0 10px 0;CSS代码优化的方法2. 当多个元素属性相同时，可以同时设定多个元素的属性例如：h1 margin: 0; padding: 0; h2 margin: 0; padding: 0; h3 margin: 0; padding: 0; 可以写成：h1,h2,h3 margin: 0; padding: 0; CSS代码优化的方法3. 尽可能多地重用CSS代码，尽可能少地增加新代码例如：

5、.style1 font-size:12px; border:1px solid #000000; padding:5px; width:25px; .style2 font-size:12px; border:1px solid #000000; padding:5px; width:50px; CSS代码修改如下:.common font-size:12px; border:1px solid #000000; padding:5px; .style1 width:25px; .style2 width:50px; 页面上调用css类样式时代码如下：第一个区块第二个区块CSS代码优化的方法4. 删除空白和换行 删除空白和换行是将网站正式发布前的操作。对于脱离了开发阶段，要应用在网络上的CSS 而言，删除空白和换行可以减少CSS占用网页字节。例如通常我们代码排列如下：* padding: 0;margin: 0;body font-size: 14px;color: red;background: #f6f6f6;代码合并为一行，效果如下： padd