技术资讯
Adobe网站前端开发——结构层概况
2008-03-18 11:57:00
一、概况
Adobe采用了每刷新一次页面，调用一款产品的方式，给访问者展示不同的内容。
首页分成了4个区块：
A.顶部导航区、B.产品展示区、C.产品列表及相关信息块、D.底部版权区
解析如下：
HTML片段：
二、顶部导航区
导航区域，Adobe用"dt"和"dd"分出了4个小块：
解析如下：
不太符合国内开发习惯的是，他们采用了从右向左的写法，先给出了最右侧LOGO区域的<dt id="adobe-logo">标签，然后是<dd id="site-search">搜索区域，最后才是上下并列的两个左侧导航区域。值得借鉴的是，Adobe在导航区的下拉菜单运用了"dl"内嵌套"ul"的方法来实现效果，在国内的网站中这种写法目前尚不多见。
HTML片段：
三、产品展示区
这个区块主要是通过FLASH来作为主要的表现形式
通过JS中FMARotator参数对背景层及对应产品FLASH路径的指定，来实现每刷新一次页面，更换一下产品展示区域的内容。
HTML片段：
四、产品列表及相关信息块
从直观上看，这是一个三列的布局：
但实际上Adobe只把这部分内容分成了两个大的块，<div id="contentBody">和<div id="contentPocket">
解析如下：
然后再用"columns-2-AB-A"和"columns-2-AB-B"这样的共用样式，分别切分出左右布局的结构，最后使用<br class="clear-both"/> 清除浮动，代码非常简洁。
HTML片段：
五、底部版权区
相比较上边的内容，这里的结构比较简单
整体分成了上下两个块，上部的是站内的链接区域，下部的就是版权信息了
内部代码仍然采用了从右向左的写法。
HTML片段：
上一篇：从名片设计说网页版式的细节
下一篇：WEB前端设计师需要的技能
近期更新
- [2023-07-26 14:17:28] 为品牌赋能，海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势？为什么要开发微信小程序？
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？
