() translation by (you can also view the original English article)
Добро Пожаловать в Tuts+ Town, где все обожают веб дизайн. В этой серии мы будем изучать все о дизайне и создании вебсайтов. Для этого мы создадим вебсайт вместе.
Эти уроки предоставят Вам пошаговую инструкцию как создать свой веб-сайт. Все файлы упражнений будут включены в конце каждого урока, так что вы можете сравнивать свою собственную работу, и то, как у вас получается.
И так, заходите, устраивайтесь поудобнее и давайте создадим что-нибудь для людей в Tuts+ Town!
Как Работает Веб?
Для начала давайте сделаем шаг назад и подумаем о том как работает Веб.
Когда два компьютера подключены к Интернет (который показан желтой линией на рисунке снизу) они могут "разговаривать" друг с другом.
Сервер (на рисунке - голубая коробочка) - это специальный компьютер, на котором хранятся файлы веб-страниц. Ваш компьютер дома или в школе нельзя назвать сервером, потому что они не подключены напрямую в Интернет. Мы поключаемся к Интеренет через Поставщика Услуг Интернет (Интернет-провайдер, на рисунке - ISP)
Содержимое сайта (все те вещи о которых рассказывает веб-сайт) организовано в рамках специального набора правил, которые понимают компьютеры; что-то вроде разговора на тайном, закодированном языке, и мы, в скором времени, будем также посвещены в этот маленький секрет.
На этом рисунке браузер запрашивает веб-страницу www.tutsplus.com с сервера на котором "живут" файлы веб-сайта. Сервер отправляет файлы обратно, и браузер подготавливает их для отображения веб-страницы на экране. И это все происходит очень быстро!
Это все о передаче и обмене информацией.
Из-за всего этого, веб-сайт, который ты напишешь локально (на своем компьютере) не смогут посмотреть другие люди со своих компьютеров, до тех пор пока ты не переместишь файлы на сервер. Мы еще вернемся и разберем эту тему попозже.
Работа Веб Дизайнера
Работа веб-дизайнера очень важна. Все то, что изображено на картинке сверху, происходит с одной целью: просмотр веб-сайта. Работа веб-дизайнера заключается в том, чтобы решить, как этот веб-сайт будет выглядеть и работать, а также в некоторых других вещах, например убедиться в том, что веб-сайт могут использовать и посетители с ограниченными возможностями (вас точно так же можно назвать посетителями сайта Tuts+ прямо сейчас).
Наш проект
В этом цикле уроков мы будем создавать веб-сайт для Города Tuts+. Этот город нуждается в месте, где туристы могли бы получить полезную информацию о нем перед посещением.
Вот превью нашего веб-сайта:
Этот веб-сайт будет содержать все те вещи, которые мы узнаем о веб-дизайне. Это будет ваш первый и очень аккуратный веб-дизайнерский проект!
Набросок и создание
Давайте теперь немного обсудим то, что же нам понадобиться.
Во-первых, мы подготовим наш сайт, а дальше включим все то, что хотим видеть на нашей страничке, в специальный файл. Мы также добавим сюда ссылки для пользователей, по которым они смогут переходить на другие странички, например, на сайты магазинов.
Составление дизайна
После того, как мы все подготовили и написали специальный файл для нашего веб-сайта, нам нужно заставить его выглядеть хорошо. Это та часть, в которой мы воплотим все наши идеи по цвету и планировке (решим, как все эти штуки будут располагаться на экране).
Как мы можем сделать наш сайт простым для использования? Какие чувства мы хотим передать цветом? Как все должно располагаться на экране смартфона? Что насчет экрана обычного компьютера? Какой шрифт будет смотреться лучше всего? Это все те вещи, о которых нам следует позаботиться, но не переживайте, это на самом деле весело, и все эти вопросы начнут возникать у вас сами собой по мере того, как вы будете разрабатывать все больше веб-сайтов.
Схема учебного цикла
Ниже представлен полный план действий к нашему путешествию по созданию веб-сайта. В составе каждого блока сначала представлено вступление по изучаемой теме, а дальше содержание разбито на несколько маленьких кусочков.
Вводная часть
По розовой звездочке на картинке вы можете узнать, что сейчас читаете Вступление. К этому моменту у нас имеется базовое представление о том, как работает веб, что делает веб-дизайнер, а также мы взглянули на проект, который собираемся вместе разработать и создать.
Создание веб-сайта
В следующей части мы думаем над идеями и начинаем делать наброски. Создание набросков - это классный способ собрать все ваши мысли по проектированию перед тем, как вы начнете писать код. Это поможет сохранить нам время и не сбиться с пути.
Дальше мы поговорим о файлах и инструментах, нужных нам для того, чтобы начать писать код для нашего веб-сайта.
HTML
Язык гипертекстовой разметки - HyperText Markup Language (HTML) - это тот секретный (теперь уже нет!) язык, который помогает организовать наш текстовый файл, что мы упоминали ранее. С помощью этого языка браузеры понимают и отображают файлы веб-сайта.
Все на нашем веб-сайте, да и все веб-сайты, если уж на то пошло, живут внутри элементов языка HTML. Элементы - это кирпичики языка, у которых есть значение и которые дают описание всему, что мы размещаем на страничке.
Не беспокойтесь сейчас о том, что же на самом деле значит этот код, главное, вы уже знаете, что каждый веб-сайт состоит из написанных документов.
CSS
Каскадные таблицы стилей - Cascading Stylesheets (CSS), позволяют нам украсить наш сайт (добавив цвета, шрифтов), делают его привлекательным и настолько простым в использовании, насколько это возможно.
Сетки CSS
CSS также помогает нам расположить все кусочки нашего веб-сайта на странице.
Картинки
В этой части нашего путешествия мы быстро поговорим о типах картинок, которые будет содержать наш сайт, и о том, как немного украсить их. Мы добавим четыре милые картинки, как они вам?
Основы дизайна
В этой части мы рассмотрим “строительные блоки” веб-дизайна. Мы хотим убедиться как в том, что люди с легкостью могут использовать что мы создаем, так и в том, что выглядит оно хорошо.
Типографика
Типографика - это искусство оформления при помощи наборного текста, а также отличное развитие нашего урока по дизайну, так как она может значительно добавить успеха нашему веб-сайту, или же, наоборот, убавить.
Первый пример типографики на нашем сайте может быть найден в самом верху:
Цвет
Цвет - это очень важно и весело. Он может сделать сайт симпатичнее, а кроме того, добавить значения, обо всем этом мы поговорим в данной части.
Конец учебного цикла
Мы закончим нашу серию уроков, изучив то, как поместить файлы вашего веб-сайта на один из тех специальных компьютеров, сервер, чтобы ваши друзья и семья смогли просматривать сайт через Интернет. Мы также поговорим о том, где вы можете использовать ваши новые знания и титул Веб-разработчика для Города Tuts+.
Но давайте пока не беспокоиться об этом слишком сильно!
До скорого!
В следующем уроке мы окунемся в изучение того, как подготовить веб-сайт с помощью HTML. Жду не дождусь, увидимся у города!
