Проверить верстку дизайна в разных браузерах
При верстке дизайна не обойтись без процедуры проверки его в популярных браузерах, таких как Opera, Firefox, Chrome, Safari и конечно же Internet Explorer.
С Opera, Firefox, Chrome и Safari проблем никаких нет, их можно без проблем скачать и установить, а вот с IE будут. Проблема заключается в том, что шестая, самая «плохая» версия IE у многих отсутствует (например, установлена Windows Vista, или Windows 7, или же просто обновились до новой версии).
Internet Explorer 6 нету а проверить просто необходимо (как минимум в 6 версии). Я искал портативную версию Internet Explorer 6, но к сожалению она у меня не запустилась. Я нашел другой путь.
Почему в IE6 размеры больше?
Как известно всем, кто верстал более или менее достойные дизайны, IE6 неправильно читает верстку. В частности, иногда, при создании отступа такого типа:
.ClassName
{
margin-left: 20px;
}
Должно позиционироваться примерно так. Т.е. создаем несколько блоков, и у них внешний отступ равен 20 px. И во всех нормальных браузерах получается что-то вроде этого.
Краткий обзор моих последних работ
Недавно я сделал два достаточно сложных дизайна. Были свои проблемы, которые я постарался преодолеть. Получил много опыта. Дизайны, на мой взгляд, получились вполне неплохие. Оба дизайна «резиновые» и от этого они выглядят еще интереснее.
PNG в IE6 — Еще одно решение
Как известно Internet Explorer 6 неправильно отображают файлы формата PNG 24bit. Фон изображения будет отображаться серым. PNG с альфа-каналами позволяет значительно улучшить внешний вид сайта. Проблема конечно же решаема. Пару решений я описывал в аналогичной статье — PNG в IE 6.
Представленные решения неплохие, но есть несколько недостатков, среди которых невозможность «замостить» маленькое изображение.
Решается проблема следующим образом:
Выпадающее меню
Очень часто нужно сделать выпадающее меню.
Нам понадобится: небольшой скрипт, и дополнительная таблица стилей (можно и в существующую добавить). Все это вы найдете в примере ниже.
Работает это довольно просто: с помощью скрипта при наведении на ссылку, изменяется стиль у соответствующего блока, что и заставляет его показаться. Ну а изначально он не виден.
Если захотеть, то можно к этому меню добавить эффектов, сделать его покрасивее. В любом случае придется подгонять под конкретный дизайн, это только пример.
Opera — Инструмент для вебмастера
Сегодня случайно обнаружил, что новая Opera 10.51 (да и скорее всего все последующие) предоставляет удобные возможности по просмотру и анализу кода HTML страницы. Инструмент будет удобен и полезен для веб-дизайнеров и веб-мастеров. Все что необходимо, это просто кликнуть правой кнопкой мыши на странице, и выбрать «Проинспектировать элемент».
Сложно объяснить как это выглядит, лучше просто попробовать. Можно получить полную информацию о веб странице, начиная от ее кода и таблицы стилей и кончая скриптами, причем все в одном месте и легко доступно. К сожалению производить анализ сайта с точки зрения SEO этот инструмент не позволяет. Для этого придется пользоваться специализированными сервисами в интернет.
Кликаем по интересующему элементу на странице и попадаем к его HTML коду. При наведении мышкой границы элементов выделяются, все сделано очень удобно. Все показывается в одном месте, легко найти стиль применяемый к выбранному элементу.
В общем лучше один раз увидеть.
Дизайн сайта Кудо
Недавно завершил разработку дизайна сайта Кудо. Кудо является спортивно-боевым видом единоборств, включающим в себя элементы и технические приемы из арсенала каратэ, бокса и борьбы.
Дизайн сайта «Великие люди»
Пару дней назад завершил разработку дизайна для сайта «Великие люди». Вот что у меня получилось:
Делал дизайн я конечно же не бесплатно. Но ведь не каждый может позволить себе заказать дизайн для своего сайта, например, начинающий вебмастер, или блоггер. Можно пользоваться дизайнами бесплатно распространяющимися в сети интернет. Но сайт (внешняя сторона) не будет уникальным, и вполне возможно, что такой же начинающий, как и вы, скачает этот дизайн и установит на свой сайт.
Прочитать остальную часть записи »