Web前端开发案例教程（HTML5+CSS3）课件 任务11完整项目_制作学院网站.pptxVIP

;;11.1任务描述;新闻详情页面;11.2网站设计与规划;11.2网站设计与规划;未来信息学院网站是学校门户网站，它的主要用户为学生、教师及学生家长等，同时它是一个教育类的网站，采用蓝色为主色调是因为蓝色代表智慧，具有科技感，看起来清爽，同时能给人宁静的感觉。另外为了使网站充满活力，在网站设计上又运用了红色，让用户一眼就被网站亮丽的色彩所吸引。;11.2网站规划;;;11.3.1效果图设计原则;11.3.2效果图设计步骤;11.3.3效果图切片导出网页;11.4制作网站主页;11.4制作网站主页;（1）在HBuilderX中，新建项目，项目名称：chapter11，位置位于“E:/Web前端开发/源码”目录下，选择模板“空项目”，单击“创建”按钮。创建项目后，在项目名称上右击，选择“新建”|“html文件”命令，在“新建html文件”对话框中输入文件名称：index.html，单击“创建”按钮。

（2）右击项目名称chapter12，选择“目录”，新建名称为“css”的目录。右击“css”目录，选择“新建”|“css文件”命令，在“新建css文件”对话框中输入文件名称：index.css，单击“创建”按钮。

然后在css文件中书写通用body的样式，以及通用超级链接的样式。

;（3）打开文件index.html，将index.css样式表文件链接到index.html页面中。

（4）制作index.html页面的顶部。

（5）制作index.html页面的导航条部分。

导航条内容用无序列表实现，使用CSS样式设置导航块、列表及超链接的各种样式。;（6）制作导航条和主体内容之间的滚动文字部分。;（7）制作固定显示二维码;（10）制作主体部分中的第二行。;（11）制作主体部分中的第三行。;11.4制作网站主页;（13）制作主体部分中的第五行。;（14）制作友情链接部分。;（15）制作版权信息部分。;11.5制作新闻列表页;（1）将主页index.html复制一份，改名为：newsList.html，修改主体部分的代码。;（2）在css文件夹中再新建一个样式表文件，名称为：list.css，将index.css和list.css都链接到newsList.html页面中。书写list.css的样式表代码。

;;（1）将newsList.html页面复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，因此修改该页面右侧部分的代码即可。;（2???该页面的样式表代码，不需再建样式表文件，而是直接打开css文件夹中的list.css样式表文件，继续在该文件中添加newsDetail.html页面的样式表代码即可。;11.7制作视频宣传页;video标记

video表示插入视频的标记。语法格式为：

videosrc=images/video.mp4controlsautoplayloop/video

src表示视频的文件路径，controls表示在播放视频时出现控制菜单，autoplay表示自动播放，loop表示循环播放。

HTML5支持的视频格式有Ogg、MP4、WebM等格式。

;

audio标记

若要播放音频文件，则用到的标记及格式是：

audiosrc=音频文件路径controlsautoplayloop/audio

video和audio这两个标记中的属性是相同的，属性是通用的。

HTML5支持的音频格式有Ogg、MP3、WAV等格式。;（1）将newsDetail.html页面复制一份，改名为：video.html，修改该页面的代码。

（2）添加CSS样式。

该页面也不需要再新建样式表文件，直接打开css目录中的list.css文件，继续在该文件中添加video.html页面的样式代码即可。;在各文件中的head和/head标记之间添加脚本代码如下。;11.8添加网页动态效果;第三步：修改index.html文件中两个轮播图部分的代码，添加相应的代码；;第四步：在/body前添加脚本代码。最后浏览网页，查看脚本运行效果。;任务小结