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

Смоленский гуманитарный университет

ТЕМА: Сайт для маркетинговой фирмы "FineMinds"

Исполнитель: Кубракова Евгения

Научный руководитель:

Ирина Александровна Бирюкова

СМОЛЕНСК 2016

Содержание

• Цели и Задачи сайта
• Ход работы по созданию сайта
• Вывод: Почему мой сайт - лучший вариант?

Цели и Задачи сайта

Определение компании:

1. Чем она занимается?

Эта фирма занимается маркетинговым продвижением сайтов: оформление, рекламные компании, копирайтинг.

2. Какая ценовая категория услуг?

В среднем 14 000 - 70 000 р.

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

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

Назначение и цели сайта:

повышение узнаваемости компании;

продвижение услуг через интернет;

работа с удаленными клиентами;

Сайт должен демонстрировать полный спектр услуг компании, и привлекать внимание для сотрудничества!

сайт продвижение целевая аудитория

Ход работы по созданию сайта

"МЕНЮ"

За основу сайта я взяла уже готовый шаблон под названием "marketingwebtemplate" уже с некоторыми готовыми стилями и блоками. В макете был блок (<div class="border">) в котором уже были две вертикальные колонки: узкая колонка меню сайта слева (<div class="sidebar">) и широкая колонка (<div class="body">), а также блок background, который служит фоном навигационной панели. К блоку применено целевое правило Bg, благодаря ему на фон вставлена картинка текстуры грубой ткани. Цвет фона я выбрала #E5E5E5.

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

Колонки объединены блоком с стилем (классом) page - ширина блока 960рх, margil слева и справа стоит на "авто", overflow: hidden

Далее в колонке-меню вставляю блок с картинкой логотипом на прозрачном фоне (сделано ранее в фотошопе).

Под логотипом я сделала свои пункты меню (переименовываю, те что уже были в макете и добавляю ешё пару своих). Каждый пункт - отдельный блок:

· Главная

· Компания

· Наши услуги

· Портфолио

· Контакты

· Наш блог

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

Подсказка в поле получилась следующим образом:

<input type="text" onClick="this. value=''; " onFocus="this. select ()" onBlur="this. value=! this. value? 'Введите Ваш электронный адрес': this. value; " value="Введите Ваш электронный адрес">

Далее идет блок иконок соц сетей. Класс "connect": padding: 34\48\18

Далее в этот блок вставляю 3 иконки. На примере иконки фейсбук: создаю правило #facebook задаю размер блока 37х37 рх; display inline block,

на фон (background-imeges) ставлю нужное мне изображение круглой иконки в png.

Далее я на основе этого правила создано правило #facebook hover и вставляю туда на background такую же картинку только более светлую. Применяю к тому же блоку. Таким образом, при наведение курсора на иконку она будет становится темнее. Далее вставляю гиперссылку при клике на изображение. Иконка готова. То же самое делаю с остальными 2мя.

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

Страница "ГЛАВНАЯ"

Переходим в колонку с права - делаю заголовок.

Сохраняю и делаю копии этой же страницы, под разными названиями.

Теперь получилось 6 страниц с одинаковым меню.

Связываем их, через тег указывая адрес. Пример:

<a href="about.html">КОМПАНИЯ</a>

На каждой странице выделяем в меню название этой страницы назначая ей class="selected" - делаем цвет шрифта темнее. Таким образом мы всегда видим на какой странице сайта находимся.

Возврашаюсь к странице "главное" Пишу заголовок.

Задаю шрифт заголовков

H3; Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif размер 18

H2; Impact, Haettenschweiler, Arial Narrow Bold, sans-serif, цвет #7d7d7d размер 24.

Далее блок обычного текста Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif, размер 14.

Вставляю картинку

Заголовок h3

Обычный текст

Внизу вставляю блоки с картинками они ведут на страницу Услуги Снова заголовок h3

Вставляю блок в катором будет 3 вертикальных блока с картинками - скринами сайтов и подписями и кнопко "подробнее". На каждый такой блок с картинкой применяем стиль section: На бекграунд ставится картинка с тенью, ширина блока 200, отступы справа 32. выравнивание текста по центру. Под каждой картинкой таким же способом как кнопки в меню, делаю кнопку "подробнее". Она должна перенаправлять на страницу "услуги." К ним применяем селектор section ul li a делаем текст темным. По аналогии как мы делали с иконками соц сетей создаем еще один селектор с hover в конце и делаем текст светлее. Таким образом при наведении курсора и нажатии буквы становятся темными. Картинки и кнопки перенаправляют на страницу "услуги".

Страница "КОМПАНИЯ"

Заголовок

Блок с картинкой

Маленький заголовок

Текст

добавляю блок с заголовком h4 назначаю стиль ширина 665, отступы 21 добавляю на фон специальную картинку делаю несколько таких блоков: заголовок, текст, разделитель.

Последний блок: ввожу заголовок H6 размер 16 цвет тот же

Страница "НАШИ УСЛУГИ"

Делаю заголовок h3

далее добавляю блок с заголовком h4 - разделитель

и делаю в правом верхнем уголке блок с классом navigation

(padding 32 10 22) и внутри 3 блока с классом selected () на фон ставлю специальные "кнопки", сделанные в фотошопе, скругление 7. По той же схеме, что и иконки соц сетей мы делаем на каждую иконку два стиля (светлый фон темный текст, темный фон светлый текст), для того что бы светлая кнопка была когда НЕ активна и темная - когда активна.

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

Далее я делаю 3 горизонтальных блока с тегом-контейнером уже внутри каждого блока, блок с картинкой (ширина 251, отступ 29, 35) и блок с текстом (ширина 400, отступы сверху и снизу 20)

СТРАНИЦА "ПОРТФОЛИО"

Снова делаю кнопки в правом верхнем углу, к каждой применяю вначале селектор portfolio navigation li a, где отстыпы 12 0 12, цвет #7f7f7f. Далее уже другой: меняем цвет текста, отступ 6, скругление 7, ставим на бекграунд картинку темнее. Меняю название кнопок. По клику на кнопки галерея должна менятся на галерею с сайтами или банерами соответсвенно.

Но пока вставляю ссылки на страницу "услуги".

Делаю блок со стилем "portfolio"отступы 0, 11,40 рх

Галерея - 12 блоков: в каждом блоке картинка с логотипом и текст. Применяю класс span на кнопки "подробнее". По той же схеме как и такие же кнопки на странице "главная", они темнеют при наведении на кнопку курсора.

Страница "КОНТАКТЫ"

Вставляю заголовок и разделитель.

Блок с классом контакт: отступы 0: 0: 575 рх

Внутри этого три блока с текстом.

Последнему присваиваем гиперр ссылку на страницу "новое письмо" в майле.

В макете сайта уже была форма для отправки письма. Я меняю надписи и шрифт и меняю кнопку "sent" на ту которую я сделала на русском. Для этого в селекторе submit2 меняю изображение на бекграунде.

Страница "БЛОГ"

Пишу заголовок, вставляю картинку, блок обычного текста, блок с заголовком h6 делаем для него отдельный селектор, цвет #997352, шрифт такой же как и в тексте, но размер 16, отступ слева 21, далее чередую заголовки - вопросы и обычный текст. Внизу я делаю три блока div. В каждом заголовок класса H3

и маленькие блоки с текстом а и span, селекторы соответственно названию, а - текст с гиперссылкой, span текст шрифтом Conv_Muli-Regular цвет #7d7d7d

На этом создание сайта завершено.

Вывод: Почему мой сайт - лучший вариант?

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

Размещено на Allbest.ru