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