среда, 4 июля 2007 г.

Дизайн-2

А вы как думали? Нет, преподаватель (советчик) из меня таки действительно хреновый. Это ж надо, чтобы явно неглупая и вполне доброжелательная читательница восклицала:

сделай так, чтобы я понимала не только отдельные букаффки и слова, но и общий смысл хотя бы некоторых фраз!

Ну, что я могу сказать... Список смягчающих вину обстоятельств весьма скромен:

  • я всё же программист, а не преподаватель. И, тем более, не писатель. Справедливости ради, должен признать, что, в принципе, я догадываюсь, как можно (нужно?) излагать, чтобы быть понятным любому. Но... это ж так скучно ;
  • я использую преимущественно английский, поскольку это — профессиональное. Спросите у медиков, зачем нужна латынь. Та же история. Кроме того, разнообразие "переводов" одних и тех же терминов на русский просто сводит с ума. Да и почему тогда русский, а не мой родной (как-никак) украинский?
  • "феномен ракурса". Я использую принципиально иные средства средства (и редактор, и браузер, да и сама ОС, относительно большинства — иная) и в "советах" часто просто пытаюсь предугадать, как ведёт себя неискушённый, преимущественно windows-пользователь. А это трудно, наверное.

В общем: не взыщите.

И то, что следует ниже, вовсе не "откат", а лишь "продолжение". Так, с самого начала хочу предупредить, что при редактировании поста всегда подразумевается режим "Изменить Html" (Edit HTML), а не Создать (Compose). И я по-прежнему считаю, что работать лучше с HTML-текстом, а не с его "отображением". Причины тривиальны, но можно их и перечислить:

  • логическое форматирование предполагает и облегчает дальнейший дизайн текста, визуальное — нет;
  • HTML-текст может быть использован многократно и многофункционально, "созданный" же (composed) пост блога — вещь, до некоторой степени "в себе" — вряд ли его текст можно будет использовать где-либо без реформатирования;
  • возможности HTML-редактирования существенно обширнее (если только вы захотите с ними познакомиться, разумеется). Описываемые ниже приёмы работы с "картинками" — ещё одна тому иллюстрация.

Так что — продолжим о картинках.

Если в окне редактирования посмотреть результат вставки изображения, то нетрудно заметить, что тег img вставлен в тег ancor. Примерно так:

<a ля-ля-ля><img ля-ля-ля /></a>

blogger это делает для того, чтобы помимо трансформированного под заданный размер изображения (обеспечиваемого тем самый параметром width, от которого я рекомендую отказываться), кликнув по ссылке, клиент мог увидеть "первоисточник". Лишнее, как по мне. То есть, практически, для вида страницы вполне достаточно было бы и:

<img ля-ля-ля />

Это, во-первых, даёт возможность вставлять картинки без всяких "Добавить изображение" (Insert Image) и вообще без blogger-а: то есть, редактируя текст любым удобным для вас способом. А, во-вторых, избавляет меня от необходимости описания параметров тега ancor ;-).

Чего не скажешь о параметрах тега img. Кроме уже упомянутого параметра width, есть ещё несколько, представляющих интерес:

  • параметр style описывает "как будет выглядеть" картинка. Свойство (ещё один, не самый удачный, на мой взгляд перевод property) float заставляет текст "обтекать" картинку(left ! center ! right). Без него картинка будет самостоятельным "параграфом". Свойство margin задаёт отступы, начиная от верхнего, по часовой. Свойство cursor, говорит само за себя и особого интереса не представляет;
  • параметр src указывает адрес (url) файла картинки;
  • параметр border задаёт толщину рамки (0 - без рамки);
  • параметр alt - альтернативный текст (на случай отсутствия возможности вывода изображения).

Ну, надо же... Первые же эксперименты с декором продемонстрируют вам, что результат не всегда соответствует ожиданиям. Помимо не всегда адекватного понимания происходящего, тому есть и объективные предпосылки. Декор нынче определяется стилями, обозначаемыми обычно аббревиатурой CSS (Cascading Style Sheets). А ни потому и "каскадные" (Cascading), что их много и действуют "друг поверх друга". В качестве примера могу сказать, что решив отказаться от "рамки" вокруг картинок, я "закомментировал" параметр border в в шаблоне для всех картинок в постах следующим образом:

.post img {
    padding:4px;
/*  border:1px solid $bordercolor; */
 }

Ну, а теперь немного практики. Картинка в верхнем правом углу поста (по замыслу иллюстрирующая его метку (Label) с учётом настроения автора) сделана бесхитростно:

<img style="float:right; margin: -25px 10px 10px 10px;
  cursor:pointer; cursor:hand;" 
  src="http://popov.v.n.googlepages.com/smile-.png"
  border="0" alt="А вы как думали?" />

Бесконечность глубины каскадирования стилей иллюстрирует картинка "everything" в параграфе о CSS. Там всего лишь float: left и border="1".

Все используемые картинки принадлежат перу любимого писателя и заимствованы из книги "Завтрак для чемпионов", она же: "Прощай, чёрный понедельнок!" (в русском переводе). Не знакомых просьба не беспокоиться:

В данном случае, у первого изображения свойство float имеет значение left, а у второго свойство float исключено вовсе. У первого изображения также подобраны отступы сверху, слева и справа.

Ну, а для любителей использовать непосредственно в тексте так называемые смайлики вот ещё один пример: . Этот симпатичный задик (всё того же автора) только и ждёт случая проиллюстрировать чьё-либо высказывание. Если изображение составляет в высоту около 15-ти пикселей, можете смело вставлять ссылку на него непосредственно в строку и единственным параметром, который при этом потребуется, будет параметр src, а значением его - адрес (url) файла. Примерно так:

<img src="http://popov.v.n.googlepages.com/ass-01.png"/>

При желании можно задать и параметр style, определив свойство margin. Так, margin: 0 3px -7px 3px придаст "задику" подобающие поля и соответствие строке по вертикали.

Так же поступаем и со смайликами традиционными:
sad:
smile:
mad:
wink:
lol:
cool:
big_smile:

Комментариев нет: