книги хакеры / журнал хакер / специальные выпуски / Специальный выпуск 19_Optimized
.pdf
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
||
|
|
C |
|
E |
|
|
|
|
|
C |
|
E |
|
|
|
||||||
|
X |
|
|
|
|
|
|
|
X |
|
|
|
|
|
|
||||||
|
- |
|
|
|
|
|
d |
|
|
- |
|
|
|
|
|
d |
|
||||
|
F |
|
|
|
|
|
|
|
i |
|
|
F |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
t |
|
|
|
|
|
|
|
|
|
t |
|
||
P |
D |
|
|
|
|
|
|
|
o |
P |
D |
|
|
|
|
|
|
|
o |
||
|
|
|
NOW! |
r |
|
|
|
NOW! |
r |
||||||||||||
|
|
|
|
BUY |
|
|
|
|
|
|
BUY |
|
|
||||||||
|
|
|
to |
|
|
|
|
|
|
|
|
|
to |
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
w |
|
|
|
|
|
|
|
|
m |
w |
|
|
|
|
|
|
|
|
m |
||
w Click |
|
|
|
|
|
|
o |
w Click |
|
|
|
|
|
|
o |
||||||
|
w. |
|
|
|
|
|
|
|
|
Креативw. |
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
.c |
|
|
|
|
|
|
|
.c |
|
|||||
|
p |
df |
|
|
|
|
e |
|
|
p |
df |
|
|
|
|
e |
|
||||
|
|
|
|
g |
|
|
|
|
|
|
|
g |
|
|
|
||||||
|
|
|
|
n |
|
|
|
|
|
|
|
|
n |
|
|
|
|
||||
|
|
|
-xcha |
|
|
|
|
|
|
|
|
-x cha |
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
но - обезьяньи перепады настроения уже не в цене :). Поре- |
ситуация, когда чел материт тебя, пытаясь разобраться, что |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
комендовать можно скромные эффекты вроде небольшого |
означает кнопка с изображением «фиги». |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
изменения цвета, яркости и контраста или простой анима- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ции. Использовать анимацию без нужды также не следует. |
Традиционно меню навигации |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
располагается либо сверху, либо |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Для реализации ролловер-меню |
слева окна браузера. Как бы ни |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
удобно использовать Macromedia |
хотелось тебе быть оригинальным |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Dreamweaver (самый рульный |
рубахой-парнем, лучшим решением будет сделать именно |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
едитор для веб-дизайна ;)). После |
так и не расстраивать прихожанина, заставляя его дергать |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
того, как все кнопки и во всех состояниях готовы, |
глаза туда-сюда в поисках менюшки и называть тебя |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
запускай его, выбирай подходящее место и вставляй меню |
некрасивыми терминами. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
командой Insert -> Interactive Images -> Navigation Bar. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Плюсиком и минусиком регулируй количество кнопок в |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
меню, не убирай галочку напротив слов Preload Images, |
Если используешь вертикальное |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
чтобы кнопки в «наведенном» состоянии загрузились |
текстовое меню, не выравнивай |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
прежде того, как чел наведет на них свой грязный |
его по центру. Предпочтительнее |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
крысиный курсор. Редактировать Navigation Bar можно в |
выравнивание по левому краю, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
любое время, вызвав его параметры таким образом: |
причем с наличием bullets (маркеры списка) для |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Modify -> Navigation Bar. |
обозначения каждого пункта. Если в разделе есть |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
подразделы, их заголовки выставляй меньшим размером и |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
делай больший отступ от начала строки, чтобы юзверь |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
В более продвинутых ресурсах для |
видел разницу по информативной ценности. Расстояния |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
навигации используется выпадаю- |
между объектами оставляй достаточными, не прижимай их |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
щее меню. Его легко сделать в |
друг к другу и вместе с тем не растягивай их в |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
графическом редакторе Fireworks. |
бесформенный баян. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Преимущество этого редактора состоит еще и в том, что |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
сами кнопки можно делать на месте, не отходя от кассы. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рисуешь картинку, делаешь хотспот (хотспот - это часть |
Не забывай вставить свое меню |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
картинки, которая реагирует на события мыши), выполня- |
на все страницы сайта и |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ешь команду Insert -> Pop-up menu и смело редактируешь |
правильно прописывать |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
настройки. После тяжкого труда остается только экспор- |
перекрестные ссылки, иначе |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
тировать его результат в ХТМЛ. Все получившееся хозяй- |
получится билет в один конец: посмотрели фотки твоей |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ство также может успешно перекочевать для дальнейшей |
собаки, а до фоток твоей подружки в стиле «ню» можно |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
модификации в тот же Дримвивер - эти проги замечатель- |
добраться только, протоптав пимпу «back». Это напрягает. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
но работают в паре. |
Мэн, который вывалился из поисковика прямо в раздел, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
минуя морду, вообще завязнет накрепко и до девушки не |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Если страница создается в WYSI- |
доберется. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
WYG-редакторе (это где все мыш- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
кой делается), то при больших объ- |
При большом размере сайта для |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
емах файла сильно страдает чисто- |
удобства пользователя можно |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
та кода (особенно этим страдает мастдайный Frontpage). |
создать карту навигации сайта, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Конечно, в устах многих это бoльшая проблема, чем это |
представляющую собой |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
есть на самом деле, но иногда все же лучше подчищать код. |
схематичное изображение всех страниц сайта, где они |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Лучше - вручную, но есть и специализированные помощни- |
логично расположены, - это довольно удобно, так как |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ки вроде программы Advanced HTML Optimizer. Эта про- |
юзверь в любое время может добраться до любой |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
грамма удаляет не только лишние теги, но и абзацы, и про- |
страницы одним кликом. Страницы при этом следует не |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
белы. Подобные изменения не будут видны для тех, кто |
нумеровать, а давать им понятные, соответствующие |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
смотрит на пагу через браузер, но сильно утяжеляют редак- |
содержанию названия. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
тирование страницы, так что лучше иметь запасной вариант |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
страницы на локальном диске. |
При проектировании сайта в |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
первую очередь думай не об |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Было бы красиво использовать в |
интерактивности и продвинутых |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
качестве элементов меню пикто- |
фишках, а о скорости загрузки |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
граммы, то есть маленькие кар- |
страницы на комп ее посетителя. Это примерно 10 секунд |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
тинки со смыслом. На первой |
или 30-35 килобайт. Если можешь не использовать |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
странице их можно подать с комментариями (допустим, |
графику - не используй ее. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
раздел «Скачать» - изображение флоппика и соответству- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ющая подпись внизу или сверху), а на последующих стра- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ницах оставить только картинки. Людям приятнее смот- |
Для ссылок на большие |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
реть на аккуратные пикчуры, чем читать текст. |
графические файлы (картинки) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
логично использовать thumbnails - |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
их уменьшенные варианты в |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Лучше использовать устоявшиеся |
низком разрешении либо их части, вырезая самое |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
значки (почта - «собачка», |
пикантное (или характерное) место для завлечения юзера. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
помощь - знак вопроса, поиск - |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
лупа), чтобы не получилась |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
097 |
|
|
|
|
||||
