Итак, основные знания, чтобы создать простенький сайт на 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 в общую ширину блока, а большинство остальных браузеров прибавляют поля к ширине. Естественно картинки получаются разные.
Но, тем не менее, именно вёрстка блоками считается более прогрессивной, и новое програмное обеспечение разрабатывается с учётом этого. И последнее о чём хотелось бы сказать, так это о том, что на мой взгляд следует избегать фанатизма. Если в каком-то месте таблица лучше и проще, надо ставить таблицу и особо не заморачиваться.
В этой теме Вы можете задать вопрос о материале: Вёрстка сайта.