Дизайн-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:
Комментариев нет:
Отправить комментарий