Верстка сайта: что это такое простыми словами + исходники для уроков

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

Верстка сайта что это такое простыми словами

Если вы решили создавать сайты на заказ, то вот примерные расценки на такого рода услуг:

Стоимость услуг на фрилансе.
Стоимость услуг по разработке на фрилансе.

В недавней статье я писал, как можно быстро сделать коммерческий сайт на CMS Joomla используя быстрый старт без знаний программирования. Обязательно почитайте и поделитесь своим мнением. Сегодня уже каждый может сделать сайт потратив на это буквально час или два.

Итак, давайте более подробнее рассмотрим основные виды, понятия и способы сверстать сайт с нуля на языках html и css без которых не может работать ни один сайт.



ВАЖНО: В конце статьи будет приложен архив со всеми исходниками для скачивания на свой ПК. В самой статье будут скриншоты из самого процесса.

Верстка сайта – что это такое для чайников

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

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

С помощью, скаченной уже готовой CMS вы сделаете блог за короткий срок. Наиболее популярным является WordPress (далее WP). Удобство, вы оцените во время работы, но и здесь есть свои трудности. Например, чтобы ресурс, красиво смотрелся, потребуются некоторые навыки программирования. Дальше будет рассказано про проектирования каркаса и необходимые программы.

Основные виды

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

Табличная верстка прмиер

Блочная верстка сайта – самая распространённый вариант. Структура блога – это контейнеры, размещённые вблизи друг от друга. Добавляется тег div, отвечающий за блок в коде. У блочных ресурсов обычно статический вид. Это значит, что при любом разрешении экрана контейнеры находятся в неподвижном состоянии.

Просматривая портал через смартфоны, где разрешения экрана гораздо меньше, чем на мониторе появится горизонтальная прокрутка. Данную ситуацию исправит только адаптивная верстка.

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

Блочная схема

Этапы верстки сайта

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

  • Оценка – получив psd документ (формат фотошоп) первое, что сделайте, произведите оценку, а именно визуально приставить какие изображения вырезать и разместить. Где получить необходимый файл, перед тем как вы начали творить сайты для верстки psd? Можно сделать самому или скачать в интернете.
  • Нарезка изображения.  Делаем то, что задумали на первом этапе, подбираем тип изображения jpg, gif и png и сохраняем нарезки в папку (инструкция ниже), если надо некоторые картинки объединяем в спрайты.

Спрайты – это файл иллюстрации содержащий несколько фрагментов изображения. Активация спрайта происходит при взаимодействии на нём. Например, пользователь наводит мышку, и кнопка формата png меняет вид. Пример на рисунке.

Верстка сайта: что это такое простыми словами + исходники для уроков

  • Составление блочного каркаса. На этом этапе в html документе создаются пустые блоки для шапки, подвала, контента, левого и правого меню. После завершения, назовём структуру скелет, переходим к следующему пункту.
  • Заполнение контейнеров. Нарезанные картинки, текст переносим в созданные div и проверяем, что получилось.

Напишите конструкцию кода @media screen and (max-width: 800px) {} в стилях, чтобы указать разрешения для каких экранов должна быть адаптивная верстка.




Правильный вариант подключения добавить отдельный файл, например, style.css и прописать в тегах head путь:

<link rel=”stylesheet” href=”css/style.css” type=”text/css”>.

  1. Кроссбраузерность. Один из важнейших этапов, который нужно выполнить по завершению предыдущей работы. Устанавливаем несколько браузеров и тестируем свой шаблон. Если в браузерах отображается одно и тоже значит вы закончили работу, при другом раскладе переходим к следующему этапу.
  2. Отладка и исправление ошибок. Во время проверки, обратите внимание на закрытость тегов, из-за которых скрипт может отображаться неправильно. Проверьте css довольно, часто ошибка скрывается там. Сервис по проверки валидации https://validator.w3.org/, поможет найти любые ошибки, связанные с разметкой html.

Валидатор разметки html.

Ряд правил, чтобы добиться валидного кода.

  • Всегда прописывайте DOCTYPE
  • JavaScript и style храните отдельно от html документа, так будет легче исправить ошибки если вдруг что-то сбилось.
  • Следите за тем, чтобы все теги были закрыты.
  • Значение у атрибута id должно быть уникальным, без повторов, иначе код будет невалидным. К классам это не относится.

Как верстать самому: пошаговая инструкция новичку

В корневом каталоге WP перейдите в папку wp-content->themes и создайте там папку с названием вашего шаблона, например newtemplate (писать по английски). Все файлы при разработке уникальной темы будут размещены здесь.

Первые файлы, которые нужно создать это index.php, functions.php, styles.css и screenshot.png.

Верстка сайта: что это такое простыми словами + исходники для уроков

В index добавьте get_header(); get_sidebar(); get_footer();, потом перейдите и посмотрите, что получилось. На главной отобразится верхняя часть, нижняя и каталог с категориями. Так как стили не заданы верстка страницы сайта отображаться не будет. Контейнеры с содержимым по умолчанию извлекаются из сms.

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

header footer и sidebar, с расширением php. Перезапустите, если вы правильно назвали имена, то получите пустую страничку. Добавим в шапку следующий скрипт, чтобы увидеть результат.

Wp-head – запускает добавления js скриптов и стилей. Является обязательным.

is_front_page – делает проверку на показ главной страницы.

Bloginfo – выводит заданную в скобках информацию, например кодировку или название.

wp_nav_menu и apply_filters – создают меню. В apple_filters задают настройки, для отображения, например, текста в шапке.

Создание меню

Подвал отображает некоторый текст, ссылки и обратную связь. Как и в случае с шапкой, обязательно указывайте wp-footer, если хотите, чтобы был включён и подвал.

Верстка сайта: что это такое простыми словами + исходники для уроков

is_active_sidebar – делает проверку на использование данного виджета.

dynamic_sidebar – показывает первую активную панель. Укажите id виджета, чтобы отобразить панель. В файле functions.php запишем следующее.

Верстка сайта: что это такое простыми словами + исходники для уроков

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

Верстка сайта: что это такое простыми словами + исходники для уроков

  • Have_post и the_post – проверяет и возвращает найденные посты.

Большинство дополнительных функции понятны,

  • the_id и the_title выводят идентификатор и название.
  • post_class(); – заносит классы в тег для конкретного поста, потом можно сделать конструкцию в css, чтобы верстка сайта html и css выглядела привлекательно.
  • get_the_excerpt и the_excerpt – проверяет и выводит краткое описание поста.



Когда посетитель ссылается на несуществующую страницу, надо вывести сообщение об отсутствии страницы. Это лучше всего сделать при проверке have_post, добавив else и в фигурных скобках условия разместить контейнеры с выводом соответствующих надписей.

  • esc_html_e – показывает сообщения.

Блок, отвечающий за поиск, поможет читателю найти другую статью.

  • is_search – срабатывает при показе страницы результатов поиска
  • get_search_form – подключает форму поиска.

Чтобы можно было посмотреть статью с комментариями при разработке wordpress верстки надо создать файл single.php и добавить:

Верстка сайта: что это такое простыми словами + исходники для уроков

Блочная верстка страницы сайта single.php включает в себя контейнер с классом entry-author, отображает публикацию, имя автора, дату размещения, аватарку и возможность оставлять свои сообщения под постом.

  • comments_template() – показывает комментарии и форму добавления.

Для отображения добавим ещё один блок comments.php

Верстка сайта: что это такое простыми словами + исходники для уроков

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

Шаблон готов теперь, подгрузим стили, для этого скачайте заранее подготовленный файл css и поместите в папку с остальными файлами. Стили на движке, начинаются со специальными параметрами, на рисунке ниже.

Верстка сайта: что это такое простыми словами + исходники для уроков

В функции сделайте подключение как на скриншоте рис.

Верстка сайта: что это такое простыми словами + исходники для уроков

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

Образец нашего шаблона готов.

Образец верстки сайта
Готовый образец верстки сайта описанного в уроке.

Совет: если вы создали меню, но оно не отображается в sidebar, такое случается, и многие новички, не знают, как отобразить панель со своим меню. На самом деле нет ничего сложного. Перейдите в виджет, выберите “Меню навигации”, добавьте, чтобы отображался в разделе “Главный сайдбар” сделайте настройки напишите название и из раскрывающегося списка, укажите ваше созданное меню.

Верстка сайта: что это такое простыми словами + исходники для уроков

Подробное описание всех функций cms можно прочитать в документации.

Программы для верстки сайтов





Разрабатывая тему для WP, вам понадобиться специальные программы графические и текстовые.

Photoshop работает с картинками. На ней вы сможете создать макет и сохранить его в расширение psd.

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

Для нарезки шаблона на картинки используйте инструмент Slice, расположен он в панели, там же где и Сrop. Выделите все фрагменты как показано ниже и сохраните file-> save for web & devices.

Нарезка страницы в PSD для верстки
Нарезка шаблона psd.

Откроется окно, щелчком мыши выделите фрагменты и задайте им расширение: jpg, gif и png. Потом нажимаем save и всё картинки готовы для добавления в тему, желательно создать папку image и там хранить картинки.

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

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

Ниже предоставлены программы.

  • pspad – бесплатный редактор, подсвечивает синтаксис языка. Поддерживает несколько синтаксисов. Если вы редактируете html, вам достаточно выделить один тег, а второй автоматически найдётся. Очень удобно, когда вы работаете с огромным количеством кода, и есть необходимость найти закрывающийся теги.

Редактор для верстки сайта

  • Notepad++ – ещё один бесплатный редактор, альтернатива стандартному блокноту. Особенностью является автоматическая подстановка функции. При написании появляются всплывающие подсказки, список функций, который будет полезен разработчикам для быстрого набора кода.

Верстка сайта: что это такое простыми словами + исходники для уроков

  • Sublime Text: – условно бесплатный редактор поддерживает огромный список языков программирования. Некоторые функции могут быть добавлены клиентами.
  • PHPStorm – ide (интегрированная среда разработки). Поддерживает PHP, HTML, JavaScript. Визуальный отладчик, который позволяет поэтапно отследить процесс разработки.

Особенность ide – это smart refactoring. Разработчик может переименовать файл и изменения произойдут по всему проекту. Изменив глобальную переменную, так же произойдёт автозамена в документах, где встречается переменная. Это очень экономит время, если вы решите реализовать свой плагин. Но самое интересное это поддержка в ide wordpress. Это значит, что все встроенные хуки будут автоматически появляться, при написании шаблона. Пользуясь возможностями ide, вы ускорите процесс редактирования темы. К сожалению, ide платная, но 30 дневной период пробная версия.

Далее вы можете скачать готовый шаблон с исходниками урока:

Итак, подведём итоги. Теперь у вас есть представление, как создать сайт на WP, подключение меню навигации в виджетах для показа в sidebar, вы знаете как разрез картинку на фрагменты и сохранить их в папку. Кроме того, в этой статье перечислены. И помните, чтобы создать красивую графическую тему на движке, много практикуйтесь.

Рейтинг
( 3 оценки, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: