Разработка веб-сайта

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

8)Постоянный коммуникатор.

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

9)Фирменная одежда.

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

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

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

10)Аудиообраз и аудиознак.

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

11)Другие фирменные элементы.

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 2. Планирование и  реализация web-сайта.

 

2.1. Планирование  web-сайта.

 

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

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

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

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

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

Структура сайта будет следующая:

• Главная страница – здесь будут располагаться логотип и название дизайн – студии, свежие новости в сфере дизайна, главное навигационное меню;
• О компании – важная информация о компании;
• Услуги – данная страница содержит перечень выполняемых услуг и портфолио компании;
• Статьи – содержит полезную информацию о дизайне;
• Контакты – эта страница содержит информацию о телефонах и адресе дизайн – студии;

 

 

Логическая  структура сайта:

 

 

рис.1

 

 

 

 

2.2 Реализация  сайта

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

 

Представляю свой вариант структуры главной страницы:  

 

Название сайта, логотип

Меню сайта

Разделы сайта

Информация (текст)

Дополнительная информация (графические объекты)

Баннер(реклама)

копирайт

рис. 2

 

Теперь  дело за малым – определиться с  выбором программного обеспечения для создания сайта.

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

Разработка  серьезного web - портала с множеством страниц и сложной структурой требует применения профессиональных средств верстки, таких как Macromedia Dreamweaver MX, HTML Builder XP и других программ. Эти html - редакторы позволяют быстро и легко создать профессиональные интерактивные сайты. Мощные и удобные в работе они направлены на использование их профессиональными дизайнерами, разбирающихся в основных функциях и достоинствах этих программ. Обычно программы такого класса снабжены множеством дополнительных модулей от подсветки синтаксиса кода до встроенных готовых шаблонов сайта, которые остается только подогнать под свои нужды. Наличие дополнений делает процесс верстки сайта более удобным и упрощенным. Отпадает необходимость использовать дополнительные программы сторонних производителей, все имеется в этих мощных пакетах web - разработки.

Я остановилась на программе Adobe Dreamweaver CS5.5

Для создания страницы необходимо открыть новый, пустой документ. Это можно сделать  различными способами, например, выбрав команду File=>New в главном меню, а затем выбрав HTML из списка. Первое, что необходимо сделать после создания документа, сохранить файл с необходимым именем (иначе при создании гипертекстовых ссылок, вставке изображений и т.п. могут быть использованы неверные адреса). Главная страница сайта должна иметь специальное имя - index.html (или index.htm). После того как странице присвоено имя и она сохранена, можно приступать к наполнению ее информационным содержанием. Начать следует с установки параметров страницы. Для этого необходимо из главного меню выбрать команду Modify=>Page Properties….

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

Для создания новой страницы в Dreamweaver я выбрала пункт «Создать/HTML» (рис. 3).

рис. 3

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

В HTML-документе  необходимо разделять данные документа  и их представление. Содержание документа задается в виде тэгов HTML. Для определения же визуального представления документа следует использовать таблицы стилей (CSS - Cascading Style Sheets) (через CSS задаются интервалы между строками текста, отступы, цвета, используемые для текста и фона, размер и стиль шрифтов и другое оформление).

В современном  web- дизайне повсеместно используются компоновки на основе css. Компоновка на основе css, по сравнению с компоновкой на основе таблиц, уменьшает размер файла, более проста в управлении и соответствует стандартам индустрии дизайна.

Компоновка  на основе css включает два основных компонента: набор правил css, определяющих размер и формат ключевых элементов страницы, и соответствующие наборы тегов html (обычно это теги <div>), формирующие основу страницы.

Для начала нужно создать нейтральное фоновое  пространство, определив сначала  правило css для тега <body>. (рис. 4).

 

рис.4

 

Нажимаем  кнопку New CSS Rule (новое правило CSS), которая расположена на панели CSS Styles (стили CSS)  Когда появится диалог New CSS Rule (новое правило CSS) , я установила переключатель Selector Type (тип селектора) в положение Tag (тег), выбрала body. Переключатель define in (определить в) установила в положение This document only (только данный документ) и нажала Ок.

Затем я установила следующие параметры:

• В диалоге CSS Rule Definition for body (определение правила CSS для body) в категориях выбрала элемент background (фон) и при помощи инструмента пипетка выбрала черный фон.
• В категориях выбрала элемент Block (блок). В списке указала выравнивание текста по центру. Элементы компоновки будут выровнены по центру окна обозревателя, хотя текст будет выровнен по левому краю.
• В категориях выбрала  элемент Box (размеры и расположение). Полям и отступам задала нулевое значение.

 

Стандартный способ создания компоновки на основе css– использование <div>, содержащий все остальные теги и содержимое. При объявлении самого «дальнего» контейнера определяется одно правило, устанавливающее глобальные параметры, такие как общая ширина и выравниванием элементов компоновки.

Оптимальная ширина веб-страницы находится в  диапазоне от 960 до 1000 пикселей. Такой  сайт как будто сверстан под мониторы с разрешением 1024×768, но он отлично  смотрится и на более широких  экранах. Страница находится по центру, а поля не выглядят чересчур широкими.

Для левой  и правой границ мы задали значение auto (авто), чтобы выровнять по центру тег #wrapper <div>, а значит, и находящееся в нем содержимое страницы.. Если ширина окна обозревателя больше 960 пикселей, оставшееся пространство автоматически будет разделено и поровну добавлено к левой и правой границам. Теперь мы можем вставить тег <div> в стиль #wrapper.

На страницу будет добавлен новый тег <div> с содержимым- заменителем Content for id "wrapper" Goes Here (сюда вставить содержимое для id «оболочка»). (рис.5).

рис. 5

 

Теперь нужно  добавить основные части компоновки сайта. Каждая из этих областей требует  отдельного правила css и тега <div>.

Первым делом  нужно определить правило css для заголовка.  Когда правило CSS будет применено, оно предоставит немного пространства над и под тегом <div>. Определять ширину нет необходимости, так как элемент блока html, такой как тег <div>, по умолчанию расширяется и занимает все пространство контейнера, которым, в данном случае будет тег <div> #wrapper.

Далее определим  еще несколько правил css для каждой части сайта.

Когда правила CSS для основных областей компоновки определены,  можно добавлять их на страницу.

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

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

Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>. Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.

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