Добрый день, и так, в этом уроке приступим настраивать дизайн для сайта ucoz, тот наш дизайн который я установил пару уроков назад. Первым делом что я хотел-бы в нём поменять, это центральную колонку, то-есть ту где будет находится плеер флеш игры и сам текст к игре.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается
от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую.
Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Всего за 200р.
На данный момент центральная колонка моего шаблона равна 715 пикселям, а насколько мне известно, некоторые игры которые будут собираться на моём сайте, имеют ширину 800 и больше пикселей. Высота нам не интересна.
Правую-же колонку которую мы называем сайдбар я снесу, или может оставлю, мне этого ещё неизвестно.
В этом уроке я покажу вам несколько инструментов, которые помогают обычному веб мастеру настраивать свой дизайн, а так-же поговорим о некоторых CSS правилах, которые помогают настраивать элементы на сайте, такие как блоки, ссылки, картинки и т.д.
Исследуем элемент.
Первым делом нам нужно исследовать элемент который мы будем расширять. Для этого пройдём в раздел онлайн игры и нажмём на игру, которую мы добавили в прошлом уроке.
Как видите ниже на картинке, у нас центральный блок сейчас выглядит вот так
Его нужно расширить что-бы он заканчивался у нас не перед сайд баром, а за ним. Ну примерно вот так.
Для этого нам нужно узнать стиль который задаёт ширину нашему центральному блоку.
Нам поможет очень хороший инструмент, который позволяет исследовать такие блоки на сайте, и подскажет что за стиль отвечает за настройку блока, в моём случае это центральный блок.
Благо устанавливать этот инструмент на компьютер не надо, он уже давно был установлен в месте с вашим браузером, просто вы о нём не знали.
Так - вот, нажмите на клавиатуре кнопку F12 и волшебный инструмент раскроется. Так-же его можно открыть, если нажать на правую кнопку мыши и выбрать пункт исследовать элемент. Это подходит для браузеров FireFox и Google Chrome, другие браузеры не проверял.
После того как нажали F12, должно было появится дополнительное окно в низу вашего сайта. Выглядит это примерно вот так -
У данного инструмента есть маленькая кнопка, которая помогает выбрать элемент со страницы. Нажмите на эту кнопку и на ведите на тот элемент у которого хотите узнать код, и нажмите на этот элемент.
В инструменте произойдёт следующие, в HTML коде выделится тег, в моём случаи это 'div'. У блока див есть стилевое название 'post', а с право, там где указывает длинная стрелочка, мы видим стили css, которые задают моему тегу DIV (то-есть нашему центральному блоку) стили.
Название "post" связывает данный тег див со стилями, и всё что прописано между фигурных скобок {Здесь} и задаёт нашему блоку стили. На картинке ниже стили обведены в синею рамочку.
Но блок который я выбрал, он нам не подходит! Дело в том что, блок который я выбрал не задаёт ширину нашему центральному блоку, наш центральный блок находится выше в коде, и как бы обворачивает тот блок который я выбрал.
В HTML коде нужно пройти немного выше и найти тот блок который нужен и нажать на него мышкой, для того чтобы он активировался и в правом углу появились его стили.
Обычно такие блоки приходится искать в ручную, их можно определить только по стилям, и если вы разбираетесь в языке Css.
После того как его стили в правом углу подсветились, можно проверить выбрали мы правильный стиль или нет. Для этого достаточно отключить один из стилей и посмотреть как изменится блок.
В моём случае я просто отключил стиль который отвечает за ширину центрального блока и мой блок стал меньше. Всё теперь для меня стало ясно что я нашёл именно тот блок который мне был нужен, осталось его настроить под себя.
Пропишем новые стили для блока.
Всё нужный блок обнаружен, теперь нужно определить какое название у стиля для этого блока, и найти где прописан этот стиль.
Это тоже делается совсем не сложно, название стиля мы уже знаем как найти, в моём случае это #content {Стили}
Теперь нужно отыскать где этот стиль прописан на нашем сайте. Это тоже делается очень просто, видите на картинке ниже, напротив стилей есть такая строчка my.css:164.
Так вот, это говорит что данный стиль находится в файле my.css на строчке 164.
Как отыскать этот стиль?
Для этого зайдите в панель управления, и нажмите на кнопку дизайн и кнопку управление дизайном (CSS)
Откроется страница со стилями.
На ней нужно отыскать 164 строчку, на которой будет название нашего стиля. Мой стиль как вы помните называется #content.
Ниже я создал код который нужно вставить за место старого.
Разберём немного код.
width:100%;
}
Как видите код не сложный, мне нужно было удалить старый код float (Который отвечал за обтекание) и изменить код width который задаёт ширину в css.
В нём я изменил всего пиксели на проценты, поставил 100%. Теперь мой блок растягивается на всю ширину родительского окна, родительское окно это центральный блок всего сайта.
Вот что получилось.
Вот пожалуй и всё, в этом уроке я добился что-бы блок растягивался на всю ширину сайта. В следующем уроке уберём сайдбар (БОКОВУЮ КОЛОНКУ) которая в данный момент находится внизу сайта.
В следующем уроке поговорим почему так произошло.
