Для заготовки таблицы задействовалась программаHtml-Kit 292мощный веб-редактор, который может создавать и редактировать веб-страницы (Рис.4).
Рис. 4. Написание кода в HTML-Kit 292
Подборка цвета
В HTML-Kit292 имеется большая палитра цветов, включающая как стандартный выбор цвета из имеющейся палитры, так инаписание цвета в коде в RGB. Основное оформление сайта создается с помощью CSS2-верстки, которая создается так же в HTML-Kit292, для этого нужно установить плагин HTML-Kit-css, после его установки появляется возможность начать работу со стилями. (Рис.5)[18]
Рис. 5. Вид палитры в HTML-Kit 292
2.3.Общая структура Web-сайта
Общая структура Web-сайта «Юридическая компания «Корпоративный эксперт» изображена на (Рис.6):
Рис.6. Структура сайта
Исходя из выше перечисленного, использовались знания, полученные в ходе обучения в университете, и, согласовав с преподавателями свою тему по дипломному проекту начал с создания сайта для «Юридической компанией «Корпоративный эксперт».В мои обязанности перед компанией входило создание web-сайта и его поддержка до полной работоспособности.
Задачи запланированных работ
Перед началом выполнения данного задания были продуманыдействия:
Поиск вспомогательной литературы и разнообразныхweb-ресурсов для более подробного плана работы.
Работа с HTML редакторами и создание фундамента (скелета) сайта,
Разработка фирменного стиля компании, и внедрение в ранее созданный фундамент сайта.
Заполнение сайта информацией о компании и данных компании, добавление поисковой колонки и редактирование до полной работоспособности сайта.
2.3.1. Работа с html редакторами и создание фундамента (скелета) сайта
Для создания фундамента (скелета) сайта был использован редакторFrontPage 2003 и HTML-Kit 292 по написанию HTML кода, и были так же использованы материалы из литературы и web-ресурсов. (Рис. 7)
Рис. 7. Создание заголовка и таблицы на FrontPage 2003
Добавлен фон сайта, колонка меню и изначальное место расположения информации и контактных данных. (Рис. 8)
Рис.8. Изображен начальный макет сайта, создание фундамента.
Разработка фирменного стиля компании
Фирменный стиль, были получены хорошие результаты в экспериментировании с цветами и шрифтами. Был найден наиболее удачный вариант по размеру и прокрутке сайта при минимальных затратах места во время написания кода, что влияет на скорость загрузки страниц у пользователей с разными видами подключения к интернету.
Основное оформление сайта создается с помощью CSS2-верстки, которая создается так же в HTML-Kit 292, для этого нужно установить плагин HTML-Kit-css2, после его установки появляется возможность начать работу со стилями.[31]
}
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_25 { margin-right: 25px; }
.margin_right_60 { margin-right: 60px; }
Рис.3. Листинг кода программы для создания главного меню Web-сайта.
При создании стиля Web-сайтабыли использованы:
–механизмы, с помощью которых созданная пользователем таблица стилей может заменить все таблицы стилей более высоких уровней в каскаде. Это дает конечному пользователю возможность полностью управлять отображением. Пользователь получает возможность создавать настраиваемые таблицы стилей для вывода страниц в соответствии со специальными требованиями;
– специализированная поддержка для загружаемых шрифтов – таким образом, уменьшается тенденция помещать текст в графику для улучшения внешнего вида страницы;
– механизмы позиционирования и выравнивания, которые отделяют содержимое от внешнего представления. Эти таблицы стилей должны исключить некорректное использование тегов HTML для создания особых эффектов отображения. Теги HTML можно использовать для логической структуризации документа, делая его более простым для интерпретации не визуальными посредниками. (Рис. 9)
Рис.9. Изображен вариант сайта с использованием CSS.
Готовый Web-сайт
Присутствует строка поиска по сайту, кнопки для соединения с социальными сетями, новостная рубрика и стена с проектными данными компании. С помощью CSS редактировались размеры при открытии, и небольшие доработки с цветами кнопок, заголовков, шрифтов и пр.
На (Рис. 10) показан макет Web-сайта для «Юридической компании «Корпоративный Эксперт». Сайт соблюдал все пожелания заказчика. Фон сайта кремового цвета с использованием грубого стиля заголовков и кнопок с красными и серыми тонами. Так же присутствует новостная колонка, стена проектов, поисковая колонка, контакты и по желанию заказчика были добавлены кнопки популярных соц. сетей. Так же присутствует колонка меню, и колонка вспомогательных меток в нижней части web-страницы.
Результат выполненной работы:
Рис.10. Макет выполненной работы для компании.
Результат
Web-сайт выполненный с помощью редакторов HTML-Kit 292 и FrontPage 2003, выглядит очень просто и легко, собственно как и в действии, он прост и максимально эффективен для рекламной функции и развития компании. В верхней части сайта располагается главное меню и поисковая колонка, в теле сайта (ниже главного меню) располагается главная информация, которая как предполагается, необходима клиенту, так же в теле сайта располагаются колонка новостей, краткие анонсы проектов компании и контактные данные с кнопками популярных социальных сетей. В нижней части сайта располагается навигационная панель, ссылка на страницу разработчика и указаны авторские права компании.
Вывод ковторой главе
В ходе выполнения задания были закреплены знания, полученные на таких предметах как Web-технологии, программирование в Windows. А так же был закреплен материал, полученный в сети интернет и литературе по данной тематике.
Web-сайт проверен на работоспособность и конкурентоспособность в сети интернет, проведен анализ всех достоинств и недостатков в работе и в дизайне
Достоинства:
Web-сайт легок в использовании и навигации.
Быстрая загрузка страниц из-за использования CSS2.
Быстрый доступ к информации.
Приятная и простая для глаз цветовая гамма.
Недостатки:
Конкурентоспособность сайта на среднем уровне (нет возможности конкурировать с более крупными компаниями, которые имеют более функциональные сайты).
Нет поддержки аудио и видеоматериалов.
Ознакомление с FrontPage 2003, его гибкие функциональные возможности позволяют создавать более совершенные Web-узлы, включающие средства для профессионального проектирования, разработки, работы с данными и публикации, необходимые для создания динамических и более сложных Web-узлов.
Ознакомление с программойHTML-Kit 292,мощным веб-редактором, который может создавать и редактировать веб-страницы, очень удобный и функциональный. [30]
Сайт соблюдал все пожелания заказчика. Фон сайта кремового цвета с использованием грубого стиля заголовков и кнопок с красными и серыми тонами. Так же присутствует новостная колонка, стена проектов, поисковая колонка, контакты и по желанию заказчика были добавлены кнопки популярных соц. сетей. Так же присутствует колонка меню, и колонка вспомогательных меток в нижней части web-страницы.
Сайт был выполнен на 100%, по желанию заказчика, были удовлетворены все результаты выполненной работы.
ТЕХНИКО-ЭКНОМИЧЕСКОЕ ОБОСНОВАНИЕ