儿童也能设计网页:预备好建立网站_宁波网站建设_慕枫网络

宁波网站建设 | 2017-11-03

在这次的教程,我们将学习所需要用到的一些东西和工具才开始为Tuts+之城网站写代码;我们会很快进入正题的,我保证! 还有,别忘了在此页面下方的评语框内发问任何问题。

首先,让我们先看看我们究竟会一起创建什么!

草稿

在还未创建任何东西以前,先把脑子里面有的主意拟定一个草稿,是很有帮助的。 这是一个很好的练习,它能帮助我们在写代码的时候省下很多时间。

或许我们脑子里面想到的在纸上却看起来不怎样? 或许在草稿时我们发现有新的难处和问题? 或者我们的设计过于花绿? 很多像这样的问题会浮现在我们的草稿里面。

若你看草稿的第一眼很不顺眼没关系,这正是我们要它发生的情形! 我们要让这些情形先发生在纸上。

草稿

拟定Tuts+之城网站的草稿

我们需要一个网站,能让访客到访并了解我们的城市提供什么商店及生意。 我们要将这些生意合理的归类,如“旅馆”在一组而“餐馆”在另一组。 我们要加入这些生意各自的网站链接,好让访客们可以点击查询更多详情。

我们会使用一些图像让我们的城市有迎宾的感觉。

这个草稿显示网站完整的设计及颜色的预览。

拟定Tuts+之城网站的草稿

这是我们要从零开始创建的真正网站!蛮整齐利落的。

编辑

我们需要一个文本编辑器来写HTML代码 (就是在课程一所提过的秘密语言)。

最好不要使用类似Microsoft Word的应用程式, 因为适当的代码文本编辑器会让我们的工作更容易些。 代码编辑器明白我们所写的并能让代码正确显示颜色,而Microsoft Word 举例来说比较合用于写学校报告书。

在网上你可以免费下载一些不错且是免费的代码编辑器。 若你不确定如何下载东西,或不确定你是否应该下载,最好是先问过大人。

Bluefish很适合用在Windows的电脑,而Atom则适用于Mac.

编辑

我们会在下一个课程更多讲解这句话的意思,但现在你可以大概预料你将会写什么。

文件,文件,文件

我们之前有提过,网站不过是一堆的文件。 这些文件必须放在同一个文件夹里才能让浏览器得到它们。

Tuts+之城网站将会有一个HTML文件(以 .html 副档名为结尾保存),一个CSS文件(以 .css 副档名为结尾保存),以及保存在“images”文件夹的四张图像。 图像文件夹会放在和HTML及CSS文件的同一个文件夹中。

副档名是文件名字句号过后的文字,它告诉我们文件的格式是什么:

文件,文件,文件

如前所提,我们的图像将保存在一个名为“images”的文件夹,而这个文件夹是在我们主要页面的文件夹里面,如图:

文件,文件,文件

以上图表显示我们有一张名为 town.svg的图像 (.svg 是图像其中一种副档名),我们将它放入一个名为“images”的额外文件夹。 这样做让东西更为整齐:

文件,文件,文件

这两种方式都正确,但我们会使用额外文件夹,如右边的图表。

浏览器

我们将在浏览器看到我们所做的,就像现在你也使用浏览器浏览这个 Tuts+ 网页!

若你还没有一个浏览器,网上有很多浏览器可免费下载,如 Google Chrome 和 Firefox. 若你是使用 Mac 电脑,你就有已经安装好了的 Safari, 多好!


还没有在网上

我们将在我们的电脑里面建立网站,而不是在网上哦。 若你还记得我们的课程一,我们已经讲解过,若没有把网站架在服务器,我们就无法在网上看到网站的。

浏览器

以下图像显示一个完成的网站在原地(不是在网上)透过浏览器被浏览的样子。 我们不会见到 www.tutsplus.com 的网址,我们看到的是网站原地网址,看起来有点不一样的:

浏览器

做得好!


在此课程我们看过了重要的东西,它们会帮助我们预备好来写网站的代码。 我们学到如何预备文件以及一些工具如文本编辑器和浏览器。


慕枫网络专业从事宁波网站建设,宁波网站设计,宁波网站制作

上一篇:网页设计中网格的综合介绍_宁波网站建设_慕枫网络下一篇:墙内生存指南:中国的网页设计现状_宁波网站设计_慕枫网络
联系电话 400-6065-301

建站咨询 星星-总监

留言