ОПЫТ РАЗРАБОТКИ САЙТА

Аннотация: В этой статье рассмотрены методики создания сайта по технологиям HTML5 и CSS3 с элементами Javascript.

Ключевые слова: сайт, html, css, javascript, интернет, блочная верстка, табличный дизайн.

В данной статье будет рассмотрена реализация проекта по созданию web-сайта «#КрымВаш». Требование к данному сайту были следующие:

Сайт должен содержать не менее 5-6 страниц (или более). Все страницы сайта должны быть оформлены в едином стиле. Возможен вариант использования единого шаблона. На страницах необходимо использовать единый стиль CSS. Сайт должен содержать или меню, или систему ссылок, обеспечивающую удобную навигацию по страницам. Можно использовать фреймовую структуру, блочную верстку или табличный дизайн. Необходимо использовать JavaScript.

Теоретическая часть разработки web-сайтов

HTML – это язык разметки гипер текста, всегда используется для создания сайтов во всемирной паутине, своего рода каркасный язык. Был разработан в Великобритании в 1986 году для научных целей, чтобы передаваемые документы из ВУЗа в ВУЗ выглядели одинаково на всех экранах, во всех браузерах. Изначально он использовался только внутри научных учреждений, но идея понравилась, что приобрела массовый характер применения, далеко за стенами ВУЗов.

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

Любая HTML страница состоит из так называемого скелета.

Более подробный разбор/

В верхней части страницы всегда находится парный тег &lt;head&gt;, который содержит в себе служебные элементы, теги и мета теги, предназначенные для работы с поисковыми системами и браузерами. Содержимое тега &lt;head&gt; не видно пользователю обычным способом.

Пользователь видит то, что находится в парном теге &lt;body&gt; - это основное тело страницы, которое содержит рабочие элементы.

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

CSS или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит. Стили не напоминают структуру HTML.

Редактор кода html – Brackets. Brackets – полностью кросс платформенный, поэтому вне зависимости от того, какая используется операционной система он будет работать, and т.к. он разрабатывался на web технологиях, т.е. html, Javascript, css. Основным преимуществом данного редактора является возможность «живого» редактирования страницы без необходимости перезагрузки страницы. На данный момент эта функция касается только html и css, но не касается Javascript. Редактор очень удобен для использования, т.к. сам «закрывает» парные теги.

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

Adobe Dreamweaver – обладает подсветкой синтаксиса, подсказок в виде выпадающего окна со списком тегов, закрывает парные теги, отображение сайта в реальном времени, имеет три вида рабочих сред:  Код  Дизайн  Код/Дизайн

Разработка навигации по сайту

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

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

Помимо этого, на Главной странице расположен автоматический слайдер с кратким описание транслируемой достопримечательности, реализован при помощи javascript.

Раздел «Блог» содержит в себе ленту новостей, где можно ознакомится с актуальными событиями Крыма в краткой форме или в более развернутой если перейти по ссылке «Читать далее».

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

Раздел «Видео» содержит в себе видео контент про достопримечательности Крыма и о событиях на его территории. Сам видео плеер выбран стандартный, для избежания проблем с воспроизведением в различных браузерах см. рис.4.

Раздел «Контакты» содержит в себе всю контактную информацию и форму обратной связи.