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

В помощь начинающему web-мастеру

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

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

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

←   Февраль 2006   →
 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
Автор
ImHoster.net

Статистика

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

В помощь начинающему web-мастеру


Информационный Канал Subscribe.Ru
Новости Интернета Статьи Форум Каталог программ Ссылки О сайте
  Webstudent.ru - Мы учимся вместе!
Рассылка начинающему web-мастеру.

Дата: 2006-02-09
Выпуск: 51
Количество подписчиков: 4813
Приветствую, уважаемые подписчики!
Сегодня в выпуске:

Новости:

Вступление

Добрый день (ночь, утро, вечер), уважаемые читатели!

Рад представить вам новый выпуск рассылки. За месяц, что прошел с момента последнего выпуска кое-какие изменения произошли в стуктуре нашего сайта. Я решил немного усовершенствовать вид главной страницы, убрав множество тематических блоков и заменив их одним промо-блоком в центральной колонке. С его помощью я надеюсь облегчить осваивание сайта начинающим пользователям, а также улучшить восприятие главной страницы - теперь там не так рябит в глазах от обилия информации. Если у вас есть какие-то комментарии по этому вопросу - обязательно пишите мне.

Своим чередом идет разработка других проектов, в частности подготовка FAQ'а в который вы всегда можете прислать вопрос и получить ответ (используйте е-mail внизу страницы).

Новые статьи на сайте:

- Резервное копирование баз MySQL
- register_globals=on? Вы в опасности!
- PHP4 или ASP.NET - что лучше?
- Классы и объекты в PHP со Штирлицом и Мюллером
- Имя во всемирной паутине
- CSS: советы и приёмы, часть 1
- CSS: советы и приёмы, часть 2
- Оптимальная длина строки

Для тех, кто хочет услышать меня в mp3-эфире - я записал 2 новых подкаста. Один о SEO, другой... о книгах. Скачать и послушать их можно в разделе "Подкасты"

CSS: советы и приёмы, часть 1

Автор: Roger Johansson
Перевод: Вакорин Никита

Поскольку я широко использую CSS на протяжении 2х лет, мне запомнилось несколько приёмов, которые делают CSS более эффективным инструментом и решают специфические проблемы. Мне бы хотелось поделиться моими любимыми CSS-приёмами и объяснить несколько самых частых ошибок, которые совершают новички. Если у тебя есть опыт работы с CSS, то скорей всего на твоём пути уже встречались эти советы и приёмы, но кто знает, вдруг найдётся парочка новых.

С самого начала планировалось написать всё в одной статье, но советов становилось больше, и поэтому я разделил всё на две части для более легкого усвоения этого материала.

Сокращенный CSS

Когда нескольких свойств прописываются в одной декларации, то чтобы сэкономить место и сделать более читабельней твои CSS-файлы, я рекомендую использовать сокращённый синтаксис. Как использовать доступные CSS-сокращения я описал в моей статье Эффективный CSS с сокращёнными свойствами, поэтому я направляю тебя туда, вместо того, чтобы описывать детали здесь.

Если значение не равно 0, то всегда указывай единицу измерения

Не указывать единицу измерения для значения длины – довольно частая ошибка среди начинающих изучать CSS. Можно избежать этого в HTML, но в CSS все значения длины должны иметь единицу измерения. Есть два исключения: значения line-height и 0 (нуль). Замете, что после значения обязательно должна следовать единица измерения – не надо вставлять пустое место (пробел) между ними.

Нет необходимости указывать единицу измерения для 0 (нуля). Нуль пикселей равняется нулю сантиметров или любой другой единице измерения. Не смотря на это, очень часто встречается нечто на подобии padding:0px, когда можно написать padding:0 и эффект будет таким же.

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

Помни о чувствительности к регистру

Когда CSS используется вместе с XHTML, имена элементов и селекторы становятся чувствительны к регистру. Чтобы избежать связанных с этим проблем, я рекомендую всегда использовать в CSS-селекторах нижний регистр для имён элементов.

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

Указывай цвета

Этот совет находится в упомянутой ранее статье, но я столько раз его использую, что повторюсь здесь: когда цвет в CSS указывается в шестнадцатеричной системе счисления (hexadecimal colour notation), и когда цвет состоит из трех пар шестнадцатеричных чисел, тогда ты можешь указывать цвета более эффективно путём удаления каждого второго числа: #000 идентично #000000, #369 идентично #336699.

И помните знак числа - символ "#" перед кодом цвета.

Еще один совет по цвету – ты можешь указывать безопасные для Всемирной сети цвета, используя цифры, которые умножаются на 3 для красного, зелёного и синего значений: 0, 3, 6, 9, C и F. #99c является безопасным цветом, #98c не является.

Исключай типы элементов для селекторов class и id

Когда пишешь селекторы, которые указывают элемент с определенными значениями class и id, то ты можешь убрать тип элемента перед точкой (селектор класса) или перед # (id-селектор).

Так, вместо того, чтобы писать:

  1. div#content { /* декларации */ }
  2. fieldset.details { /* декларации */ }

ты можешь написать:

  1. #content { /* декларации */ }
  2. .details { /* декларации */ }

и сэкономить несколько байтов для каждого из селекторов.

В особенности это полезно для селекторов id, так как в документе они должны быть уникальными, что снижает риск конфликта CSS-правил друг с другом. Имена классов, с другой стороны, могут быть использованы в документе любое количество раз, и разные типы элементов могут быть присвоены для того же имени класса (или нескольких имён). Чтобы по-разному обозначить типы элементов с одинаковым именем класса, тебе необходимо будет указать тип элемента в селекторе.

Знай, что вышеприведённые CSS-правила не идентичны. Если указано одно правило без типа элемента в селекторе, а другое с типом элемента в селекторе, тогда то правило, которое использует тип элемента, будет иметь более важную специфику.

Значения по умолчанию

Часто ты можешь не указывать значение свойства, опираясь на значение по умолчанию этого свойства. Особенно это важно учитывать, когда ты пользуешься сокращёнными свойствами, так как к любому неуказанному свойству присваивается соответствующее этому свойству значение по умолчанию.
Одни из распространенных значений по умолчанию являются 0 для padding (правда есть несколько исключений), и transparent для background-color.

Исходя из того, что в разных браузерах есть отличия между значениями по умолчанию, некоторые люди предпочитают использовать в начале CSS-файла глобальный сброс пустого пространства путём обнуления свойств margin и padding для всех элементов.

  1. * {
  2. margin:0;
  3. padding:0;
  4. }

Не указывай заново унаследованные значения

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

  1. body { font-weight:normal; }

Предопределённые правила браузера более специфичны из-за каскада, который описан далее.

Воспользуйся преимуществом каскада

Каскад позволяет тебе использовать несколько правил для свойств элемента. Ты можешь переопределить то же свойство или определить дополнительные свойства. Скажем, у тебя есть следующий код страницы:

  1. <p class="update">Update: Lorem ipsum dolor set</p>

В CSS, ты можешь использовать разные правила, чтобы указать свойства, подходящие для всех элементов p и те, которые специфичны для элементов p с классом update:

  1. p {
  2. margin:1em 0;
  3. font-size:1em;
  4. color:#333;
  5. }
  6. .update {
  7. font-weight:bold;
  8. color:#600;
  9. }

Оба правила будут скомбинированы для элементов p с классом update. Класс селектора более важен, чем тип селектора, поэтому, когда происходит конфликт, будут использоваться свойства, определённые во втором правиле. В данном случае color.

Больше информации о том, как подсчитываются CSS-правила можно найти в Вычислении специфики селектора в спецификации CSS 2.1.

Несколько имён классов

Ты можешь присвоить несколько имён классов к одному элементу. Это позволяет тебе писать несколько правил, которые определяют разные свойства, и применять их только по необходимости. Давай предположим, что ты пишешь код галереи картинок, которая содержит авторские и не авторские картинки. Ещё может быть специальное предложение для некоторых картинок. Код для трёх картинок следующий:

  1. <img src="foo.gif" class="special" alt="" />
  2. <img src="bar.gif" class="royaltyfree" alt="" />
  3. <img src="baz.gif" class="royaltyfree special" alt="" />

Чтобы авторские картинки отличались от остальных, ты можешь создать правило для элементов, класс которого будет называться royaltyfree, и если ты хочешь, чтобы картинки со специальным предложением немного выделялись, то ты можешь создать класс special.
Далее CSS может выглядеть на подобии этого:

  1. .royaltyfree { border:2px solid #666; }
  2. .special {
  3. padding:2px;
  4. background:#ff0;
  5. }

Любая картинка с классом special будет иметь вокруг себя пространство в 2 пикселя и задний фон жёлтого цвета. Картинки с классом royaltyfree будут иметь кромку в 2 пикселя, а картинки с обоими классами будут иметь кромку, пространство и жёлтый фон.

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

Используй селекторы потомков

Не использовать селекторы потомков – это один из самых распространенных примеров неэффективного использования CSS, который я вижу от новичков. Селекторы потомков могут помочь тебе обойтись без многих атрибутов класса, и сделать твои CSS-селекторы более эффективными. Для примера можно взять следующую структуру кода:

  1. <div id="subnav">
  2. <ul>
  3. <li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
  4. <li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>
  5. <li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
  6. </ul>
  7. </div>

Этот код может сопровождаться следующим CSS:

  1. div#subnav ul { /* Обозначения стиля */ }
  2. div#subnav ul li.subnavitem { /* Обозначения стиля */ }
  3. div#subnav ul li.subnavitem a.subnavitem { /* Обозначения стиля */ }
  4. div#subnav ul li.subnavitemselected { /* Обозначения стиля */ }
  5. div#subnav ul li.subnavitemselected a.subnavitemselected { /* Обозначения стиля */ }

Ты можешь заменить вышеприведённые примеры следующим кодом:

  1. <ul id="subnav">
  2. <li><a href="#">Item 1</a></li>
  3. <li class="sel"><a href="#">Item 1</a></li>
  4. <li><a href="#">Item 1</a></li>
  5. </ul>

и этим CSS:

  1. #subnav { /* Обозначения стиля */ }
  2. #subnav li { /* Обозначения стиля */ }
  3. #subnav a { /* Обозначения стиля */ }
  4. #subnav .sel { /* Обозначения стиля */ }
  5. #subnav .sel a { /* Обозначения стиля */ }

Твой код должен быть как можно чище. Это позволит сделать код страницы и CSS более эффективным и удобочитаемым.

Избегай кавычек в ссылках

Чтобы сэкономить парочку байтов здесь и там, я не заключаю ссылки для картинок заднего фона в кавычки. Кавычки не обязательны. Есть сведения о том, что в некоторых браузерах (в большинстве случаев Internet Explorer на Макинтоше) появляются проблемы, когда ссылки заключены в кавычки.

Продолжение следует

Я забыл написать о твоём любимом совете по CSS? Расслабься, продолжение следует.

Использованы материалы:
http://umade.ru

Интересные программы

Обращаем Ваше внимание! В рассылке публикуются далеко не все программы, а только подборка из 2-х последних выпусков. Очень много софта "проходит мимо" рассылки! Поэтому, мы Вам рекомендуем почаще заходить в раздел программ и следить за новинками.

iTunes 6.0.2
Обновилась мощная программа для работы с музыкальными файлами. Она позволяет создать собственную цифровую библиотеку музыки и обладает очень простым и удобным интерфейсом. iTunes позволяет работать с карманными компьютерами, переносить на них музыку и синхронизировать библиотеку аудио/видео файлов между обычным компьютером и КПК. С помощью программы можно легко составлять компакт-диски с музыкой и проигрывать музыкальные и видео клипы встроенным плеером. Кроме того, предусмотрена возможность воспроизводить потоковое аудио и видео из Сети, имеется возможность поиска и закачки музыки из Интернет. Программа изначально ориентирована для использования под MacOS, поэтому интерфейс сделан в стиле этой операционной системы.
34.80 MB Поддерживаемые платформы Win 2000/XP |Англ| Бесплатно
Скачать!

Registry Help Pro 1.19
Registry Help Pro - это профессиональный менеджер реестра Windows, который отслеживает изменения происходящие во время работы системы. Он четко находит неверные ссылки на несуществующие каталоги, остаточные ключи после некорректной деинсталяции софта, быстро сканирует реестр на предмет ошибок и позволяет создавать, а затем восстанавливать резервные копии реестра.
1.40 MB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Shareware,EN
Скачать!

#1 DVD Ripper 2.2.0
#1 DVD Ripper - мощная и очень простая в использовании утилита, служащая для создания копий DVD-фильмов. Программа умеет конвертировать DVD в форматы VCD, SVCD, AVI и DivX. Имеется возможность создания идентичных копий с аналогичным оригиналу качеством, присутствует пакетная обработка файлов, преобразование каждой части в отдельный файл и т.д. В этой версии программы разработчики реализовали неплохой калькулятор битрейта.
1.30 MB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Shareware,EN
Скачать!

Traffic Counter [RUS] 1.0
Данная программа предназначена для учёта трафика, будь то трафик локальной сети, или трафик модемного соединения, или Dial Up - Traffic Counter V 1.0 подсчитает трафик по каждому из них. Теперь не нужно ставить множество программ – достаточно поставить Traffic Counter V 1.0. Для каждого типа соединений можно задать цену (Мб/руб), так же по каждому соединению можно просмотреть историю, для этого достаточно воспользоваться контекстным меню. Так же вы можете отчистить историю, для этого запустите ярлык -Clear history! Программа легко сворачивается в трей и по двойному клику возвращается в первоначальный вид.

473.00 KB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Download Accelerator Plus 8.0
Download Accelerator Plus (DAP) является менеджером загрузок - программой, упрощающей и ускоряющей процесс скачки файлов из Интернета. Выбранный для закачки файл "режется" на части, которые DAP начинает загружать одновременно - в несколько потоков, за счет чего общее время загрузки файла уменьшается, причем это ускорение может быть довольно значительным. DAP интергрируется в наиболее популярные браузеры (включая их самые последние версии), поэтому не требует отдельного запуска - стоит только щелкнуть в окне браузера по ссылке на файл, и DAP самостоятельно запустится и начнет его загрузку. Программа может работать по расписанию: в нужное время автоматически подключится к Интернету и скачает заранее определенные файлы, а затем (при соответствующих настройках) отключится от провайдера и выключит компьютер; умеет искать наиболее быстрые "зеркала", докачивает файлы после обрыва связи и даже включает в себя такую необычную для подобных программ функцию, как возможность поиска MP3-файлов, программ, фильмов и игр. Есть у этой программы и такая особенность, как поддержка докачки файлов даже с тех серверов, которые докачку не поддерживают (правда, это получается все же не всегда), а также такая редко встечаемая опция, как возможность предпросмотра содержимого zip-файлов и выкачивание только нужных файлов из zip-архивов. Многочисленные настройки позволяют включить автоматическую проверку скаченных файлов антивирусной программой, выбрать способ поиска "зеркал", настроить работу через прокси, выставить параметры планировщика заданий и т.п. Интерфейс - многоязычный.
4.11 MB Поддерживаемые платформы Win 98/ME/2K/XP, Free, Много.яз
Скачать!

BmpHViewer
Программа, демонстрирующая методы построения рельефа (карты высот) по заданной bmp-картинке.
365.00 KB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Total Commander 6.54 Suitable Kit
Total Commander 6.54 Suitable Kit - расширенная версия файлового менеджера Total Commander, включающая в себя множество плагинов и нескольно полезных программ. В данную сборку входят плагины для: отображения информации об архивах, работы с файлами-справок, просмотра файлов формата Microsoft Word, просмотра любых графических файлов, воспроизведения любых мультимедийных файлов, просмотра любых анимированных flash файлов и т.д. Также вошли полезные утилиты: Autorun, RegCleaner, ProcessExplorer, FileMonitor, RegMonitor, ConfigNT, XP-Lite, XP-AntiSpy.
9.05 MB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Free,EN/RU
Скачать!

CoverXP 1.61
Очень простая в использовании программа для подготовки и печати обложек компакт-дисков - достаточно выбрать картинки да перетащить их в окно программы; все остальное CoverXP сделает самостоятельно. Доступны настройка параметров изображения, выбор подложки, возможность работать из командной строки и другие полезные мелочи. В дистрибутив включено более более пятидесяти уже готовых шаблонов обложек.
3.28 MB Поддерживаемые платформы Win 9*/ME/NT/2K/XP,Free,EN
Скачать!

ACe Файловый нож
Программа позволяет разделить файл на части, а затем снова восстановить его из частей. Она полезна, если вы сталкиваетесь с проблемой переноса файлов, размеры которых больше, чем размеры сменных носителей. Другим возможным применением может быть «нарезка» файла перед отправкой его по электронной почте или загрузкой на онлайновый диск. Основное же назначение - разбиение секретных файлов с целью хранения данных по частям на отдельных носителях. В программе есть мощные функции шифрования, а также полного удаления файлов с диска, с защитой от восстановления информации.
600 кбайт Поддерживаемые платформы all win
Скачать!

InZone №887
InZone - Электронный оффлайн журнал обо всем, что связано с компьютерами. Огромное количество самого качественного материала со всего рунета. Полное отсутствие рекламы. Выходит каждые 2 дня. Около 300 выпусков, более 5000 статей. Полностью бесплатен. По мнению авторитетных ресурсов - лучший электронный журнал рунета о компьютерах.
587 кбайт Поддерживаемые платформы win All
Скачать!

PWS MEMorize 2006
Программа-тренажёр для изучения иностранных слов. Предлагает для изучения каждого слова набор упражнений, сложность которых увеличивается по мере изучения.
491.00 KB Поддерживаемые платформы Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Интересные ссылки

Оригами для влюбленных
Наверное нет ничего приятнее, чем согреть родного человечка своим вниманием, или просто выразить это самое внимание необычным способом, правда? До дня святого Валентина еще есть немного времени! Ваяйте, творите, складывайте!

Дизайн: web, графический, промышленный
Хороший ресурс для интересующихся дизайном и всем близ лежащим. А еще на нем имеется очень небольшая коллекция, но очень полезных ссылок. Думаю, стоит заглянуть!

Теория охоты на слонов
Вот Вы охотились когда-нибудьь на слонов? А мысли такие посещали? А как это делается знаете? Вот! А на просторах рунета кого-то мучают и эти вопросы. Очень милый и симпатичный сайт на котором Вам подробно расскажут, кто такие слоны, как живут, чем питаются, какие повадки имеют, и как на них ... охотиться, причем методов предложено великое множество. Очень занятно! И, к тому же, весело :)

Дорогие подарки
Вот создали Вы уникальный ресурс, вот раскрутили Вы его, и вот, о чудо, он начал приносить просто немыслимые доходы... Или не так. Вы стали супер-пупер крутым дизайнером, и все крупнейшие компании готовы платить сотни тысяч, чтобы Вы создали им сайт, корпоративный стиль… или по-другому - Вы стали крутейшим программистом, и разработчики из майкрософта просто плачут над своей посредственностью читая созданные Вами коды.. или еще что-нибудь, но суть одна: у Вас много денег! И возникает логичный вопрос: на что их потратить? Ну конечно на самые дорогие подарки! Чтобы это захотеть на это стоит хотя бы посмотреть ;)

Оригами персонажей звездных войн
Любителям фантастики от Лукаса - бумажные фигурки персонажей звездных войн: складывать не перескладывать!

NoNaMe.ru
Проект уже достаточно извесный, полезный, а местами ну очень забавный. Тут Вам и скачать чего найдется, и почитать, и позабавиться, посмотрев на плоды фантазий прочих сограждан Сети. Например, вот что можно сделать с помощью конструктора LEGO? Думаю много чего. Например, можно убить кого-нибудь, и способов оказывается ну очень много ;)

Галерея PhotoShop
Перечень наиболее распространенных ошибок дизайна и сайтостроительства в целом за 2005 год. Полезно и познавательно как минимум !

Смотрите остальные ссылки на нашем сайте.

Несколько новостей из интернета за последние пару дней:

Последние темы форума:

Форум Тема Ответов Просмотров Последнее сообщение
Предлагаю! Нам скоро 3 года! 5 82 09/02/2006 18:14
IL-89 
Графические работы Мастерская    [1][2] 15 2903 09/02/2006 16:55
Crystall 
Верстка Как сделать чтобы данные отправлялись на две странички 0 23 09/02/2006 7:03
REAL 
Графические редакторы [Помогите!] загрузить кнопку во flash 6 344 08/02/2006 23:49
Sergey 
Кодинг - Проекты let's try :) Project - GuestBook(lang. - php)    [1][2] 12 1166 08/02/2006 3:03
mozg 
Обсуждение сайтов http://february17.narod.ru 6 299 08/02/2006 2:41
mozg 
Web-кодинг [Помогите!] вопросы по php ... может тупые...но разве кто не спрашивает не остается болваном?)))    [1][2] 15 1425 08/02/2006 1:28
dmitryttt 
Верстка высота блоков при CSS вёрстке 5 743 07/02/2006 0:56
4itaz 
Обсуждение сайтов http://nbc-hr.by.ru 7 489 06/02/2006 22:44
andymc 
Обсуждение сайтов [Вопрос...]http://SaleDesign.ru/ 5 335 06/02/2006 22:44
andymc 

На сегодня это все, встретимся в следующем выпуске рассылки! Удачи!
Самую свежую информацию всегда можно найти на нашем сайте - Webstudent.ru
Архив рассылки доступен по адресу:
http://subscribe.ru/archive/inet.webbuild.webstudent

P.S И не забывайте - мы учимся вместе!

C уважением, Поликарпов Роман


В начало выпуска
© 2003 - 2006, Поликарпов Роман aka Crystall
По всем вопросам пишите на crystall@webstudent.ru

Все материалы данной рассылки охраняются законом об авторском праве!
Вы можете свободно использовать и распространять материалы, подписанные именем Поликарпова Романа, с указанием автора и активной ссылки на сайт (http://webstudent.ru/). Желательно уведомить меня по e-mail :)

Новости Интернета Статьи Форум Каталог программ Ссылки О сайте
Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора		 Подписан адрес:
Код этой рассылки: inet.webbuild.webstudent
Архив рассылки		 Отписаться Вебом Почтой
Вспомнить пароль
В избранное