Отправляет email-рассылки с помощью сервиса Sendsay

CSS и DHTML для сайтостроительства

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Создание сайта и его продвижение" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Автор
Наталия

Статистика

779 подписчиков
-1 за неделю
←   Все выпуски   →

Выпуск 5


Выпуск 5 - Анимация по клику мышкой. Структура страницы

Здравствуйте дорогие читатели!

Сегодня мы поговорим о более сложном анимировании и наконец приступим к сайтостроительству.

Анимация по клику мышкой

Рассмотрим скрипт

function init() {
 if (ns4) block = document.blockDiv
 if (ie4) block = blockDiv.style
 block.xpos = parseInt(block.left)
 block.active = false
}

function slide() {
 if (block.active) {
  block.xpos += 5
  block.left = block.xpos
  setTimeout("slide()",30)
 }
}

... и HTML код, его вызывющий

<BODY BGCOLOR="#FFFFFF" onLoad="init()">

Click and hold the link below to move the block
<BR><A HREF="javascript:void(null)" 
                   onMouseDown="block.active=true; slide(); return false;"
                   onMouseUp="block.active=false" 
                   onMouseOut="block.active=false">move</A>

<DIV ID="blockDiv" style=""xposition:absolute;" left:50px; top:100px; width:30px; height:30px; 
                             clip:rect(0px 30px 30px 0px); layer-background-color:red; 
                             background-color:red;">
</DIV>

В результату мы увидим картинку вроде этого:

Click and hold the link below to move the block
move

Здесь при нажатии на ссылку с надписью move красный квадрат будет двигаться до тех пор, пока нажата левая клавиша мышки.

Пример функционирования можно посмотреть здесь.

Более сложные примеры движения можно посмотреть здесь. Вкратце, маленькая картинка в виде красного шарика может двигаться по некой траектории, на первый взгляд, очень фантазийной. То есть, используя средства CSS и JavaScript, мы можем отказаться от flash! Таким образом, посетители нашего сайта могут не беспокоиться о том, что что-то вдруг захочет проинсталлироваться на их компьютер прежде, чем загрузится какая-то Flesh анимация, чаще всего бесполезная и тяжеловесная.

А раз уж мы заговорили о сайте, то перейдём к сайтостроительству

Шаблонный сайт

Речь идёт, конечно же, о всем известном CSS Zen Garden с его практически универсальной разметкой, которая может быть уникальным образом настроена при помощи CSS к совершенно неповторимому виду, что и продемонстрировано на самом сайте.

HTML-размётка сайта находится по адресу http://www.csszengarden.com/zengarden-sample.html. Просто перейдите по этому линку, а затем кликните правой клавишей мышки и из выпадающего меню выберите "View source", чтоб посмотреть исходный код. Что вы увидите в открывшемся тектовом файле? Во-первых множество всевозможных тэгов div. Во-вторых, каждый из них имеет свой идентификатор, по имени которого не трудно догадаться о содержимом блока, окружаемого этим div'ом. Но, самое главное, что стиль каждого идентифицируемого div'а и других стандартных HTML-тэгов задаётся стилем, который приаттачивается, как внешний файл строчками:

<style type="text/css" media="all">
  @import "sample.css";
 </style>

Но посмотрим по порядку.

Внешний div с id=container задаёт смысловую часть всего сайта. Например, это письмо тоже окружено "голубой каёмочкой", ограничивающей смысловую часть выпуска. Отступы и поля - элемент дизайна. Многие сайты делают их достаточно широкими, сужая смысловую часть до стандартной ширины книжной страницы с заданным количеством знаков в строчке. Что это даёт? Просмотривая такой "стандартизированный по ширине" текст, мы просто облегчаем работу глазам, которым не нужно вращаться от левого упора до правого упора.

Далее идёт div c id=intro, который предназначен для "шапки страницы", которая разделяется на три div'a:

  1. Первый c id=pageHeader, то есть заглавие сайта, который может быть оформлен рисунком или просто текстом. В последнем случае мы можем поместить заглавие нашего сайта в тэг <h1>. Например, <h1>Домашняя страница васи Пупкина</h1>. Далее можно разместить подзаголовок в тэг <h2>. Например, <h2>Вася Пупкин - суперэксперт по сайтостроительству!</h2>
  2. Следующий div c id=quickSammary содержит краткую информацию о сайте. Например, <p>Сайт содержит обучающие уроки по сайтостроительству</p>. Заметьте, что текстовые поля помещены в теги <p>, то есть по абзацам, каждый из которых может имееть свой собственный идентификатор, что позволяет моделировать стиль каждого отдельного абзаца.
  3. Наконец, div c id=preamble слегка "раскрывает тему", затронутую в quickSummary

Шапка сайта даёт нам интуитивное представление о содержимом сайта. Само же содержимое идёт в div'e с id=supportingText. В шаблоне CSSZenGarden этот div подразделяется на ряд субdiv'ов с идентификаторами: explanation, participation, benefits, requirements, footer. Все эти блоки, за исключением последнего, сайт-ориентированные, то есть объясняют развёрнуто значение сайта, приглашают дизайнеров поучаствовать в разработке новых дизайнов для этого же сайта (он ведь для этого и предназначен: показать мощь CSS), рассказывают о плюсах этого участия и, наконец, обозначают правила для участия. Последний блок содержит небольшие ссылочки на W3C стандарты: xhtml, css и прочие, которые пригодятся разработчикам дизайна.

Наконец, пространство для всеми любимых нами менюшек для навигации сайта расположены в div'e c id=linkList. Создание меню - это отдельная большая тема. Пока что мы лишь ограничимся вертикальными меню, созданными при помощи списков, то есть тагов <ul> и <li>. Каждый отдельный пункт меню может иметь свой стиль и свои подменю. Вот как это сделано в CSSZenGarden: меню различных дизайнов окружено div'ом с id=lselect, внутри которого список (таги <ul> и <li>) ссылок на дизайны. По такому же принципу построен div с id=archives, внутри которого список ссылок на архив дизайнов, не уместившихся в предыдущем меню, которое, очевидно, содержит самые "свежие" дизайны. Наконец меню, ограниченное div'ом с id=resources содержит список ссылок на различные дополнительные ресурсы, как-то FAQ, Submit Design и т.д.

Понятно, что дизайн можно расширить дополнительными div'ами, например, рекламой от google, рекламой вашей собственной продукции и т.д.

Наложим шаблон CSSZenGarden на subscribe.ru. Смысловая часть занимает всю ширину страницы. Шапка находится в левом верхнем углу: логотип, информация о количестве подписчиков и рассылок, поиск (три элемента!). Меню смоделировано так, что находится, как навигационный панели сверху и снизу: первая - для навигации по сайту, вторая - для навигации по информации о сайте. Содержимое делится на Каталог, Сервисы, Рейтинги и Новости. Обратите внимание на разные стили, но однотипное оформление блоков: заглавие в зелёном овале и прямоугольник с закруглёнными краями для обозначения тематического блока. Наконец, всевозможные баннеры вверху и слева могли бы быть добавлены вспомогательными div'ами.

Наконец, оговорюсь, что сайт subscribe.ru размётан таблицами, а не div'ами. Однако, это устаревшая и неудобная практика: сайту трудно придать новый оригинальный вид, поскольку таблицы не обладают такой гибкостью, как div. В таблицах легко запутаться среди колонок и строк и, следовательно, содержащие их страницы трудно редактировать. Наконец, вложения типа таблица в таблице, что очень часто встречается для придания видимой гибкости сайту, может быть неправильно интерпретировано некоторыми браузерами.

В заключении я хочу добавить: прежде чем создавать супер-пупер сайт, продумайте его разметку в терминах шапка, содержимое, меню (навигация). Как вы назовёте свой сайт? Как в двух строках расскажете посетителю, о чем весь этот ворох страничек? Чем наполните содержимое? На какие тематические блоки разобъёте вашу информацию? Как вы построите навигацию (семантически, а не графически!)? Предлагаю пока что подумать над этими вопросами.

А в следующий раз мы посмотрим, как можно варьировать дизайн основной разметки при помощи CSS. Мы также продолжим знакомство с Dynamic Duo, в частности, рассмотрим перехват нажатий клавиш. Наконец, я начну вас знакомить с самыми популярными дизайнерскими ресурсами по созданию сайтов: от простого к сложному, от теоретической части к практической.

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

С уважением,
Наталия Македа
natalia.macheda at gmail.com
В избранное