• Страница 1 из 1
  • 1
Обсуждение «Вёрстка сайта»
avatar
Админ | Оффлайн
Итак, основные знания, чтобы создать простенький сайт на HTML у вас имеються. Если нет, начинайте с первой страницы. Для современного интернета, html сайт в чистом виде, это вчерашний день. Современные профессиональные сайты - это динамичные сайты, способные показать одну и ту же страницу по разному, для разных пользователей, да и вообще на многое способные. Они создаются с использованием языков програмирования и баз данных. Но, основа любого сайта это HTML, и от этого пока никуда не деться. Поэтому информация, которую вы уже изучили (надеюсь) будет актуальна и востребована, если вы решите продолжить изучение сайтостроения.

В HTML вёрстке в основном используется два метода:

  • Табличная вёрстка;
  • Блочная вёрстка;
Конечно, ничего не мешает веб-мастеру использовать смешанную вёрстку, задействовав оба метода.

Табличная вёрстка веб сайтов

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

Говоря о преимуществах табличной вёрстки сайта обычно указывают следующие моменты:

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

В числе недостатков указывается:

  • Более длительная загрузка страницы;
  • Большой объём кода, в котором порой сложно разобраться;
  • Затруднения при индексации страницы поисковиками;
  • Нет разделения между информационным текстом и кодом оформления;

Блочная вёрстка веб сайтов

На ней остановимся подробнее. Итак, возьмем такой код: 
<div >Тестовый блок</div >увидим следующее:

Тестовый блок

Ничего кроме самого обычного текста. 
Теперь давайте в файле стилей my.css создадим идентификатор test и зададим ему некоторые свойства.
#test {
     border: 1px solid #000000; граница: толщина, тип, цвет;
     background:#ffffff;        цвет фона;
     color:#ff0000;                    цвет текста;
     width:100px;                       ширина блока;
     height:80px;                        высота блока;
      }

А в первоначальную запись кода внесём изменения следующим образом:
<div id="test">Тестовый блок</div > И вот, что получим:
Тестовый блок

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

В целом вёрстка слоями куда более сложное занятие. По умолчанию блоки стараются расположиться один над другим, и порой довольно трудно заставить их встать и оставаться там, где хочет разработчик. Разные браузеры отображают страницы свёрстанные блоками, по разному. Например Internet explorer включает поля padding в общую ширину блока, а большинство остальных браузеров прибавляют поля к ширине. Естественно картинки получаются разные.

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

В этой теме Вы можете задать вопрос о материале: Вёрстка сайта.
[Сообщение # 1]  
  • Страница 1 из 1
  • 1
Поиск:

close