MyBooks.club
Все категории

Дмитрий Кирсанов - Веб-дизайн

На сайте mybooks.club вы можете бесплатно читать книги онлайн без регистрации, включая Дмитрий Кирсанов - Веб-дизайн. Жанр: Интернет издательство -,. Доступна полная версия книги с кратким содержанием для предварительного ознакомления, аннотацией (предисловием), рецензиями от других читателей и их экспертным мнением.
Кроме того, на сайте mybooks.club вы найдете множество новинок, которые стоит прочитать.

Название:
Веб-дизайн
Издательство:
-
ISBN:
-
Год:
-
Дата добавления:
17 сентябрь 2019
Количество просмотров:
291
Читать онлайн
Дмитрий Кирсанов - Веб-дизайн

Дмитрий Кирсанов - Веб-дизайн краткое содержание

Дмитрий Кирсанов - Веб-дизайн - описание и краткое содержание, автор Дмитрий Кирсанов, читайте бесплатно онлайн на сайте электронной библиотеки mybooks.club
Книга автора бестселлера `Факс-модем: от покупки и подключения до выхода в Интернет` — Дмитрия Кирсанова — первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом — все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, — и, конечно же, всем творческим и любознательным людям.

Веб-дизайн читать онлайн бесплатно

Веб-дизайн - читать книгу онлайн бесплатно, автор Дмитрий Кирсанов

Дурная наследственность. Как уже упоминалось, главным достоинством таблиц является возможность управлять положением элементов с точностью до пиксела. Недостатки же этой технологии более разнообразны. Прежде всего, хотя содержимое ячеек можно позиционировать относительно друг друга и относительно точки привязки всей таблицы, положение этой последней относительно границ окна броузера, к сожалению, непостоянно и может «плавать» с заметной амплитудой в зависимости от текущего размера окна, базового кегля текста, величины полей (стр. 194) и проч.

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

Конечно, чаще всего с помощью таблиц моделируется именно абсолютное позиционирование относительно границ окна: чтобы свести на нет влияние нетабличного материала, в таблицу заключается вся страница, так что мириться приходится только с неодинаковостью ее внешних полей (как я уже писал, величина этих полей точному контролю не поддается). При этом, однако, ощутимым становится другой недостаток этой технологии: броузер может выводить на экран таблицу только тогда, когда ему известны габариты всех ячеек, — т. е. не раньше, чем из сети догрузятся все изображения, тексты и HTML-код, составляющие таблицу. Результатом может стать раздражающая задержка с выводом информации на экран.

Сообщив броузеру заранее ширину и высоту всех размещаемых в таблице изображений с помощью атрибутов height и width тега IMG, эту задержку можно сильно сократить — но только в том случае, если размеры указаны, опять–таки, для всех без исключения изображений. Даже одна графическая вставка неизвестных броузеру размеров задержит вывод всей страницы до тех пор, пока не придет из сети начало соответствующего графического файла, по которому броузер сможет определить его габариты. Поэтому атрибуты height и width абсолютно обязательны для жесткого табличного дизайна. В академическом же стиле, наоборот, их следует избегать — как потому, что атрибуты эти не входят в стандарт HTML 2.0, так и потому, что жесткое указание размеров графики иногда не позволяет прочесть alt–тексты графических вставок тем пользователям, которые отключили в своих визуальных броузерах загрузку графики.

Тот факт, что в таблице положение любого элемента зависит от размещения всего остального материала, делает этот прием позиционирования весьма чувствительным к ошибкам разметки, так же как и к различиям (увы, существующим) между алгоритмами верстки таблиц в визуальных броузерах. Конечно, в этой области совместимости гораздо больше, чем, к примеру, в CSS, — вполне естественно, что производители броузеров обращают особое внимание на механизм, ответственный за форматирование подавляющего большинства страниц в Интернете. И все же нужно отдавать себе отчет в том, что этот прием (по–английски его бы стоило назвать «trick» или даже «hack») по своей логической обоснованности очень напоминает строительство дома из пакетов из–под сока.


Двойное дно. Еще один недостаток табличного позиционирования — невозможность наложения элементов друг на друга (иными словами, расстояние между двумя объектами не может быть отрицательным). Изобретательные дизайнеры и здесь нашли выход из положения: неповторяющиеся фоновые изображения (стр. 263) становятся в их композициях самостоятельным слоем, содержимое которого так или иначе соотносится с элементами переднего плана. К сожалению (стр. 194), совмещения с точностью до пиксела при этом достигнуть не удается; однако и то, что есть, позволяет добиться интересных результатов (пример 1).

Прием этот вполне допустим в тех случаях, когда он преследует чисто художественные цели. Иногда, однако, в фон выносится часть значимой информации страницы, в некоторых случаях — текст и даже ссылки, реализуемые с помощью прозрачных графических вставок, залинкованных и наложенных на нужные области фона. Такое трюкачество одобрить уже нельзя — «выпавшая на дно» информация безвозвратно теряется для невизуальных броузеров и автоматических сборщиков информации: ведь даже если бы у фонового изображения был свой alt–текст, его место в линейном текстовом эквиваленте страницы определить было бы невозможно.


Белое место. Возможности табличной верстки были бы сильно ограничены, если бы дизайнер не мог управлять расстоянием между содержимым ячеек. Интервалы вокруг всех ячеек одновременно можно менять с помощью атрибутов cellspacing и cellpadding тега TABLE (чаще всего оба эти атрибута обнуляются). Но чтобы раздвинуть на некое заранее заданное расстояние отдельно взятую пару объектов, между ними нужно поставить какую–то распорку.

Общепринятый способ изготовления распорок (тот самый, изобретенный Сигелем) основан на том, что, если указанные в атрибутах width и height размеры изображения не совпадают с его естественными размерами (записанными в самом GIF- или JPEG-файле), броузер обязан масштабировать это изображение до размеров, указанных в HTML. Достаточно, таким образом, взять полностью прозрачный GlF-файл минимальных размеров — 1 на 1 пиксел — и приписать ему требуемую ширину (не забыв указать height=l, чтобы подавить пропорциональное увеличение высоты) или, соответственно, высоту (не забыв width=l) — и мы получим невидимую графическую вставку требуемых размеров, вполне годящуюся на роль распорки.

Достаточно иметь единственную копию такого однопиксельного GIF'a на весь сайт; HTML-файлы могут содержать сколько угодно не мешающих друг другу ссылок на эту копию с указанием разных размеров. Важно также не забывать указывать alt="" при всех таких распорках (как и при любой другой служебной графике), чтобы не раздражать «исподним» визуального форматирования тех, кому нужен лишь текстовый образ вашей страницы.

Простейший и дающий наиболее предсказуемые результаты вариант использования графической распорки — вставка ее в выделенную специально для этого случая ячейку таблицы, которая передаст свою ширину или высоту соответствующему столбцу или строке. Можно, однако, ставить распорки и в те ячейки, в которых уже есть текст или изображения. Как и любые другие графические вставки, распорки ведут себя при этом подобно буквам текста: горизонтальные вставки раздвигают материал, а вертикальные отодвигают текущую строку от предыдущей (чтобы этот эффект был заметен, высота распорки должна превышать высоту самого высокого элемента текущей строки; гарантированную вертикальную раздвижку можно получить, вставив между элементами вертикальную распорку, с обеих сторон отбитую тегами BR). В частности, в абзацах текста графическими распорками можно пользоваться для имитации абзацных отступов и даже для увеличения интерлиньяжа (в последнем случае по вертикальной, одинаковой высоты распорке нужно поставить вплотную к каждому слову текста); сейчас, к счастью, ничто не мешает пользоваться CSS для достижения тех же результатов без всяких распорок.

Если вы никак не можете разобраться в странностях поведения невидимых распорок на ваших страницах, для отладки можно порекомендовать такой прием: заведите еше один однопиксельный GIF-файл, но не прозрачный, а какого–нибудь яркого цвета, и временно подставьте его вместо прозрачного пиксела в тот каталог, где у вас хранятся изображения. Все невидимые распорки при этом станут видимыми, и расставить их по местам будет намного легче.

Для горизонтальной раздвижки символов текста лучше пользоваться не графическими распорками, а неразрываемым пробелом. Последовательность символов   в любом месте документа (в том числе, кстати, и в заглавии, стр.199) воспроизводится броузером как одиночный текстовый пробел, который, в отличие от обычных пробелов, не сливается с соседними пробелами, не исчезает в конце строки и в начале абзаца, а главное — не позволяет броузеру вставить перенос строки между символами, вплотную к которым он стоит (отсюда и его название — «неразрываемый пробел» не позволяет разорвать строку).

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


Дмитрий Кирсанов читать все книги автора по порядку

Дмитрий Кирсанов - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки mybooks.club.


Веб-дизайн отзывы

Отзывы читателей о книге Веб-дизайн, автор: Дмитрий Кирсанов. Читайте комментарии и мнения людей о произведении.

Прокомментировать
Подтвердите что вы не робот:*
Подтвердите что вы не робот:*
Все материалы на сайте размещаются его пользователями.
Администратор сайта не несёт ответственности за действия пользователей сайта..
Вы можете направить вашу жалобу на почту librarybook.ru@gmail.com или заполнить форму обратной связи.