43 Псевдоклассы :before, :after. Примеры
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.
элемент:before { content: "текст" }
Пример
<style>
li:before { content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ }</style>
Псевдоэлемент(:after), который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.
Для :after характерны следующие особенности.
При добавлении :after к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
При добавлении :after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
элемент:after { content: "текст" }
<style>
p.new:after {
content: "Новьё!"; /* Добавляемый текст */
color: #333; /* Цвет текста */ }</style>
Общеизвестные структуры дизайна WEB страниц.
+резиновый
Рекомендации по структурированию и именованию составляющих WEB сайта в файловой системе.
в корне сайта должен лежать только index.html и 5 папок: Template, CSS, Images, JS, Content. Назначение папок Template, CSS, Images, JS понятно из названий, папка Content содержит дерево каталогов. В каждом из них могут находитьбся html-файлы, а также вложенные папки CSS, Images, JS и т. д., назначение которых специфично
Нарезка шаблона Web сайта. Раскройте последовательность действий.
Загружаем картинку в фотошоп, при помощи инструмента slise «выделяем» необходимы нам прямоугольные области (от больших к малым), выбираем инструмент для выравнивания краев, сохраняем как веб в формате gif or png.
47 Оптимизация графики.
Большинство браузеров поддерживает только три формата изображений: GIF, JPEG и PNG. Каждый из них имеет свои сильные и слабые стороны и вопрос выбора оптимального формата для использования в HTML-страницах должен определяться в каждом конкретном случае индивидуально.
Для качественной оптимизации графики следует использовать специальные графические программы, такие как Adobe Photoshop, ImageReady, Ulead Smart Saver, Macromedia Fireworks, PhotoImpact. В программе Adobe Photoshop диалоговое окно, предназначенное для оптимизации графики для Web, открывается по команде Save for Web из меню File.
48 Графический формат jpeg. Особенности.
JPEG— один из популярных графических форматов, применяемый для хранения фотоизображений и подобных им изображений. Файлы, содержащие данные JPEG, обычно имеют расширения (суффиксы) .jpeg, .jfif, .jpg, .JPG, или .JPE.
Алгоритм JPEG позволяет сжимать изображение как с потерями, так и без потерь
К недостаткам сжатия по стандарту JPEG следует отнести появление на восстановленных изображениях при высоких степенях сжатия характерных артефактов: изображение рассыпается на блоки размером 8x8 пикселей (этот эффект особенно заметен на областях изображения с плавными изменениями яркости), в областях с высокой пространственной частотой (например, на контрастных контурах и границах изображения) возникают артефакты в виде шумовых ореолов. Следует отметить, что стандарт JPEG (ISO/IEC 10918-1, Annex K, п. K.8) предусматривает использование специальных фильтров для подавления блоковых артефактов, но на практике подобные фильтры, несмотря на их высокую эффективность, практически не используются. Однако, несмотря на недостатки, JPEG получил очень широкое распространение из-за достаточно высокой (относительно существовавших во время его появления альтернатив) степени сжатия, поддержке сжатия полноцветных изображений и относительно невысокой вычислительной сложности.