摄影师个人网站布局.ppt

摄影师个人网站布局 案例描述 网页设计步骤 步骤 工具 内容分析 结构设计 原型设计 效果图设计 布局设计 视觉设计 交互设计 铅笔 纸 橡皮 HTML Axure RP Visio Fireworks Word Fireworks Photoshop CSS HTML CSS HTML Fireworks Photoshop CSS JavaScript DreamWeaver 一、内容分析 参考网站： / / 内容决定网页的形式 二、 HTML结构设计 使用具有一定含义的标记，如h1p… 任何一个页面，应该尽可能保证在不使用CSS的情况下，依然保持良好的结构和可读性。这不仅仅对访问者有帮助，而且有助于被搜索引擎收录。 当有若干个项目并列时，ul是较好的选择。 三、原型设计 四、效果图设计 五、布局设计 CSS技术准备： 盒子模型 定位：相对定位和绝对定位 浮动及清除浮动 后代选择器：#profiles li{…} 1.设置页面的整体背景 body { background-color: #cc9; background-image:url(images/background.gif); background-repeat:repeat-x; } 2.制作照片展示区域 内容居中显示？解决方案：添加div标记，把所有的内容放入其中 div id=container…/div 样式： #container{ width:700px; margin:60px auto 0; } #container #profiles li{ float:left; padding:4px; } #container .clearboth{ clear:both;} 3.设置网页标题的图像替换 #container h1{ background-image:url(images/logo.png); background-repeat:no-repeat; width:137px; height:170px; } #container h1 span,#container h2{ display:none; } 思考： 既然两个标题文字不需要显示在页面上，为什么不直接删除，而使用CSS将它们隐藏起来？ 为什么不直接用img标记插入标题图像，而使用背景图像的方式？ 4.设置网页标题的位置 #container{ position:relative; } #container h1{ position:absolute; top:112px; left:270px; } 设置第3张照片和第4张照片之间的空白，用于容纳文字内容： #container li.last{ position:relative; left:200px; } 5.设置网页文本内容 包括简介、链接和联系方式等信息，由于它们都放在一个区域中， 因此可以在它们的外面整体套一层div,将div的id设置为”intro” #container #intro{ width:180px; position:absolute; left:420px; top:30px; font-family:Arial; font-size:11px; line-height:17px; } 接着设置ul列表的样式及链接文本的样式