Создание сайта

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

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

ОГЛАВЛЕНИЕ

Введение

1. Предпроектный анализ

1.1 Краткий обзор проекта

1.2 Информационная структура сайта

1.3 Анализ сайтов-конкурентов

2. Разработка дизайна сайта

2.1 Основная концепция

2.1.1 Цветовое решение

2.1.2 Подбор шрифтов

2.1.3 Изготовление графических элементов

2.2 Структура отдельной страницы

2.3 Создание графических шаблонов

2.4 Программные средства реализации дизайна

3. Технология реализации верстки

3.1 Формирование файловой структуры

3.2 Создание html-шаблонов

3.3 Использование CMS

3.4 Заполнение шаблонов контентом

3.5 Программные средства реализации верстки

Заключение

Список используемых источников

Приложения

ВВЕДЕНИЕ

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

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

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

Разработка сайта включает в себя несколько этапов:

· предпроектный анализ: постановка цели и определение задач сайта, сбор необходимой информации, определение целевой аудитории, анализ сайтов-конкурентов и др.

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

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

· тестирование функциональности и юзабилити.

1. Предпроектный анализ

1.1 Краткий обзор проекта

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

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

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

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

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

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

1.2 Информационная структура сайта

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

1. Галерея моды для животных

2. Выбор гардероба

3. Мастерская дома

4. Уход за одеждой

5. Гостевая книга

Три дополнительных раздела обеспечивают дополнительное удобство представления информации:

1. Одежда для собак

2. Одежда для кошек

3. Одежда для птиц

Раздел «Галерея моды для животных» будет включать в себя следующие подразделы (категории), содержащие фотоматериалы:

1. Модные собачки

2. Модные кошечки

3. Модные птички

4. Питомцы на модных подиумах

1.3 Анализ сайтов конкурентов

сайт скрипт навигация сервис

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

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

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

Тем не менее, существует множество интересных, красивых и во всех отношениях положительных сайтов. Например:

1. http://little-angels.ru - сайт одежды для собак торговой компании «Little Angels». На сайте отлично представлена и структурирована продукция компании, сопровождающаяся фотографиями товаров. Очень удобная навигация: левое меню сайта остается постоянным и легко читаемым на всех страницах, дублирующая навигация сверху каждого раздела. Игривое настроение придают сайту не только представленные товары, но и характерные округлые кнопки меню, белый фон, чистые оттенки, округлые шрифты - эти составляющие вызывают эмоции умиления, часто сопровождающие любителей животных.

2. http://www.fashioncats.sitecity.ru - сайт о моде для голых кошек. Простой в отношении дизайна, на поверку оказался очень богатым по содержанию, в частности - с множеством фотоматериала. Сайт смотрится выигрышно за счет контрастного сочетания фона - мерцающего ночного неба - и пурпурных кнопок, шрифтов. Этим подчеркивается характер главных героинь - гламурных кошек. Стильный, запоминающийся, с Flash-aнимацией и удобной подачей информации.

При поиске сайтов схожей тематики в поисковых системах «TUT.BY», «Yandex», «Google» для запросов использовались следующие словосочетания: одежда для питомцев, аксессуары для животных, мода для собак, костюм для кошки, товары для животных, зоомагазин. Некоторые были заменены на более узкоспециализированные, например, «мода для любимцев» на «мода для собак». Они и составили семантическое ядро сайта.

2. Разработка дизайна сайта

2.1 Основная концепция

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

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

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

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

Среди трех разработанных вариантов дизайнов и цветовых схем сайта (рис. 1.2.1) выбран один, наиболее удачный (вариант «в»).

a) б)

в)

Рисунок 2.1 - Варианты дизайна / цветового решения сайта

Цветовое решение

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

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

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

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

Эмоционально-пространственные свойства самых распространенных цветов следующие:

· желтый - визуально удаляет, повышает, расширяет, раздражает; создает ощущение тепла, сухости, легкости, рыхлости; настроение бодрости, веселья;

· оранжевый - визуально приближает, утолщает; создает ощущение сухости, высокой температуры; настроение радости;

· фиолетовый - визуально снижает, сжимает; создает ощущение прохлады, прочности, массивности, густоты, эмоционально лишает воли; наводит грусть;

· синий - визуально снижает, укорачивает; создает ощущение холода, влажности, плотности; эмоционально делает пассивным; утешает, сосредотачивает, успокаивает; ленивый, антисептический, чистый;

· зеленый - визуально немного сужает, объединяет; создает ощущение холода; эмоционально успокаивает, уравновешивает; приятный, здоровый, натуральный;

· красный - визуально приближает, ограничивает; создает ощущение тепла, тяжести; возбуждает.

Замечено, что:

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

· белый - визуально раздвигает, расширяет, повышает; создает ощущение легкости и рыхлости; эмоционально оставляет равнодушным;

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

· серый - визуально ничего не меняет; создает ощущение безразличия; ощущение умеренности, солидности.

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

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

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

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

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

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

Для смягчения и разбавления контрастов, расслабления взгляда используются оттенки серого в некоторых позициях сайта (подвал, правый блок, тени от объектов).

Таким образом, на основании вышеизложенного были выбраны следующие цвета страницы и основных элементов:

1. фон - белый;

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

3. ссылки в основных меню - белый на контрастном черном и сливовом фонах;

4. заголовки - темно-фиолетовый на фоне цвета охры (контраст повышает разборчивость текста).

Подбор шрифтов

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

В компьютерных приложениях часто термином «шрифт» называют гарнитуру, а термином «размер» - кегль (например, Word).

Шрифты являются:

· одним из самых важных элементов дизайна сайта;

· элементом стиля;

· носителем информации;

· элементами концентрации внимания пользователя.

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

Для текстов на веб-странице используются мелкие шрифты размером от 7 до 12 пунктов. Удобство пользователя во многом определяются (кроме размера):

· гарнитурой,

· цветом фона,

· цветом текста,

· наличием вспомогательной графики,

· размером текстовой колонки и полей, межстрочным и межсимвольным расстоянием.

Самой легким для чтения в Интернете является гарнитура Verdana, которая создавалась именно для этой цели. Применяются также и такие простые и строгие гарнитуры, такие, как Arial, Courier, Tahoma и Georgia.

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

Подбор оптимального шрифта и подгонка его по месту - важная часть любого проекта.

Желательно чтобы текст был выполнен темным цветом на светлом фоне и был достаточно контрастным. Выворотка (белый текст на темном фоне) снижает читабельность в несколько раз, поэтому может применяться лишь эпизодично.

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

Читать же текст на ярком фоне, а тем более на пестром фоне довольно затруднительно.

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

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

Слишком малые межсимвольные и межстрочные расстояния значительно снижают комфортность чтения

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

Проанализировав предполагаемый стиль проектируемого сайта, выбор шрифта сделан в пользу «Verdana» для основного текста и ссылок, как наиболее распространенного и универсального, и «Century Gothic» для заголовков для придание характерности.

Что касается кегля выбранных гарнитур, то размеры были распределены следующим образом:

· для основного текста, пунктов меню - 12 pх;

· для заголовков групп меню и статей - 14 pх.

Цвета текста, заголовков и ссылок определены в разделе 2.1.1.

Графические элементы

Определяющим элементом фирменного стиля на сайте является логотип.

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

В широком смысле логотип является лицом сайта. Именно на него посетитель обращает внимание в первую очередь (рис. 2.1.3.1).



Рисунок 2.1.3.1 - логотип

Шапка являет собой «визуал» - центральное изображение композиции и самую выразительную ее часть (рисунок 2.1.3.2). Она одинакова на всех страницах сайта, т.е. посетитель будет ее наблюдать (даже боковым зрением) все время своего пребывания на сайте, что способствует запоминаемости сайта.

Рисунок 2.1.3.2 - шапка сайта

Характерными на сайте могут стать и маркеры списков (рисунок 2.1.3.3)

a) б)

Рисунок 2.1.3.3 - маркеры списков

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



Рисунок 2.1.3.4 - дизайн макет

2.2 Структура отдельной страницы

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



Рисунок 2.2.1 - макет страницы сайта

Страницу можно разбить на две значимые зоны, на которых располагаются все элементы сайта (рис. 2.2.1). Зона 1 - шапка сайта, 2 - информационная зона.

В свою очередь на первой из них располагаются элементы:

3 - логотип;

4 - основное меню;

5 - форма поиска.

Во второй области:

6 - дополнительное меню;

7 - основной контент;

8 - текстовый блок;

9 - дублирующая навигация.

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

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

2.3 Создание графического шаблона

На всех страницах сайта будет использован одинаковый шаблон:

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

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

2.4 Программные средства реализации дизайна

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

1. CorelDraw Х3 - на этапе разработки схем / цветовых карт сайта, прорисовки некоторых элементов дизайна, например, логотипа.

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

Все графические данные в компьютере можно разделить на две большие ветви: растровую и векторную. Векторы представляют собой математическое описание объектов относительно точки начала координат. Большинство векторных форматов могут также содержать внедренные в файл растровые объекты или ссылку на растровый файл (технология OPI). Сложность при передаче данных из одного векторного формата в другой заключается в использовании программами различных алгоритмов при построении векторных и описании растровых объектов.

Растровый файл представляет собой прямоугольную матрицу (bitmap), разделенную на маленькие квадратики - пикселы (pixel - picture element). Растровые файлы можно разделить на два типа: предназначенные для вывода на экран и для печати. Растровые форматы также отличаются друг от друга способностью нести дополнительную информацию: различные цветовые модели, альфа-каналы, слои различных типов, возможности сжатия и т.д.

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

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

Версия CorelDraw X3 использовалась в данной работе. Компания Corel позиционирует пакет CorelDraw Graphics Suite X3 для трёх ключевых групп: профессионалов-дизайнеров в области рекламы и печати, затрачивающих большое время на создание и редактирование графики, работу с текстом, ретуширование фотографий; бизнес-пользователей, время от времени прибегающих к созданию маркетинговых печатных и web-материалов дома, своими силами; наконец, студентов и преподавателей, разрабатывающих дома и в учебных аудиториях.

Минимальной конфигурации, приведенной в инструкции, соответствует большинство ноутбуков и настольных ПК:

· Windows 2000 с последним SP, Windows XP Tablet PC, Windows XP с последним SP, Windows XP Home, Windows XP Professional, Windows XP Media Edition или 64-битная версия Windows XP

· 256 Мб RAM, 200 Мб свободного места на винчестере

· Процессор Pentium III, 600 МГц

· Разрешение монитора - 1024 х 768 или лучше

· CD-ROM

· Мышь или графический планшет

Текущая версия продукта - CorelDRAW Graphics Suite X4, доступна только для Microsoft Windows. Более ранние версии выпускались также для Apple Macintosh и для GNU/Linux.

Adobe Photoshop - растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems. Является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом фирмы Adobe. В настоящее время Photoshop доступен на платформах Mac OS и Microsoft Windows.

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

Photoshop тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady, Adobe Illustrator, Adobe Premiere, Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т.д. для телевидения, кинематографа и всемирной паутины.

Основной формат Photoshop, PSD, может быть экспортирован и импортирован во весь ряд этих программных продуктов. Из-за высокой популярности Photoshop, поддержка его формата файлов, PSD, была реализована в его основных конкурентах, таких, как Macromedia Fireworks, Corel Photo-Paint, Pixel image editor, WinImages, GIMP, Jasc Paintshop Pro и т.д.

Программа позволяет легко изменять цветовое представление документов (битовое, в градациях серого, дуплекс, индексированные цвета, RGB или CMYK). Photoshop поддерживает ряд цветовых моделей: RGB, LAB, CMYK, Grayscale, Bitmap, Duotone.

Версия (10.0) имеет название «Photoshop CS3», которая и использовалась в работе над проектом. Аббревиатура «CS3» означает, что продукт интегрирован в третью версию пакета программ «Adobe Creative Suite». Последние версии включают в себя Adobe Camera RAW - плагин, который позволяет читать ряд RAW (формат данных) - форматов различных цифровых камер и импортировать их напрямую в Photoshop.

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

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

3. технология Реализация верстки

3.1 Файловая структура

Для упорядочивания файлов при реализации проекта была сформирована файловая структура.

Основные, функциональные файлы находятся в одной папке, в папке проекта our_j. Изображения, которые используются для верстки шаблона - в папке imаges, которая находится в основной папке шаблона проекта myshablon. Рисунки, иллюстрирующие информационные статьи сосредоточены в папке pic.

Таким образом, вся файловая структура сайта делает проект более гибким управлению и модификации каких-либо файлов или изображений.

3.2 Создание html-шаблонa

Cтраница сайта с точки зрения своей компоновки имеет:

· общую структуру;

· композиция отдельных блоков.

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

Удобная первоначальная организация HTML-шаблона позволяет легко ориентироваться в нем. Сюда входит: заголовочная часть документа <head>, заголовок документа <title>, метаданные, содержащие служебную информацию, и тело документа <body>.

Особое внимание следует обратить на метаданные KEYWORDS и DESCRIPTION, так как именно они содержат информацию, считываемую поисковыми системами. При написании контента к атрибуту KEYWORDS были выбраны слова семантического ядра содержания сайта (см. раздел 1.3). Для DESCRIPTION сформулированы несколько коротких фраз, красиво объясняющих назначение ресурса.

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

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

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

Макет страницы создается на основе таблицы. В первой ее ячейке раполагается вложенная таблица для создания шапки. Ниже таблица основного содержание: с двумя боковыми колонками фиксированной ширины 259pх и одной центральной - неопределенной ширины. Средняя колонка наследует от <body> цвет фона background-color: white и имеет ширину, полученную вычитанием от ширины всей таблицы (1000px) двух ширин боковых колонок.

Шапка сайта представляет собой таблицу 3*2, вложенную в первую ячейку основной таблицы, и состоит из трех колонок. Левая и правая образованы слиянием с ячейками из нижнего ряда, ширина их определяется изображениями header1.jpg и header2.jpg соответственно. Между ними ячейка, содержащая логотип logo.gif, а под ней - ячейка с черным фоном с основным меню сайта.

Остальные элементы присутствуют в виде вложенных таблиц и блочных вхождений.

Таким образом, мы получаем следующий html-код для отдельной страницы: приведен в приложении В

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

3.3 Использование CMS

Система управления содержимым / контентом (англ. Content management system, CMS) - компьютерная программа, используемая для управления содержимым чего-либо. Обычно это содержимое рассматривается как неструктурированные данные предметной задачи в противоположность структурированным данным, обычно находящимися под управлением СУБД. Обычно такие системы используются для хранения и публикации большого количества документов, изображений, музыки или видео.

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

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

Для управления проектируемым в рамках данного проекта сайтом была выбрана CMS JOOMLA.

Joomla представляет собой набор скриптов, написанных на языке программирования PHP. Этот язык был специально разработан для написания вэб-приложений.

В вэб-приложениях существуют две стороны выполнения кода ? серверная и клиентская. К клиентской части относятся HTML, CSS, Javascript, а к серверной ASP, JAVA, PHP и т.д. Исходя из этого, для выполнения скриптов Joomla, необходимо наличие вэб-сервера с поддержкой PHP и MySQL (рекомендуется Apache версии 1.3 и старше) и вєб-браузера у пользователя (самые популярные - Internet Explorer, Mozilla Firefox, Opera).

Joomla обладает следующими характеристиками:

· Полностью основанный на БД движок с использованием PHP/MySQL.

· Модуль безопасности для многоуровневой аутентификации пользователей / администраторов.

· Секции новостей, продукции или услуг легко редактируемы и управляемы.

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

· Полностью настраиваемые схемы расположения элементов, включая левый, правый и центральный блоки меню.

· Форум / Опросы / Голосования для эффективной обратной связи.

· Работа под Linux, FreeBSD, MacOSX, Solaris, AIX, SCO, WinNT, Win2K.

Joomla обладает широкими возможностями администрирования, например:

· Создание неограниченное количества страниц.

· Четкая организация структуры сайта.

· Начало и окончание публикации любых материалов можно запрограммировать по календарю.

· Ограничение доступ к определенным разделам сайта только для зарегистрированных пользователей.

· Секции новостей, продукции или услуг легко редактируемы и управляемы

· Настраиваемые схемы расположения элементов.

· Закачка изображений при помощи браузера в собственную библиотеку - для последующего использования с любого места сайта.

· Опросы и голосования для эффективной обратной связи.

· Различные модули - такие как последние новости, счетчик посещений, подробная статистика посещений, гостевая книга, форум и т.д.

· Возможность скрыть / показать этих модули и на разных страницах

· Создание нескольких форм обратной связи для каждого контакта.

· Изменение порядка объектов, включая новости, вопросы, статьи и т.д.

· Генератор показа случайной новости.

· Иерархия объектов - количество секций, разделов, подразделов и страниц, зависит от вашего желания.

· Библиотека изображений позволяет хранить все GIF- и JPEG-файлы под рукой для лёгкого доступа.

· Менеджер рассылки новостей.

· Менеджер архива для старых статей.

· Выбор из трех визуальных редакторов, что упрощает редактирование материалов до уровня редактирования текста в программе Word.

· Предварительный просмотр перед окончательным размещением.

· Экономное использование места на сервере за счет использование БД MYSQL.

· Возможность использования адресов страниц адаптированных для лучшей индексации всеми поисковыми системами.

Для работы над проектом понадобилось установить некоторые компоненты: EasyBook, EasyGallery, ARTIO JoomSef.

EasyBook

C помощью компонент для Joomla EasyBook создан раздел «Гостевая книга» на сайте. Его достоинствами являются:

· Уведомления на e-mail админу при добавлении нового отзыва

· Отображение информации о пользователе (имя и версия браузера, IP адрес, email адрес)

· Поддержка смайлов

· Обеспечение защиты от спамеров с помощью CAPTCHA (код подтверждения)

EasyGallery

Для организации галереи использован компонент EasyGallery для Joomla. Компонент поддерживает несколько режимов загрузки изображений, в том числе zip-архива и сканирование директории на сервере, поддерживает категории и подкатегории, обеспечивает автоматическое создание миниатюр изображений, а также автоматическое масштабирование при просмотре слишком больших изображений.

ARTIO JoomSef

Одним из необходимых компонентов, установленных в данную CMS, стал ARTIO JoomSef, предназначенный для генерации человеко-понятных ссылок в Joomla, отличающийся простотой настроек и быстрота работы.

Вообще, SEF - Search Engines Friendly, то есть дружественные поисковым системам URL-ы. Создана эта технология была, для того, чтобы из динамических адресов сайта типа:

index.php? option=com_content&id=5&task=view&Itemid=6

сделать псевдо-статические типа

moda-dla-sobak.thml

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

· человечность созданных адресов: пользователь перед переходом по адресу догадывается о том, что увидит на странице

· лучшая индексация поисковыми машинами

· сокращение длины УРЛ, особенно в случае компонентов

· большая безопасность по сравнению с динамическими урл-ами

· большая релевантность в поисковых системах.

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

· - поиск по сайту;

· - галерея;

· - гостевая книга;

· - ARTIO JoomSEF.

3.4 Заполнение шаблонов контентом

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

Что касается текста, то внедрение его в БД происходило в два этапа:

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

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

Для удобочитаемости текста используется тег <p>, для заголовков разделов и подразделов <h5></h5> и <h6></h6>, для выделения значимых слов - тег <strong> - жирный шрифт, а для придания еще большей значимости фразе или слову был использован тег <u> - подчеркивание, тег <i> - вывод текста курсивом. Это удобно и поисковым системам. В некоторых случаях информацию было удобно разместить в таблице, для реализации чего использовалась структура <table><tr><td></td></tr></table>.

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

3.5 Программные средства реализации верстки

Для реализации верстки и программирования были использованы следующие инструменты:

1. CMS Joomla

2. Macromedia Dreamweaver 8. В данной среде разработки сверстан html-шаблон сайта, а так же CSS-файл. Данная среда не только проста в использовании, но и очень удобна: здесь реализована подсветка синтаксиса и возможность тестировать полученный html-файл, а также поддержка отображения дизайна страницы.

3. Для масштабирования фотографий использовался графический пакет Photoshop CS3.

4. Для редактирования текста и проверки его синтаксиса использовался Microsoft Word.

Заключение

В ходе дипломного проектирования был создан сайт «Мода для животных»

Был выполнен предпроектный анализ, разработан структурный проект сайта, для чего было сформулировано техническое задание; и создана структура сайта.

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

При производстве сайта в работе использовали систему управления контентом Joomla.

На созданном сайте имеются следующие разделы:

· Главная

· Галерея моды для животных

· Выбор гардероба

· Уход за одеждой

· Мастерская дома

· Гостевая книга

· Одежда для собак

· Одежда для кошек

· Одежда для птиц

Раздел галерея состоит из четырех подразделов, Иллюстрации

· Модные собачки

· Модные кошечки

· Модные птички

· Питомцы на модных подиумах

Таким образом, разнообразная информация на сайте может быть интересна любому посетителю.

Список использованных источников

1. Кирсанов Д. «Веб-дизайн: книга Дмитрия Кирсанова». - Спб: Символ-Плюс, 2007. - 368 с.: цв. ил.

2. Круг С. «Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» - Пер. с англ. - СПб: Символ-Плюс, 2005. - 200 с: цв. ил.

3. Ломов А.Ю. «HTML, CSS: Практика создания сайтов. - Спб.: БХВ-Петербург, 2006. - 4162 с.:ил.

4. С. Лендер, И. Нечаев. «Adobe Photoshop CS с нуля: Учебное пособие. - М.: Лучшие книги, 2005. - 320 с.: ил.

5. Соколов С.А. «HTML и CSS в примерах и задачах». - М. Издательский дом «Вильямс», 2007. - 416 с.: ил.

6. Ресурс http://www.htmlbook.ru/

7. Ресурс http://www.joom.ru/

8. Ресурс http://www.elitarium.ru/

Приложение 1

Структурный проект

Содержание

1. Общие сведения

Полное и краткое наименования информационной системы

Наименование предприятия Заказчика и его реквизиты

Перечень документов, на основе которых создается веб-сайт

2. Назначение и цели создания веб-сайта

Цель создания сайта

Целевая аудитория сайта

Основные задачи сайта

3. Требования к веб-сайту

Требования к графическому дизайну веб-сайта

Требования к шрифтовому оформлению веб-сайта

Требования к контенту и наполнению веб-сайта

Требования соответствия стандартам

Требования к компоновке страниц веб-сайта

Требования к средствам просмотра веб-сайта

Требования к системе управления контентом веб-сайта

Структурный проект (карта сайта и навигация)

Описание разделов веб-сайта

Главная страница

Внутренние страницы (обзор)

Порядок сдачи-приемки сайта

Приложение

1. Общие сведения

1.1. Полное и краткое наименования интернет-системы

Полное наименование сайта - «ЗооАтелье. Мода для животных». Краткое наименование сайта - «сайт», «веб-сайт».

1.2. Наименование предприятия Заказчика и его реквизиты
Заказчик

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

1.3. Перечень документов, на основе которых создается Система

Договор №….

Приложения к договору №

Переписка между Сторонами.

2. Назначение и цели создания сайта

2.1. Цель создания сайта

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

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

2.2. Целевая аудитория сайта

Целевая аудитория сайта представлена группами пользователей:

· любители животных

· владельцы домашних животных

· представители зооиндустрии

· пользователи любого возраста, социального статуса и места проживания

2.3. Основные задачи сайта

Сайт должен обеспечивать реализацию следующих задач:

· информирование о возможностях в мире одежды для животных, об основных тенденциях, направлениях, стилях, о способах подбора гардероба для питомцев, методах ухода за одеждой;

· повышение культурного уровня любителей животных;

· превращение пользователей сайта в потребителей данного вида услуг;

· публикация объявлений предприятий данной отрасли;

· сбор мнений и отзывов пользователей.

3. Требования к сайту

3.1. Требования к графическому дизайну сайта

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

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

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

В качестве идеи цветового оформления сайта необходимо выбрать природные натуральные цвета ярких оттенков, что обуславливается эмоциональным фоном тематики сайта. Предпочтительны контрастные сочетания, светлый фон текста: белый, серый.

Приветствуется наличие красивых графических объектов, использование небольших, но стильных графических элементов (маркеров списков, «визуалов») в оформлении страниц сайта.

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

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

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

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

Блок логотипа. Логотип разрабатывается исполнителем сайта на основании логического соответствия названию сайта «Мода для животных»

3.2. Требования к шрифтовому оформлению сайта

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

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

Размер (кегль) шрифтов должен обеспечивать удобство восприятия текста при минимально допустимом размере экрана.

3.3. Требования к контенту и наполнению сайта

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

Формат всех графических файлов - JPEG или GIF. Все не являющиеся фоновыми изображения объемом более 2 Кб должны быть выполнены с замещающим текстом.

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

3.4. Требования соответствия стандартам

При разработке сайта должны использоваться официальные и фактические открытые стандарты (такие, как ХМL, НТМL и др.), наиболее распространенные в Интернете и общепринятые в практике построения информационных систем (веб-сайтов). Необходимо:

3.5. Требования к компоновке страниц сайта

Компоновка страниц сайта не обязательно должна обеспечивать автоматическое масштабирование страниц в зависимости от ширины рабочего поля браузера пользователя. Минимальный размер (ширина) рабочего поля браузера, при котором необходимо обеспечить полноценное отображение страниц (без полосы горизонтальной прокрутки), составляет 1024 пиксела.

Макет страницы сайта

Визуал	Логотип, название сайта	Визуал
	Основная навигация
Форма поиска
Дополнительная навигация «Статьи»	Основное содержание	Блок «Объявления»
	Дублирующая навигация

3.6. Требования к средствам просмотра сайта

Сайт должен обеспечивать корректное отображение данных в следующих браузерах:

· Ехр1оrеr (версия 5.5 и выше)

· Орега (версия 7.0 и выше);

· Mozila Firefox (версия 1.0 и выше).

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

Основной цветовой режим мониторов, на которых будет просматриваться сайт, - 15 разрядов цветов и выше (число цветов 65536 и выше).

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд.

Примечание:

Во всех случаях не учитывается время загрузки подгружаемых элементов (счетчики, баннеры, информеры и т.д.).

3.7. Требования к системе управления контентом сайта

Система управления контентом сайта должна обеспечить администратору сайта возможность выполнения следующих действий:

добавление, редактирование и удаление разделов и подразделов;

добавление, редактирование и удаление текстовой информации;

добавление, редактирование и удаление описаний объектов;

обработку формы обратной связи, отправку письма на e-mail разарботчика;

размещение на страницах сайта ссылок и прикрепления файлов любого формата,

загрузка с локального компьютера сотрудника на сервер изображений и других файлов в объемах, предусмотренных структурой данных,

редактирование метаданных разделов и подразделов сайта (служебная информация для улучшения индексации сайта поисковыми системами).

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

4. Структурный проект

Ниже представлена структура сайта в виде списка. Для каждого раздела сайта даны названия и шт1 - наименования.

· Главная	· index
· Галерея моды для животных	· Что сюда писать
· Модные собачки	·
· Модные кошечки	·
· Модные птички	·
· Питомцы на модных подиумах	·
· Выбор гардероба	·
· Уход за одеждой	·
· Мастерская дома	·
· Гостевая книга	·
· Одежда для собак

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

• Создание динамического сайта электронной библиотеки

  Выбор средств разработки. Написание сценариев PHP. Разработка базы данных MySQL. Описания организации иерархической многопользовательской модульной структуры сайта с возможностью управления содержанием. Создание средств для удаленного администрирования.
  
  практическая работа [4,8 M], добавлен 12.06.2013
  

• Разработка web-сайта для физиотерапевтического предприятия

  Анализ предметной области и функций сайта. Разработка структуры базы данных, структуры и дизайна web-сайта. Описание установки CMS "Joomla!" и программной оболочки Denwer, создание гостевой книги, галереи и карты Google, результаты их тестирования.
  
  дипломная работа [2,3 M], добавлен 19.01.2017
  

• Создание оригинал-макета сайта

  Рассмотрение основных этапов создания сайта. Использование вайрфреймов как документации по проекту. Использование мокапа и структура навигации сайта. Правильный выбор цветов для проекта. Использование модульной сетки и разработка дизайна сайта.
  
  презентация [2,8 M], добавлен 01.09.2019
  

• Создание сайта "Кафедра физического воспитания"

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

• PHP+MYSQL: создание простого PHP сайта

  Структура сайта, характеристика процесса его создания. Необходимая кодировка, установка. Присоединение таблицы стилей к сайту. Окно специальных возможностей тега image. Разбор сайта на РНР блоки, создание базы данных. Доступ к админке по паролю.
  
  лабораторная работа [889,7 K], добавлен 09.01.2013
  

• Создание web-сайта для организации, занимающейся обслуживанием бухгалтерских программ

  Разработка структуры базы данных сайта. Установка и настройка требуемого программного обеспечения. Анализ интерфейса программы. Создание формы обратной связи. Формирование дизайна, соответствующего требованиям заказчика. Выбор методики тестирования.
  
  дипломная работа [2,0 M], добавлен 22.03.2018
  

• Создание сайта (интернет-магазина) с помощью языка программирования php

  CRM-системы: разновидности, проблемы реализации, их преимущества и недостатки. Критические характеристики CRM-систем для работы через Интернет (WEB-CRM). Разработка содержания и структуры WEB-сайта интренет-магазина "Vinil", создание схемы и базы данных.
  
  курсовая работа [2,6 M], добавлен 19.05.2013
  

• Разработка web-сайта

  Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта.
  
  контрольная работа [2,8 M], добавлен 02.12.2009
  

• Корпоративный сайт-визитка с функцией обратной связи и админчастью

  Основные этапы создания web-сайтов; информационное, программное и техническое обеспечение. Разработка сайта компании "Империя Востока": задачи, структура, выбор концепции дизайна сайта, организация навигации, создание базы данных, формы обратной связи.
  
  дипломная работа [3,9 M], добавлен 12.12.2013
  

• Создание анимированной карты сайта

  Создание с помощью графического редактора логотипа и баннера для образовательного сайта "Областные математические олимпиады". Типы логотипов, баннер как графический элемент страницы сайта. Обзор инструментов графического редактора Adobe Illustrator.
  
  курсовая работа [2,9 M], добавлен 08.02.2014
  

• главная
• рубрики
• по алфавиту
• вернуться в начало страницы
• вернуться к началу текста
• вернуться к подобным работам