Введение в Web дизайн

• Что такое web-дизайн?
• Зачем это нужно?
• Необходимый инструментарий
• Основные «постулаты» web-дизайна

• Технологии web-дизайна
• Логическая и физическая структура сайта
• Заглавная страница
• Динамическая и статическая компоновка сайта
• Статическая компоновка страницы
• Динамическая компоновка страницы

• Элементы web-страницы
• С чего начать?

Что такое web-дизайн?

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

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

Стартовая страница раздела;моя семья

Рассказ о моей жене

Рассказ о моем сынишке

Моя фотография на пляже в Сочи

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

Заглавная страница

Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории, - это наличие заглавной страницы (splash)или отсутствие таковой.

Заглавная страница представляет собой html-документ, который не включает всебя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страница называется иначе и вызывается посредством организации гиперссылки.с за- главной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит, как правило, логотип компании-владельца данного ресурса, счетчик посещений и предложение выбора кодировки кириллицы, либо вы- бора между английской и русской версиями сайта. Пример web-ресурса, оснащенного такой страницей, показан на рис. 3.2.

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

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

Динамическая и статическая компоновка сайта

Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, например 640x480, 800x600, 1024x768, 1152x864, 1280x1024 или 1600x1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо web-страницыона может отображаться не одинаковым образом в зависимости от используемого посетителем сайта экранного разрешения.

Для того чтобы избежать съезжания элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие web-сайты на две условные категории. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или прижать к левому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

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

Статическая компоновка страницы

Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не поплывут. Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в броузерах MicrosoftInternet Explorer и Netscape Navigator.

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

Динамическая компоновка страницы

Достоинства. Документ растягивается по всей ширине экрана, не остается не- использованных пустых полей.

Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator.

ПРИМЕЧАНИЕ Используемые в командах HTML значения пикселов (условных точек)подразумевают физические размеры точки экрана пользователя и зависят от типа его монитора.

Примеры реализации сайтов со статической и динамической компоновкой страниц приведены на рис. 3.4 и 3.5. Данные изображения сделаны с фиксированным экранным разрешением 800x600 точек.

Элементы web-страницы

Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Безусловно, ассортимент и количество подобных объектов могут варьироваться в зависимости от тематической направленности сайта, объема опубликованных на нем материалов, а также от целей и задач, которые ставит перед собой создатель данного ресурса. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера.

Первым элементом web-страницы, который нам предстоит рассмотреть, является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сай- та, если данный web-ресурс представлен на двух языках. Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена - системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.

Основную часть документа занимает так называемое текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют кон-тент (от англ, content - содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

Следующей обязательной составляющей частью web-страницы являются элементы навигации - гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, на- пример Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих традиционных сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта нажатия, изменение формы и т. д.). Как я уже упоминал в разделе Основные "постулаты" web-дизайна,располагать элементы навигации следует таким образом, чтобы они всегда были на виду, под рукой, то есть так, чтобы пользователю не приходилось отматывать страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы.

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

Итак, мы разобрали все основные компоненты web-страницы и их возможное расположение относительно друг друга.

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

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

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

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

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

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

С чего начать?

Настало время перейти к практическим аспектам web-дизайна. И наиболее насущный вопрос, который возникает обычно при создании первого самостоятельного проекта, вынесен в заголовок этого раздела. Итак, с чего начать? Разумеется, с начала.

Первое, что необходимо сделать, прежде чем браться за разработку любого web-сайта, это заварить чашку крепкого ароматного кофе или чая, сесть за стол и хорошенько подумать. Я не шучу. Подумать следует о целях, которые вы ставите перед собой, создавая новый проект. От выбора целей будут зависеть методы их достижения, в том числе и сам дизайн. От правильной постановки задач будет зависеть успех всего предприятия. Вы хотите домашнюю страничку? Замечательно. Возьмите ручку, лист бумаги и прикиньте, какие тематические разделы должно включать ваше будущее творение, о чем именно вы хотели бы рассказать с его помощью прогрессивной общественности. Вы решили создать некоммерческий информационный сайт? Прекрасно. Определитесь, чему он будет посвящен. Если это развлекательный проект, после того как вы придумаете перечень соответствующих рубрик (например, анекдоты, карикатуры или юмористические рассказы), необходимо подобрать для него подходящее дизайнерское решение, более или менее отвечающее содержанию. У посетителей, скорее всего, вызовет легкое недоумение развлекательный проект, выполненный в стиле серьезного информационного или новостного портала. Быть может, вы хотите опубликовать ресурс, посвященный приготовлению домашних вин? Прогуляйтесь по Интернету, посмотрите, что уже создали ваши коллеги, какие разделы есть на аналогичные сайтах, оцените, какой информации на них не хватает, а какой - наоборот, переизбыток, как эта информация подается потребителю, скучно ее читать или, наоборот, интересно и увлекательно.

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

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

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

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

Создание верстальной таблицы - это, пожалуй, одна из наиболее сложных процедур при разработке нового проекта. Начертить таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря которому web-мастер за несколько секунд рисует все необходимые строки и столбцы на глаз, приходит только с опытом. Здесь трудно дать какие-то конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать верстальную таблицу для нового сайта можно только одним способом: загрузи- те несколько созданных другими авторами web-страниц во FrontPage Express, посмотрите, какие таблицы применяются ими для отображения данных документов, внимательно изучите их, после чего попытайтесь создать пару-тройку своих.

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

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

Сначала рекомендую набрать в любом редакторе все необходимые тексты, причем сохранять их лучше всего в формате plain text, то есть в файле с расширением.txt. Затем надо нарисовать в векторном редакторе (например, в Corel-Draw) необходимые графические элементы, экспортировать их в растровый формат, обработать в редакторе растровой графики (в нашем случае речь идетоб Adobe Photoshop), придав картинкам необходимый размер и разрешение, после чего по мере необходимости оптимизировать их с помощью специальных компрессоров или других аналогичных средств. Подробный рассказ о подготовке графических изображений пойдет в пятом уроке, пока же мы говорим лишь о последовательности действий.

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

Поскольку дизайн всех документов, составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет собой html-документ, содержащий невидимую таблицу, заголовок, все графические объекты, элементы навигации - иными словами, практически все, за исключением непосредственного информационного наполнения. Если впоследствии у вас возникнет необходимость включить в проект новый документ, вам будет достаточно открыть в html-редакторе готовый шаблон и импортировать в него текст и все необходимые иллюстрации. Советую разработать и сохранить на диске два различных шаблона: для информационной страницы и индексного файла. Когда страница будет готова, ее следует проверить на идентичность отображения в различных броузерах при различных экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ в Microsoft Internet Explorer, установите значение цветовой палитры экрана равным 256 цветов, после чего последовательно измените экранное разрешение на 640x480, 800x600 и, на- конец, на 1024x768 точек. Посмотрите, не меняется ли компоновка страницы, не съезжают ли ее элементы относительно друг друга. Проделайте ту же процедуру для Netscape Navigator. Если никаких существенных изменений вы не за- метите, можно быть уверенным, что другие документы, созданные с использованием того же шаблона, с вероятностью 95 % будут отображаться столь же корректно.

В итоге последовательность действий по разработке web-сайта сводится к следующему несложному алгоритму:

• Постановка целей и определение основных задач.
• Создание списка будущих тематических разделов.
• Разработка логической и физической структуры ресурса.
• Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.
• Подготовка текстовых материалов.
• Подготовка графических материалов в векторной форме.
• Экспорт векторных рисунков в растровый формат, оптимизация картинок.
• Создание шаблонов web-страниц.
• Сборка web-страниц и отладка кода.
• Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных броузерах.

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

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

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

• 1. Уникальность;
• 2. Одна из основных задач дизайна web-страниц, создание уникальности, отличия от других. Для достижения индивидуальности, web-дизайнеры прибегают к оригинальным цветовым и художественным решениям, ярким и привлекающим внимание логотипам, что представляют лицо компании, а также удобный и необычно размещенный контент сайта. При этом не стоит забывать, что интерфейс должен оставаться аналогичным по всему сайту, чтобы посетитель не путаясь, находил нужную для себя информацию.
• 3. Привлечение внимания;

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

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

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

Детальное рассмотрение процесса создания сайта, поможет нам точно знать, чем необходимо заняться на различным этапах разработки:

1. Техническое задание (ТЗ);

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

2. Структурирование информации;

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

3. Графическое оформление;

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

4. Верстка;

На данной стадии графическая картинка нарезается на отдельные элементы и с использованием формата HTML (Hyper Text Markup Language - язык разметки гипертекста).Язык трансформируется в код, который можно просматривать с помощью браузера.

5. Вебмастеринг.

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

При создании сайта мы также не должны придерживаться еще одному руководству по дизайну страниц:

• 1. Простота;
• 2. Центрированная разметка;
• 3. Небольшое количество колонок;
• 4. Отдельная верхняя секция;
• 5. Яркие цветные блоки;
• 6. Простая навигация;
• 7. Увеличенный размер шрифтов;
• 8. Вставки большого текста (обычно реализованы в виде графического элемента);
• 9. Индивидуальный логотип.

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

• – Сайт-презентация, такой сайт представляет информацию о фирме, услуге, продукте. Основной задачей данного сайта, по средствам визуального оформления, по максимуму эффективно преподнести содержимое для посетителя страницы. В таком сайте больше идет акцент на графическое оформление, нежели текстовую информацию.
• – Корпоративный сайт, является представителем какой-либо организации (фирмы, университета), но только уже во всемирной сети. Именно к таким сайтам, имеются самые высокие требования по оформлению дизайна Web-страницы. Ясная, четкая структура сайта, соответствующая цветовая гамма, уникальность графических элементов, индивидуальный мощный логотип, будут выделять и придавать "изюминку" такому сайта. Текстовая информация на ровне балансирует с графическим дизайном.
• – Информационные ресурсы, такие сайты чаще всего являются библиотеками, газетами, средствами массовой информации. Как правило, информация, выложенная на данном ресурсе обновляется несколько раз в сутки. Перед разработкой данного типа сайта, необходимо учитывать желание посетителей, а это потребность в содержании, а не в красивом оформлении. Текстовая информация, максимально структурирована, предоставляя посетителю, найти нужную информацию, но напротив, графика сведена к минимуму, показывая лишь четкие относящие к материалу факты.
• – Электронный магазин, данный тип сайта, ставит перед собой задачу, не только быстро и эффективно заполучить внимание посетителя сайта, предоставив интересующую информацию, но и также заинтересовать клиента к покупке. При разработке такого Web-ресурса, в первую очередь необходимо уделить должное внимание сервисному обслуживанию. Поиск по товарам и услугам, удобный и красочный каталог продукции, быстрая связь со службой поддержки и легкая регистрация при оформлении заказа, имеют большую значимость, чем графический дизайн.

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

Введение

Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.

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

web дизайн компьютерный графика

Понятие web-дизайна

Понятие web-дизайна

Веб-дизайн (от англ. webdesign) -- это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку, то есть дело создания сайта вообще: проектирование структуры, навигации и иногда даже движков сайта.

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

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

Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.

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

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

Основные принципы web-дизайна

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

Пособие может использоваться для стационарного и дистанционного обучения при изучении следующих дисциплин: Программирование на языке высокого уровня. Человеко-машинное взаимодействие. Объектно-ориентированное программирование.
Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования JavaScript, графическому редактору Adobe Photoshop, технологии мультимедиа.
К учебному пособию прилагается электронный учебник на компакт-диске, который содержит теоретический материал, примеры реализации различных задач (учебный сайт) и практическую часть (задания, контрольные вопросы и методические указания на выполнение лабораторных работ). Кроме того, на диске находится тестирующая программа, с помощью которой преподаватель может быстро и объективно оценить степень усвоения материала.
Любопытной особенностью электронного учебника является то, что каждый раздел сопровождается спокойной инструментальной музыкой, создающей хорошее настроение.
Данное учебное пособие предназначено для студентов специальности 220400 (230105) - Программное обеспечение вычислительной техники и автоматизированных систем. Наличие электронного учебника позволяет педагогам просто решить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.

1. Глобальные вычислительные сети.

Глобальные сети (как и локальные) состоят из компьютеров, соединенных каналами связи. Глобальные вычислительные сети (ГВС) всего мира объединены между собой с помощью Интернета.
Для работы в ГВС пользователю необходимо иметь соответствующее аппаратное и программное обеспечение. В простейшем случае из аппаратных средств нужно дополнительно установить модем, с помощью которого осуществляется связь по телефонной линии (например, из квартиры). Заметим, что современные ЭВМ оснащены сетевыми картами, и при подключении к сети но выделенному каналу не нужны дополнительные аппаратные средства.
Программное обеспечение делится на два класса:
программы-серверы, размещенные на том узле сети, который обслуживает компьютер пользователя;
программы-клиенты, которые находятся на компьютере пользователя и пользуются услугами сервера.
Глобальные сети предоставляют пользователям разнообразные услуги. ГВС позволяют работать с распределенными базами данных, обмениваться письмами с помощью электронной почты, сообщениями с помощью телеконференций, беседовать в реальном масштабе времени, пересылать файлы и т. д. Каждая услуга (иногда говорят: служба, сервис) работает по определенным правилам (протоколам).

Введение
1. Глобальные вычислительные сети
2. Способы подключения к Internet
3. Коммутация каналов, сообщений и пакетов
4. Протоколы, службы, услуги
5. Браузеры
6. Поисковые системы и каталоги
7. Основные понятия Web-дизайна
8. Структура Web-страницы
9. Сетевые технологии Web-дизайна
10. Язык HTML
10.1. Форматирование текста
10.2. Таблицы
10.3. Графика
10.4. Гиперссылки
10.5. Метатеги
10.6. Карты-ссылки
10.7. Мультимедиа
10.8. Фреймы
10.9. Каскадные таблицы стилей CSS
11. Язык JavaScript
11.1. Порядок запуска скриптов
11.2. Методы ввода информации
11.2.1. Ввод информации с помощью метода соп-firm()
11.2.2. Ввод информации с помощью метода promt()
11.2.3. Ввод информации с помощью текстового поля
11.2.4. Ввод и вывод информации с помощью текстовой области tcxtarca
11.2.5. Интерактивные формы
11.3. Методы вывода информации
11.3.1. Вывод информации с помощью метода alert()
11.3.2. Вывод информации с помощью метода write()
11.3.3. Вывод информации с помощью текстового поля
11.3.4 Вывод информации с помощью созданных окон
11.4. События
11.5. Арифметические операции
11.6. Логические операции и операции сдвига
11.7. Операции со строковыми переменными
11.7.1. Перевод чисел из одной системы счисления в другую.
11.8. Математические функции и константы
11.9. Регулярные циклы
11.10 Операторы условной передачи управления if-else(cond) и switch(x)
11.11 Примеры скриптов
11.11.1 Анимация в строке-заголовке браузера
11.11.2 Кнопка с подсветкой
11.11.3 Реализация итерационных циклов
Приложение 1: Перечень лабораторных работ и заданий, размещенных на оптическом диске
Приложение 2: Порядок запуска тестирующей программы
Приложение 3: Сайт «Самара сия - сама Россия»
Заключение
Список литературы

Бесплатно скачать электронную книгу в удобном формате, смотреть и читать:
Скачать книгу Введение в Web-дизайн, учебное пособие, Алексеев А.П., 2008 - fileskachat.com, быстрое и бесплатное скачивание.

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Подобные документы

Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.

курсовая работа , добавлен 09.01.2014


Этапы развития веб-дизайна. Виды и типы веб-сайтов, теоретические аспекты их создания. Структура веб-сайта и его страниц. Процесс и результат разработки веб-дизайна. Создание сайта факультета архитектуры и дизайна Кубанского государственного университета.

дипломная работа , добавлен 10.11.2015


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

курсовая работа , добавлен 08.10.2013


Понятие web-страницы, классификация. Принципы создания и основные элементы. Пример контента сайта "Академия детства". Стандарты разработки дизайна для сайтов дошкольных учреждений. Шаблон главной страницы. Программный инструментарий по разработке.

курсовая работа , добавлен 13.01.2014


Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.

дипломная работа , добавлен 05.03.2013


Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

дипломная работа , добавлен 25.03.2013


Особенности создания сайта интернет-магазина для частных лиц и организаций. Анализ финансовой и технико-экономической деятельности фирмы. Создание информационной модели сайта, ее базовые элементы. Выбор программного и аппаратного обеспечения сайта.

дипломная работа , добавлен 08.12.2013