Перейти к содержимому



Как создать html сайт

#1 HueJack

HueJack
  • Пользователь
  • 118 сообщений
  • Репутация: 11
0

Отправлено 26 Октябрь 2012 - 16:41

Здравствуйте, уважаемые случайные посетители и завсегдатаи форума http://www.masterwebs.ru/! В этой статье я постараюсь раскрыть все, ну или хотя бы основные аспекты в создании html сайта. Сначала я думал рассказать что-то общее, создать основу знаний для начинающих, но в итоге решил, что лучшим вариантом будет подробное руководство для людей, скажем так, пока слабо разбирающихся в html коде, css стилях, кодировках и прочих, присущих созданию сайтов понятиях.

Давайте разберемся, зачем создавать сайт на практически голом html, если есть десятки CMS плюс к тому же бесплатных. Объясняю - если вам нужно создать ресурс, содержащий 10-15 страниц, и в будущем вы не замышляете его значительное расширение, то устанавливать joomla, WordPress, DLE и т.п. просто нет смысла. Каждая из этих систем достаточно тяжелая, использует базы данных, множество скриптов работает ради загрузки каждой из страниц. Все это замедляет работу сайта. Кроме того, создать простенький шаблон для сайта на html не составит труда, когда под CMS нужны серьезные знания в верстке.

В качестве примера я выбрал абсолютно бредовую тему - «Сайт для привлечения авторов», можно конечно было написать про сайт продающий курс или сайт об онлайн игре.. Но суть от этого не изменится. Действия везде будут аналогичными) Кстати, не нужно ругаться, что я выкладываю не код, а картинки, реально было удобнее ^_^ Все файлы прикладываю!

Итак, ближе к телу делу - структура статьи будет следующая:
1. Структура будущего сайта;
2. Создание html каркаса;
3. Верстка шаблона;
4. Создание лого за 5 минут;
5. Добавляем чуть чуть динамики;
6. Домен и хостинг;
7. Заключение.
Итак, слишком долгое вступление закончилось, начнем практиковать создание великолепного, но в тоже время простого сайта в стиле минимализмJ

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

Изображение

Вы можете использовать и иной вид, различия исключительно в верстке.

Позиционировать я буду себя как компания «TxtMaster», логично, что мне нужно лого. Кроме того, мне нужно вывести контакты, чтобы потенциальные сотрудники могли со мной связаться. Все это будет размещаться в хидере.
В меню будут выводиться ссылки на имеющиеся статьи.
Футер и часть для вывода текста думаю понятноJ
Двигаемся дальше!

3. Создание html

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

Шаг 1. Создаем файл index.html. Для этого нажимаем комбинацию клавиш Ctrl+N или идем в файл и нажимаем на пункт «Новый». После этого, нам потребуется сменить кодировку, лично мне по душе UTF-8 (без BOM). Для этого находим в меню пункт «Кодировки» и выбираем там UTF-8 (без BOM). После этого сохраняем полученный файл с именем index и расширением html. Теперь редактор сможет определиться с синтаксисом и будет его выделять, что очень удобно.

Шаг 2. Обязательные теги.

После этого опишем основные теги на странице.

Изображение

Теги <html></html> обязательны, между ними располагается все содержание страницы.
Между тегами <head></head> располагаются метатеги, подключаемые скрипты и стили.
А уже весь контент идет после тега <body>, после чего он закрывается</body>.
По остальным тегам я думаю все понятно.

Шаг 3. Собственно наш каркас

Теперь будем создавать каркас шаблона - все это делается между тегами <body></body>.

Изображение

Давайте взглянем на то, что у нас получилось! Я добавил еще немного контента, для наглядности)

Изображение
Что-то получилось, но ничего примечательного. Теперь давайте будем верстать и наблюдать за изменениями!

4. Верстка шаблона

Для начала нужно создать файл style.css, если вы заметили, то он уже подключается в метатегах. Но его еще нет, и поэтому ничего не происходит. Опять лезем в меню, создаем новый документ, делаем кодировку UTF-8(без BOM) и сохраняем его с именем style.css. Все, можно начинать верстать!
Я написал несколько строк в стилях

Изображение
Тем самым я задал размеры области сайта и расположил блоки хидера в пространстве! Если немного разобраться в стилях, то сразу все понятно, смотрим, что получилось.
Изображение
Уже что-то вырисовывается! Вы наверно обратили внимание, что уже есть лого! О его создании я напишу позже. Хотя это несколько выходит за рамки статьи.
Продолжим!

Я выложил файл стилей, потому что сюда добавлять слишком громоздко! Разобраться в нем не составит труда даже начинающему, при наличии желания! :)
Вот, что получилось в итоге!
Изображение

5. Создание Лого для сайта

Лого я создавал на сайте - http://creatr.cc/creatr/, для этого сайта сервис подошел идеально.

Изображение

6. Добавляем малец динамики

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

Нам нужно сделать динамичное меню и футер, так как в меню буду добавляться ссылки, футер так же иногда изменяется (добавляются счетчики, различные считалки ТИЦ и ПР и прочее).

Для этого создаем 2 файла - menu.php и footer.php, кодировку выставляем UTF-8 без БУМ, конечно же.
Вырезаем из них код меню и код футера. Вот что должно получится.
Файл menu.php

Изображение

Файл footer.php

Изображение

Наш файл index.html меняем на index.php, так как вставки будут осуществляться при помощи php кода. Что у нас получается в результате:

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

Заключение:
Возможно, статья получилась все-таки немного общая, потому что я не рассказал для чего нужен каждый тег, что такое блочная верстка и т.д., но я считаю, что лучше поразбирать пример, проникнуться каждым тегом и самому сделать первый сайт. Я вас уверяю, уже после первых пары часов в голове возникнет кое какая ясность!
P.S. Если статья пригодится хотя бы 1 человеку, то я уже буду безмерно счастлив! :) Спасибо всем за внимание :)

Прикрепленные файлы


 

 

  • 0

#2 Нерукотворная

Нерукотворная
  • Пользователь
  • 27 сообщений
  • Репутация: 1

Отправлено 29 Октябрь 2012 - 16:57

Спасибо за информацию. Вроде все доступно расписано, но для меня все равно это непросто, надо разбираться. Надеюсь, что смогу это осилить с вашей помощью!
  • 0

#3 Катюша

Катюша
  • Пользователь
  • 31 сообщений
  • Репутация: 0

Отправлено 29 Октябрь 2012 - 17:18

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

#4 HueJack

HueJack
    Topic Starter
  • Пользователь
  • 118 сообщений
  • Репутация: 11

Отправлено 29 Октябрь 2012 - 17:47

Просто читать толку не будет 100%, нужно что-то сразу же делать, к примеру - сайт о фильме! Подобного рода одностранничники всегда популярны и если все правильно сделать (раскрутка, оформление и т.д.), то принесут не плохо денег в премьеру^_^
  • 0


Оформление форума – IPBSkins.ru