twitter

Приходилось ли Вам слышать такое название "мультибраузерный сайт" ?

«Мультибраузерный» сайт определяет браузер пользователя. По полученному результату данный сайт использует определенные для этого браузера CSS стили.
Каждый пользователь Интернета использует тот браузер, который ему более подходит, и при этом сам добавляет или изменяет различные настройки. Выходит - нужно добиться того, чтобы наш сайт отображался во многих браузерах.
Давайте вспомним какие браузеры нам более известны ?
Первый и самый используемый IE , далее за ним стоят Opera, Firefox, Netscape, Avant. Пожалуй, на этом остановимся, и будем исходить из того, что те, кто заходит на сайт , используют один из этих браузеров.

Рассмотрим отличия между браузерами :
1) Если используете комментарии в CSS файлах, то работайте с конструкцией /* комментарий */, но никак не # и не , т.к. Mozilla и Netscape странно реагируют на них, поэтому следующий за комментарием элемент стиля просто игнорируется. В Opera и IE с этим проблем не возникает.
2) Тег select отображается по разному. В IE он смотрится замечательно, а вот в других браузерах, он мало того, что некрасиво выглядит, так он еще и выравнивается несколько странно... Т.е. где-то выше, где-то ниже. Эту задачу можно решить используя позиционирование :
select
{ position: relative; top: 1px;
}

В Opera при наложении на любой другой элемент (используя выше написанный код), например на бордюр таблицы, границы просто становятся невидимыми. Но и для этого случая есть выход - дописываем "z-index".
select { position: relative; top: 1px; z-index: 1;}

3) В обычных кнопках так же есть различия. Можно увидеть такую особенность - текст кнопки отображается либо выше либо ниже на 1 px ( пиксель ).В Opera, сайт в HTML-коде которого указан DOCTYPE(его желательно использовать для валидности кода), размеры кнопок странно отображаются.
Для Opera размеры надо указывать меньше: "height: 14px;"
В IE и Firefox эта величина равна 18px.
4) Сокращайте слова в атрибуте "ALT" при , так как в Mozilla этот текст "выйдет" за границы .
5) Использование для оформления скроллбара кода типа:
scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color, scrollbar-arrow-color
Будет отображаться только в IE и производных от него. Поэтому не удивляйтесь, что зайдя в Mozilla вместо радостных тонов вы увидите серый скроллбар (в зависимости от темы оформления)
6) Используйте для отступов документа код:

BODY { padding: 0; margin: 0; }

Если же вы хотите сделать отступ в 1px сверху и снизу, то просто напишем:

BODY { padding: 1px 0 1px 0; margin: 0; }

Вы, наверное, спросите "А зачем margin: 0 нужен, ведь и без него все нормуль?" Отвечаем, что это просто необходимо для Firefox, там появляются лишние отступы.
Оговорка по этому поводу....Многие используют визуальные редакторы , которые предлагают код:

leftmargin, marginwidth, topmargin, marginheight

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

Итак , вот он....

function browser_define($agent)
{
if(ereg('MSIE ([0-9].[0-9]{1,2})',$agent)&&!ereg('Opera ([0-9].[0-9]{1,2})',$agent)) $browser='ie';
elseif(ereg('Opera',$agent)) $browser='opera';
elseif(ereg('Netscape/',$agent)&&ereg('Gecko/',$agent)) $browser='netscape';
elseif(ereg('Gecko/',$agent)&&!ereg('Netscape/',$agent)) $browser='mozilla';
else $browser='ie';
return $browser;
}

Ф-ия возвращает имя браузера. Используем ее так:

LINK rel="stylesheet" type="text/css" href="/css/.css"


Т.е. если, например, к нам зашли через IE, то скармливаем CSS файл по имени ie.css.




26 июн. 2008 г. | 1 коммент. | Ярлыки:
WEB-ДИЗАЙНЕР, WEB-МАСТЕР. Что за этим скрывается?

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

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

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

Основные ингредиенты

1. Постоянное желание к обучению.

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

2. Гибкость, коммуникабельность.

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

Рецепт успеха

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

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

Очень важно разбираться в методах и технологиях веб-дизайна, но не сваливайте все на авось. Как же убедиться, что переподают современные варианты? Самый простой способ - зайти в книжный магазин, и просмотреть большую часть предлагаемой литературы по данной тематике. Все запомнить не получится, но вот основные мысли можно записать (на тот случай , если нет возможности и желания приобретать какую-либо книгу, да и просто неизвестно - какую книгу лучше купить). Есть Интернет? Задайте вопрос поисковику, и он обязательно найдет подходящее.
Можно свалить всю вину на программу, и это будет отчасти справедливо, но и студент также должен нести ответственность за такие "проколы".

Дело тут не только в том, чтобы постоянно держать "нос по ветру". Что бы ни изучалось, студенты также несут ответственность за то, что выучено. И оценивать себя тоже должны сами. Проверяйте то, что вы выучили, вливайтесь в процесс и постоянно задавайте вопросы. Важно отметить, что веб-дизайн - новое и постоянно меняющееся поле деятельности; даже за короткое время вашего обучения она может измениться до неузнаваемости. Изучение веб-дизайна - нечто большее, чем простое выполнение курсовых работ.

Приправа. Даже смесь приправ...

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

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

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

Поднос для нашего блюда.

Учиться, учиться и еще раз учиться. Непознанного всегда больше. Вряд ли в Сети найдется хоть один профессионал, изучивший Веб на все 100%, сколько бы долго он ни работал веб-дизайнером. Жизнь скоротечна, и все быстро меняется, особенно технологии.

А в заключение, маленький десерт-напутствие.

Приступайте к действиям решительно. Не ждите, не оттягивайте, чем быстрее принимается решение, а за ним неотступно следует действие, тем быстрее, ощутимее и значительнее будут результаты. Склонность человека полагать, что все просто, ведет к провалу. Не отталкивайтесь от ошибок, а разбирайте их. Поднимайтесь по лестнице вверх постепенно, ибо каждая ступенька важна.
Мы не знаем всего, что необходимо знать, и чем скорее примем этот факт, тем быстрее начнем делать успехи.
12 июн. 2008 г. | 1 коммент. |