Пошаговая инструкция
по созданию своих сайтов с нуля
Этап 1. Планирование сайта
Планирование

Перед тем как самому создать свой сайт, сначала нужно его спланировать: определить цели и задачи которые он должен решать, изучить потенциальных посетителей (целевую аудиторию). На этапе планирования сайта, полезно изучить проекты своих конкурентов, оценить их плюсы и минусы.

Определившись с задачей, целями и аудиторией, и посмотрев на конкурентов, мы можем приступить к планированию контента. Нам нужно понять, чем будем заполнять свой проект, какие у него будут разделы и функциональные блоки. После этого можно переходить к следующей ступени — создание дизайна сайта (его макета).

Этап 2. Создание дизайна сайта

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

Имейте в виду, что веб-дизайн — это огромная отдельная область, и вам придется потратить достаточно времени, чтобы освоить его на более менее приемлемом уровне. И наша пошаговая инструкция по созданию сайтов, как раз поможет вам в этом.

Чтобы стать более-менее хорошим веб-дизайнером, нужно потратить некоторое время на изучение программы Photoshop (или другой графической программы, но чаще всего дизайн создается в Photoshop). Затем необходимо изучить композицию (компоновку различных изображений), сочетания цветов, цветовую коррекцию изображений, веб-типографику. После, осваивают технический дизайн (отрисовка предметов), векторную графику (создание иконок, логотипов и т.п).

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

На этом, второй этап пошаговой инструкции о том, как самому создать свой веб-сайт, заканчиваем и переходим к вопросу верстки.

Этап 3. Верстка сайта

Верстка сайта — это процесс создания веб-страницы из макета (картинки), получившегося на этапе дизайна. Другими словами, верстка — это процесс перевода изображения в веб-страницу с применением HTML & CSS.

Рассмотрим процесс обучения верстальщика.

Верстальщику, как и веб-дизайнеру, тоже нужно знать основы Photoshop — чтобы нарезать макет и корректировать некоторые изображения по размеру, цвету, контрасту и т.д.

Первым делом, чтобы стать верстальщиком, нужно изучить язык HTML — основу основ. Каждый, кто как-либо связан с веб-разработкой, должен знать этот язык разметки.

Этап 4. Язык разметки HTML.

HTML (язык разметки) состоит из различных команд. На профессиональном жаргоне вебмастеров они называются «тегами». Всего тегов около 100, но наиболее часто (практически постоянно) приходится работать примерно с 30-ю, поэтому в процессе использования они запоминаются очень быстро. Про остальные тоже необходимо знать, чтобы быть в курсе всех возможностей HTML и при необходимости, возможно, с помощью справочников, воспользоваться ими.

Принцип верстки страниц с помощью HTML в следующем. В каком-нибудь простом текстовом редакторе либо в обычном блокноте пишется статья. Затем части этой статьи разделяются на блоки с помощью тегов.

Допустим, у вас есть строка, которую вы хотите сделать заголовком. Тогда в начале этой строки вам нужно вставить тег заголовка <h1>. В конце же — вставить закрывающий тег заголовка </h1>.

Чтобы сделать из части текста абзац, нужно в начале части текста вставить тег <p>, а в конце — </p>. Если хотите сделать текст жирным, используйте теги <strong> и </strong>. Получившийся документ нужно сохранить в файл с расширением .html.

Откройте этот файл с помощью браузера и — вуаля! — у вас уже готова страница.

Таким образом, с помощью тегов веб-верстальщик создаёт структуру контента HTML-страницы, размечает, где должны быть заголовки, абзацы, ссылки, таблицы, изображения, видео, формы и многое другое.

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

Язык HTML — это основа основ. С этого языка начинается обучение созданию сайтов.

Этап 5. Оформление страницы CSS

CSS — второй основной инструмент верстальщика. Язык HTML и CSS изучают совместно. Они неразлучны, как день и ночь, и составляют в современной веб-вёрстке единое целое.

Рассмотрим CSS.

CSS отвечает за внешний вид страницы. И, если с помощью HTML мы задавали структуру страницы, делали ее разметку, то, используя CSS, мы задаем визуальное оформление страницы. Именно в CSS мы задаем размеры блоков, указываем шрифт, размер шрифта, цвет текста, фоновые цвета и изображения и т.д.

Например, с помощью CSS вы можете изменять цвет, фон, шрифт, ширину, высоту, положение, форму и многое другое у любого элемента страницы.

Помимо изменения тегов контента (заголовков, абзацев, таблиц и т.д.), с помощью CSS форматируется так называемая модульная сетка, благодаря которой создаётся структура сайта и отмечается, где будет его шапка, контент, сайдбар и подвал.

Если HTML в качестве основного понятия оперирует тегами, то CSS оперирует понятием CSS-свойства, которые назначаются тегам. Схема назначения CSS-свойства тегу выглядит следующим образом: тег { css-свойство: значение; }, т.е. в CSS-коде мы сперва задаём имя тега, а затем для него мы указываем нужные свойства с нужными значениями.

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

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

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

Этап 6. JavaScript— клиентский язык программирования jQuery (библиотека JavaScript), DOM, BOM

Последний язык, которым должен хорошо владеть верстальщик — язык JavaScript.

На современных сайтах уже практически не обходятся без различных слайдеров, эффектных галерей, анимаций, каруселей и многого чего ещё. Всё, что двигается, прыгает, исчезает и появляется на открытой вами веб-странице — всё это сделано с помощью языка JavaScript и его популярной библиотеки jQuery.

Как и любой другой язык программирования, JavaScript довольно сложен в изучении. Особенно для неподготовленных специалистов. Поэтому, чтобы хоть как-то облегчить процесс освоения языка JavaScript, добрыми людьми были придуманы различные библиотеки языка JavaScript, которые немного облегчают разработку программ на нём.

Самая популярная на данный момент библиотека JavaScript — это jQuery.

Помимо самого JavaScript, вам также желательно познакомиться с двумя понятиями DOM и BOM.

DOM — это объектная модель документа. Благодаря ей браузер создаёт из HTML-документа дерево элементов (объектов) страницы. Где в качестве элементов выступают заголовки, абзацы, таблицы и остальные теги, представленные на странице. У элементов имеется свой уникальный адрес и, обращаясь по этому адресу, JavaScript может получать доступ к элементам страницы и манипулировать (управлять) ими.

BOM — это объектная модель браузера, где в качестве элементов выступают уже не теги HTML-документа, а объекты браузера: окно браузера, экран, адресная строка, история посещений и т.д.

То есть у нас есть DOM, есть BOM и управлять ими мы можем, используя JavaScript. Чаще всего, приходится работать с объектной моделью документа (с DOM). Программно управляя элементами DOM, и создается большинство скриптов: галерей, каруселей, слайдеров и т.д. Поэтому особое внимание при изучении JavaScript стоит уделить изучению и работе с DOM.

Резюмируем

Чтобы стать хорошим верстальщиком, вам нужно знать:

1. основы Photoshop

2. все теги, включая HTML5 и свойства CSS3

3. адаптивную вёрстку

4. синтаксис языка JavaScript

5. библиотеку языка JavaScript–jQuery

При самостоятельном изучении с книгами на это уходит примерно 2-3 года. При помощи специалиста или видеокурсов на это может уйти от 2-х месяцев до 1 года, в зависимости от начальной подготовки.
Кстати говоря, все, о чем я говорил Выше, называется Front-end – разработкой (т.е. разработкой на стороне клиента, поскольку для верстки вам не нужен веб-сервер).

Локальный веб-сервер — OpenServer

Мы, наконец, подошли к вопросу «Как стать веб-программистом?».

Веб-программист должен хорошо знать два языка — PHP и SQL.

Чтобы работать с данными языками, у вас на компьютере должен быть веб-сервер Apache, интерпретатор PHP, а также сервер баз данных MySQL.

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

Одной из самых популярных сборок локального веб-сервера сейчас считается OpenServer, установив который вы сразу сможете создавать на своём компьютере скрипты (программы, созданные на языке PHP) и базы данных на сервере MySQL.

PHP — серверный язык программирования Фреймворки PHP — Laravel, Kohana, Symfony, Yii и др.

PHP — это серверный язык программирования, основной язык веб-программиста при создании сайтов. Например, все популярные CMS (движки) созданы именно на языке PHP.

С языком PHP создают различные web-приложения (скрипты): CMS, форумы, гостевые книги, комментарии, рассылки, рейтинги и многое, многое другое.

Также с помощью языка PHP можно отправлять SQL-запросы к базе данных для управления информацией, хранящейся в ней.

Как мы выяснили ранее, JavaScript манипулирует элементами на странице (тегами). PHP же манипулирует данными (информацией), которые хранятся в текстовых файлах на сервере или в базе данных на сервере MySQL.

Так же, как и у JavaScript, у языка PHP для облегчения создания веб-приложений (сайтов, форумов, блогов и т.д.) имеются свои фреймворки.

Фреймворков достаточно много — можете выбрать любой из них. Но прежде чем создавать web-приложения с помощью фреймворков, вам нужно выучить синтаксис языка PHP, а также изучить концепцию объектно-ориентированного программирования в PHP (ООП).

Самые популярные фреймворки PHP: Laravel, Kohana, Zend, Symfony, Yii, CodeIgniter, Phalkon, Cake PHP.

MySQL — сервер баз данных

MySQL — это сервер баз данных. В MySQL хранятся различные данные, относящиеся к сайту: статьи, названия страниц, URL-адреса, комментарии, даты создания и т.п. Чтобы уметь работать с базами данных, находящимися на сервере MySQL, вам нужно изучить язык SQL.

Так же, как и язык PHP, сервер баз данных MySQL — основной при создании сайтов на стороне сервера.

Информацией, хранящейся в базе данных, управляют с помощью SQL-запросов. SQL —это язык структурированных запросов. С ним можно редактировать, удалять, читать и добавлять информацию в базе данных на сервере MySQL.

Практически все популярные сервера баз данных — PostgreSQL, MSSQL, Oracle, SQLite, Firebird — понимают язык SQL. Поэтому вы легко сможете переключиться с одного сервера баз данных на другой, если вам по работе понадобится это сделать. Но, как я и говорил, при создании сайтов обычно работают с сервером MySQL.

Информация в базе данных сервера MySQL хранится в таблицах. У каждой таблицы есть своё уникальное имя. Таблицы в свою очередь состоят из строк и столбцов (у каждого столбца имеется своё имя и тип данных). На пересечении строк и столбцов находятся ячейки — именно в этих ячейках хранятся данные.

Чтобы получить какую-либо информацию из базы данных или изменить её, используют SQL-запросы.

SQL-язык намного легче языков программирования JavaScript или PHP.

Создавать базу данных и управлять информацией на ней можно не только с помощью SQL-запросов, но также с помощью различных программ, самая популярная из которых phpMyAdmin.

Там всё происходит в визуальном режиме. Данная программа установлена на большинстве хостингов. PhpMyAdmin также установлен в пакет программ веб-сервера OpenServer.

Резюмируем

Чтобы стать хорошим веб-программистом, вам нужно знать:

1. Основы работы с веб-сервером.
2. Файл конфигурации веб-сервера .htaccess.
3. Язык PHP и ООП PHP.
4. Сервер баз данных MySQL.
5. Язык запросов SQL.
6. Любой один фреймворк PHP.

Если погружаться самому, вооружившись книгами, на обучение уйдет 1-1,5 года. При помощи специалиста или видеокурсов на это может потратиться от 3 месяцев до 1 года, в зависимости от начальной подготовки.

Языки PHP, SQL и всё, что связано с веб-сервером — всё это вместе часто называют Back-end – разработкой (т.е. разработкой на стороне сервера). Ведь чтобы создать сайт на этих языках, вам нужен веб-сервер.

CMS — движок сайта

Популярные CMS: WordPress, Joomla, Drupal, Netcat, Bitrix

CMS бывают платными и бесплатными. В пространстве рунета популярными платными CMS являются Netcat и Битрикс, а бесплатными — WordPress, Joomla и Drupal. Практически все веб-программисты используют какую-нибудь популярную CMS либо создают свою CMS.

Чтобы создать сайт с помощью CMS, необязательно знание языка программирования. Однако, если вы хотите использовать уникальный дизайн или свою собственную функциональность, нужно подтянуть владение языком PHP.

Покупка домена и хостинга для сайта

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

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

Для русскоязычных компаний в конце имени домена обычно используют .ru Примеры имени домена: yandex.ru, mail.ru

Купить (зарегистрировать) имя домена в зоне .ru можно за 600 р. в год.

Как правило, домен и хостинг приобретаются в одном месте, в одной и той же компании

Отредактировано dankarela (2018-03-15 08:49:21)