Для начала разберёмся, что такое веб-дизайн. Говоря простым и доходчивым языком, это разработка оформления сайтов в интернете. Веб-дизайнер — больше художник, нежели программист. Более того, может не быть программистом вообще (разве что немножко), потому что создание веб-приложений — не его задача.
Он должен всего лишь оформить интерфейс таким образом, чтобы пользователь, заходящий на сайт. воскликнул: «Ах, как красиво! И удобно! Не надо напрягать глаза, разыскивая, куда нажать, чтобы перейти в нужный раздел!» Итак, что следует изучить в первую очередь, чтобы начать заниматься веб-дизайном.
HTML
Все страницы в сети создаются с помощью языка гипертекстовой разметки HTML. Штудировать толстые книжки необязательно. Достаточно выучить несколько десятков тэгов — средств разметки, заключаемых в угловые скобки.
Создание веб-страницы (которая может служить шаблоном для всех страниц сайта) начинается с вёрстки. Что такое вёрстка? Это упорядоченное размещение данных на странице. Картинки, текст, встроенные объекты, кнопки, формы ввода данных — всё занимает свои места таким образом, как хочется верстальщику, а не как попало.
Чаще всего страница разбивается на колонки с помощью столбиков таблицы с невидимыми границами. Местоположение каждого столбика, его ширина — всё это прописывается с помощью средств HTML. Один или два боковых столбика с меню сайта и вспомогательной информацией, посередине — самый широкий с основным содержимым. Сверху — «шапка», снизу — её своеобразный антипод с копирайтами, указанными мелким шрифтом.
Верстать можно с помощью специализированных программ. HTML-редакторов, позволяющих работать по принципу «получаю то, что вижу». Не вводя тэги разметки вручную. Однако это вовсе не означает, что тэги не нужно знать. Веб-дизайнер должен разбираться в исходном HTML-коде, читать его без затруднений и поправлять любые косяки вручную.
Каскадные листы стилей (CSS)
HTML позволяет раскрашивать страницу и текст, вставлять картинки и ссылки, осуществлять разное начертание шрифта, но этого может быть недостаточно. К тому же, для каждого элемента все параметры нужно прописывать в тэгах, что сильно раздувает исходный HTML-код. Поэтому изобретены каскадные листы стилей, они же CSS (Cascading Style Sheets).
Удобство CSS — в том, что для каждого элемента (например, для ссылок, для шрифта, выделенного курсивом, для заголовков, для ячеек таблиц) указываются параметры только один раз, в самом начале. И сколько бы не было этих элементов, уже не нужно прописывать всё вручную для каждого.
Если же какой-либо участок необходимо оформить иначе, то описание стиля в формате CSS вставляется прям в HTML-тэг. Тогда стиль участка веб-страницы, обозначенного таким тэгом, будет обусловлен именно этим, а не общим описанием.
CSS предоставляет настолько широкие возможности, что многие страницы в сети оформлены именно таким образом, практически без возможностей HTML. Поэтому при плохом коннекте бывает, что файл с содержимым CSS (одним для всего сайта) не подгружается, и оформления у страницы нет вообще, браузер отображает параметры по умолчанию.
Графика
В сети не так уж много сайтов без графики, с одним лишь текстом. Раньше, в старину, когда модемы были медленными, а плата взималась за время подключения, картинки ради экономии сжимались как можно сильнее. Теперь это актуально разве что при использовании мобильного телефона. Тем не менее, чем быстрее загружается страница, тем приятнее. Значит, нужно разбираться в графических форматах и уметь делать изображения компактными.
JPEG — формат для размещения в сети фотографий. Хорош тем, что передаёт все шестнадцать миллионов оттенков, которые различает человеческий глаз. Не зря же любительские фотоаппараты записывают снимки именно в JPEG.
Недостаток — чем сильнее сжимается изображение ради уменьшения размера файла, тем больше артефактов, ряби и размытых элементов.
GIF — этот формат предназначен для рисунков и чертежей. Он способен передавать только 256 цветов, поэтому плавные переходы оттенков ему не по силам. Зато контуры на чертежах и рисунках остаются чёткими, в отличие от JPEG.
Также GIF используется для анимации. Можно научиться делать её в свободном графическом редакторе GIMP. почитав несложные для усвоения справочные материалы.
PNG — это сжатие без потерь. Фактически архив, разжимающийся при отображении содержимого. Используется, если нужно вставить какой-либо графический элемент в идеальном качестве. Но не большую фотографию, потому что файл получится очень увесистым.
И GIF, и PNG умеют передавать прозрачность. Если нужно, чтобы на странице было изображение с прозрачным фоном, то используется один из этих форматов.
Однако следует заметить, что GIF — запатентован, поэтому на коммерческих сайтах нежелателен.
Flash, фреймы, iframe
Все эти понятия собраны воедино, потому что у них есть кое-что общее. А именно: ненужность, вредность и дурной тон.
Если веб-дизайнер строит интерфейс сайта на Flash, то тем самым он делает невозможным просмотр и навигацию для тех, кто не желает себе устанавливать этот вредоносный компонент, являющийся источником заражения компьютера.
То же самое относится и к iframe. Его использование оправдано только при применении структур с AJAX. В остальных случаях — средство вирусных атак методом Drive-by.
Ну а обычные фреймы — это уже каменный век веб-дизайна. Их применение — просто моветон.
Скрипты
Кое-что можно оформлять с помощью JavaScript. Всякие кнопки, визуальные эффекты, например, падающие снежинки. Но за изучение программирования на JavaScript следует браться только после того, как освоите изложенное выше, не ранее. Кроме того, злоупотреблять скриптами не рекомендуется. Всё, что может обойтись без оных, должно обходится.
Тем более что в браузере JavaScript нередко отключают с целью соблюдения техники безопасности серфинга по всемирной паутине. Тогда все старания окажутся напрасными. Например, сделали вывод главного меню сайта на JavaScript (это совсем несложно), а пользователь его не увидит вообще. Или оно у него не будет работать.
Выводы
Стать веб-дизайнером можно только методом освоения всех премудростей на практике. Прочитать о разных методах мало, нужно ещё и пробовать их осуществлять. Поэтому мы рассказали только о самых первых шагах, с которых следует начинать свой путь.
Очень полезно открывать исходные HTML-коды веб-страниц с целью изучения. Смотреть, как делают профессионалы, анализировать и перенимать опыт.
Если же вам даже азы кажутся чем-то непонятным и сложным, то расстраиваться не нужно. На самом деле всё это было разработано так, чтобы для освоения не требовалось заканчивать университет. Вы наверняка справитесь, главное — желание. Ведь, как гласит пословица, не святые горшки обжигают.
Автор: vanilinkin. специально для xBB. uz, 06.04.2011