项目9
实战开发——制作信息技术网站首页
项目描述
前面的项目制作的网页基本是静态效果,在传统网页设计中,一般使用JavaScript脚本或者Flash来制作网页动态特效,而CSS3提供了对动画的强大支持,可以实现变形、过渡、动画等效果,大大降低了制作网页特效的难度。本项目利用CSS3的这些功能制作一个“旋转的3D相册”页面。
项目规划
在搭建网站之前,一般要先对整个网站进行一个整体的规划。网站规划主要包括确定网站主题、规划网站结构、收集素材、设计效果图。
1.确定网站主题
信息技术网站是一个传播新兴信息技术的平台,用于介绍当下流行的信息技术。网站以蓝、白为主要色调,橙色为辅助色调,该配色适用于科技信息类网站。网站以简洁、清晰为主要风格。
2.规划网站结构
在对网站进行规划时,可在草稿上或利用画图工具做好网站的结构设计。一个网站主要包含网页头部、导航、内容主体部分和尾部,内容主体部分可根据模块再进行细分。有了一个大概的结构后,在编写网页结构代码时也会胸有成竹。
项目规划
3.收集素材
规划好网站结构后,就要根据网站主题、风格等搜集合适的素材。素材包括文本素材和图片素材等。文本素材可以在同行业网站中收集整理,也可在相关主题报刊中提取内容并进行加工,将其转化为网站原创内容。在搜集图片素材时可根据网站配色风格以及主题等搜集合适的图片,也可在相关图像编辑软件中设计与整合网站所需的图片素材,右图为设计与整合后的banner(横幅)图。
项目规划
4.设计效果图
(1)在开始制作效果图之前,首先明确设计需求与目标,要了解网站内容的定位以及想要传达的信息,为后续效果图制作提供明确的指导方向。
(2)选择合适的工具,制作网页效果图需要合适的工具,目前常用的包括Photoshop、Sketch、Illustrator等,可根据个人喜好进行选择。
(3)设计草图与布局,选好工具后,就要进行草图与布局的设计,重点是要确定网站的整体风格、色彩搭配、页面结构等,可以手绘,也可以使用工具绘制草图,清晰表达自己的设计思路。
(4)制作效果图,完成草图与布局后,就可以制作效果图了,大概按照如下流程:确定页面元素、制作素材、排版与布局、调整色彩搭配、调整细节。
项目效果图
知识小结
本项目结合本书前面项目所学的重点知识,完成了一个网站综合项目——信息技术网站首页的制作,并带领读者熟悉了网站项目前端开发的前期静态网页制作的内容,希望读者学有所获。
谢谢