Архив рубрики «Дизайн»

Opera — Инструмент для вебмастера

Дата: 23.03.2010
Категории: HTML и CSS Дизайн

Сегодня случайно обнаружил, что новая Opera 10.51 (да и скорее всего все последующие) предоставляет удобные возможности по просмотру и анализу кода HTML страницы. Инструмент будет удобен и полезен для веб-дизайнеров и веб-мастеров. Все что необходимо, это просто кликнуть правой кнопкой мыши на странице, и выбрать «Проинспектировать элемент».

Opera "Проинспектировать элемент"

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

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

В общем лучше один раз увидеть.

Дизайн сайта Кудо

Дата: 18.02.2010

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

Дизайн сайта Кудо

Прочитать остальную часть записи »

Дизайн сайта «Великие люди»

Дата: 25.11.2009

Пару дней назад завершил разработку дизайна для сайта «Великие люди». Вот что у меня получилось:

greatsChrome

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

Дизайн сайта «Противопожарное оборудование»

Дата: 16.11.2009

Недавно закончил разработку дизайна сайта противопожарного оборудования. Это сайт не компании, это будет сайт с информацией о противопожарном оборудовании — что-то вроде энциклопедии.

Дизайн сайта Противопожарное оборудование

Большая сложность была в поиске подходящих изображений. Дефицит с качественными изображениями на пожарную тематику.

Скажу честно, дизайн мне не нравится.

Дизайн на медицинскую тематику

Дата: 6.11.2009

Дизайн

Сегодня завершил разработку дизайна на заказ. Дизайн, к сожалению, для сателлита — энциклопедия болезней. Если вы не знаете что такое сателлит читайте по ссылке выше.

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

Дизайн строительной фирмы «ФРИС». Исправление ошибок

Дата: 27.10.2009

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

ФРИС

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

PNG в IE 6

Дата: 24.10.2009
Категории: HTML и CSS Дизайн

Как известно Internet Explorer 6 и версии ниже неправильно отображают файлы формата PNG 24bit, фон изображения скорее будет отображаться серым. Это конечно же не куда не годится. PNG с альфа-каналами позволяет значительно улучшить внешний вид дизайна сайта.

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

Решение 1

Решение можно найти на официальном сайте Microsoft. Решение заключается в использовании фильтра AlphaImageLoader и добавлении в стиль следующего:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',
   sizingMethod='scale');

Но меня это решение не устроило. Opera, FireFox и другие популярные браузеры, по всей видимости, не имеют фильтра AlphaImageLoader, и не отображают изображение вообще. А если помимо этого фильтра добавить в стиль Background, то появляются проблемы в IE.

Решение 2

Это решение немножко посложнее и автора этого решения сейчас уже сложно найти.

Итак, нам потребуется прозрачный GIF размером 1?1 px. И файл с кодом pngfix.htc. Скачиваем эти файлы отсюда.

Прочитать остальную часть записи »

Стиль первого элемента в списке UL

Дата: 16.10.2009
Категории: HTML и CSS Дизайн

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

#menu ul li {
   border-top: 1px #000000 solid;
}

Хотя это и отрывок кода, но из него понятно, что над (top) каждым элементом LI списка UL будет рисоваться сплошная (solid) линия в 1 пиксель черного (#000000) цвета. Почему я выбрал именно border-top, ведь можно было бы сделать так, чтобы отделение было снизу? Да все очень просто: я, как дизайнер, решил, что для моего дизайна у последнего элемента снизу не должно быть линии  (если бы я написал border-bottom, то последний элемент был бы с чертой снизу). Таким образом, получится примерно так: Прочитать остальную часть записи »

Создать меню на CSS

Дата: 14.10.2009
Категории: HTML и CSS Дизайн

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

Если же вам нужно выпадающее меню, то познакомтесь со статьей «Выпадающее меню».

HTML основа меню

Я рекомендую делать меню основанное на списке:

<ul>
   <li><a href="ссылка">Элемент 1</a></li>
   <li><a href="ссылка">Элемент 2</a></li>
   ...
   <li><a href="ссылка">Элемент N</a></li>
</ul>

Но его я помещаю в блок <div> и применяю к этому блоку стиль. В итоге код получается такой:

<div id="mainmenu">
   <ul>
      <li><a href="#">Элемент 1</a></li>
      <li><a href="#">Элемент 2</a></li>
      <li><a href="#">Элемент 3</a></li>
   </ul>
</div>

Я не буду заострять внимание на структуре, на синтаксисе и правилах написания CSS кода.

Вертикальное меню

Итак, начнем с вертикального меню. HTML код уже готов, осталось написать стили. Будем делать меню не просто как ссылки, а покрасивее, с выделением фона при наведении мыши.

Напишем стиль для div’a:

#mainmenu{
   float: left;
   width: 200px;
   background: #F5F5F5;
}

Тут все просто: указываем, что блок будет слева, шириной в 200 пикселей, а фон у него будет цвета #F5F5F5. Прочитать остальную часть записи »

Дизайн для строительной фирмы «Камелот»

Дата: 10.10.2009
Категории: Дизайн Мои проекты

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

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

Вот что получилось:

Строительная фирма Камелот

Прочитать остальную часть записи »

12