利用DIV+CSS设计出一个《网站首页 下载本文

第二章网页设计的思路

关于分享宫崎骏动漫里的经典语录这个网页的实现,首先在index.html页面显示相关信息,然后创立各种信息链接,整个页面布局要求清新,不宜复杂。

1.建立站点;

(1) 打开站点管理→新建→站点→输入名称“宫崎骏动漫里的经典语录” →下一步

(2)单击“下一步”

(3)选好存储位置→单击“下一步” (4)选好服务器文件夹→单击“下一步” (5)单击“下一步” (6)单击“完成”

2.结构分析;

主页整个页面分为三个结构头部,主体,底部。 头部,是所有的导航。

主体是由三个div来分隔的。分为左边为该动漫的作者和发布的时间;中间为这个动漫的经典语录;右边为内容的补充和这些动漫视频的链接。 底部,可以是版权说明。

3.搭建框架;

第 5 页 共 29页

头部 :包括网页的title和导航栏 经典语录 宫崎骏 留言 经典语录 其他 作者 时间 主要内容:各个动漫的经典语句 其他内容 链接 底部:版权或其他

4.切割效果图;

4.1.头部导航栏

.

第 6 页 共 29 页

4.2.主体

第 7 页 共 29 页

4.3.底部

5.布局页面——头部和导航; (1).视图:

第 8 页 共 29 页