代码小白的网页制作神器

014-07-23 10:36:28 作者：

话说网站就是项目的门面，如何为自己的创业项目做出一个高级又炫酷的网站，能够完整展示出产品功能，在吸引用户的同时也引来投资者的青睐，就成了创业者的一个需求。

对于技术小白而言，做一个自己的网站看起来很高深的样子。就算团队中有相关成员，也需要 UI 与前端密切配合，可能会耗费大量精力在上面。如果你不是处女座，对你的网站没有精细到像素的需求，那么可以考虑试试 Generator。

Generator 让你能够「简单粗暴」地做出一个网站，正如网站的官方简介所说，「不用很麻烦就能为你的创业项目做登陆页面」。

设计网页的步骤特别简单，只要经过以下三步：

从左侧库中按分类选出合适的模块，将它拖拽到右边，建立简略的页面层级结构；
与团队成员共同讨论页面设计方案；
查看页面元素，将其转化为 HTML、CSS 或者 LESS 语言。大功告成！

Generator 可谓极其贴心，模块库中包含了一般网页设计中会涉及的部分，包括 Header、主体内容、产品价位、相关项目、联系我们、创业团队、项目博客与页脚等多个模块，基本满足了大多数项目的需求。

Generator 为用户提供了丰富的模版库，方便即时预览各种风格的界面，不同模块之间还可以随意拖拽调整顺序。遗憾的是，导出到 HTML/CSS 功能暂时只支持 Startup Framework 的付费用户使用。

Generator 与 Startup Framework 都是 Designmodo 团队旗下产品之一，后者为设计师提供网页模板、VI、UI Kit 与相关 mockup。Designmodo 主要专注于网页设计与开发，上面有许多高质量的文章与教程。如果你对 Generator 感兴趣，在 Twitter、Facebook、Google+ 和设计师集聚地 Dribbble都可以找到 Designmodo 的身影。

、树状结构

树状结构概述

在学习网页布局之前，我们需要先了解树状结构的基本概念。

在生活中，家谱就是一个最常见的树状结构，一个人可以有多个儿子，但是儿子只能有一个父亲，随着整个家庭一代代繁衍，整个家谱树也越来越根深叶茂。我们先看一个家谱的例子。我们电脑的目录结构也是一个树状结构，如下所示：

├─我的电脑
│    ├─c:
│    ├─d:
│    │   ├─游戏
│    │   ├─电影
│    ├─e:
│    │   └─教学视频
│    │   │   └─html教学视频
│    │   └─电子书
│    │   │   └─JavaScript电子书
│    │   └─学习文档
│    │   └─学习笔记

节点间的关系

我们还是以家谱为例，家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点，司马炎同样也是一个节点，这些节点是有关系的，具体关系如下所示：

根节点：每一个树状结构都有一个没有父级的节点，他被称作根节点。
父级节点：司马防是司马懿的父级，司马懿是司马师的父级。
子级节点：司马师是司马懿的子级，司马懿是司马防的子级。
同级关系：有相同父级的节点就是同级关系，司马懿和司马朗是同级，司马昭和司马亮是同级。（这里需要注意的是，司马炎和司马熙不是同级，因为他们没有相同的父级。）

二、html文件的树状结构

html文件的结构和上面的家谱一样，也是树状结构，例如下面的html代码。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h1>水果列表</h1>
 9     <ul>
10         <li id="banana">香蕉</li>
11         <li>苹果</li>
12         <li>鸭梨</li>
13     </ul>
14 </body>
15 </html>

转换成树状结构如下所示，这里不考虑文档声明标签：

├─html
│    ├─lang="en"
│    ├─head
│    │   ├─meta
│    │   │   └─charset="UTF-8"
│    │   ├─title
│    │   │   └─Document
│    ├─body
│    │   └─h1
│    │   │   └─水果列表
│    │   └─ul
│    │   │   └─li
│    │   |   │  └─id="banana"
│    │   |   │  └─香蕉
│    │   │   └─li
│    │   |   │  └─苹果
│    │   │   └─li
│    │   |   │  └─鸭梨

html标签是最外层的标签，没有父级，所以他是整个树状结构的根节点，body标签中有h1标签和ul标签，所以body是h1的父节点，h1是body的子节点，h1与ul是兄弟节点，又叫同级节点。

抛开节点之间的关系，我们再给html节点分类，可以分成下面三类：

元素节点
文本节点
属性节点

在上面的代码中，每一个元素都是原始节点，第一个li中的“香蕉”两个字就是文本节点，id就是属性节点。

三、网页布局

观察设计稿

画出树状结构

├─html
│    ├─div
│    │   ├─h2
│    │   │   └─精选手册
│    │   │   ├─a
│    │   │   │ └─查看更多>
│    ├─div
│    │   └─ul
│    │   │   └─li
│    │   |   │  └─div
│    │   |   │  │  └─img
│    │   |   │  └─div
│    │   |   │  │  └─h3
│    │   |   │  │  └─span
│    │   |   │  │  └─a
│    │   │   └─li
│    │   |   │  └─div
│    │   |   │  │  └─img
│    │   |   │  └─div
│    │   |   │  │  └─h3
│    │   |   │  │  └─span
│    │   |   │  │  └─a

每一个区域（盒子）都使用div标签包裹起来，这样可以让我们的布局思路更清晰，将网页中出现的问题用一个个div隔离开。

但是缺点也是有的，那就是网页会多出很多没有必要的div。但是对于初学者来说，制作网页的过程，多两个div不是问题，结构混乱才，不容易调试才是最大的问题。

为了让树状结构更简洁，在上面的树状结构中未添加属性节点。

四、课后练习：

画出融职教育首页的网页树状结构，下图为参考答案。要求如下：

写出所有元素节点和文本节点
适当标注出class属性节点，为后续添加样式做准备。

我们将会在第10节完成此设计稿的重构。

【融职教育】在工作中学习，在学习中工作

汇报讯(记者黄启哲) 基于逾3万余种馆藏的家谱档案，上海图书馆在近日推出“家谱知识服务平台”，市民可以登录相关网站，踏上寻根问祖的传统文化之旅。新春佳节里家人团聚一堂，听长辈梳理家族历史，重温家风家训是一项“保留节目”，而那些长辈无法告诉我们的答案，说不定可以在上海图书馆的家谱查询系统中找到答案。

上海图书馆相关负责人介绍，家谱是馆藏的优势资源，收藏量位居全球第一，仅仅依托数字信息化，将家谱从纸质资源转化为可以检索的互联网信息还不够，如何让其背后的传统文化“活起来”? 互联网最新的“关联数据”技术就是一种新的尝试。从家谱文献档案开始，整合多种文献档案信息，横跨时空，串联起多部家谱，梳理出家族的迁徙图，从而使资源价值最大化。

比如，胡适祖上并非姓胡，而是李唐宗室后裔。在“家谱知识服务平台”，详细梳理了其家族的脉络，据胡适所属的“上川明经胡氏家族”显示，他的宗祖胡昌翼原不姓胡，而是姓李，是唐昭宗皇子，因避乱从洛阳迁出，被托于徽州人士胡三公，后随义父改姓掩人耳目，随后永久定居于安徽考川。登录“华人家谱总目”网页，左侧列出百家姓氏，点击某个姓氏，便能在右侧获取姓氏概况、先祖名人、相关家谱等信息。此外，用户还可以通过地图、时间等为时空坐标，进一步检索相关家谱信息，针对专业学者和爱好者，网页也标注了家谱的馆藏信息以供进一步的研究。

值得一提的是，考虑到互联网的开放共享特性，此次的家谱服务不仅满足普通用户寻根问源的乐趣。上海图书馆还是全国首家推出关联数据开放的图书馆，专业人士不仅可以对数据进行调用、修正，互联网开发人员和机构还可以基于家谱数据集研发相关的App应用和游戏，提升家谱等文献资料的应用范围。接下来，上图还计划将馆藏的17万余种盛宣怀档案资源进行数据整理和加工，利用该技术进一步实现数字人文服务。

在线咨询

上一篇：这是你想要的国外商城系统订单信息管理吗？
下一篇：Adobe Flash 浮沉录（下）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商