音乐影视类网站布局详细方案

一、画板

影视音乐类网站一般以界面庞大、结构复杂（

、、标签应用最多的场合）为主。该网站主要分为以下几大块：搜索模块、热门影片模块、频道模块。搜索模块一般包含导航和影片搜索等部分；热门影片模块可以从最受欢迎影片、新片、电影排行、最新热门影评等方面划分；频道模块可根据适应人群划分多个频道：电影频道、动漫频道、电视剧频道、综艺频道等。根据预设的这些模块，初步在稿纸上画出页面布局的草图，如下图所示。

画板最终设计图

二、设计图

通过画板对将要做的页面分析以及画板设计图中的各个栏目区域的划分有一个大概的了解，对整个页面大体有一个轮廓。现在需要将各个栏目的具体内容通过Photoshop设计出来，在后面的重构中将给出栏目划分的HTML结构，在布局中将给出页面的大体结构以及具体内容编写结构的实现过程，如下图所示。

设计模块划分图

三、切图

使用Photoshop将设计图以下部分切出来，因限于篇幅，本章只讲解设计图的一部分，重复部分将不再讲解，故使用以下图片，这些图片作为背景图或作为插入元素至网页，如下图所示。

切图

四：重构

根据设计模块划分图的区域划分，标记出6个大区域（在这里有重复区域，即结构相同或相似，内容不同的区域），在编写HTML结构时，整个网站需要设计的样式包括3个大区域：A区、F区，余下几个区域作为一个大区（不妨命名为M区）。在后面讲解中也将按照该思路讲解。M区包含B区、C区、D区、E区，M区定义在火狐浏览器下居中，并设置下外边距，没有其他CSS属性设置。

五：布局

　　非常感谢您读完蓝港网络的这篇文章："音乐影视类网站布局详细方案"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。