Статьи
iT заметки
HTML&CSS
Вёрстка сайта
07.10.2014 в 18:16:16 |
|
Просмотров: 1241 |
0 ответов
Итак, основные знания, чтобы создать простенький сайт на HTML у вас имеются. Если нет, начинайте с первой страницы. Для современного интернета, html сайт в чистом виде, это вчерашний день. Современные профессиональные сайты - это динамичные сайты, способные показать одну и ту же страницу по разному, для разных пользователей, да и вообще на многое способные. Они создаются с использованием языков программирования и баз данных. Но, основа любого сайта это HTML, и от этого пока никуда не деться. Поэтому информация, которую вы уже изучили (надеюсь) будет актуальна и востребована, если вы решите продолжить изучение сайтостроения.
В HTML вёрстке в основном используется два метода:
- Табличная вёрстка;
- Блочная вёрстка;
- Проще и быстрее в разработке;
- Позволяет легко создать многоколоночный макет;
- При изменении расширения экрана все элементы остаются на своих местах;
- Представляет широкие дизайнерские возможности;
- В разных браузерах отображается практически одинаково.
- Более длительная загрузка страницы;
- Большой объём кода, в котором порой сложно разобраться;
- Затруднения при индексации страницы поисковиками;
- Нет разделения между информационным текстом и кодом оформления;
Конечно, ничего не мешает веб-мастеру использовать смешанную вёрстку, задействовав оба метода.
Табличная вёрстка веб сайтов
Поскольку мы с вами научились работать с таблицами, я думаю, вы уже догадались каким образом можно создать страницу с их использованием. Создаётся главная таблица на всю страницу, с необходимым количеством строк. Строки разбиваются на столбцы, так как замыслил веб-мастер. При необходимости используются подтаблицы. Можно создать несколько отдельных таблиц, в общем включайте свою фантазию. Вот здесь можно посмотреть готовый шаблон и его html код.
Говоря о преимуществах табличной вёрстки сайта обычно указывают следующие моменты:
В числе недостатков указывается:
Блочная вёрстка веб сайтов
На ней остановимся подробнее. Итак, возьмем такой код:
Тестовый блок
увидим следующее: Тестовый блок
Ничего кроме самого обычного текста.
Теперь давайте в файле стилей my.css создадим идентификатор test и зададим ему некоторые свойства.
#test {
border: 1px solid #000000; граница: толщина, тип, цвет;
background:#ffffff; цвет фона;
color:#ff0000; цвет текста;
width:100px; ширина блока;
height:80px; высота блока;
}
А в первоначальную запись кода внесём изменения следующим образом:
Тестовый блок
И вот, что получим: Тестовый блок
Возможности для редактирования блоков очень богатые, как вы наверное догадываетесь. Можно задавать фоновый рисунок, поля, отступы от других элементов, различные свойства текста, прозрачность фона и т.д. Совершенно ни к чему загромождать эту страницу подробными спецификациями. Всё это можно найти в справочниках, а их в сети хватает. Вот здесь можно посмотреть готовый шаблон и его html код. В целом вёрстка слоями куда более сложное занятие. По умолчанию блоки стараются расположиться один над другим, и порой довольно трудно заставить их встать и оставаться там, где хочет разработчик. Разные браузеры отображают страницы свёрстанные блоками, по разному. Например Internet explorer включает поля padding в общую ширину блока, а большинство остальных браузеров прибавляют поля к ширине. Естественно картинки получаются разные. Но, тем не менее, именно вёрстка блоками считается более прогрессивной, и новое программное обеспечение разрабатывается с учётом этого. И последнее о чём хотелось бы сказать, так это о том, что на мой взгляд следует избегать фанатизма. Если в каком-то месте таблица лучше и проще, надо ставить таблицу и особо не заморачиваться.
обсудить на форуме |
1241 визит ↳ 0 ответов | Ваше мнение о материале | Голосовало: 1 |
