Верстка дивами | Freefolders.ru

Верстка дивами и с чем ее едят


675c2131

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

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

Наш макет будет состоять из двух колонок, тоесть сайдбара и основного контента, а также «шапки» и «подвала». Подобные макеты используются на многих сайтах, поэтому если вы его освоите, а вы его непременно освоите, то уже сможете создавать свой первый сайт.

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

Для начала нам необходимо создать два файла. Один из них будет index.html, а второй style.css. В первом файле будет непосредственно сама разметка, а в файле style.css мы зададим стили для нашего макета, а также присвоим идентификаторы всем частям нашего будущего макета.

Итак, нас должно получиться примерно следующее содержание в файле index.html

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



Учимся создавать макет на div

Сайдбар
Контент