Стандартные размеры баннеров

468×60
468×120
500×100
234×60
120×60
150×60
160×60
320×60
270×60
230×60
100×100
240×100
170×100
400×40
180×80
200×80
100×200
125×125
160×120
125×250
250×250
120×240
120×800
120×600
160×600
160×400
250×130
384×115
120×90
88×31

Схема работы data:URL

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC" alt="image"/>

Где data:[<тип данных>][;base64],<данные>

Аналогичным образом можно использовать вставку картинок в CSS:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAKCAMAAADII105AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFdQTFRFrnsAqncA16QA39OvsowzyrBt3aoAto8z7NNvy5sQwI0A4Lk4z6g0x5QAwqht28Jv/8wA/9Ib1KEAupMz58ph//nC/9tB///d/+Vv7L0UzpsA//Cc+Pj4Zr1LNgAAAHRJREFUeNqU0FkKgDAMBNDRutXdaq3Wuf85jaL/6ZDCYyBQAkqqin+UhLypaaav1PJZcyG4r9USfYyb91uMPROIIVxvwsAEwrTdIelawwSCpd0ltpQf6wmu53LKrNLqCWLO6zqfn5PqCRbZSI5ZIa2etwADAF/7KlmRn64EAAAAAElFTkSuQmCC) top left no-repeat;

Вот пример реализации data:URL

Но эта схема не лишена недостатков:

1. Необходимо каждый раз пересчитывать base64 для картинки при ее изменение
2. Бразуры Internet Explorer 5-7 не поддерживают data:URL

Первый недостаток решается небольшой php строкой:

<?php echo base64_encode(file_get_contents("stars.png")) ?>

Второй не достаток можно решить путем передачи браузеру Internet Explorer дополнительного файла стилей, который будет экранирован от других браузеров условным комментарием. Необходимо раскрутить сайт в поисковых системах? Воспользуйтесь услугами студии, которая выполнит продвижение сайта в ТОП Гугла, Яндекса и других поисковых систем.

Источник информации: websiteoptimization.com

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0 (подробней об этом свойстве можно прочитать в заметке «Создание модульного окна с прозрачной подложкой«).

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

  
/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv" class="checkboxOn">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" class="checkboxOn" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

Пример полностью кроссбраузерный. Посмотреть реализация можно по ссылке Пример стилизации Chebox

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

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

Для начала стоит отметить, что Expression Web это один из компонентов, который можно купить у Microsoft отдельно, или в пакете Microsoft Expression Studio, в который еще входит ряд других программ. В список этих программ входит Microsoft Expression Blend – WYSIWYG-инструмент для проектирования пользовательского интерфейса приложений, создаваемых на основе . Microsoft Expression Media — Специальное приложение для создания каталогов медиа-файлов. Microsoft Expression Design — профессиональный инструмент для графического дизайна и подготовки иллюстраций, который позволяет создавать впечатляющие элементы пользовательского интерфейса для настольных и web-приложений. Стоимость всей студии составляет 699$, стоимость Expression Web 2 – 299$. Нюанс состоит в том, что ряд программных продуктов, которые состоят в студии нельзя купить отдельно, вот почему такая небольшая разница в ценах.

Microsoft Expression Web 2 относиться к группе WYSIWYG редакторов, который имеет ряд полезных функций которые мне понравились. В первую очередь нужно отметить, что по скорости загрузки продукт от Microsoft явно обгоняет Adobe, но это скорее связано с не очень богатым функционалом первого. Кроме скорости загрузки мне еще понравилось пару полезных функций. Первое это возможность просмотра верстки в браузере с заданным размером экрана. По умолчанию можно просматривать в окнах размером 1024х768, 800х600, 640х480. Другой функцией которая мне понравилась, это то что название классов, идентификаторов является ссылкой на объявление этого класса в внешнем файле. Таким образом, можно переходить к редактированию свойств класса простым кликом по его названию.

На этом, список полезных функций, которые я увидел в этом программном продукте заканчивается.

переезд офиса по низким ценам

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

Анализ макета, разметка модульной сетки

Этап анализа макета, который нужно сверстать является ключевым этапом и ошибки, допущенные на этом этапе, могут привести к большому геморрою на последующих этапах. По этому, нужно тщательно выполнять этот этап. Суть этого этапа состоит в оценке имеющегося макета, определении типа макета резиновый\фиксированный\эластичный и построения модульной сетки, на основе которой будет верстаться макет. Под модульной сеткой макета подразумевается, определение структуры макета скажем, две колонки, шапка и футер, или три колонки и футер (примеры типовых модульных сеток можно увидеть в заметке «Основные примеры модульных сеток»).

Подготовка графики

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

Верстка основных модульных элементов.

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

Верстка всех внутренних элементов.

На финальном этапе выполняется верстка всех декоративных и внутренних элементов каждого структурного блока подгоняются все мелкие правки, чтоб довести верстку до полного соответствия макету.

Не так давно стало известно что Microsoft готовит новый продукт в составе которого будет инструмент под названием Expression Web SuperPreview. Это программа для мультибраузерного просмотра верстки. Правда сейчас выпущена только бета версия, в которой можно просматривать верстку только в Internet Explorer 6 и 7 версии и которую уже можно скачать. В финальном релизе Expression Web 3, можно будет просматривать верстку во всех популярных браузерах.

Программа Expression Web SuperPreview на меня справила неоднозначное впечатление. При первом просмотре мне понравился интерфейс и наличие некоторых полезных функций. В программе есть функция выделения структурных элементов похожая на фаербаговску, правда намного беднее и без просмотра дерева вложенности кода. В программе встроена система добавления направляющих аналогична фотошопу и возможность выделять структурные элементы. Другая полезная функция – наличие линейки по вертикали и горизонтали. Также радует то, что в программе реализована возможность одновременного просмотра верстки в нескольких окнах браузеров, которые можно разместить или столбиками, или строчками.

Но, несмотря на все эти преимущества, программа имеет ряд значительных как для меня недостатков. Принцип работы программы более схож на скриншотер чем на браузер. После ввода адреса страницы программа выводит снимок страницы в том виде, в котором ее отобразят разные браузеры. Таким образом, нельзя проверить работоспособность скриптов и флеша. Также другим недостатком программы то, что она отображает скриншот верстки только в разрешении 1024 пикселей и в другом варианте просмотреть нельзя (можно только масштабировать картинку).

Лично для меня программа показалась не более чем красивой игрушкой, которая не может заменить функционал IETester или Multiplie IE.

Решить юридические вопросы организациям помогут квалифицированные адвокаты.«Асгардъ» — профессиональные услуги адвоката в Москве.

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

Но есть и другой способ организации списка товаров в интернете магазине. В основе структуры используется не таблица, а список, состоящий из элементов. Таким образом, можно добиться того, что в зависимости от разрешения экрана количество товаров в строке будет изменяться.

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

Второй метод состоит в реализации элементов списка в виде строчных элементов которые в блоке списка(ul/ol) выравниваются по центру, а в элементе списка размещен структруный элемент с display:inline-block. В результате получим галерею, в которой в строке элементы выровнены по центру и их количество зависит от разрешения экрана. Вот пример реализации второго метода .

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

В целом мне книга понравилась. В книге «Текст для web доступность и привлекательность» представлено очень много интересного материала, который сопровождается иллюстрациями и схемами для более наглядного представления сути материалов. К аспектам, которые принесли легкую нотку разочарования отношу – качество оформления материла. Не смотря на то, что книга посвящена текста, русское издание не блещет хорошим оформлением и версткой. Но, несмотря на это, в книге написано очень много полезных советов, которые помогу начинающем автору повысить уровень своих публикаций, хотя некоторыми из которых стоит пользоваться осторожно. Ниже представлены самые интересные тезисы, которые мне понравились.

• Чем лучше вы знаете своих читателей, тем лучше сможете писать для них.
• Представьте себе того, к кому вы действительно обращаетесь.
• Выработайте свое отношение, избавьтесь от анонимности и ведите разговор с глазу на глаз.
• Простота помогает удержать ускользающее внимание.
• Писать – значит, привлекать внимание.
• Пишите как живой человек.
• Не заставляйте меня читать! Сохраните основной смысл и отбросьте все остальное.
• Позвольте посетителям просматривать и пропускать части текста.
• Удалите не относящиеся к теме вопросы.
• Размечайте текст(списки, параграфы).
• Веб-текст = контент + интерфейс
• Используйте отступления.
• Сокращая текст, не сделайте его двусмысленным
• Создавайте информативные заголовки.
• Используйте 2-3 уровня заголовков.
• Выделяйте ключевые слова, фразы и ссылки, но не переусердствуйте.
• Ясно укажите, что кроется за ссылкой.
• Делайте смысловое ударение на ссылке.
• Переместите все дополнительные ссылки в начало или конец абзаца.
• Создавайте понятые URL-указатели.
• Создавайте разнообразные ссылки вглубь и вширь веб-узла. Будьте щедрее – предоставляйте больше информации.
• Не обрывайте ссылками последовательное изложение материала.
• Укажите текущее расположение посетителя.
• Откройте для всех метаинформацию, покажите, что находится внутри черного ящика.
• Включайте в каждый абзац описание только одной идеи.
• Разместите основную идею в самом начале абзаца.
• Создавайте меню с информативной структурой.
• Предлагайте несколько путей к одной информации.
• Тщательно подбирайте стиль изложения для выбранного жанра.

Кроме этих полезных рекомендаций книга в книге написано очень много о том как качественно оформить и подать материл и в изобилии представлены примеры реализации конкретных советов и правил.