План выполнения работы:
Проектирование макета сайта и создание верстки сайта – это 2 отдельных этапа. На этапе проектирования макета необходимо спроектировать саму основу сайта, а именно:
- Определить структуру главной страницы;
- Определить расположение блоков на главной странице:
- Определить функционал, который будет выполняться на главной странице;
- Определить структуру сайта и переходы между страницами сайта.
Для решения таких задач идеально подходит инструмент быстрого проектирования – Mockingbird.
Mockingbird – это инструмент для построения макетов пользовательских интерфейсов веб-сайтов, мобильных приложений и обычных программ. С помощью Mockingbird достаточно быстро можно спроектировать прототип макета сайта, после чего прототип макета уже можно будет сверстать, используя другие инструменты.
Рисунок 8 Интерфейс программы Mockingbird
После того, как макет виртуальный музей спроектирован можно приступить к вёрстке. В качестве инструмента для верстки можно использовать практически любой текстовый редактор. В качестве редактора был выбран Notepad++.
При проектировании макета в Mockingbird используются типовые элементы из панели инструментов.
| Рисунок 9Панель инструментов |
Рисунок 10 Панель инструментов в Mockingbird
На сайте будут располагаться следующие элементы:
- Элементы фирменного стиля – цветовая гамма;
- Главное меню сайта;
- Фирменные носители;
- Галерея;
- История музея;
Макет главной страницы сайта представлен на рисунке.
Рисунок 11 Макет главной страницы сайта
После проектирования макета сайта необходимо сделать адаптивную верстку сайта. Адаптивным дизайном называется способ вёрстки, когда ширина макета веб-страницы подстраивается под ширину устройства.
На JavaScript реализованы интерпретаторы ряда языков программирования, что позволяет использовать для них как среду выполнения веб-браузер. Им можно найти применение, например, в образовательных целях. HotRuby —реализация виртуальной машины на JavaScript и Flash. Позволяет выполнять байткод, полученный в результате компиляции YARV. Реализует большую часть грамматики Руби. Пока не реализован механизм исключений и большая часть встроенных функций и классов. При помощи HotRuby на веб-страницах можно использовать руби-скрипты. Для этого руби-код следует поместить в блок: HotRuby выделит его, пошлёт на компиляцию удалённому скрипту и затем отобразит результаты работы на странице. Данная реализация позволяет осуществлять доступ из Руби к объектам JavaScript.
Переменные в JavaScript
Данные, обрабатываемые сценарием JavaScript, являются переменными. Переменные представляют собой именованные контейнеры, хранящие данные (значения) в памяти компьютера, которые могут изменяться в процессе выполнения программы. Переменные имеют имя, тип и значение Имя переменной, или идентификатор, может включать только буквы a-z, A-Z, цифры 0-9 (цифра не может быть первой в имени переменной), символ $ (может быть только первым символом в имени переменной или функции) и символ подчеркивания _, наличие пробелов не допускается. Длина имени переменной не ограничена. Можно, но не рекомендуется записывать имена переменных буквами русского алфавита, для этого они должны быть записаны в Unicode. В качестве имени переменной нельзя использовать ключевые слова JavaScript. Имена переменных в JavaScript чувствительные к регистру, что означает, что переменная var message; и var Message; — разные переменные. Переменная создается (объявляется) с помощью ключевого слова var, за которым следует имя переменной, например, var message;. Объявлять переменную необходимо перед ее использованием. Переменная инициализируется значением с помощью операции присваивания =, например, var message="Hellow";, т.е. создается переменная message и в ней сохраняется ее первоначальное значение "Hellow". Переменную можно объявлять без значения, в этом случае ей присваивается значение по умолчанию undefined. Значение переменной может изменяться во время исполнения скрипта. Разные переменные можно объявлять в одной строке, разделив их запятой:
var message="Hellow", number_msg = 6, time_msg = 50;
JavaScript является нетипизированным языком, тип данных для конкретной переменной при ее объявлении указывать не нужно. Тип данных переменной зависит от значений, которые она принимает. Тип переменной может изменяться в процессе совершения операций с данными (динамическое приведение типов). Преобразование типов выполняется автоматически в зависимости от того, в каком контексте они используются. Например, в выражениях, включающих числовые и строковые значения с оператором +, JavaScript преобразует числовые значения в строковые:Получить тип данных, который имеет переменная, можно с помощью оператора typeof. Этот оператор возвращает строку, которая идентифицирует соответствующий тип.
Все типы данных в JavaScript делятся на две группы — простые типы данных (primitive data types) и составные типы данных (composite data types).
К простым типам данных относят строковый, числовой, логический, null и underfined. Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле.css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа; когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа; когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега. В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.