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

О веб-дизайне - из личного опыта.

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

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

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

←   Май 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
30
31
Автор
Александр Левитас

Статистика

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

О веб-дизайне - из личного опыта.


Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт



Здравствуйте.

С Вами вновь "Веб дизайн из личного опыта". И сегодня вас ждёт очередная порция полезной информации. Встречайте.

Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML) Часть 1



Источник: http://dweb.ru/articles/index.php?idart=45

Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием «домашняя страничка» или английским словом «homepage». Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные «киты» web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.

Речь здесь пойдет о «правильном» HTML для новичков, а именно – о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (www.w3.org). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее – о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством «классического» HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.

Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad'ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: «Все свои привычные документы я создаю посредством программ WISIWYG («что вижу, то и получаю») – тексты я создаю в MS Word, презентации – в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу – MS FrontPage...» Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

Первый раз – в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы «отсебятину» – множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален – любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы – визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.

Ну, а теперь перейдем непосредственно к делу – к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название – CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.

Логическое и физическое форматирование

Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги <font>, <b>, <i>) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием – просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой «неподвластности» логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML – теги <h1>, <h2>, <blockquote>, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.

Назначение стилей отдельным элементам страницы

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать некий стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?

Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега <body>, присвоив ему соответствующее значение. Синтаксис такой:


<body style="font-family: 'Times New Roman', serif; font-size:
12pt; color: darkgreen;">

Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами <font> и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!

Обратите внимание – когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.

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

Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей

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

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в «голове» страницы (в любом месте между тегами <head> и </head>) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом <style> и заканчивающийся закрывающим тегом </style>. Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:


<head>
...
<style>
body { 
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
</style>
...
</head>

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

Людмила Бандурина,
webmaster@mizantrop.al.ru

#10 (49) октябрь 2000
http://www.iworld.ru/magazine/index.phtml?fnct=magazine&m=94701976
Журнал Мир Internet http://www.iworld.ru/



Нужны навыки Веб-Дизайна?Профессионалы с Радостью Вам ПОМОГУТ!

Веб-дизайн

Книга адресована специалистам-практикам - дизайнерам, программистам, вебмастерам, менеджерам, маркетологам, но не меньшую пользу извлекут из этого руководства и те, кто платят им деньги. Судьба современной крупной (и не только!) компании во многом зависит от привлекательности, доступности и полезности ее сайта. Однако топ-менеджеры не всегда достаточно компетентны в вопросах юзабилити, которые в последнее время приобрели решающее значение. Стив добавил три главы, выдержав их в том же иронически-юмористическом ключе, и изложил в них свое понимание предмета и практические рекомендации, адресованные в равной степени и новичкам, и ветеранам. Если прочитанное изменит ваши взгляды на веб-дизайн, то в этом не будет ничего удивительного. Освоение принципов успешного веб-дизайна поможет вам задавать экспертам правильные вопросы и получать ответы, которые позволят находить решения трудных технических, эстетических и структурных проблем разработки сайтов.

Получить в своё распоряжение

Веб-дизайн: книга Якоба Нильсена

Книга, которую вы держите в руках, - самая известная на сегодняшний день книга по веб-дизайну. Ее автор, доктор физических наук Якоб Нильсен - признанный во всем мире специалист в области интерфейсов и удобства эксплуатации, - делится с читателем своими знаниями и опытом. Им был разработан ряд методик, направленных на быстрое и экономичное усовершенствование пользовательского интерфейса, включая эвристическую оценку. Он является обладателем 38 патентов США на разработки, ориентированные, главным образом, на повышение удобства работы пользователей с Интернетом. Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления страниц до упрощения структуры навигации и создания профессиональных сайтов. В книге вы не найдете описаний каких-то конкретных программ и кодов на HTML. Она отвечает на самый главный вопрос дизайна: «Что именно нужно сделать, чтобы посетителям сайта было удобно с ним работать? »

Получить в своё распоряжение

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

Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com) - первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом - все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, - и, конечно же, всем творческим и любознательным людям.

Получить в своё распоряжение

Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия

По-настоящему эффективный сайт должен служить вашим стратегическим целям, одновременно удовлетворяя потребности ваших пользователей. Даже самый интересный контент и самые передовые технологии не помогут вам сбалансировать эти две задачи без поддержки последовательного и непротиворечивого опыта взаимодействия. Однако создание опыта взаимодействия кажется невообразимо сложным делом, ведь приходится учитывать массу вопросов - юзабилити, идентичность бренда, информационную архитектуру, дизайн взаимодействия. Книга Джесса Гарретта раскрывает сложную тему веб-дизайна, ориентированного на пользователя, при помощи понятных объяснений и четких иллюстраций, сосредоточиваясь на общих идеях, а не на инструментах и технических приемах. Автор рисует перед читателем полную картину разработки опыта взаимодействия на веб-сайте - от стратегии и требований к контенту до информационной архитектуры и визуального дизайна. Эта вводная информация позволит любой команде веб-разработчиков, независимо от ее размеров, спроектировать успешный опыт взаимодействия.

Получить в своё распоряжение

CD-ROM (MP3). Бизнес-путь: AMAZON.COM: секреты самого успешного в мире веб-дизайна

Какое название первым приходит на ум при словах “Интернет-магазин”? Правильно, «Amazon.com» - один из пионеров в этой области, до сих пор удерживающий в ней лидирующие позиции. Однако оптимистично ли будущее этого патриарха сетевой торговли? Несомненно. Ведь какие бы кризисы и «коррекции рынка» ни потрясали электронный бизнес, Джеф Безос не позволит своей компании остаться без прибыли. Гигантский магазин по продаже книг онлайн дополнят сетевые аукционы, продажа медикаментов и мультимедиа и многое другое - так Amazon ищет свое место в изменившейся реальности электронного бизнеса. Новая бизнес-модель для предпринимателей, множество ранее не известных тайн, сделок, альянсов и планов суперзвезды электронного бизнеса - в книге, которая станет для вас настольной, если вы захотите повторить успех создателя «Amazon.com».

Получить в своё распоряжение

По ту сторону веб-страницы

От замысла до запуска: весь процесс разработки сайта. Проблемы современного веб-дизайна и нестандартные пути их решения. Что модно и что можно: осмысленный подход к дизайну. Станьте профи: избавьтесь от признаков "вечного начинающего". Почему 95% дизайнеров рисуют похожие сайты? Потому что не хватает фантазии или знаний? Или потому что так предписывает Нильсен? Но существуют типы верстки, совершенно не похожие на привычные, но не менее удобные. Что такое "мода в веб-дизайне"? Так ли необходимо ей следовать? И всегда ли нужно использовать инструменты, которые используют все? Не всегда для хранения информации удобны базы данных, и не для всех типов графики идеально подходит Adobe Photoshop. А знаете ли вы, что языки серверного программирования - это пластилин, из которого можно лепить любые фигуры, были бы умения и фантазия. Создатели этих языков сами не догадывались, какие возможности заложены в их детища. В книге рассказывается о небольшой части этих возможностей. Знания языков HTML, XHTML, CSS, JavaScript, PHP и технологий SSI и RSS (их описания есть в книге) недостаточно: в первую очередь нужно понимать, что вы собираетесь сделать, а инструмент найти - дело второе. Книга - по большому счету - об одном. Прежде чем сделать сайт, нужно подумать, зачем он нужен и как его задачи соотносятся с его внешним видом и его работоспособностью.

Получить в своё распоряжение

Веб-редизайн: книга Келли Гото и Эмили Котлер

Основной постулат этой книги - веб-дизайн находится в постоянном движении - со временем подтверждается все убедительнее. В первом издании говорилось, что цикл дизайна занимает 12 месяцев, а во втором он сократился до полугода и даже трех месяцев. Именно поэтому сейчас как никогда остро ощущается потребность в толковом и практичном руководстве, которое помогло бы составить план и бюджет, организовать процесс веб-редизайна (или создания сайта с нуля) и управлять им. Это руководство перед вами! Веб-дизайнер экстра-класса Келли Гото и ее соавтор Эмили Котлер делятся своим опытом, предлагая эффективный подход к процессу веб-редизайна, учитывающий как приоритеты бизнеса, так и интересы хорошего дизайна. Келли и Эмили сосредотачивают внимание на пересечении этих сфер, попадая прямо в «яблочко». Каждая глава содержит наглядный пример, иллюстрирующий ключевые стадии процесса. В книге много форм, контрольных списков и рабочих листов, которые помогут извлечь практическую пользу из полученных знаний.

Получить в своё распоряжение

Современный дизайн

Современный дизайн

Получить в своё распоряжение

Цифровой дизайн

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

Получить в своё распоряжение

Web-дизайн: справочник

Книга «Web-дизайн: справочник» - уже третье издание, выпущенное в США издательством O'Reilly. В нынешнем своем виде она полностью переработана в соответствии с Web-стандартами, особое место среди которых занимают стандарты CSS 2.1 и XHTML 1.0. Автор Д.Н. Роббинс поделилась с читателем многолетним опытом, вобравшим в себя современные реалии интенсивно развивающейся области Web-технологий. Справочник содержит ценную информацию по созданию Web-страниц, обеспечению доступности сайта для устройств и пользователей, использованию JavaScript и скриптов DOM, созданию изображений GIF, JPEG, PNG, подходящих для размещения в Web-окружении, а также охватывает новые подходы к печати материалов из Web-пространства.

Получить в своё распоряжение

Философия CSS-дизайна

В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости. Эта книга не является учебником по CSS, но представляет несомненный интерес для различных категорий пользователей: от новичков до маститых профессионалов. Издание состоит из 7 глав, предметного указателя и приложения.

Получить в своё распоряжение

Моя жизнь в дизайне

Книга воспоминаний Юрия Соловьева уникальна. О своей жизни рассказывает человек, создавший в Советском Союзе собственную империю промышленного дизайна. Блестящий менеджер и авантюрист, художник и свидетель кремлевских интриг, баловень судьбы и человек, большинство проектов которого осталось известно лишь партийным бонзам и ведущим дизайнерам мира. Конструктор, который пытался сделать фасад социализма человеческим. Друг Василия и Светланы Сталиных, входивший в узкий круг советской «золотой молодежи» конца 30-40-х гг. и чудом уцелевший в годы массовых репрессий рассказывает о совершенно другой, параллельной стране, которую он во многом создал для себя сам. Людям, знакомым с книгами Солженицына и Шаламова, воспоминания Соловьева покажутся «Алисой в стране чудес». Насколько невероятной была его жизнь, настолько невероятными были и его проекты, как реализованные, так и те, что остались на бумаге. Это одновременно книга мемуаров и единственный в своем роде альбом по истории советского дизайна. Здесь и послевоенные пассажирские вагоны, на которых до сих пор ездит полстраны; и дизайн-проект первого атомного ледокола «Ленин» и первой атомной подводной лодки; и закрытый конкурс на лучшую яхту для Эйзенхауэра... И др.

Получить в своё распоряжение

CD-ROM. Web-дизайн для гуманитариев

Всеобщая компьютеризация коснулась не только фирм и банков, но и редакций, библиотек и научных институтов. Современному гуманитарию необходимо уметь обращаться с компьютером, ведь работать над электронным документом гораздо удобнее. Люди гуманитарного склада ума подчас теряются, читая объемные учебники, перенасыщенные техническими терминами и схемами. Именно в расчете на таких людей создан курс "Web-дизайн для гуманитариев". Все необходимые знания можно почерпнуть в пошаговых инструкциях с наглядными примерами и приятным звуковым сопровождением. Несколько коротких уроков - и вы станете уверенным пользователем! Ведь компьютер уже давно не роскошь, а замечательный помощник в работе и учебе.

Получить в своё распоряжение

Мультимедиа-дизайн во Flash 8

Данная книга является полным и подробным руководством по использованию Flash 8. Пошаговая программа обучения позволяет, не теряя времени, приступить к созданию Flash-роликов. Изучив главы, посвященные созданию анимации, читатель без труда сможет в считанные минуты создать свою первую Flash-анимацию. В книге раскрыты все аспекты работы с Flash: работа с панелью инструментов, монтажной линейкой и панелью Library, создание динамического текста и полей ввода, импорт графических элементов, работа с видео и звуком, все аспекты создания анимации движения и анимации форм, анимированных movie-клипов и кнопок. В книге объясняются основы создания расширенной интерактивности в ActionScript, также дан краткий курс по этому современному языку программирования. Книга является важным источником знаний в области создания современных мультимедиа-презентаций, игр и Web-дизайна с использованием Flash.

Получить в своё распоряжение

В избранное