В рамках второй главы проектируется макет сайта и его верстка. В главе представлены скриншоты спроектированных страниц сайта. В данном разделе рассмотрены основные технологии построения сайтов, описывается процесс проектирования, создания и верстки макета сайта адаптивного web-дизайна. С массовым распространением различных портативных устройств, имеющих выход в Интернет, как никогда стало важно удобство и доступность использования сайтов на небольших разрешениях экрана. Теперь уже недостаточно сделать сайт, который будет хорошо смотреться на мониторе с большим разрешением и корректно отображаться во всех современных браузерах.
На основе анализа сайтов веб метрического рейтинга были выявлены следующие особенности:
– большинство в течение последних 5 лет не обновляло визуальную и программную составляющую сайтов. В связи с этим элементы новых технологий CSS и HTML почти не используются, хотя они уже достаточно распространены;
– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;
– менее половины проанализированных сайтов корректно отображаются в старых версиях браузеров. В подавляющем большинстве случаев, когда сайт отображается некорректно, пользователю не предлагается альтернативного просмотрщика сайта;
– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;
– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.
Основные принципы проектирования адаптивного дизайна сайта.
1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.
2. Резиновые изображения (англ. flexible images). Все изображения должны масштабироваться, исходя из предельно допустимого значения ширины. Оптимальным является их отображение в натуральную величину. При изменении пользователем окна браузера до размера менее самого изображения, оно автоматически уменьшается, чтобы вписываться по ширине в окно браузера наилучшим образом.
3. Использование media queries – правил CSS, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.
4. Применение постепенного улучшения. Идея состоит в том, что сначала создается простейшая разметка документа, которая корректно отображается даже в самых простых браузерах. Затем добавляются стили, интерактивность и прочее, используя каскадные таблицы стилей, JavaScript, SVG, Flash и все остальное, что можно вставить в страницу.
5. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.
Преимущества и большие возможности ресурсов, спроектированных по принципу адаптивного дизайна, вполне могут позволить им выступить заменой мобильных версий web-сайтов. Такой подход сэкономит на разработке, повысит удобство и комфортность просмотра web-сайта на всех устройствах, улучшит позиции в результатах выдачи поисковых систем (т.е. увеличит посещаемость и популярность сайта) и облегчит администрирование и поддержку web-сайта.
Для создания макеты сайта выбран язык разметки HTML, он простой в использование, но не обладает такими возможностями как CSS или JavaScript.
Существует 3 вида верстки в HTML:
1. Блочный
2. Таблицы
3. Фреймы
Блочный вид (рис.1) самый простой ведь в нем используются лишь блоки и слои, которые создаются при помощи тега <div> после создания блоков остается только заполнить их информацией, такой как текст, картинка, видео или аудио.
Рисунок 4 Блочная верстка
Табличный вид (рис.2) отличается от блочного вида тем, что вместо блоков мы делим макет, на таблицы используя, теги:
<table border=”толщина рамки” width=”размер таблицы”>;
<tr> (контейнер для ячеек);
<td> (ячейки);
<th> (ячейки, в которых текст выделен жирным).
Плюсом табличной верстки являются: поддержка фонового рисунка; создание колонок для их заполнения и регулировка таблиц через проценты. Минусом является громоздкий код и это может являться большой проблемой в том случае если вы увидели ошибку в макете, то сложно будет найти ее в такой большом коде как в табличном.
Рисунок 5 Табличная верстка
1. < frameset cols=" Количество и размер ячеек по вертикали " >;
2. <frameset rows=”Количество и размер ячеек по горизонтали”>;
3. <Frame src="Файл, которым заполняют ячейку ">;
4. Атрибуты scrolling=”no” и noresize убирают вертикальную полосу прокрутки.
Также каждому фрейму можно задать имя тегом <name=” имя”> после чего в гиперссылке прописываем тег <target=”имя, которое задали фрейму> и файл, на который выводит гиперссылка, откроется в заданном фрейме.
Рисунок 6 Фреймы
Для более удобной работы с кодом сайта был выбран Notepad++ - это свободный текстовый редактор с отрытым исходным кодом для Windows, с подсветкой синтаксиса, большого количества языков программирования и разметки. В отличие от обычного блокнота, в котором чаще всего и пишут разметку, он имеет расширенный функционал. Например, подсвечивание синтаксиса разметки.
Рисунок 7 Интерфейс программы Notepad++
2.2 Подбор инструментов для создания электронного ресурса
Notepad++ — свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов.[7] Базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Windows API и распространяется под лицензией GNU General Public License. Базовая функциональность программы может быть расширена как за счёт плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры.
Основные теги использованные при создании макета интернет магазина по продаже компьютерных игр:
<TABLE> - Объявление начала таблицы таблицы.
<TR> - Создание строк внутри таблицы.
<TD> - Создание ячеек таблицы.
<P> - Определяет текстовый абзац. Тег <P> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей.
<A> - Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <A>устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки.
<IMG SRC=«»> - Вставка изображения.
<LINK REL="stylesheet" TYPE="text/css" HREF="Style.css"> - Подключение каскадной таблицы стилей (CSS) к html документам.
<H1> - Создание заголовка первого уровня
<H2> - Создание заголовка второго уровня.
А для создания фирменного стиля сайта был использован графический редактор Adobe Photoshop
Adobe Photoshop — распространенный редактор графики для профессионального редактирования различных картинок и фотоснимков. Для этого в приложении имеется широкий ассортимент инструментов, эффектов различных графических файлов. Полюбили ее за простой интерфейс, обширному набору эффектов, текстур и инструментов. Кроме того, приложение позволяет работать со и много другого. Уже несколько лет программа используется пользователями для обработки слоями, что позволяет создавать профессиональные картинки. Скачать утилиту может любой желающий, и бесплатно пользоваться на протяжении 30 дней, после чего необходимо купить лицензию. Этого времени вполне достаточно, чтобы ознакомиться со всеми возможностями приложения. Программа обладает практически неограниченными возможностями. С помощью редактора можно обрабатывать существующие картинки или создавать новые изображения с применением слоев. Используя встроенные эффекты, можно накладывать разные картинки одну на другую, удалять фон, поворачивать объекты в необходимую сторону, а также накладывать тень, корректировать резкость, размытие искажение и многое другое. можно на всех операционках Windows.Программа предназначена для редактирования картинок. Кроме того, можно удалять фон в изображениях. Приложение позволяет работать со слоями, что дает возможность создавать графические композиции. Утилита позволяет применять размытие к изображениям и добавлять эффект шума. Помимо этого, программа позволяет создавать растровую графику. Также есть возможность накладывать текст на фотоснимки. Приложение выполняет коррекцию цвета в автоматическом режиме. Кроме того, работать в утилите можно в различных режимах. К тому же приложение позволяет распечатывать готовый результат. Также стоит отметить возможность оптимизации изображения для публикации в интернете.
Приложение позволяет получать на выходе высококачественные изображения. Кроме того, утилита работает со всеми форматами графики. Программа имеет широкий ассортимент интегрированных эффектов и инструментов. Интерфейс приложения простой, что облегчает работу в нем. К тому же загрузить и установить программу на компьютер можно бесплатно. Из отрицательных моментов можно выделить ограничение бесплатной эксплуатации, которое составляет один месяц. В общем, Adobe Photoshop можно считать наилучшим графическим редактором. Для многих пользователей это приложение ассоциируется графическими изображениями высокого качества. Программа позволяет редактировать различные картинки и фотографии. В утилите собраны все возможные инструменты для обработки графики. Если необходимо качественно отредактировать изображение или фотографию, следует бесплатно скачать и установить это приложени