任务11完整项目：制作学院网站

任务11完整项目：制作学院网站Web前端开发案例教程HTML5+CSS3项目式微课版完整项目：制作学院网站任务11本任务学习学院网站的完整设计与实现，从网站规划、到使用Photoshop进行效果图设计、再到主页设计和其它页面设计，按照真实网站设计流程，完成静态网站的设计与实现。11.1任务描述山东信息职业技术学院网站首页效果图新闻详情页面新闻列表页面 视频宣传页面其他页面效果图11.1任务描述知识点使用Photoshop设计网页效果图01HTML5+CSS3进行网页布局02音频和视频在网页中的使用03网站规划完整项目：制作学院网站任务11设计山东信息职业技术学院网站，旨在让任何人在任何时间、任何地点都能借助网站了解学院的基本情况与最新招生与就业信息，通过该网站可以链接到招生信息网、团学在线网站、教务管理系统等。11.2网站规划什么样的网站适合信息学院？问题的提出11.2网站规划山东信息职业技术学院网站的主要功能示意图网站需求分析

山东信息职业技术学院网站是学校门户网站，他的主要用户为学生、教师及学生家长等，同时也是教育类的网站，所以采用蓝色为主色调，因为蓝色代表智慧，代表高科技，代表清爽，有一种宁静致远的感觉。蓝色是海洋、天空的颜色，让人充满遐想和向往。另外为了突出网站的热情、充满活力，在网站上又加以运用了红色，让用户第一眼就被网站亮丽的色彩所吸引。网站的风格定位11.2网站规划首页规划草图11.2网站规划一般网站的制作流程：项目计划11.2网站规划效果图设计完整项目：制作学院网站任务1111.3.1效果图设计原则先背景，后前景，先上后下，先左后右。制作软件：PhotoshopCC中文版。效果图设计中用到的主要知识点：参考线的应用文字工具的应用直线工具的应用矩形工具的应用多边形套索工具的应用图层样式的应用切片工具的应用效果图设计原则选择“切片工具”，根据需要进行切片。注意：切片时如果能平铺形成的图片，只需切一个小的图片。使用一个颜色作为背景的图片则不需要切片。最后将素材导出，执行“文件”→“存储为Web设备所用格式”命令，将网页保存类型为“仅图像”类型。效果图切片11.3.1效果图设计原则11.3.2效果图设计步骤（1）打开PhotoshopCC软件，新建文件，命名为“学院主页效果图”，宽度为1300px，高度为1401px，背景颜色为白色，分辨率为72px/inch。（2）添加参考线。选择“视图”｜“新建参考线”选项，添加4条垂直参考线，分别是50px、1250px、512px、530px；添加9条水平参考线，分别是100px、142px、172px、539px、834px、929px、1064px、1201px、1251px，完成后如图11-5所示。（3）制作背景。打开bodybg.jpg，选择“编辑”｜“定义图案”选项，为祥云图案命名，如图11-6所示。将打开的bodybg.jpg窗口关闭。其它略。11.3.3效果图切片导出网页选择切片工具，根据需要进行切片，切片过程有以下几个技巧。首先将预期的切片设计好，然后进行切片。为了切片准确，减少误差，尽量放大图片再进行切片。重命名在网页中使用的切片图片，方便在制作网站时使用。

注意：能平铺形成的图片，只需切一个小的部分。使用某种颜色作为背景的图片不需要切片，在制作网页时设置背景颜色即可。切片创建完成后即可进行最后的网页导出，选择“文件”|“导出”|“存储为Web所用格式”选项，为切片选择存储的文件类型，单击“存储”，再选择保存的格式“仅限图像”，最后单击“保存”按钮。制作网站主页完整项目：制作学院网站任务1111.4制作网站主页页首主体部分友情链接导航滚动文本页脚11.4制作网站主页主体部分第二行主体部分第一行主体部分第三行主体部分第四行主体部分第五行（1）在HBuilderX中，新建项目，项目名称：chapter11，位置位于“E:/Web前端开发/源码”目录下，选择模板“空项目”，单击“创建”按钮。创建项目后，在项目名称上右击，选择“新建”|“html文件”命令，在“新建html文件”对话框中输入文件名称：index.html，单击“创建”按钮。（2）右击项目名称chapter12，选择“目录”，新建名称为“css”的目录。右击“css”目录，选择“新建”|“css文件”命令，在“新建css文件”对话框中输入文件名称：index.css，单击“创建”按钮。然后在css文件中书写通用body的样式，以及通用超级链接的样式。11.4制作网站主页主页设计步骤（3）打开文件index.html，将index.css样式表文件链接到index.html页面中。（4）制作index.html页面的顶部。（5）制作index.html页面的导航条部分。导航条内容用无序列表实现，使用CSS样式设置导航块、列表及超链接的各种样式。11.4制作网站主页主页设计步骤（6）制作导航条和主体内容之间的滚动文字部分。11.4制作网站主页主页设计步骤（7）制作固定显示二维码（8）制作主体部分11.4制作网站主页（9）制作主体部分中的第一行主页设计步骤（10）制作主体部分中的第二行。11.4制作网站主页主页设计步骤（11）制作主体部分中的第三行。11.4制作网站主页主页设计步骤11.4制作网站主页（12）制作主体部分中的第四行。主页设计步骤（13）制作主体部分中的第五行。11.4制作网站主页主页设计步骤（14）制作友情链接部分。11.4制作网站主页主页设计步骤（15）制作版权信息部分。11.4制作网站主页主页设计步骤制作新闻列表页完整项目：制作学院网站任务1111.5制作新闻列表页（1）将主页index.html复制一份，改名为：newsList.html，修改主体部分的代码。<!—main开始--><divclass="main">

<!--listL左侧内容开始--><divid="listL"><divclass="Lnews">新闻中心部分</div><divclass="Lnotice">通知公告部分</div></div><!--左侧内容结束--><!--右侧内容开始--><divid="listR">

</div></div><!—main结束-->11.5制作新闻列表页新闻列表页设计步骤（2）在css文件夹中再新建一个样式表文件，名称为：list.css，将index.css和list.css都链接到newsList.html页面中。书写list.css的样式表代码。/*左侧内容*/#listL{ width:282px; float:left; overflow:hidden; margin-right:15px;}/*新闻中心*/.Lnews{ width:280px; height:166px;……11.5制作新闻列表页新闻列表页设计步骤11.6制作新闻详情页（1）将newsList.html页面复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，因此修改该页面右侧部分的代码即可。<!--右侧内容开始--><divid="listR"><divclass="Rtop"></div><divclass="Rcon"></div></div><!--右侧内容结束-->新闻详情页设计步骤11.6制作新闻详情页（2）该页面的样式表代码，不需再建样式表文件，而是直接打开css文件夹中的list.css样式表文件，继续在该文件中添加newsDetail.html页面的样式表代码即可。/*右边详情内容*/.Rconh2{width:858px;height:40px;line-height:40px;text-align:center;color:#ff7200;font-size:20px;}……11.6新闻详情页设计新闻详情页设计步骤制作视频宣传页完整项目：制作学院网站任务1111.7制作视频宣传页1.Video标记<video>表示插入视频的标记。语法格式为：<videosrc="images/video.mp4"controlsautoplayloop></video>src表示视频的文件路径，controls表示在播放视频时出现控制菜单，autoplay表示自动播放，loop表示循环播放。HTML5支持的视频格式有Ogg、MP4、WebM等格式。2.audio标记

若要播放音频文件，则用到的标记及格式是：<audiosrc="音频文件路径"controlsautoplayloop></audio><video>和<audio>这两个标记中的属性是相同的，属性是通用的。HTML5支持的音频格式有Ogg、MP3、WAV等格式。11.7