Advertisement
  1. Web Design
  2. Kids

儿童也能设计网页:欢迎来到 Tuts+ 之城!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Chinese (Simplified) (中文(简体)) translation by Shiyee Nana (you can also view the original English article)

欢迎来到 Tuts+ 之城,一个人人都喜欢设计网页的地方! 在这个系列我们将学习一切有关设计以及网页制作。 我们将一同制作网页。

这堂课(或教程)将一步一步指导你如何制作网页。 每堂课的尾段都能找到所有练习的文件,好让你能用来比较自己作业的进展。

因此,请进来,自在一点然后为Tuts+之城的人创作些什么!

网页如何操作?

让我们后退一步想想网页是如何操作的。

当两部电脑连上网络(以下照片中的黄色线条)它们可以彼此对话。

服务器(蓝色盒子)是一部装有网页文件的特别电脑。 你家里或学校里的电脑不是服务器,因为它们不是直接连接到网络。 我们是透过互联网服务供应商(ISP)连上网络。

网站的内容(即所有网页所提到的)将被组织形成一组电脑明白的特定规则;就好比秘密的交谈,代码语言,而我们也即将学到这些所谓的秘密!

你的电脑如何连接网络

这张图显示浏览器要求浏览位于服务器里面的www.tutsplus.com. 服务器将文件传送过去然后浏览器把它翻译成显示在荧幕上的页面。 这在短时间内发生的!

这完全是沟通及分享资料。

因此,你在“原地”写网页(即你的电脑里)别人在不同的电脑上是看不到的,直到你把文件架上服务器。  我们稍后会好好来探讨。

网页设计师的工作

网页设计师的工作是很重要的。 以上图表所显示的每一件事情的发生都只为了一个原因:浏览网站。 网页设计师的工作就是决定网站如何被呈现出来,它如何操作等等,也就是确保网站对于所有访客有可用之处(就好比你现在就是Tuts+ 的访客一样)。

网页设计师的工作

我们的工程

在这个系列我们将制作 Tuts+ 之城的网站。 这城市需要有个地方让旅客还未来访以前先得到一些关于城市的有用资料。

这是网站的预览:

我们将要创建的

此网站将包含我们所要学习的网页设计要点。 这将是你第一份网页设计的工程!

草稿和创建

让我们再说明多一点点。

首先,我们把网站画出来然后把网站要放的所有资料放在一个特别档案里。 我们也会在此加入链接让访客可以带到不同的地方,如商场的网站。

草稿很重要!

风格

我们画好及写好网站的特别档案后我们必须让网站好看一点。 这个部分是将我们对颜色和版面的想法呈现出来。(决定这些东西如何在荧幕上显示出来)

我们要如何让网站容易被使用? 我们要让颜色表达怎样的感觉? 智慧型手机如何显示这一切? 在电脑的全屏幕上呢? 什么字体最好看? 这些都是我们需要去想的,但不要担心,这是一个相当有趣的过程,而这些问题会很自然的随着你不断设计网站而来。

体系图

以下是一个完整的路线图说明我们制作网站的过程。 每个区块都有该主题的简介以及该主题进一步的细分。

路线图

简介

你可以看到打着粉红色的星星,就是我们现在所读的“开场”。 现在我们大概了解网页如何操作,网页设计师的工作范围,以及我们即将一起设计和创建的工程。

创建网站

接下来我们要构思以及开始画草稿。 画草稿让你在开始写程式前,能以一个有趣的方式汇集设计的构思。 这让我们省下很多时间,也能帮助我们不离题。

过后我们再提档案以及网页程式所需要用到的工具。

HTML

超文本标记语言(HTML) 就是那个我们刚才有提到的,让我们能组织文字档案的秘密语言(但这已不再是秘密)。 这语言让我们的浏览器能明白及显示网站的档案。

在我们网站的一切,以及所有跟网站有关的,都以HTML元素存在。 这个元素所组成的语言含有意义,也帮助形容我们放在网页上所有的一切。

此刻不需过于担心何谓程序编码,你只要知道所有网站都是由文字写成而来。

CSS

层叠样式表,CSS, 让我们可以设定我们网站的风格 (颜色,字体,整个感觉),让网站变得有趣及容易使访客使用。

CSS是长什么样呢

CSS 版面

CSS 让我们把所有东西放到页面。

图像

在这部分我们将快速提到要放在我们网站的图像种类以及我们可以如何让它有不同的风格。 我们将增加四张可爱的图像,你觉得它们如何?

Our images

设计基础

在这部分我们将学习网页设计的“骨架”。 我们要确保我们所做的,人们将会使用且容易使用,也要确保它是好看的。

文字排版

文字排版是一种编排文字的艺术,也是我们新的设计课程,它可以让我们网站的成功率加分或减分。

我们网站第一个文字排版的例子可以在第一行找到:

Heading

颜色

颜色很重要也很有趣。 颜色可以让网站变得漂亮,也能有些意义上的代表,我们将在这说明一切。

系列结束

在这系列教程的最后,我们将学习把网站档案放进其中一部特殊电脑,即服务器,让你的亲朋戚友可以在网上看到。 我们也会谈到你可以如何把你所学习的,以及你的新名衔 “Tut+ 之城设计师” 带到更远。

但现在也不需太担心,我们才刚起步呢!

再见咯!

在下一堂课我们会直接学习如何预备使用 HTML 来创建网站。 我迫不及待再见到你!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.