Видеоуроки: анонсы всех уроков.

Видеоуроки

Создание сайта из двух колонок посредством div-блоков (контейнерная, блочная верстка)

Видеоурок посвящен созданию сайта по стандартам XHTML+CSS в программе Macromedia Dreamweaver (посмотреть страницу — данная страница была создана на основе реально существующего сайта с небольшими изменениями).

Хочу подчеркнуть, что страница будет создана без таблиц. Я бы не хотела на страницах своего сайта убеждать вас в том, как глупо верстать таблицами и как здорово, современно верстать дивами (блоками). В сети сегодня вы найдете множество курсов, уроков по верстке таблицами бесплатно. Их обилие увеличивает количество начинающих веб-мастеров, которые не знают о другом способе верстки.

Комментарий к уроку.

Добавляем блок с меню, flash-баннер, контекстную рекламу Google Adsense

На уроке будет немного усложнена страница, созданию которой был посвящен предыдущий урок. Кроме блоков для flash-баннера и меню (из трех ссылок: "Домой", "Об авторе", "Реклама") я добавила блок для контекстной рекламы Google Adsense.

На сегодняшний день мы можем менять внешнее оформление рекламных блоков Google Adsense прямо на аккаунте. Со сменой дизайна нам не нужно менять код объявлений на каждой HTML-страничке. Мы можем сделать так, чтобы реклама стала органичной частью сайта. На уроке я показываю пример оформления текстового блока на аккаунте Google Adsense.

Комментарий к уроку.

Редизайн сайта на основе старой HTML-разметки

В чем заключается главное преимущество CSS-верстки? Более всего я ценю возможность постоянно работать над внешним оформлением сайта без утомительного переделывания HTML-кода.

Так часто бывает: содержание сайта актуальное и интересное, а его оформление оставляет желать лучшего. Если HTML-разметка сайта свободна от стилей и внешнее оформление задано с помощью CSS, соответственно мы можем менять дизайн сайта, изменяя правила в css-файле. Это творческая работа, которая развивает важные и нужные навыки в деле создания сайтов. Изменив на сервере css-файл, добавив новую графику, ваш сайт автоматически получает новое оформление.

На уроке будет переоформлена страница. Вся работа будет вестись только с CSS. В конечном итоге страница будет приведена к виду — смотрите скриншот.

Комменарий к уроку.

Переходим от фиксированного (жесткого) дизайна к «резиновому»

На уроке объясняются особенности создания резиновых сайтов на основе фиксированного сайта (материал первого урока).

Особенность так называемых «резиновых» сайтов заключается в том, что ширина их блоков устанавливается в процентном соотношении от размера окна браузера посетителя. Если окно браузера открыто на 100%, то его размеры зависят от размера монитора пользователя и его разрешения.

При этом нужно стремиться, чтобы и владельцы маленьких мониторов с разрешением 800 х 600, и обладатели больших мониторов с разрешением 1600 х 1200 остались довольны внешним видом сайта. Но самое главное — в обоих случаях текст на сайте должен быть удобен для чтения.

Комментарий к уроку.

Создание вертикального и горизонтального меню на основе списка

Использовав один и тот же код обычного списка, можно представить меню либо горизонтальным, либо вертикальным. Таким образом, этот способ позволяет кардинально менять внешнее оформление меню без правки его HTML-кода.

Комментарий к уроку.

Создание горизонтального меню с помощью графических кнопок на CSS

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

Комментарий к уроку.

Оформление информационных блоков на основе ссылок

На уроке будет показано, как на основе одной ссылки можно создать наглядный информационный блок. Наглядный пример (скриншот, 59, 4 КБ) — здесь было создано 6 блоков на основе 6 ссылок.

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

Комментарий к уроку.

Создание тянущегося (резинового) блока с закругленными углами.

На днях я нашла подборку ссылок на статьи, посвященные созданию блоков с закругленными углами. Любознательные натуры, увлеченые технологией CSS , найдут здесь для себя много интересного. Так же надо заметить, что многие способы требуют применения множества вложенных друг в друга div-ных блоков с различными классами.

Таким образом, желая придать приятные закругления блокам на наших страницах, мы будем вынуждены добавлять в HTML-структуру десятки элементов, которые делают ее такой непонятной, непрозрачной для нас. Поэтому я предлагаю вам познакомиться со способом, который, как мне кажется, прост для понимания, не требует каких-то невероятных хитростей и премудростей в CSS, а главное — применяется только один div-ный блок.

Комментарий к уроку.

Создание блочного сайта на примере табличного шаблона

Урок может быть интересен тем, кто знаком с табличной версткой. Табличные сайты до сих пор весьма распространены в рунете. Кто-то делает это по незнанию, кто-то — по привычке. Освоив блочную верстку, вы поймете, насколько проще и рациональнее использовать блоки по сравнению с таблицами.

Комментарий к уроку.

Статьи
Блочная верстка сайтов
Контент для сайта