任务11完整项目：制作学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务11 完整项目：制作学院网站 Web前端开发案例教程 HTML5+CSS3 微课版 完整项目：制作学院网站 任务11 任 务 描 述 2 本任务学习学院网站的完整设计与实现，从网站规划、到使用Photoshop进行效果图设计、再到主页设计和其它页面设计，按照真实网站设计流程，完成静态网站的设计与实现。 任务导学 11.1 任务描述 山东信息职业技术学院网站首页效果图 　新闻详情页面 新闻列表页面 　视频宣传页面 其他页面效果图 11.1 任务描述 知识点 使用Photoshop设计网页效果图 01 HTML5+CSS3进行网页布局 02 音频和视频在网页中的使用 03 JavaScript和jQuery技术 04 网站规划 设计山东信息职业技术学院网站，旨在让任何人在任何时间、任何地点都能借助网站了解学院的基本情况与最新招生与就业信息，通过该网站可以链接到招生信息网、团学在线网站、教务管理系统等。 11.2 网站规划 什么样的网站适合信息学院？ 问题的提出 11.2 网站规划 山东信息职业技术学院网站的主要功能示意图 网站需求分析 山东信息职业技术学院网站是学校门户网站，他的主要用户为学生、教师及学生家长等，同时也是教育类的网站，所以采用蓝色为主色调，因为蓝色代表智慧，代表高科技，代表清爽，有一种宁静致远的感觉。蓝色是海洋、天空的颜色，让人充满遐想和向往。另外为了突出网站的热情、充满活力，在网站上又加以运用了红色，让用户第一眼就被网站亮丽的色彩所吸引。 网站的风格定位 11.2 网站规划 首页规划草图 11.2 网站规划 一般网站的制作流程： 项目计划 11.2 网站规划 效果图设计 11.3.1 效果图设计原则 先背景，后前景，先上后下，先左后右。 制作软件：Photoshop CC中文版。 效果图设计中用到的主要知识点： 参考线的应用 文字工具的应用 直线工具的应用 矩形工具的应用 多边形套索工具的应用 图层样式的应用 切片工具的应用 效果图设计原则 选择“切片工具” ，根据需要进行切片。 注意： 切片时如果能平铺形成的图片，只需切一个小的图片。 使用一个颜色作为背景的图片则不需要切片。 最后将素材导出，执行“文件”→“存储为Web设备所用格式”命令，将网页保存类型为“仅图像”类型。 效果图切片 11.3.1 效果图设计原则 11.3.2 效果图设计步骤 （1）打开 Photoshop CC 软件，新建文件，命名为“学院主页效果图”，宽度 为 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 所用格式”选项， 为切片选择存储的文件类型，单击“存储”，再选择保存的格式“仅限图像”，最后单击“保存”按钮。 制作网站主页 11.4 制作网站主页 页首 主体部分 友情链接 导航 滚动文本 页脚 11.4 制作网站主页 主体部分第二行 主体部分第一行 主体部分第三行 主体部分第四行 主体部分第五行 （1）在HBuilderX中，新建项目，项目名称：chapter11，位置位于“E:/Web前端开发/源码”目录下，选择模板“空项目”，单击“创建”按钮。创建项目后，在项目名称上右击，选择“新建”|“html文件”命令，在“新建html文件”对话框中输入文件名称：index.html，单击“创建”按钮。 （2）右击项目名称chapter12，选择“目录”，新建名称为“css”的目录。右击“css”目录，选择“新建”|“css文件”命令，在“新建css文件”对话框中输入文件名称：index.css，单击“创建”按钮。 然后在css文