воскресенье, 22 ноября 2009 г.

Редактирование дизайна блога: изменение ширины

Когда создают дизайн сайта, общую картинку режут на части: шапка, блок меню, центральная часть и т.п. Далее это представляют на языке HTML. Это можно сделать двумя способами:
1. табличная верстка. Она представляет собой вложенные друг в друга таблицы. Этот блог выглядел бы примерно так: основная таблица: три строки. Верхняя и нижняя - это шапка и подвал. В центральную строку вставляется еще одна таблица с одной строкой и двумя столбцами: текст и меню. Это нужно чтобы была возможность точно задавать размеры (высота, ширина), фоны (картинки или цвет) и т.д.
2. верстка на Div (блочная). Блок - прямоугольная область, у которой задаются координаты на экране, размеры и т.д. Также блоки по аналогии с таблицами могут быть вложены друг в друга.
Если верстка выполняется на Div, то информация о свойствах блока хранится не в параметрах блока (как в таблице), а в отдельном месте. Это называется CSS (стили).

Если вы работаете под браузером Firefox для редактирования дизайна удобно применять плагин Firebug. Все изменения, которые вы будете вносить в этом плагине не будут происходить по-настоящему в вашем блоге, а только в КЕШ-памяти. Вы сможете определить в каком месте надо исправить, попробовать это сделать и посмотреть, что получится. Если все как вам надо, запоминайте, что исправили и переходите к настоящему редактированию блога.
Итак, в левом столбике будет писаться HTML, в правом CSS (стили). Наводя в левом столбике мышкой на какой-нибудь тег, на самом блоге будет выделен объект, за который этот тег отвечает.  Далее смотрим справа на стиль и исправляем нужный параметр, например ширину как на иллюстрации внизу.
Если вы хотите, чтобы ширина информативной части блога была на всю ширину экрана, удалите параметр width (в данном случае сначала удалите значение 692 px, затем весь параметр удалится сам) и посмотрите, что получится.
Пока мы только посмотрели возможность исправлений в КЕШ-памяти. Чтобы изменить дизайн блога по-настоящему, закройте Firebug, зайдите в Дизайн-Изменить HTML и найдите то место, которое только что тренировались исправлять и внесите те же изменения.
То есть вам сейчас нужно удалить строку, выделенную на картинке.
Сохраните.
Если внимательно посмотреть на получившийся дизайн, то видно, что блок текста сообщений остался узким.

Изменим ширину выводимого текста сообщений.

Увеличим значение width с 400 до 700px. Запомним, что вносить изменения надо в раздел #main.
Исправим в коде HTML нашего блога.
Посмотреть, как изменился дизайн можно по адресу http://e-t-11b-548-09.blogspot.com/
или на картинке


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

Комментариев нет:

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

Related Posts with Thumbnails
 
Наверх страницы