Web前端开发基础 课件 项目五 “榜样的力量”项目实战.pptx

项目五“榜样的力量”项目实战

【知识目标】1、掌握网站站点创建2、使用HTML5+CSS3，完成“榜样的力量”网站首页面的制作【技能目标】1、网站构建的综合应用能力2、团队协作，完成网站项目课程目标50403020100【思政目标】1、通过网站的分析构建，培养学生分析问题、解决问题的能力2、培养劳动精神的塑造3、培养学生爱国主义情怀

·1.目录Contents网站初始化制作头部和导航制作Banner(焦点图)制作“人物速递”模块制作文章模块制作用户登录模块制作友情链接模块制作版权信息模块

技能训练5-1网站初始化【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。（3）在HBuilderX中导入Example网站·打开HBuilderX，文件-打开目录，在D盘找到根目录Example；·或者直接将根目录Example拖放到HBuilderX左边的工作区。

技能训练5-1网站初始化【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。2、“效果图分析”图首页面效果图

技能训练5-1网站初始化【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。（1）HTML结构分析观察首页面效果图，整个页面结构分成三大部分：头部分成三个部分（包含头部信息、导航、Banner内容）、内容部分根据布局分成左右两个大盒子（包含图片、视频、表单、超链接等）、脚部（版权信息）。因此，根据信息分析，整个页面结构大致分为5个模块。（2）CSS样式分析从效果图来看，背景颜色是统一设置，大部分字体大小是14px，字体为“微软雅黑”。导航、脚部是通栏显示，其余部分页面内容居中显示。文章中用到了部分标题标记、段落标记，字体和行高也可以统一设置，以减少代码的冗余。

技能训练5-1网站初始化【目标要求1!DOCTYPEhtml2html3 head4 metacharset=utf-85 title榜样的力量/title6 /head7 body8 !--头部--9 headerclass=top/header10 !--导航--11 nav/nav12 !--Banner（轮播图）--13 divclass=banner/div14 !--内容--15 divid=content16 divid=mainContent/div17 aside/aside18 /div19 !--脚部（版权信息）--20 footer/footer21 /body22/html】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网