Разработка структуры и содержания цифрового образовательного ресурса "Основы веб-программирования"

5.3. Множественный  выбор

В JavaScript существует оператор switch case, который позволяет обрабатывать различные случаи, в зависимости от значения переменной. Данный оператор присутствует в большинстве языков программирования, и именно о нём я и расскажу в этом материале.

Начну по традиции с общего вида оператора switch case в JavaScript:

switch(variable) { 
  case value_1: { 
    //блок операторов_1 
    break; 
  } 
  case value_2: { 
    //блок операторов_2 
    break; 
  } 
  case value_n: { 
    //блок операторов_n 
    break; 
  } 
  default: { 
    //блок операторов по умолчанию 
  } 
}

Смысл этого оператора очень прост. Переменная variable проверяется на своё значение, и если оно совпадает с одним из вариантов (value_1, value_2, ..., value_n), то выполняется соответствующий блок операторов. Если нет ни одного совпадения, то выполняется блок default (которого, кстати, может и не быть). Обратите внимание, что после каждого блока идёт оператор break (кроме default). Он нужен для того, чтобы после выполнения определённого блока, происходил выход из оператора switch case, иначе после попадания выполнения нужного блока, начнутся выполняться все последующие команды из других блоков, что бывает нужно крайне редко.

Давайте сразу приведу пример использования. Допустим, Вы просите пользователя ввести число от 1 до 3. Каждое число отвечает за определённое действие. Вот пример реализации такого "меню":

var change = prompt("Выберите действие:\n1 - Купить автомобиль\n2 - Продать автомобиль\n3 - Обменять автомобиль"); 
switch (change) { 
  case "1": { 
    document.write("Вы хотите купить автомобиль"); 
    break; 
  } 
  case "2": { 
    document.write("Вы хотите продать автомобиль"); 
    break; 
  } 
  case "3": { 
    document.write("Вы хотите обменять автомобиль"); 
    break; 
  } 
  default: { 
    document.write("Вы ввели некорректную команду"); 
    break; 
  } 
}

Первой строкой мы запрашиваем у пользователя его выбор. Обратите на символы "\n" - они означает переход на новую строку. Это делается исключительно для красоты. Можете убрать эти переходы и посмотреть на разницу в отображении.

На следующей строчке начинается оператор switch case. В качестве переменной для анализа мы выбрали change, значение для которой ввёл пользователь. Дальше мы анализируем её. Обратите, что значения стоят в кавычках. Это потому, что мы получаем от пользователя не число, а строку, и мы её должны сравнивать с другими строками. Если введёно что-то другое (не "1", не "2" и не "3"), то выводится "Вы ввели некорректную команду".

Вот и вся информация об этом операторе. Как видите, оператор switch case в JavaScript очень полезный и при этом очень простой. Конечно, можно было бы заменить его оператором if, но Вы только представьте, сколько условий Вы бы понаделали, а тут всё кратко, лаконично и понятно.

 

5.4. Калькулятор  в JavaScript

 

 

Глава 6. Использование офисных приложений для создания веб-страниц

6.1 Создание веб-страниц с помошью Microsoft Word

В качестве редакторов, упрощающих создание Web-сайтов, можно использовать приложения Microsoft Office – Word, Excel, PowerPoint и др. При этом пользователь может не знать язык HTML и иметь привычную среду для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

Создать Web-станицу в Word можно двумя способами: с помощью Мастера или шаблона либо преобразовав существующий документ Word в формат HTML. При этом Word сам генерирует тэги HTML, хотя и не оптимальным образом.

Первый способ создания HTML-документов достаточно прост – надо начать создание документа "с нуля" и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

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

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие ему графические элементы оформления. Например, при сохранении файла с рисунками frieds.htm Word создает папку frieds.files, в которой и разместит все рисунки.

В соответствии с этим при создании сайта – группы взаимосвязанных Web-страниц – рекомендуется помещать сайт в отдельную папку и при перемещении или публикации сайта строго сохранять всю внутреннюю структуру папок.

При подготовке публикации материалов в Интернет, созданных в Microsoft Word, полезно знать особенности преобразования в формат HTML. Некоторые из них приводятся ниже (табл.1).

Таблица 1

Конвертирование элементов оформления вHTML

Элемент документаWord	ПреобразованиеWord ® HTML
Размеры шрифтов	ВWord изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием на размер шрифта
Текстовые эффекты:  приподнятый, с тенью, уплотненный и т.д.	Текстовые эффекты не сохраняются, но сам текст остается
Начертания:  полужирный, курсив, подчеркивание	Начертания шрифта остаются, но некоторые виды подчеркивания преобразуются в сплошную линию
Анимация текста	Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно использовать бегущую строку (панель "Web-компоненты")
Графика	Изображения преобразуются в форматGIF или JPEG, если они не были сохранены до этого в таких форматах. Линии преобразуются в горизонтальные линии
Графические объекты: автофигуры, фигурный текст, надписи и тени	Объекты преобразуются в файлы форматаGIF. В среде редактирования Web-страницы можно вставить графические средства "Вставка" – "Рисунок"
Таблицы	Таблицы преобразуются, однако параметры, не поддерживаемыеHTML, не сохраняются (например, цветные границы и границы переменой ширины)
Нумерация страниц и колонтитулы	Так как документHTML считается одной Web-страницей, то понятие колонтитулов отсутствует и нумерация страниц не сохраняется
Поля страниц и многоколонный текст	Чтобы сохранить разметку страницы, следует использовать таблицы
Стили	Определенные пользователем стили преобразуются в прямое форматирование, если оно поддерживаетсяHTML

 

При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода. Это можно сделать, вызвав окно редактора через меню "Вид" – "Источник HTML". До того как перейти в этот режим, следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить.

Другая возможность перехода в режим редактирования НТМL – это открыть документ в Браузере и вызвать меню "Вид" – "В виде HTML". По умолчанию редактирование выполняется в Блокноте.

Хотя Word отображает документ практически в том же виде, в каком он в дальнейшем будет находиться в Браузере, предварительный просмотр Web-документа можно выполнить, не покидая Word.

В меню "Вид" установлены способы отображения документа Word (рис.1). При выборе "Web-документ" файл отображается так, как будет выглядеть в Браузере, установленном на компьютере. Через меню "Вид" можно вернуться к обычному режиму работы с документом.

Рис.1. Способы отображения документаWord

 

6.2. Создание Web-страниц средствами PowerPoint

PowerPoint позволяет сохранить  презентацию в виде набора Web-страниц. Для выполнения этой операции  необходимо создать презентацию  по наиболее актуальной для  вас теме.

Кнопка Веб-параметры открывает диалоговое окно, в котором устанавливаются параметры Web-страницы.

Параметры вкладки Общие позволяют включить в состав Web-страницы содержание презентации и кнопки для перехода от слайда к слайду, установить цветовую схему, которую PowerPoint использует при смене слайдов, обеспечить просмотр анимации.

При просмотре публикации в окне браузера в нижней части экрана расположена кнопка Полноэкранная презентация, нажатием на которую обеспечивается просмотр презентации.

6.3 Microsoft Office Publisher 2003

Publisher является прекрасным  средством для разработки веб-узла, особенно если это ваш первый  опыт в этом деле. В этой  программе реализован понятный  и удобный подход к разработке  веб-страниц — "что видишь на  экране, то и получишь в результате" — в сочетании с привычным  интерфейсом Microsoft Office. Таким образом, с помощью Publisher вы можете создать  прекрасный веб-узел независимо  от вашей подготовки.

Publisher не является ни HTML-редактором, ни программой управления веб-узлами, как Microsoft Office FrontPage 2003. Publisher оптимально  подходит для создания небольших  веб-узлов, для которых не требуется  сложное программирование и использование  баз данных.

Новые мастера создания веб-узлов

У вас есть товары, которые необходимо представить? Вы предоставляете услуги? Новые мастера создания веб-узла из 3 страниц, веб-узла продажи товаров и веб-узла профессиональных услуг упрощают представление информации в Интернете. Все, что необходимо знать — какая информация должна быть представлена на веб-узле.

Если вам не удается придумать что-то особенное, не расстраивайтесь. Можно начать с мастера удобного создания веб-узлов, который позволит выбрать цели веб-узла.

Мастеры создания веб-узлов в Publisher 2003 содержат заготовки веб-страниц, включая страницы "Домашняя страница", "О нас", "Наши координаты", а также страницы каталога и страницы описания товаров или услуг, которые позволят очень быстро создать прекрасный веб-узел. Благодаря возможности выбирать из множества макетов страниц и панелей навигации профессионального качества вы сможете создать прекрасный и полезный веб-узел, отвечающий вашим целям.

Как запустить мастер создания веб-узла

1. Запустите Publisher.

2. В области задач Новая публикация выберите пункт Веб-узлы и электронная почта, а затем щелкните Веб-узлы.

3. Щелкните мастер, который требуется запустить.

Типы заготовленных веб-страниц

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

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

Доступны макеты следующих типов страниц:

• О нас

• Наши координаты

• Вопросы и ответы

• Календарь

• Фотоколлекция

• Задания

• Продукты

• Услуги

• Проекты

• События

• Дополнительные ссылки

Как добавить в веб-узел страницу нового типа:

1. Откройте публикацию, соответствующую веб-узлу.

2. В сортировщике страниц, расположенном в левом нижнем углу окна Publisher, щелкните страницу, за которой должна следовать новая страница.

3. В меню Вставка выберите команду Страница.

4. Выберите нужный тип страницы и нажмите кнопку ОК.

Усовершенствования панелей навигации

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

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

Как добавить панели навигации при разработке веб-узла с использованием мастера создания веб-узлов:

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

• Можно изменить расположение панелей навигации, выбрав нужный вариант в области задачПараметры веб-узла в группе Панель навигации.

• Можно также щелкнуть панель навигации, чтобы выбрать ее, а затем щелкнуть значок мастера в нижней части объекта панели навигации, чтобы открыть область задач "Панель навигации", в которой можно добавлять ссылки и вносить изменения.

Как добавлять панели навигации при создании веб-узла с нуля:

1. В меню Вставка выберите команду Панель навигации и нажмите кнопку Создать.