Правильная верстка сайта

Fima Korolev

Правильная верстка сайта

 

Основные понятия верстки сайта

 

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

Определение верстки сайта

Правильное создание сайта – это трудоемкий, многоступенчатый процесс. Одной из неотъемлемых частей разработки сайта и является верстка сайта, которая представляет последовательность действий при создании веб-страницы по предварительно созданному дизайну. Сам процесс верстки включает в себя формирование кода веб-страниц с помощью текстового либо HTML редактора, а после, оформление полученного кода при помощи CSS (Cascading Style Sheets — каскадные таблицы стилей). На самом деле, это очень сложный процесс. При отсутствии специальных навыков, не нужно самому заниматься версткой сайта, ни к чему хорошему это не приведет. В природе существует масса верстальщиков – специально обученных людей, у которых можно заказать услуги по верстке сайта. Качественная верстка сайтов предусматривает в себе массу особенностей правил верстки и других параметров, которые применяются при отображении страниц сайтов в разных браузерах.
Конечно же, если очень хочется, то можно сверстать сайт и не имея особых навыков HTML используя WYSIWYG редакторы (What You See Is What You Get, «что видишь, то и получишь»), которые преобразуют видимый дизайн вашего сайта в HTML код. Вот некоторые из таких редакторов:

  • Adobe GoLive
  • Adobe (Macromedia) Dreamweaver
  • Namo Webeditor
  • Microsoft FrontPage
  • Microsoft SharePoint Designer

Основные правила верстки сайта

Верстка сайтов с учетом разрешения дисплеев пользователей

При создании сайта, чтобы не испортить первоначальный дизайн, надо обязательно обращать внимание на то, что у пользователей интернета дисплеи с разным разрешением. Исходя из этого применяется два способа дизайн-макета сайта: “резиновый сайт” и сайт с заданной шириной. При создании сайтов с определенной шириной, берутся данные статистики использования мониторов, согласно которых, большинство юзеров используют дисплеи с разрешением 1024х768. Соответственно, чтобы избежать горизонтального скрола (полосы прокрутки) ширину сайта выставляют от 800 до 990 пикселей. Естественно, при таком раскладе появляется масса неиспользованного места на сайте, что является основным недостатком верстки сайта с определенной шириной страницы. При создании резиновых сайтов, в процессе их верстки, за единицу измерения берутся проценты, что делает верстку резиновых сайтов более предпочтительную.

Рекомендую к прочтению:  АГС-17 и АГС-30 – фильтры Яндекса: причины, как вывести сайт

Кроссбраузерная верстка

На данный момент времени существует множество различных браузеров (Google Chrome, Mozilla Firefox, Opera, Internet Explorer и др.), которыми пользуются люди для серфинга по сети Интернет.
Любой из этих браузеров имеет кучу версий, с множеством отличительных особенностей, что делает различным отображение одной и той же страницы. Существуют правила отображения страниц , но единого стандарта пока нет. Соответственно, пока есть разногласия у создателей браузеров, будет существовать кроссбраузерная верстка.

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

VN:F [1.9.22_1171]
Рейтинг статьи:
Rating: 5.3/7 (7 votes cast)
Правильная верстка сайта, 5.3 out of 7 based on 7 ratings

5 комментариев »

  1. Дмитрий Штонденко:

    Спасибо за позитивную статью. А можете по рекомендовать как платные и бесплатные обучающие курсы по верстке сайтов? Хочу освоить этот можно сказать не простой навык работы на фрилансе и удаленной работе.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Юлия:

    А если уже готовая тема со своими кодами и тд, по типу вордпресса, тогд как? спасибо за отчет

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Добрый день,Юлия! Если у вас готовая темя, то вам повезло и самой ничего не надо делать, т.к. 99% последних тем поддерживают все браузеры и мобильные тоже…
      P.S. Пожалуйста, а за какой отчет?

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  3. Алексей:

    Да, но при резиновом сайте и размерах в процентах некоторые блоки получаются нецелыми числами (1000/3) что х… поймаешь нужный размер

    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
    • Алексей, а что вам мешает сделать 2 крайних блока по 33%, а средний 34%? На глаз этот процент никто не заметит.

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">