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

  • 1
  • 0
  • 约1.79千字
  • 约 40页
  • 2026-03-14 发布于山东
  • 举报

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

;;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前添加脚本代码。最后浏览网页,查看脚本运行效果。;任务小结

文档评论(0)

1亿VIP精品文档

相关文档