网页设计与开发（HTML5+CSS3） 课件 项目9 实战开发——制作信息技术网站首页.pptx

项目9

实战开发——制作信息技术网站首页

项目描述

前面的项目制作的网页基本是静态效果，在传统网页设计中，一般使用JavaScript脚本或者Flash来制作网页动态特效，而CSS3提供了对动画的强大支持，可以实现变形、过渡、动画等效果，大大降低了制作网页特效的难度。本项目利用CSS3的这些功能制作一个“旋转的3D相册”页面。

项目规划

在搭建网站之前，一般要先对整个网站进行一个整体的规划。网站规划主要包括确定网站主题、规划网站结构、收集素材、设计效果图。

1．确定网站主题

信息技术网站是一个传播新兴信息技术的平台，用于介绍当下流行的信息技术。网站以蓝、白为主要色调，橙色为辅助色调，该配色适用于科技信息类网站。网站以简洁、清晰为主要风格。

2．规划网站结构

在对网站进行规划时，可在草稿上或利用画图工具做好网站的结构设计。一个网站主要包含网页头部、导航、内容主体部分和尾部，内容主体部分可根据模块再进行细分。有了一个大概的结构后，在编写网页结构代码时也会胸有成竹。

项目规划

3．收集素材

规划好网站结构后，就要根据网站主题、风格等搜集合适的素材。素材包括文本素材和图片素材等。文本素材可以在同行业网站中收集整理，也可在相关主题报刊中提取内容并进行加工，将其转化为网站原创内容。在搜集图片素材时可根据网站配色风格以及主题等搜集合适的图片，也可在相关图像编辑软件中设计与整合网站所需的图片素材，右图为设计与整合后的banner（横幅）图。

项目规划

4．设计效果图

（1）在开始制作效果图之前，首先明确设计需求与目标，要了解网站内容的定位以及想要传达的信息，为后续效果图制作提供明确的指导方向。

（2）选择合适的工具，制作网页效果图需要合适的工具，目前常用的包括Photoshop、Sketch、Illustrator等，可根据个人喜好进行选择。

（3）设计草图与布局，选好工具后，就要进行草图与布局的设计，重点是要确定网站的整体风格、色彩搭配、页面结构等，可以手绘，也可以使用工具绘制草图，清晰表达自己的设计思路。

（4）制作效果图，完成草图与布局后，就可以制作效果图了，大概按照如下流程：确定页面元素、制作素材、排版与布局、调整色彩搭配、调整细节。

项目效果图

知识小结

本项目结合本书前面项目所学的重点知识，完成了一个网站综合项目——信息技术网站首页的制作，并带领读者熟悉了网站项目前端开发的前期静态网页制作的内容，希望读者学有所获。

谢谢