Блог

Перенос сайта на WordPress. Часть 1. Простая верстка сайта.

Здравствуйте! Продолжаю делать уроки по WP, так в самом первом уроке мы установили wordpress на локальный сервер, сегодня будем верстать самый простенький сайт на html5, постепенно улучшая его и переносить на WP. И так приступим. Заходим в папку www нашего локального сервера и создаем там папку будущего сайта, например mysite1. В ней нам нужно создать 2 файла, index.html и style.css. В index.php будет наш html5, а в style.css все стили для сайта. Теперь запускаем локальный сервер. В строке браузера пишем название нового сайта  mysite1/ когда загрузится увидим белый экран. Все работает. Переходим в папку mysite1 и открываем на редактирование файл index.html (открываем через блокнот). Структура нашего будущего сайта будет вот такая:

Можете сразу скопировать себе в блокнот. Немного расскажу о структуре. <!DOCTYPE> – указывает тип документа, в данном примере тип html5. <head></head> – предназначен для хранения метатегов (о них чуть позже), которые помогают браузеру работать с данными.  <body></body> – основная часть сайта, здесь хранится вся информация которая будет выводится в браузере.

Приступим к добавлению метатегов в <head>.

Здесь весь код тега <head> скопируйте и вставте в свой index.html. Кратко опишу что и как. <meta charset= /> – задает кодировку документа. <title></title> – заголовок сайта. <link rel= href= /> – служит для подключения к документу файла стилей, или js скрипта. Следующая закомментирования строчка служит для того чтоб браузер IE понял все теги html5. Здесь все переходим к основной части.

В теге <body></body> наш сайт разбит на три части, шапка сайта, контент сайта и подвал сайта. Каждому из этих частей соответствуют теги html5. Шапка сайта – <header></header>, Контент сайта – <section></section>, Подвал сайта – <footer></footer>. А вот код тега <body> копируйте в свой документ.

Обновите свою страничку и посмотрите что получилось. У меня вот такое ссылка. Все работает но без файла стилей смотрится очень плохо. Давайте его откроем. Файл стилей называется style.css его создали в начале урока. Теперь запишем в него вот такой код:

Сохраните и еще раз обновите страницу. У меня вот так ссылка. Файл style.css определяет стили для всех элементов нашего сайта, сейчас подробно рассказывать о каждом свойстве не буду, поговорим об этом в следующих уроках. На этом урок закончен. Если у кого не получается пишите на почту или в комментариях все расскажу, вот готовый сайт в архиве ссылка. На этом все. В следующем уроке будем переносить все на WordPress.

Спасибо, сообщение отправлено.