仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1059|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发网页制造Table,DIV,XHTML三者之间的区分

[复制链接]
兰色精灵 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:17:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
破洛洛文章简介:比来有客户问到table建站、DIV建站和XHTML建站的区分,实在这也是国际网站建立慢慢走向成熟的标记。网站建立,复杂的来讲,就是这团体长的怎样和这团体心坎怎样。一部分是表面所展现出来的视觉效果、另外一部分是躲在内里的代码元素。我们先来举一个复杂的例子,
比来有客户问到“table建站、DIV建站和XHTML建站的区分”,实在这也是国际网站建立慢慢走向成熟的标记。网站建立,复杂的来讲,就是“这团体长的怎样”和“这团体心坎怎样”。一部分是表面所展现出来的“视觉效果”、另外一部分是躲在内里的“代码元素”。
我们先来举一个复杂的例子,用这3种分歧的代码作风,完成统一个页面效果:

1.起首是用table来写,必要8行代码:
    <LIclass=hl-firstline><table>
  • <tr>
  • <th>网站题目</th>
  • </tr>
  • <tr>
  • <td>网站内容</td>
  • </tr>
  • </table>

2.然落后步到用DIV,2行就能够了,可是由于存在两个DIV,为了区分,必要给分歧的ID:
    <LIclass=hl-firstline><divid="title">网站题目</div>
  • <divid="content">网站内容</div>

3.用XHTML来写:
    <LIclass=hl-firstline><h1>网站题目</h1>
  • <div>网站内容</div>

优弱点:
用更加简便的XHTML代码作风,不单单是为了提拔页面开启速率。究竟如今收集带宽愈来愈年夜,翻开10K的网页代码和翻开5K的网页代码区分其实不分明。而接纳XHTML建站的弱点也很分明,假如是一个一样范围的网站,用TABLE做,1小时就能够了,用DIV要2小时,用切合语义的XHTML则必要3小时,固然这只是一个预估,依据页面的分歧和手艺职员的纯熟度,工夫下面会有必定的收支。
那我们何须多花工夫来做网站?
跟选妻子一样,我们不该该只垂青这团体表面是不是仙颜,而更主要的是体贴她“外部设置”怎样,否则娶回家,三天两端跑病院,没事就跟你吵一架,心境一定不会太愉悦。
一样的,做网站,不克不及只看计划作风怎样怎样。更最要的是中心代码怎样、质量怎样。我们做出来的网站不是摆在家里本人浏览的,更主要的是往推行这个网站,给本人的企业带来收集影响力。让用户搜刮某个关头词能找到你的网站,而不是找到他人的网站。
那如何让搜刮引擎找到本人的网站?
最复杂的办法是写搜刮引擎能够看懂的代码,也就是呆板言语。
搜刮引擎其实不晓得页面展示出来的效果是甚么模样的,它究竟是呆板,最少如今不会和人一样,坐在显现器前边,很分明的看到表面,很分明的晓得主次之分。它只能经由过程呆板言语――也就是你写下的代码来懂得你的网站、收录你的网站。
当你用切合语义的XHTML,告知它哪一个是更主要的题目(H1/H2/H3/H4/H5/H6),哪一个是列表(UL/OL/DL),哪一个是段落(P)……它就会以为你是一个坏人,写下了它能看懂的言语,它就会把你的排名往前边提。
而全部网站都是table结构,谈不上主次之分,搜刮引擎了解也会很费劲。DIV结构就更好笑了,全部网站写下的都是id=”title”,更有甚者写的都是拼音id=”biaoti”,更更有甚者用id=”tit01″,光怪陆离的代码作风,岂非开辟职员在期望如今的电脑就可以读懂人类言语?乃至还中文英文自创文都懂?
三者的干系
实在开篇就应当提一下三者的干系,怕观点性的玩意太多,吓跑了一样平常读者,最初扼要的先容一下。实在table、div都是xhtml的一个元素,table有它本人的感化,它就是用来做表格的,当网站内必要表格元素的时分,它是不成或缺的构成部分。div更是经常使用的元素之一。我们应当依照它们在呆板言语中的语义,来赐与他们分歧的任务,而不是复杂的拿过去任意放在一个中央就入手下手用,实在哪个元素都能够做一个网站,乃至能够只用p标签来做网站、只用ul标签来做网站,但那样做出来的器材,看起来效果一样,实践上会形成呆板人的浏览停滞。剖析速率慢是大事,万一被搜刮引擎以为是不友爱要素,给屏障了,就贫苦了。究竟,网站一团体玩没啥意义。
</p>
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
分手快乐 该用户已被删除
沙发
发表于 2015-1-17 21:32:24 | 只看该作者
可以使用CSS检查工具进行设计。
板凳
发表于 2015-1-25 14:54:16 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
不帅 该用户已被删除
地板
发表于 2015-2-2 22:37:03 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
山那边是海 该用户已被删除
5#
发表于 2015-2-8 19:56:29 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
若相依 该用户已被删除
6#
发表于 2015-2-26 02:27:29 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
谁可相欹 该用户已被删除
7#
发表于 2015-3-8 11:44:02 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
老尸 该用户已被删除
8#
发表于 2015-3-15 23:36:32 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
飘灵儿 该用户已被删除
9#
发表于 2015-3-22 18:28:44 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-11 05:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表