Advertisement
  1. Web Design
  2. Kids

Веб дизайн для детей: Создай свой вебсайт

Scroll to top
Read Time: 3 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Russian (Pусский) translation by Sergey Orlov (you can also view the original English article)

Добро пожаловать на второй урок из серии Веб Дизайн для самых юных

В этом уроке мы узнаем о том, что нам нужно сделать  и какие инструменты нам понадобятся, для того чтобы подготовиться к написанию кода для вебсайта Город Тут+, мы его создадим, я обещаю Также не забудьте задавать вопросы в комментариях внизу страницы.

Для начала давайте посмотрим внимательнее, что мы будем создавать с вами вместе!

Набросок

Очень полезно набросать все идеи, возникшие в нашей голове, перед тем, как мы начнем воплощать их в жизнь. Это поможет сохранить нам уйму времени, когда мы начнем кодить.

Может быть то, что в вашей голове не совсем то, что вы набросали на бумаге? Может быть, нарисовав, вы обнаружили новые вопросы и задачи? Может быть ваш дизайн слишком скученный? Многие из этих проблем проявят сами себя на вашем наброске.

Если вам не понравился ваш первый набросок, не беда! Это как то, что должно было случиться! Ведь мы хотели сначала все отработать на бумаге.

Делаем набросок нашего веб сайта для Города Тут+.

Нам нужен вебсайт для туристов, желающих посетить наш город и узнать, какие там есть магазины и чем там еще можно заняться. Мы сгруппируем все развлечения со смыслом. Так чтобы отели были в одной группе, рестораны в другой Мы конечно же хотим, чтобы были ссылки, ведущие на сайты, которые описывают все эти развлечения, чтобы наши посетители смогли узнать о них побольше.

Конечно мы добавим фотографий, чтобы наши посетители ощутили его дружелюбную атмосферу.

Вот набросок, который покажет как будет выглядеть наш  настоящий разноцветный сайт:

Вот таким будет наш сайт, который мы создадим с нуля! Очень милый!

Программы для написания кода

 Чтобы написать HTML код, нам нужен текстовый редактор, чтобы печатать в нем наш код.

Microsoft Word для этих целей не подойдет, зато подходящий текстовый редактор облегчит нашу работу. Редактор кода будет понимать то , что мы печатаем и раскрашивать наш код в нужные цвета, а Microsoft Word хорошо подходит для школьных рефератов.

Есть много редакторов кода, которые не надо даже покупать, вы можете их загрузить просто из интернета. Если вы не знаете как это сделать, вы можете попросить кого-нибудь из взрослых.

Bluefish хороший редактор для Windows, в то время как Atom  будет работать на Mac.

Мы обсудим, что означает этот текст в следующем курсе, а пока лишь взгляните на то, что вы будете печатать.

Файлы, файлы, файлы

Веб сайт - это всего лишь кучка файлов. Эти файлы должны находиться в одной папке, чтобы браузер их смог найти.

У нашего сайта будет HTML файл(он имеет расширение .html на конце), а так же CSS  файл(о имеет расширение .css  на конце), а так же 4 фотографии, который будут лежать в папке под названием "images". The images folder will live in the same main folder as the HTML and CSS files.

Расширение файла это набор букв, которые находятся после точки в названии файла, оно говорит нам, какого типа этот файл.

Папка с фотографиями будет находиться в  главной папке нашего сайта.

Среди фотографий  у нас будет файл town.svg(он имеет расширение, которое говорит нам, что файл имеет тип изображения), мы его положим в нашу папку с фотографиями. Делая это, мы наводим порядок.

На обеих картинках файлы лежат правильно, но мы будем использовать папку для фотографий(как на картинке справа).

Браузеры

Мы увидим результат нашей работы прямо в браузере.

Браузер это программа и ее тоже можно скачать бесплатно. Можно скачать например Google Chrome или Firefox. Если у вас Мак, то у вас уже установлен браузер Safari!

Пока еще не в интернете!

Мы будем создавать сайт прямо на нашем компьютере, пока еще не в интернете. Мы уже говорили о том, что вы не сможете увидеть веб сайт в интернете, пока он не будет храниться на сервере.

На картинке видно, что готовый веб сайт будет виден только локально(не в интернете). Вместо того чтобы видеть адрес сайта типа www.tutsplus.com, мы будем видеть локальный адрес, который выглядит немного иначе.

Дело сделано!

В этом уроке мы узнали о важных вещах, которые помогут подготовиться к созданию настоящего веб сайта и написать код для него. Мы узнали как подготовить файлы и об инструментах, таких как текстовый редактор и браузер.

В нашем следующем уроке мы начнем писать код нашего сайта! Мы организуем и добавим код в наш HTML  файл. Будет интересно!

До встречи у стен города!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.