Web-конструирование сайтов

Размещено на http://www.allbest.ru/

Введение

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

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

Объект исследования: изучение оформления интернет-ресурса.

Предмет исследования: изучение «Web-конструирования».

Цели исследования:

· Изучить научно-методическую литературу по данной теме.

· Проанализировать этапы построения Web-сайтов.

· Создать, используя бесплатный хостинг, программу AdobePhotoshop, средства HTML сайт.

· Разработать уникальные баннеры, шапки, аватары, которые могли бы использовать другие пользователи.

· Публикация редактированного сайта «Студия дизайн» в сети Интернет.

Рабочая гипотеза: изучение данной темы направлено на формирование знаний, умений и навыков по созданию собственной Web-страницы на основе языка HTML, создание баннера, шапки, аватара и дальнейшее размещение её в Internet.

В целом работу можно принять как положительный опыт исследования web-дизайна в результате, которого создан сайт студия дизайн с вариантами баннера, шапки, аватара и т.д. по адресу: http://web-studios.do.am/ .



1. Создание Web-страницы с помощью языка HTML

HyperText Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему. Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах. Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами. Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо. HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

Структура HTML документа

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор. Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии скоторыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается. Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый(открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация: </P> / Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части: A) Объявление HTML. Пара этих тегов сообщает программе просмотра (браузеру)что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> </HEAD> . Между этими тегами располагается информация о документе(название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера ив списках Избранное (BookMark) . Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных.Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE>Моя первая страница</TITLE> Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами, а второй - перед тегом - это место, куда автор помещает информацию, отформатированную средствами HTML <BODY>. Теперь мы можем написать HTML-код нашей странички: <BODY> В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым. Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста сначала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз. Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph -абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка. Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ.atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде. Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN= left . Возможны также выравнивания вправо ALIGN=right и по центру ALIGN=center. При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег</P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнять текст по центру возможно также тегом <CENTER>. <P align=center> Здесь будут мои личные страницы! <P align=left> На них Вы сможете найти:<BR>- рассказ обо и о моих увлечениях;<BR>- мои фотографии. </BODY> Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями. В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы.Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> можнт содержатьнесколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям длятега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>,(линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления. Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя вашей Веб-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.

2. Программы для создания Web-страниц

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, AllaireHomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно использовать только для создания небольших страниц, так каку них есть много минусов: не поддерживаются проекты, отсутствует подсветка текста..., в общем, работать крайне неудобно. Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими- то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже. Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области. Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю). Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности. Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera). HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково). Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver.HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, иDreamWeaver имеет возможность подключения HomeSite, какредактора для коректировки HTML-кода. Одним из последних HTML-редакторов является EVR Soft 1stPage 2000 v2. Его лозунг - Create 1st class websites! ( Создавайте первоклассные веб-сайты!). Редактор содержит несколько режимов - Normal,Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3. Графические редакторы

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

Давайте теперь рассмотрим наиболее популярные из них.

Редакторы растровой графики - простой (или лучше сказать - простейший) редактор, входящий в стандартную поставку операционных систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш, резинка и т.д.), которые позволяют создавать незамысловатые картинки. К сожалению, для обработки графики он практически не пригоден. Картинку, которую вы видите справа - это большее, на что способен этот редактор. - на сегодняшний день это самый мощный пакет для профессиональной обработки растровой графики. Это целый комплекс, обладающий многочисленными возможностями модификации растрового рисунка, имеющий огромный набор различных фильтров и эффектов, причем есть возможность подключать инструменты независимых производителей. Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа, предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, разрезание картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - Camera of your mind - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен. Еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее. - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи. Пользуясь это программой, чувствуешь себя настоящим художником, также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов. Пакет позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как .cdr (Corel Draw) и .swf (Flash) - безусловно, такой известный графический пакет не мог обойтись без средств для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрих кодов, а также огромные коллекции с изображениями (CorelGallery). - еще один продукт фирмы Adobe, предназначенный для трассировки(перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash. Два способа преобразовать существующий документ Word в содержания страниц - например, индивидуальные начальные страницы и регистрационные формы и графического оформления -например, праздник или общество. По желанию работу можно начать с пустой Web-страницы. Страницу Web можно сделать более интересной, разместив на ней маркированные инумерованные списки, горизонтальные линии, цвета фона, узоры, таблицы, рисунки, видеозаписи, бегущую строку и формы. Большинство этих элементов вводятся в страницу так же, как в документ Word. Однако для упрощения редактирования Web-страниц в Word для этих целей предусмотрены некоторые новые специальные функции и команды. Основное отличие состоит в том, что помимо маркеров в списках можно использовать набор изображений.

Набор таких изображений находится в диалоговом окне Список (меню Формат). Кроме графических изображений, в диалоговом окне предлагаются текстовые маркеры, поддерживаемые HTML для Web-страниц. Графические маркеры сохраняются. Для ее создания выберите команду Горизонтальная линия в меню выберите нужную линию. При сохранении Web-страницы такая линия сохраняется вместе с Web-страницей как графический файл с именем image gif, image1.gif и т. п. Чтобы сделать документы Word и Web-страницы более привлекательными, используйте различные виды фона, в том числе текстурную заливку. Можно создать подложку, которая будет видна только в напечатанном документе. Для создания и редактирования структуры таблицы используется команда. Так как на Web-страницах таблицы часто используются как скрытое средство форматирования (например, для размещения текста и рисунков), вставляемые в текст таблицы не имеют границ. Для создания таблиц используйте команду Границы (меню Таблица). Границы, добавленные к таблицам на Web-страницах, изображаются средствами просмотра Web. Когда Web-страница сохраняется в формате HTML впервые, все рисунки преобразуются в форматы. Чтобы вставить рисунок в Web-страницу, выберите команду Рисунок в меню Вставка, а затем команду из файла или Картинки. Если вставляемый рисунок записан в формате JPG, он сохраняется в формате JPG. Если рисунок записан в другом формате, например, TIF, он преобразуется в формат GIF. Если рисунок вставляется из файла, при сохранении он копируется в ту же папку, что и Web-страница, если неустановлен флажок. Расположение текста и рисунков можно задать дополнительно с помощью таблицы. Графические объекты, например, авто фигуры, надписи и фигурный текст можно использовать в качестве объектов типа «Рисунок Microsoft Word». После закрытия документа эти элементы нельзя будет вновь отредактировать.

Они будут преобразованы в изображения формата GIF.

4. Дизайн веб-сайта

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

Но в основном web-дизайн означает умение красиво оформить web-страничку на сайте. Если вы написали несколько слов, на обычном default'ном фоне, это не дизайн.

Зачем это нужно ?

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

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

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

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

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

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



5. Модульные сетки, логотипы, баннеры, шапки, аватары

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

Лучшим доказательством профессионализма разработчика сайтов является умение структурировать имеющуюся информацию и создавать систему навигации по сайту таким образом, чтобы даже самый далекий от мира Интернета человек не чувствовал себя на сайте жалким «чайником», который даже не может разобраться в интерфейсе. Англоязычные разработчики сайтов оперируют термином «usability» - это целая наука, которая включает в себя сведения о том, как разрабатывается понятный и удобный дизайн сайтов, ориентированный на рядового пользователя. Профессиональный веб-дизайнер должен не просто упорядочить весь объем информации и предоставить его в доступном виде на сайте - он должен также создать понятный интерфейс, которым будет удобно и приятно пользоваться каждому посетителю. Главная роль в проектировании интерфейса отводится модульной сетке. Что она из себя представляет? Для того чтобы вникнуть в понятие «модульная сетка», достаточно взять в руки книгу или журнал. В книге информация представлена на всю ширину страниц (не считая поля). Это - пример одноколоночной верстки. В журнале, как правило, текст разбивается на две колонки; в газете же колонок может быть несколько: три, четыре, или даже шесть. Вообще, веб-дизайн многое заимствовал из полиграфии: и основы публикации текстов, и принципы композиции, и, как мы уже выяснили, модульные сетки. В общем, информация на сайте структурируется так: чем больший объем информации нужно разместить на веб-сайте, тем более сложную модульную сетку нужно разрабатывать. Хотя и здесь бывают исключения. Дизайн сайта-визитки, к примеру, в основном обходится одноколоночной модульной сеткой. Однако на разработке модульной сетки создание дизайна сайта не заканчивается. Немаловажное значение в успешной работе сайта имеет наличие логотипа компании. В случае авторских проектов логотип, в сущности, не обязателен: достаточно наличия уникальности автора и его фамилии (или никнейма). Однако в случае проектов компаний, продвигающих свои услуги и/или товары, логотип не только желателен, но и обязателен. Этот графический символ должен быть оригинальным и узнаваемым. Главное условие при создании логотипа - его простота. На самом деле, мало кто с легкостью запомнит лихо закрученные линии, поэтому работа по созданию логотипа сайта не так проста, как кажется.

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

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

Традиционные баннеры представляли собой графические изображения в формате GIF или JPEG. Изображения на них могли быть как статические, так и анимированные (в формате GIF эффект движения достигается чередованием нескольких изображений).

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

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

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

Шапка для сайта является самым красивым и заметным элементом на сайте и зачастую, от её привлекательности зависит первое впечатление о дизайнере и самом сайте. Качественные бесплатные шапки для сайта для веб мастера в .PSD формате, отлично впишутся в любой сайт.

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

Откроем суть столь распространенного понятия, как аватар. Аватарка или ава является вашим представлением в Интернете, вашим внутренним я, изображенным на картинке, ваш модный прикид. Ведь с человеком всегда интересней и приятней общаться, когда у него есть лицо, а не стандартная картинка. Как же выглядит прикольная аватара или ава, да кстати говоря, их еще называют юзерпик, что означает пользовательская картинка (user picture). Этот самый юзерпик, в большинстве случаев располагается на сайтах возле ника юзера, как бы показывая его лицо. Название Аватара произошло от санскритского слова, которое означает «нисхождение» или «воплощение». Так что была, есть и будет необходимость пользователей в прикольных аватарках в Интернете для того, чтобы показать свое лицо, произвести первое впечатление, а не оставаться серым и блеклым. Возможно, вы хотите выразить свою половую, социальную, культурную принадлежность, показать остальным пользователям свою маленькую обработанную фотографию или юзерпик, отражающий ваше внутренне состояние в данный момент. Все это сделать просто, разместив свою лучшую аватарку на форуме или блоге, при общении в icq или мирке. Если говорить о социальных сетях, таких как одноклассники или вконтакте, то здесь вам нужна аватарка или юзерпик как солнце летом, ваш прикольный аватар для вконтакте. Мы потрудились, чтобы сделать специально для вас серию аватарок, в которой вы легко можете скачать аватар!

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

Безусловно, создать аватар для контакта крайне нужно каждому! Однако, на нашем сайте вы можете подобрать аватарку бесплатно для любого любимого сайта и социальной сети.

6. Создание шапки для сайта в Adobe Photoshop

Рассмотрим как можно быстро сделать несложную шапку для сайта на AdobePhotoshop. Шапка на самом деле несложная, но если вы подключите свою фантазию, то может получиться очень даже хорошо.

И так, вооружаемся "фотошопом" и приступайте.

1. Первое, что нужно сделать, это создать новый холст, пусть он будет размером 800x150px:

2. Заходим в Layer Style (кликните правой клавишей по слою, выберите Blending Options) вкладка Gradient Overlay. Следующим образом настраиваем градиент (красным цветом на картинке отмечены шестнадцатеричные значения цветов):

Жмём везде «Ok» и получается фон.

3. После этого выбираем инструмент Pen Tool и рисуем фигуру. Подключайте свою фантазию. Возьмём цвет #313e5a:

4. Заходим в Layer Style на вкладку Drop Shadow и выставляем следующие параметры:

5. Теперь выбираем кисточку с пятнами краски (если у Вас в наборе нет подобной кисточки, поищите в Интернете), создайте новый слой и что-нибудь «наляпайте» примерно.

6. Создаём новый слой ещё раз, смешивание (Blend Mode) измените с Normal на Overlay и снова нарисуем что-нибудь:

7. Создайте новый слой и залейте его любым цветом (с помощью Paint Bucket Tool), затем непрозрачность заливки Fill уменьшите до 0%.

Зайдите в Layer Style на вкладку Inner Shadow и настройте следующие параметры: 8. А на вкладке Pattern Overlay настройте заливку текстурой. В качестве текстуры выберите какую-нибудь штриховку.

9. Напишите название для сайта. Самый ответственный момент.

10. Раскрасьте его.

11. Нарисуйте ещё что-нибудь и напишите слоган вашего сайта.

12. Создайте копию слоя с названием сайта (для этого перетащите слой на иконку создания нового слоя или кликните по слою правой клавишей и там выберите Duplicate Layer). Отразите по вертикали копию слоя с названием сайта (Edit --> Transform --> Flip Vertical) и разместите её (надпись) ниже:

13. Добавьте маску слоя (на панели слоёв кликните по кнопке Add layer mask).

14. Выберите инструмент Gradient Tool (градиент) и чёрно-белым градиентом залейте маску сверху вниз:

15. Снизу напишите названия основных разделов сайта:

16. Создайте новый слой. С помощью инструмента Rectangular Marque Tool выделите верхнюю часть изображения и залейте её белым цветом (с помощью Paint Bucket Tool):

17. Добавьте к данному слою маску и залейте её чёрно-белым градиентом сверху вниз:

Вот так можно нарисовать шапку для сайта на Photoshop. Получиться симпатично.

7. Создание сайта «Студия web-дизайн»

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

Макет страницы задает все: от организации материала внутри одной страницы до структуры сайта в целом. В процессе разработки макета необходимо было учесть общие элементы всего сайта, количество уровней заголовков, разделить фрагменты текста, помещенные на одной странице. Изучая макеты других сайтов, отмечали то, что нам понравилось и возможное применение это у себя. Профессиональные дизайнеры делают так всегда. Но все-таки самое главное -- это принцип «здесь и сейчас», который говорит о том, что каждый элемент должен быть в нужное время в нужном месте, т.е. построено в едином, логичном, строго выдержанном стиле. Мы учились и делали свои первые шаги WEBдизайна. Адрес сайта http://web-studios.do.am/

Исходный код-HTML

<style type="text/css">.caex1z_hk {position:absolute;right:0px;top:0px;} div > table.caex1z_hk {position:fixed;}</style>

<!--[if gte IE 5.5]><![if lt IE 8]><style type="text/css">

table#aex1z_hk {position:absolute;left:expression((-(document.getElementById("aex1z_hk")?document.getElementById("aex1z_hk").offsetWidth:0)+(document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth)+(ignoreMe2=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft))+'px');top:expression((ignoreMe=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+'px');}

</style><![endif]><![endif]-->

<script type="text/javascript">function faex1z_hk(a){try{document.getElementById("paex1z_hk").style.display=a;}catch(e){}try{document.getElementById("aex1z_hk").style.display=a;}catch(e){}}function f2aex1z_hk(){faex1z_hk('');}</script> <div id="paex1z_hk"><table border="0" cellspacing="0" cellpadding="0" class="caex1z_hk" id="aex1z_hk" style="z-index:10000;width:230px"><tr><td valign="top" width="12"><a href="javascript://" onclick="faex1z_hk('none');return false;" title="Закрыть"><img alt="" src="http://s106.ucoz.net/img/ma/cv.gif" style="border:0;width:12px;height:54px;"></a></td><td width="218"><script type="text/javascript">document.write('<iframe frameborder="0" width="220" scrolling="no" style="height:330px;background-color:#FFFFFF;border-bottom:1px solid #000000;border-left:1px solid #000000" src="http://sticker.yadro.ru/ad/218x330.html?place=17;layout=ucoz-square;bgcolor=FFFFFF;fgcolor=CC002B`)};uaw='+(window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth)+'"></iframe>');</script></td></tr></table></div><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-ru">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Студия вэб дизайна... - Главная страница</title>

<link type="text/css" rel="StyleSheet" href="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/style.css" />

<link rel="stylesheet" href="/css/jquery.fancybox-1.2.6.css" type="text/css" media="screen" />

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="/css/ie6style.css" />

<script type="text/javascript" src="/js/DD_belatedPNG_0.0.8a-min.js"></script>

<script type="text/javascript">DD_belatedPNG.fix('img.overlay, div#content-bg-bottom');</script>

<![endif]-->

<meta content="Студия вэб дизайна... - Главная страница" name="generator"/><link rel='stylesheet' id='contact-form-7-css' href='http://www.elegantthemes.com/preview/MyResume/wp-content/plugins/contact-form-7/styles.css?ver=2.2' type='text/css' media='all' />

<link rel="stylesheet" href="/style-Canvas.css" type="text/css" media="screen" />

<script type='text/javascript' src='/js/jquery.js'></script>

<link rel='index' title='Студия вэб дизайна...' href='http://web-studios.do.am/' />

<meta name="generator" content="uCoz" />

<script type="text/javascript">

//<![CDATA[

var _wpcf7 = { cached: 1 };

//]]> сайт дизайн страница редактор

</script>

<link type="text/css" rel="StyleSheet" href="http://s106.ucoz.net/src/layer1.css" /><script type="text/javascript" src="http://s106.ucoz.net/src/u.js"></script><style type="text/css">.UhideBlock {display:none}</style>

</head>

<script>

var div = document.getElementsByTagName('div')[0];

div.innerHTML = '';

</script>

<link href="/images/favicon.ico" rel="icon" type="image/x-icon" />

<body>

<div id="utbr8214" rel="s106"></div>

<div id="wrapper">

<div id="content">

<div id="content-bg-bottom">

<div id="header">

<ul>

<li class="active"><a href="#" rel="resume">Главная</a></li>

<li><a href="#" rel="contact">Заказать</a></li>

<li><a href="#" rel="connect">Связь</a></li>

</ul>

<br class="clear" />

<div id="logo">

<img class="avatar" alt="" src="http://web-studios.do.am/Untitled-1.jpg" width="79" height="79" />

<img class="logo" src="http://web-studios.do.am/Untitled-1.png" alt="" />

<img class="overlay" src="/images/photo-overlay.png" alt="" />

<span>

<br />

<!-- <bt> --><!--<s5158>-->joker_one94@mail.ru<!--</s>--><!-- </bt> --> <br />

<!-- <bt> --><!--<s5156>-->vk.Saneshot<!--</s>--><!-- </bt> --><!--<s3196>--> </span>

</div>

</div>

<div id="inside">

<div id="inside-bg-top">

<div id="inside-bg-bottom">

<div class="resume slide"> <div class="page-content">

<div class="entry">

<!--U1OP1Z--><p><strong><span style="color: #000000;">О нашей дизайн-студии.</span></strong><br />

Здравствуйте дорогие пользователи!Мы очень рады видеть вас на нашей маленькой дизайн студии...Мы изготовим заказ за маленький срок.Что мы можем предложить увидите ниже.(Спасиибо за внимание).</p><!--/U1OP1Z-->

</div>

<h2>Объективность</h2>

</div>

<div class="page-content">

<div class="entry">

<!--U1OPPPP1Z--><a class="gallery-item" href="http://marvel-comics.net.ru/" rel="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-bold-lightbox-5.jpg&amp;h=222&amp;w=388&amp;zc=1"><img style="opacity: 1; top: 0px; left: 0px;" src="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-bold-lightbox-5.jpg&amp;h=59&amp;w=59&amp;zc=1" alt=""></a>

<a class="gallery-item" href="http://smiles.ucoz.net/" rel="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-ephoto-lightbox-2.jpg&amp;h=222&amp;w=388&amp;zc=1"><img style="opacity: 1; top: 0px; left: 0px;" src="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-ephoto-lightbox-2.jpg&amp;h=59&amp;w=59&amp;zc=1" alt=""></a>

<a class="gallery-item" href="http://gamer145.ucoz.com/" rel="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-ebusiness-lightbox-1.jpg&amp;h=222&amp;w=388&amp;zc=1"><img style="opacity: 1; top: 0px; left: 0px;" src="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-ebusiness-lightbox-1.jpg&amp;h=59&amp;w=59&amp;zc=1" alt=""></a>

<a class="gallery-item" href="http://xn----7sbkrciuiy4i.c4cs.ru/" rel="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-cherrytruffle-lightbox-3.jpg&amp;h=222&amp;w=388&amp;zc=1"><img style="opacity: 1; top: 0px; left: 0px;" src="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-cherrytruffle-lightbox-3.jpg&amp;h=59&amp;w=59&amp;zc=1" alt=""></a>

<a class="gallery-item" href="http://planetofkids.ucoz.ru/" rel="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-puretype-lightbox-3.jpg&amp;h=222&amp;w=388&amp;zc=1"><img style="opacity: 1; top: 0px; left: 0px;" src="http://www.elegantthemes.com/preview/MyResume/wp-content/themes/MyResume/timthumb.php?src=http://www.elegantthemes.com/v3/images/thumbs/features-puretype-lightbox-3.jpg&amp;h=59&amp;w=59&amp;zc=1" alt=""></a><!--/U1OPPPP1Z--></div>

<h2>Портфолио</h2>

</div>

<div class="page-content">

<div class="entry">

<!--U1OPP1Z--><p><strong><span style="color: #000000;">Изготовим!</span></strong></p>

<p>По вашему желанию мы сможем изготовить...</p>

<ul>

<li>Шапку для сайта</li>

<li>Логотип(Фирмы,компании,сайта)</li>

<li>Баннера</li>

<li>Аватарки</li>

<li>Красиво оформить фото</li>

</ul><!--/U1OPP1Z-->

</div>

<h2>Возможности</h2>

</div>

<div class="page-content">

<div class="entry">

</div>

<h2></h2>

</div>

</div>

<div class="contact slide">

<div class="page-content">

<div class="entry ">

<script type="text/javascript">var sblmb1=0;function funhSPKw(){try {var tr=checksubmit();if(!tr){return false;}}catch(e){}if (sblmb1==1){return false;}sblmb1=1;new _uWnd('sendMFe1','Отправка сообщения',-350,-100,{autosize:0,modal:1,closeonesc:1,resize:0},{form:'mffhSPKw',type:'POST',url:'/mail/'});}</script><form method="post" name="mform" id="mffhSPKw" style="margin:0" onsubmit="funhSPKw();return false;"><input type="hidden" name="jkd498" value="1"><input type="hidden" name="jkd428" value="1"><table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">

<tr><td width="35%">Имя заказчика <font color="red">*</font>:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>

<tr><td>Ваш E-mail <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>

<tr><td>Web-site:</td><td><input type="text" name="f5" size="30" style="width:95%;" maxlength="70"> </td></tr>

<tr><td>Ваш заказ <font color="red">*</font>:</td><td><textarea rows="7" name="f2" cols="30" style="width:95%;"></textarea> </td></tr>

<tr><td>Как вам наш сайт?:</td><td><select size="1" name="f6"><option>Отлично</option> <option>Хорошо</option> <option>Неплохо</option> <option>Плохо</option> <option>Ужасно</option></select></td></tr>

<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить заказ"></td></tr>

</table><input type="hidden" name="id" value="1" /><input type="hidden" name="a" value="1" /><input type="hidden" name="o" value="1" /></form>

</div>

<h2>Сделать заказ</h2>

</div>