原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
综合案例—儿童用品网上商店;本课将分析、策划、设计、制作一个完整的网页，通过对案例的讲解，介绍一套遵从Web标准的设计流程。; ; ;1 案 例 概 述 ;2 内 容 分 析 ;要有明确的网站名称和标志
要给访问者了解和联系这个网站所有者信息的途径
网站的目的是销售商品，必须要有清晰的产品导航
展示最受欢迎和重点推荐的产品
方便用户查找商品的站内搜索
版权信息;3 原 型 设 计 ;原型设计也是分步骤实现的，首先考虑把网页分成上中下3部分。;再将每个部分逐步细化。
网页头部细化：;中间内容细化：;网站首页原型线框图;确定布局的细分程度
原则：细分到可以用某一特定标记表示。;4 页面方案设计 这一步的核心是美工设计，就是要让页面更美观，同时准备网页的图片素材。;5 HTML结构设计 ;13.3 HTML结构设计 ;实例home-01
将网页的标题分级，分别用h1、h2、h3…标记，层次清晰。
当有若干项目并列时ul是很好的选择，它可以使页面的逻辑关系清晰。
代码中没有出现div标记，因为div是不具有语义的标记，在最初搭建HTML时只考虑语义相关的内容。;6 布 局 设 计 ;body{
margin:0;
padding:0;
background: white url(images/header-background.png) repeat-x;
font:12px/1.6 arial; /* 字大小12px行高1.6em字体arial */
}
ul{
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration:none;
color:#3D81B4;
}
p{
text-indent:2em;
};6.2 页头部分;div id=header
h1Baby Housing/h1
div id=logoimg src=images/logo.gif //div
ul id=mainNavigation
li class=currenta href=#strong网站首页/strong/a/li
lia href=#strong产品介绍/strong/a/li
lia href=#strong信息/strong/a/li
lia href=#strong畅销排行榜/strong/a/li
/ul
ul id=topNavigation
lia href=#span关于我们/span/a/li
lia href=#span联系方式/span/a/li
lia href=#span意见建议/span/a/li
/ul
ul id=accountBox
li a href=# class=loginspan登录帐号/span/a/li
li a href=# class=cartspan购物车/span/a/li
/ul
/div;设置相应的CSS样式
为了方便观察，先临时给div、ul、h1增加一个边框，以确定各个元素是否放到了正确的位置。
#header div, #header ul, #header h1
{
border:1px red solid;
};设置整个页头的样式：
#header{
position:relative;
width:760px;
height:138px;
margin:0 auto;
font:14px/1.6 arial;
}
将header设置为相对定位，目的是使子元素使用绝对定位时将其作为包含块。;将logo设置为绝对定位：
#header #logo{
position:absolute;
top:10px;
left:0px;
};将次导航的列表设置为绝对定位，右上角对齐到header的右上角。
#header #topNavigation{
position:absolute;
top:0;
right:0;
}
将次导航的列表项目设置为左浮动，使他们水平排列。
#header #topNavigation li{
float:left;
padding:0 2px;
}
;同理，将主导航的列表设置为绝对定位，放置到合适的位置。
#header #mainNavigation{
position:absolute;
color:white;
font-weight:bold;
top:88px;
left:0;
}
#header #mainNavigation li{
float:left;
padding:5px;
}
;将登录账号
文档评论（0）