Урок 15: Слои в css

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

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.

За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.

Например, можно сделать из карт знаменитую комбинацию Royal Flash.

Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:

.desatka_buba { position: absolute; left: 200px; top: 200px; z-index: 1; } .valet_buba { position: absolute; left: 215px; top: 215px; z-index: 2; } .dama_buba { position: absolute; left: 230px; top: 230px; z-index: 3; } .korol_buba { position: absolute; left: 245px; top: 245px; z-index: 4; } .tuz_bubna { position: absolute; left: 260px; top: 260px; z-index: 5; }

Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа: <img src="10buba.gif" class="10_buba"> ну и так далее, вы поняли...

• Смотреть пример

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

В следующем уроке, я закончу учебник, и дам некоторые советы, по дальнейшему обучению...

Урок 16: Завершение...

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

Теперь, когда Вы уже ознакомлены с языком разметки html и технологией стилей CSS , как следующий шаг, я бы посоветовал Вам разобраться с программой Adobe Dreamweaver. Это просто незаменимый помощник, я не знаю, что бы я без него делал. Очень доходчиво и понятно излагаются основные принципы работы, в видеоучебнике по Дримвиверу, который можно скачать у меня на сайте бесплатно.

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

Существуют каркасы(они же макеты) построенные на таблицах(табличные) и на дивах(блочные) . Конечно табличная верстка уже немного устарела, но все же имеет право на существование.

 В этом видеоуроке мы разберемся по какому принципу строятся табличные макеты страницы и рассмотрим наиболее популярные из них: двухколонный фиксированный макет, и двухколонный резиновый макет(который растягивается на всю ширину экрана).

У табличной верстки сайтов, есть как свои плюсы, так и свои минусы. Об этом очень много написано в сети. Одни хвалят блочную верстку и критикуют табличную, другие - наоборот, предпочитают табличную и избегают блочной. Я например, использую в некоторых случаях блочную, а в некоторых табличную.

Главный плюс табличной верстки - простота реализации и кроссбраузерность(одинаково выглядят во всех браузерах).

Почему урок называется "универсальный табличный макет"? да потому, что буквально за несколько секунд его можно превратить из фиксированного в резиновый, и наоборот :)

Скачав данный видеоурок, Вы получите сам файл шаблона и файл стилей в придачу к видеоматериалам.

Таким образом, изучив данный материал, Вы научитесь создавать самые популярные табличные макеты страницы, и причем по всем правилам. А макет - это уже практически готовый сайт. Вам останется лишь наполнить соответствующие блоки информацией :)

Я сам когда-то разбирался с этими вещами, и чесно говоря, допускал много ошибок, связанных с правильным применением стилей css . У Вас есть шанс не учиться на своих ошибках, а делать сразу все правильно!

ще называют, div верстка. Большинство современных сайтов строятся именно по этой технологии. Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег DIV . С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.

В данном уроке я попытаюсь доходчиво объяснить, что такое блочная верстка и по какому принципу она строится. Материал расчитан на людей, впервые столкнувшихся с понятием div верстка, поэтому спецов прошу не судить строго :)

Урок довольно продолжительный, порядка 30 минут. Поначалу я хотел оформить весь этот материал в текстовом варианте, но потом прикинул сколько места это займет и подумал, что лучше будет записать видео :)

Мы рассмотрим построение различных вариаций 2-х наиболее популярных шаблонов, привиденных на рисунке ниже.

Вот примерный план урока:

1. Что такое блочная верстка, и каковы ее базовые принципы.

2. Верстаем двухколонный макет фиксированной ширины (меню слева)

3. Верстаем двухколонный макет фиксированной ширины (меню справа)

4. Верстаем трехколонный макет фиксированной ширины

5. Разбираем различия фиксированных макетов и резиновых(которые тянутся на весь экран) и соответственно верстаем все перечисленные макеты, только в резиновом варианте..

6. Подводим итог о блочной верстке сайтов..

Я в свое время долго искал материалы по данной теме. Конечно, готовых исполнений шаблонов можно найти достаточно много, но понять сам смысл построения, вот тут-то и начинается самое интересное.. Надеюсь мой урок поможет Вам разобраться со всеми тонкостями этого дела :)