Различные статьи на тему Web-дизайн
Главная [index.html] :: Услуги :: Договор :: Заказ Для веб-мастера Скрипты Книги Статьи Коллекция аватор Шрифты Ссылки каталогов 1ps.ru Мы уже привыкли, что создавая сайт, мы используем таблицы. Все остальные способы кажутся нам неудобными, неправильными и т.п. Сегодня я расскажу, как сделать полноценную web-страницу, не используя при этом ни одной таблицы. Главным понятием в таком сайтостроительстве будет являться понятие блока в CSS . Чтобы понять, что это такое надо обратиться к модели визуального форматирования. Вот строка из официального мануала W3C : “Согласно модели визуального форматирования каждый элемент дерева документа порождает произвольное количество (возможно, равное нулю) блоков в соответствии с моделью представления документа в виде блоков.” Возможно, сейчас звучит немного непонятно, но к концу статьи вы со всем разберётесь. В качестве блока мы представляем элемент
< /div > где идентификатор block_1 содержит все свойства блока. Главные свойства блока – это конечно его длина и высота ( width и height ), которые могут задаваться как в пикселях, так и в процентах. Дальше необходимо определиться со схемой позиционирования блока. Их три: нормальный поток, перемещаемый объект или абсолютное позиционирование. Описание первых двух можете посмотреть в официальном мануале по CSS, они нам сейчас ни к чему. Для создания web-страницы лучше всего использовать абсолютное позиционирование – так наши блоки никуда “не уедут” ни при каком разрешении монитора. Для задания такого позиционирования надо использовать свойство position, с заданным свойством absolute. Так же необходимо задать смещение блока с помощью свойств top, left, right и bottom . Смещение можно задавать как в пикселях, так и в процентах. Для того чтобы понять, как работает смещение, представим, что мы создаем html документ следующего содержания: < html>
Пример< /title> <style> # block_1 { width: 100px; height: 100px; position: absolute; top:0px; left:0px; background-color: #CCCCCC; } < /style> </head> <body> <div id= " block_1 ">Это наш блок< /div> </body> </html > Если вы создадите такой документ, то вы в верхнем левом углу увидите серый квадрат с надписью “Это наш блок”. Ну а теперь, как применить это к созданию интерфейса сайта. Для этого нам потребуется всего 4 блока: первый будет логотипом, второй – левым меню, третий – правым меню, а четвертый – центральным блоком. Используя свойства из предыдущего примера, создать такую страницу не составит труда. Вот пример: <html> <head> <title> Пример Наш логотип< /div>
Левый блок< /div>
Правый блок< /div>
Центр< /div>