已阅读5页,还剩8页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
摄影师个人网站布局,案例描述,网页设计步骤,步骤 工具,内容分析,结构设计,原型设计,效果图设计,布局设计,视觉设计,交互设计,铅笔,纸,橡皮,HTML,Axure RP,Visio,Fireworks,Word,Fireworks,Photoshop,CSS,HTML,CSS,HTML,Fireworks,Photoshop,CSS,JavaScript,DreamWeaver,一、内容分析,参考网站: / / 内容决定网页的形式,二、 HTML结构设计,使用具有一定含义的标记,如 任何一个页面,应该尽可能保证在不使用CSS的情况下,依然保持良好的结构和可读性。这不仅仅对访问者有帮助,而且有助于被搜索引擎收录。 当有若干个项目并列时,是较好的选择。,三、原型设计,四、效果图设计,五、布局设计,CSS技术准备: 盒子模型 定位:相对定位和绝对定位 浮动及清除浮动 后代选择器:#profiles li,1.设置页面的整体背景 body background-color: #cc9; background-image:url(images/background.gif); background-repeat:repeat-x; ,2.制作照片展示区域 内容居中显示?解决方案:添加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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 民俗文化艺术节策划方案(2篇)
- 福建省三明市尤溪县2023-2024学年八年级上学期期末考试数学试卷(含答案)
- 2024年检验类之临床医学检验技术(中级)通关提分题库及答案
- CDFI医师业务能力考评模拟题45
- 卫生招聘考试之卫生招聘(计算机信息管理)练习题(二)及答案
- 2024年可视电话终端合作协议书
- 2024年触变剂项目合作计划书
- 2024年冷阴极荧光灯合作协议书
- 第7课近代殖民活动和人口的跨地域转移 学案 统编版(2019)高二历史选择性必修3 文化交流与传播
- 2024年激光转速测量仪项目建议书
- 《跨境电子商务英语》期末试卷(A)卷
- 岐黄天使中医西学中专项128学时试题答案
- 2023年东营市初中学业水平考试地理试题
- 环境与贸易争端
- 工作失误损失赔偿协议书范本
- 柔性电子器件应用
- 经典美术作品赏析智慧树知到课后章节答案2023年下四川音乐学院
- 管道绝热安装施工方案
- 护理安全不良事件分析:采血错误
- 2022版初中地理新课标学习解读课件
评论
0/150
提交评论