网页设计结构层涉及思路

1、网页制作--层与标签的运用

“重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局，有不用table的表格，有纯div+a构成的页面，有成百上千的表现层class……现在关于标准的书籍越来越多，除了少数几本标榜“高级技巧”的书籍以外，很少有人不会在自己著作的前几章强调这样一句话——“结构与表现分离”。然而这些书籍的读者们，又有多少人认认真真地读过前几章呢？还是更多地直接跳过那些乏味的结构讲解，一头扎到貌似高深的布局技巧与Hack中去？ 其实div+CSS这个说法从一开始就误导了太多的人，急功近利的心态则更是造成这种现象的罪魁祸首。一个习惯了table布局的网页制作接触标准的第一步，不应该是去盲目寻求实现各种布局的CSS技巧，而是努力改变自己的思维方式。 下面将结合我的切身体会谈一谈顺应标准的思维方式，其中有不少是我曾经走过的弯路，希望对刚刚接触标准的XDJM们有些帮助： 1、“节省代码”是营销手段，不是宗旨 “使用div布局可以比table布局节省更多的代码”，我在很多书籍和网站上见到过这句话。这句话本身是没错的，可以“节省代码”的确是网页标准化所带来的好处之一。然而切记，它只是“好处之一”，而不是“唯一好处”，更不是宗旨。“节省代码”更多的时候是我们用来说服那些顽固不化的老板的营销手段。网页标准化的唯一宗旨是“结构与表现分离”，而绝不是为了节省代码而节省代码。我曾经因为网站边栏甚至主体内容的表现形式相同而采用了统一的class （至今还有一些书是这样教的），这样的确比分别命名id更节省代码，然而这样做的代价是代码失去了良好的结构。失去良好结构的后果是：一、源代码没有了可读性；二、网站增加了未知的维护成本。试想，当某一块内容因为需要而作出表现形式的变动，例如链接的颜色等等，我们就不得不去修改页面源文件，增加额外的class，工作量比起只需要调整id分组就大了许多。而且长此以往，结构将会越来越差，形成难以逆转的恶性循环。 还有一种情况，出现在id的命名方面，也是本人曾经犯过的错误。那时为了“节省代码”，而把主菜单命名为“mm”，二级菜单命名为“m2”，三级菜单为“m3”，结果严重降低了网页的可读性，使其他同事很难接手，图省事却累了自己。同理，文件及文件夹命名方面也不宜过简，象《网站重构》里建议把图片都用“i”目录存放，个人以为并不可取，除非你能为这种高度缩写的目录结构撰写详细说明并保证每个相关人员包括其他制作人员、开发、甚至懂行的老板……都能理解和执行，否则只会给你自己增添不必要的麻烦。 2、ID是狙击枪，class是双刃剑 想要做好网页结构，id与class都是必须熟练掌握的，所谓“两手抓，两手都要硬”。ID就象狙击枪一样，可以帮助我们精准地定位要想要加载样式的元素；而class则是侠客的佩剑，信手拈来更加轻盈灵便，两者的结合能够实现结构良好且表现丰富的页面。然而现在有一种错误的观点，就是id完全可以用class来取代，事实上许多网页源代码也的确如此，打开来通篇class，找不到一个id。造成这种现象的理由有很多种，然而自table时代传下来的根深蒂固的“class=CSS”的观念才是本因。的确，class比id用途更广更灵活，但也必须意识到，class对于构建良好的网页结构远不如id有效。id的强制唯一性使得我们可以很容易通过id检索到我们需要的任意模块，而class则没有这个优势。虽然我们可以为模块定义唯一的class名，但前提是——只有制作者本人可以动网页样式。否则换一个稍微懒一些伙计，看到样式相同便直接把前面的class拿来套用，其结果就是我们发现网页里有十几个模块都叫做“gonggao”或者“xinwen”，以至于为了区分还不得不加上大量的html注释，这样的结果显然并不是我们想要的。再者就是前面提到的，通过通用class所节省下来的代码，又不得不在每个单独定义的class中挥霍掉。 ID是狙击枪，class是双刃剑，合则两利，分则两败。 3、并不是所有的内容都需要div做“容器” 主菜单究竟是用<div id="mainnav"><ul>还是<ul id="mainnav">？这是一个博弈的问题。至今这个问题也没有人能够给出明确的答案，就连我也是如此。诚然，<div id="mainnav">在只包含了一个<ul>元素的时候，这个div就显得有些冗余，但有时候为了配合美工绚丽的设计，多一层标签就意味着多一层变化（有些人在a标签里套span也是如此）。而div不带任何原始属性的先天优势也是其它标签所无法比拟的。这个命题我只是想说明一件事，就是我们应该意识到，<div id="mainnav"><ul>之外，还有<ul id="mainnav">这种写法，同样具有良好的结构和语义，并且省去了一层嵌套。在我们不需要为华丽的美工劳心劳神的时候，是不是也可以让结构更加简约呢？ 这个命题其实还可以引申为——“并不是所有内容都需要块元素做容器”、“并不是所有链接都需要其它元素做容器”，例如很多页面都有的“更多”。有些人写做“<div class="more"><a>”，也有人写做<p><a>或者<strong><a>。在这些“容器”只包含了一个<a>标签的时候，它们是否还有存在的必要？直接写成<a class="more">会破坏结构吗？会缺乏语义吗？会影响布局吗？换一种思路，你也许就会有不一样的收获。 4、工作上也做到“结构与表现分离” 关于这一点，网络上很多高手都是这样建议的，也就是先打开编辑器，把结构完整地写出来，再去CSS里写表现，而尽量不去动已经写好的结构。 然而以看书为主要学习方式的人却很难体会，因为关于标准的书籍多半是手把手来教的，也就是必然是结构表现结合，循序渐进。虽然有些书籍有这方面的建议，但短短的几句话远不如读书过程中的潜移默化。在制作人员能够对结构良好把握的时候，同时写结构与表现也不会对结果有太大的影响。但以我的经验，结构表现分离的工作方式，要比同时写结构与表现效率高很多，同时也不容易遗漏页面上的元素。 当然，所谓的“结构与表现分离”并不是完全不考虑表现，想要兼顾到表现，就要保证——在不破坏结构的前提下，CSS选择器能够选择到尽量多的内容。在哪些地方加class，或者用哪些标签来区分，是一个见仁见智的地方，相信每个人都有自己的体会。而结合不同的设计稿，有时候也需要做出相应的变化，然而这些变化都应该有一个同样的前提——不破坏代码的结构和可读性。 再就是，一定要意识到，任何可视化的工具都是魔鬼。它们可视化界面下所呈现的效果，往往与真实浏览器相差千里，而我们真正要兼容的是浏览器，不是编辑器的可视化界面。 5、CSS不是万能的，没有CSS也不是万万不能的 相比于CSS1.0时代，今天CSS可以完成更多的事情，然而需求永远是领先于技术的，CSS无法完成网页所有的表现层工作，有时候我们必须结合JS或者其他语言来实现一些效果。而另一些时候，用JS的方法比只靠CSS简单得多，并且代码结构更加良好——最典型的例子就是下拉菜单。这些时候，我们要说服自己，或者说服老板与客户，去采用更简单更合理的方式。因为DOM同样是网页标准的重要组成，并不是使用了JS我们的网页就降低了效率或是不再标准，恰恰相反，这是对JS最大的误解。说到这里不得不提一点，就是今天的时代，比以往更要求每个职业了解更多的相关知识，做设计的人要懂一点交互和制作，做制作的也必须了解设计和程序，尤其是JS这样的前端技术，只有这样，你和同事才能够更好地合作，个人的发展前景也会更加光明。 没有CSS，指的是当我们的网站因为各种未知的原因导致CSS文件载入失败，不要因此而慌乱，这是考验我们代码质量的最佳时机。在没有CSS的时候，如果网页仍旧保持良好的可读性，这成果要远比通过W3C验证更值得我们自豪。

2、Web前端是干嘛的

web前端，做的工作与网站系统的页面相关工作，主要是制作网页，并且在原有的静态页面上增加各种特效，以及网上的维护等。

Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。使用到的主要技术包括：HTML、CSS、JavaScript，如果能会后台编程语言，当然会更好。

(2)网页设计结构层涉及思路扩展资料

Web前端开发所需要的技术基础：

1、对常用的一些JS框架了解，如jQuery、YUI等。

2、掌握最基本的JavaScript计算方法编写。

3、对目前互联网流行的网页制作方法（Web2.0）HTML+CSS，以及各大浏览器兼容性有很大的了解。

4、对前沿技术（HTML5+CSS3）的基本掌握。

5、还要对IT其他编程语言有所了解如：PHP，Java，.net！有一些公司还要求懂一点SEO优化。

3、WEB前端能做什么？

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

而对于网站制作、设计者来说，它是一系列技术的复合总称。web前端开发主要是通
html,css,js,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。
Web前端开发工程师是一个比较新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
web前端开发包含面很广，要学的东西也很多。简单点说web前端开发就是做软件开发、微信小程序 、网页设计、网站建设、APP开发、游戏开发这块的。

4、UI设计和网页美工的区别是什么

UI设计只是网站美工的一部分，网站美工需要学习的内容有UI设计，PS，AI，html语言，javaScript语言等。

网页美工局限于美术设计和页面制作，UI注重交互，用户体验是第一目标。

UI设计师的职能大体包括三方面：一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。

网页美工需要学习网站概念知识、色彩构成、网页设计中的美学规律、FIREWORKS网页图形处理、FLASH二维动画、PHOTOSHOP平面设计软件在网站设计中的应用、作品设计及点评等内容。

拓展知识

UI设计：UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

网页美工：是精通美学，photoshop（PS），FLASH，dreamwaver（DW）等一网站制作软件的网络人员，必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁，还要适宜后台调用。

5、求一个用frontpage做的网页，设计要求二级网页不少于4个，网站结构不少于3层，做的好可再加分。谢谢

更好的方法跟姐夫结婚那天见到距

6、视觉传达设计专业的就业前景怎么样？

关于视觉传达设计的就业前景，我想第1点很重要是视觉传达设计毕业之后学生是不愁找不到工作的，因为现在正处于互联网时代，所有的公司都需要平面设计，都需要视觉传达设计这一个职业。

现在的就业情况就是视觉传达设计师做两年之后会被其他公司挖去，设计师就会以更高的薪酬为理由去跳槽，这样两年一跳槽，过几年之后，薪资就会已经翻了好几倍了。

昨天去南京与时澄大神（知名平面设计师）交流了一下，他说像他们现在比较熬得算是有点成就的设计师，其实都是以前摸爬滚打出来的，没有人会比较轻松，都是被别人否定，自我怀疑，再坚持努力，继续向前学习做设计。大师都是从底层做起的，所以不要担心前景问题，干就是了。

第2点是视觉传达设计，其实如果专心和认真，还有对这个专业非常感兴趣和喜爱的话，其实在很好的公司里面会得到非常多的磨练，比如去一些比较牛的4a广告公司，还有比较注重设计感的一些设计公司，当然大型公司会更注重这一点。

这样子虚心的学几年的话，真的不愁找不到好工作，因为你又有能力又有工作经验，这种员工是哪个公司都会需要的。

还有视觉传达设计有在国外读研经历的话，会更加受到追捧，因为设计这一门专业，如果会英语的话，前景是更翻倍，所以视觉传达设计在校期间，就有意识的把英语提高一下，出来工作更是前程无量。

但是视觉传达设计，是门槛非常低的，有一些没什么学历的人只要学一下软件，就能做现在设计师了，所以很多公司不懂设计的外行的老板就会觉得设计师其实是非常廉价的，很容易被人看低。

因此，个人能力的提高和勇于展现自己的能力，对自己的前景会非常重要。

7、初中历史学不好怎么办

历史是一个文科性质的学科，所以各位初中生在学习初中历史时，做到以下几点对学习成绩有帮助：
1、初中历史的学习在于阅读、理解，记忆。需要初中生具备的基本技能是将掌握的知识点可以熟练运用。所以在学习时一定要提高学习效率。所以每个学生要根据自己的情况进行学习，如某些某些学生更容易理解条理清晰的知识点，那么在学习时就要将学习过的知识点进行整理。或者是自己学习时效率低那么就要提高课堂上的学习效率。所以各位初中生一定要找到自己在学习上的特点，
2、初中生在学习初中历史时需要掌握的另一个基本技能就是学会速度记忆。这是提高初中生学习效率的一种办法。这样初中生可在学习时旧件大部分的知识点进行记忆，大大缩短了课下的学习压力。
3、初中生能否将学习过的初中历史知识点进行整理是初中生能不能取得好成绩的关键因素。初中生要把学习过的知识进行整合，方便记忆、复习。而且还要讲新学习的知识点与以前所学过的知识点进行联系。以增加这个知识点在自己脑海中的记忆。
4、做题是初中生学习任何任何一科都必不可少的，但是并不建议初中生使用题海战术。做题在于质量而不在于数量。有些初中生在学习初中历史时盲目的使用题海战术，非但知识没有学习明白，反而让初中生自己将所学的知识点记混了，得不偿失。所以初中生要把握好做题的数量，在做题中最重要的是学会反思、归类和整理出相应的解题技巧。并且对自己的知识体系进行调整完善。

8、求一个简单ASP.NET制作的电子商务网站（三层结构）

ASP.NET三层架构电子商务网站的设计.doc_免费高速下载_新浪爱问共...

9、网页设计作业，要交的，主题鲜明，网站结构清晰合理，可用性强，七个栏目，至少两个层次，八个页面，坐等。

?

10、要怎么用dreamweaver制作嵌套式层次结构框架网页

利用dreamweaver的框架式页面布局工具可以制作。

在新建网页时可以选择“新建文档”对话框中的“框架集”列表中的一种布局，比如“上方固定，左侧嵌套”，就建立了一个框架。