文档介绍：摄影师个人网站布局
案例描述
网页设计步骤
步骤
工具
内容分析
结构设计
原型设计
效果图设计
布局设计
视觉设计
交互设计
铅笔
纸
橡皮
HTML
Axure RP
Visio
Fireworks
Word
Fireworks
Photoshop
CSS
HTML
CSS
HTML
Fireworks
Photoshop
CSS
JavaScript
DreamWeaver
一、内容分析
参考网站:
/
/
内容决定网页的形式
二、 HTML结构设计
使用具有一定含义的标记,如<h1><p>…
任何一个页面,应该尽可能保证在不使用CSS的情况下,依然保持良好的结构和可读性。这不仅仅对访问者有帮助,而且有助于被搜索引擎收录。
当有若干个项目并列时,<ul>是较好的选择。
三、原型设计
四、效果图设计
五、布局设计
CSS技术准备:
盒子模型
定位:相对定位和绝对定位
浮动及清除浮动
后代选择器:#profiles li{…}
body {
background-color: #cc9;
background-image:url(images/);
background-repeat:repeat-x;
}
内容居中显示?解决方案:添加div标记,把所有的内容放入其中
<div id="container">…</div>
样式:
#container{
width:700px;
margin:60px auto 0; }
#container #profiles li{
float:left;
padding:4px;
}
#container .clearboth{
clear:both;}