Как открыть сайт в html в браузере

Как утащить простой сайт за 5 минут

Когда начинаешь практиковаться в вёрстке сайтов, может быть очень полезно разобраться, как устроены сайты у других ребят. Вот как это сделать.

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

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

В чём идея

Мы будем копировать чужой сайт, чтобы его можно было запустить на своём сервере или на домашнем компьютере. Задача — не просто открыть сайт в браузере и посмотреть его код, а забрать из него все важные файлы — и стили, и скрипты, и изображения. Чтобы было проще, мы будем практиковаться на одностраничном сайте, но всё то же самое будет работать и на многостраничном.

❌ Мы не сможем утащить чужие PHP-скрипты и страницы, связанные с данными пользователя (например, не сможем утащить из интернет-магазина рабочую версию корзины с покупками). Для этого нужен доступ к файлам сервера, а этого у нас нет.

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

Вот этот последний этап мы и исправим: теперь мы будем сохранять чужие сайты к себе на диск.

Весь процесс покажем на примере сайта ux-posters.ru – простом одностраничном сайте, где есть картинки, стили и скрипты. Автору этого текста пришлось помогать авторам этого сайта с похожей задачей, так что пример свеженький.

Быстрый путь: грабберы

Есть категория программ под названием «веб-грабберы», или «веб-рипперы». Они работают так:

1. Ты говоришь программе, на какую страницу сайта зайти.
2. Программа собирает все ссылки с этой страницы, переходит по этим ссылкам и строит себе виртуальную карту сайта — то есть пытается понять, сколько на этом сайте страниц и как они связаны.
3. Потом граббер начинает ползать по этим страницам подряд, запрашивать их у сервера, получать ответы и сохранять ответы на вашем жёстком диске.
4. В какой-то момент граббер останавливается, потому что он скачал все доступные ему страницы с этого сайта.

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

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

❌ Минусы: часто он качает всё без разбора, оставляя на диске много дублей. Также он бессилен с сайтами, в которых контент выводится динамически или имеет нестандартную систему адресации.

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

Вот ссылки на грабберы для разных платформ:

• HTTrack — старый интерфейс из нулевых, но свою задачу выполняет полностью. Бесплатный и надёжный, работает везде.
• Getleft — мультиплатформенный граббер, который пытается выкачивать всё, до чего дотянется, включая PHP-скрипты.
• Cyotek WebCopy — для тех, кто любит только Windows, тоже бесплатный.

Сложный путь: ручное сохранение

Допустим, мы хотим сохранить какую-то отдельную страницу сайта или конкретные её части (например, картинки). Но эти картинки как-то так хитро встроены, что вы не можете просто нажать «Сохранить картинку как. ». Тогда потребуется ручной метод.

Заходим на страницу и нажимаем в браузере Ctrl + I (в Виндоус) или ⌥ + ⌘ + I (если у вас мак). Появляется окно «Инспектора», где видна внутренняя структура страницы:

Мы видим, что текущий документ в браузере состоит:

• из страницы index.html;
• скрипта likely.js;
• четырёх таблиц стилей;
• шрифтов, подключённых через сервис Google;
• папки с картинками.

Шрифты нам скачивать необязательно — сайт и так их подключит с сервера гугла, а всё остальное скачать нужно. Чтобы не создавать хаос на компьютере, создадим сначала папку ux-posters — в ней будет храниться наш сайт. Потом в эту папку сохраняем все файлы таким способом:

1. Нажимаем правой кнопкой мыши на очередной файл.
2. Выбираем пункт Save as, или «Сохранить как».
3. Пишем имя и расширение файла — точно так, как указано в списке.
4. Если лень писать самому — скопируйте перед этим название файла, нажав правую кнопку мыши и выбрав Copy file name, или «Скопировать имя файла».
5. Чаще всего название файла подставится само, но если нет — смотрите пункт 4.

Исключения в названии файлов два:

1. (index) — это index.html.
2. В любом файле знак вопроса и всё, что после него, писать не нужно.

Скачать можно всё, а можно только то, что вам нужно для работы и экспериментов. Например, если вам нужны только стили и код страницы, сохраняйте файлы .css и (index). Если нужны картинки, заходите в папку pics и сохраняйте всё оттуда.

Что в итоге

Если мы пройдёмся по всем папкам и сохраним в них всё нужное нам, у нас получится локальный слепок сайта. Теперь можно:

1. Изучить, как он устроен, что-то отредактировать и увидеть результат у себя на компьютере.
2. Открыть файл index.html в браузере, и будет ощущение, что вы зашли на сайт, но с локального компьютера. Сайт откроется по протоколу file:// — это так браузер говорит нам, что файл взялся с нашего компьютера, а не из интернета.
3. Запустить MAMP и завести на нём локальную копию сайта для экспериментов. Тогда браузер будет думать, что ходит за этим сайтом в интернет. Можно написать какие-нибудь php-скрипты и оживить сайт.

�� Важно понимать, что перед нами именно «слепок» — то, что мы бы увидели, если бы сервер сегодня ответил на наш запрос. Если завтра сервер будет отвечать по-другому, мы этого в своей локальной копии не увидим.

Когда ещё это пригодится

Защитить сайт перед наплывом пользователей. С помощью грабберов можно быстро создать неубиваемую статическую копию сайта и временно подменить ей динамическую версию сайта. Это полумера, но может сработать. А вообще вместо этого есть специальные надстройки, которые делают почти то же самое, но более умно, — поищите слово «кеширование».

Сделать копию своего блога, личного сайта или ещё чего-то важного вам, если вы потеряли к нему доступ, но сайт всё ещё на ходу.

Если вы едете туда, где не будет интернета, а вам нужна информация с сайта (например, путеводитель по чужой стране). Помните, что динамические карты и видеоролики так не сохранятся.

Сделать собственный «веб-архив» — это сервис, который ползает по сайтам и делает их «слепки» для истории. Благодаря этому сервису можно посмотреть, как выглядели ваши любимые сайты много лет назад — например, Яндекс.

Размещение и запуск HTML-публикации

Внимание! HTML -публикация является серверным решением. Это означает, что компьютер, на котором размещается HTML -публикация, выполняет роль сервера публикации. При этом к данной HTML -публикации можно получить доступ с других компьютеров через веб-браузер по ссылке, если открыть HTML -публикацию для общего доступа (подробнее об этом описано ниже в Таблице 1). Для запуска серверного решения необходимо на сервере публикации однократно запустить веб-сервер публикации — файл «HTML-publication.exe» (работа обеспечивается запускаемыми приложениями MySQL и Apache).

Для публикации в сети необходимо разместить папку со сформированной HTML -публикацией на компьютере, который будет выполнять роль веб-сервера, и запустить из нее файл » HTML -publication.exe». В результате в веб-браузере, установленном по умолчанию, откроется страница с HTML -публикацией со ссылкой вида http://localhost:/businessmodel.php?lang=ru-ru, по которой публикация будет доступна с данного компьютера, а в области уведомлений Windows появится ее иконка .

C помощью пунктов контекстного меню, вызванного от этой иконки, осуществляется управление доступом к публикации, открытие статьи справочной системы, закрытие HTML -публикации или ее открытие в браузере. Описание назначения пунктов этого контекстного меню приведено в Таблице 1.

Пункт меню	Назначение
Открыть	Открывает HTML -публикацию в веб-браузере, установленном по умолчанию.
Опубликовать для общего доступа / Прекратить общий доступ	Пункт меню Опубликовать для общего доступа открывает публикацию для внешнего доступа. При этом в веб-браузере, установленном по умолчанию, открывается страница со ссылкой вида http://:/businessmodel.php?lang=ru-ru, по которой с других машин можно открыть HTML -публикацию в веб-браузере. Эта ссылка может быть передана сотрудникам компании для доступа к HTML -публикации.

Таблица 1. Пункты меню управления HTML-публикацией

Внимание! Для того чтобы пользователи имели доступ к HTML -публикации, на компьютере, где она запущена, должен быть открыт соответствующий порт (номер порта см. в адресной строке браузера после наименования компьютера, на котором запущена HTML -публикация). При выполнении для HTML -публикации пункта меню Опубликовать для общего доступа будет сделана попытка открыть доступ к этому порту. В случае если попытка не удастся, необходимо будет открыть порты самостоятельно.

На компьютере может одновременно быть запущено несколько HTML -публикаций из разных папок.

В случае если сформирована новая HTML -публикация и требуется запустить ее таким образом, чтобы ссылка на нее оказалась той же, что и для одной из запущенных в текущий момент HTML -публикаций, следует действовать так:

Закройте эту запущенную HTML -публикацию при помощи пункта меню Выход контекстного меню, вызванного от иконки этой HTML -публикации в области уведомлений Windows;

Откройте новую HTML -публикацию, запустив из нее файл » HTML -publication.exe»;

Опубликуйте новую HTML -публикацию для доступа по сети при помощи пункта меню Опубликовать для общего доступа контекстного меню, вызванного от иконки HTML -публикации в области уведомлений Windows.

Предварительный просмотр страниц

Просматривайте ваши веб-страницы в Dreamweaver, в браузерах.

Функция просмотра в реальном времени позволяет просматривать страницы в браузере, а также просматривать изменения в браузере в реальном времени по мере написания кода.

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

Представление «Дизайн» также позволяет получить представление о том, как страница будет выглядеть при просмотре в Интернете, хотя при этом не выполняется ее рендеринг, как в браузерах.

Функция «Открыть в браузере» позволяет увидеть, как страницы будут отображаться в браузерах. Это оптимальный вариант для работы со страницами, которые используют динамические данные из баз данных, так как он не происходит в режиме реального времени.

В следующих разделах можно больше узнать о других типах просмотра в Dreamweaver.

Просмотр в реальном времени в браузере

Можно просматривать веб-страницы в реальном времени по мере разработки для них кода или дизайна в Dreamweaver. Данная функция позволяет писать код и одновременно просматривать веб-страницы в различных браузерах.

Щелкните «Просмотр в реальном времени» в строке состояния Dreamweaver.

У вас есть возможность просматривать веб-страницы в реальном времени в браузере.
Чтобы просмотреть веб-страницы в браузере, выберите любую из доступных опций браузера.

Можно изменить браузеры, которые отображаются в этом списке. Чтобы добавить или удалить браузер из списка, см. раздел Задание установок браузера.

Если у вас есть тестовый сервер, убедитесь в том, что при его настройке был включен параметр «Автоматически передавать файлы на тестовый сервер». Предварительный просмотр в реальном времени работает с файлами на тестовом сервере. Включение автоматической передачи файлов на тестовый сервер гарантирует, что изменения будут отображаться в реальном времени.

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

Задание установок просмотра в браузере

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

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

Выберите Файл > Просмотр в реальном времени > Изменение списка браузеров.

Если вы отмените выбор варианта По умолчанию — предварительный статический просмотр в браузере, то предварительный просмотр в реальном времени будет отключен. Вы можете открывать предварительный просмотр в браузере с помощью сочетаний клавиш основного и дополнительного браузеров. Кроме того, можно воспользоваться меню «Файл» или щелкнуть значок предварительного просмотра устройства в строке состояния.

Чтобы добавить браузер в список, нажмите кнопку со знаком «плюс» (+), заполните диалоговое окно «Добавить браузер» и нажмите кнопку «ОК».

Чтобы удалить браузер из списка, выберите браузер и нажмите кнопку со знаком «минус» (–).

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

Выберите один из вариантов «Основной браузер» или «Дополнительный браузер», чтобы указать, является ли выбранный браузер основным или дополнительным.

Основной браузер открывается клавишей F12 (Windows) или Option + F12 (Macintosh), а дополнительный — Ctrl + F12 (Windows) или Command + F12 (Macintosh).

Чтобы создать временную копию для просмотра и серверной отладки, установите флажок «Просмотр с использованием временного файла». (Чтобы обновлять документ напрямую, отмените выбор этого параметра.)

По умолчанию — статический предварительный просмотр в браузере. Это позволит пользователям выбирать режим предварительного просмотра файлов в браузере. Установив флажок, пользователи могут просматривать файлы с помощью функции «Открыть в браузере» в меню и с помощью ярлыков. Если флажок снят, то для предварительного просмотра файлов в браузерах будет использоваться предварительный просмотр в реальном времени. По умолчанию флажок снят, и для предварительного просмотра файлов в браузере будет использоваться предварительный просмотр в реальном времени.

Предварительный просмотр страниц при интерактивном просмотре

Интерактивный просмотр отличается от традиционного для Dreamweaver представления «Дизайн» тем, что подготавливает страницу для отображения в более реалистичном виде, подобном тому, который она будет иметь в браузере, и также доступном для редактирования.

Переключиться на интерактивный просмотр можно из представления «Дизайн». Однако переключение на интерактивный просмотр не похоже на переключение между любыми традиционными представлениями в Dreamweaver (такими, как «Код», «Разделение», «Дизайн»). При переключении на интерактивный просмотр из представления «Дизайн» последнее по сути переключается между двумя внутренними представлениями: редактируемым и «реалистичным».

При таком переключении представление «Дизайн» становится нередактируемым, однако в представлении «Код» по-прежнему можно редактировать код, после чего обновлять интерактивный просмотр и наблюдать результаты изменений. В интерактивном просмотре имеется дополнительная возможность просмотра интерактивного кода. Интерактивный просмотр кода похоже на интерактивное представление тем, что код в нем отображается в том виде, в котором реально выполняется браузером при подготовке страницы. Как и дизайн в интерактивный просмотр, код в интерактивном просмотре нередактируем.

Дополнительным преимуществом интерактивного просмотра является возможность «заморозить» выполнение кода JavaScript. Например, можно переключиться на интерактивный просмотр, а затем навести курсор мыши на строки таблицы jQuery, изменяющие цвет в результате действий пользователя. При «замораживании» кода JavaScript в интерактивном представлении страница сохраняется в текущем состоянии. Это позволяет отредактировать CSS или JavaScript, после чего обновить страницу, чтобы просмотреть влияние изменений. «Замораживание» JavaScript в интерактивном просмотре полезно, когда необходимо просмотреть и изменить свойства для различных состояний всплывающих меню и других интерактивных элементов, которые нельзя рассмотреть в традиционном представлении «Дизайн».

Просмотр страниц в интерактивном представлении.

Убедитесь, что выбрано представление «Дизайн» («Просмотр» > «Дизайн») или представления «Код и дизайн» («Просмотр» > «Код и дизайн»).

Нажмите кнопку «Интерактивный просмотр».

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

Чтобы работать со связанными файлами (такими, как таблицы стилей CSS), не выпуская из вида интерактивное представление, открывайте связанный файл с помощью панели инструментов «Связанные файлы» в верхней части документа.

Если в представлении «Код» или в связанном файле были произведены изменения, обновите интерактивное представление, нажав кнопку «Обновить» на панели инструментов «Документ» или клавишу F5.

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

Предварительный просмотр интерактивного кода

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

Убедитесь, что находитесь в интерактивном представлении.

Нажмите кнопку интерактивного представления кода. В Dreamweaver отображается интерактивный код, используемый браузером для выполнения страницы. Код выделен желтым цветом и не редактируем. При работе с интерактивными элементами на странице представление «Интерактивный код» выделяет изменения в коде.

Чтобы отключить подсветку изменений в представлении «Интерактивный код», выберите «Просмотр» > «Параметры интерактивного просмотра» > «Выделять изменения в интерактивном коде».

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

Чтобы изменить настройки «Интерактивного кода», выберите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh OS) и выберите категорию «Цвета кода».

Заморозить JavaScript

Выполните одно из действий, описанных ниже.

• Нажмите клавишу F6.
• Выберите пункт «Заморозить JavaScript» во всплывающем меню кнопки «Интерактивный просмотр».

Информационная панель в верхней части документа содержит сведения о том, заморожен ли JavaScript. Чтобы закрыть информационную панель, щелкните ссылку закрытия панели.

Параметры интерактивного просмотра

Помимо параметра «Заморозить JavaScript», имеются и другие параметры, доступные во всплывающем меню кнопки «Интерактивный просмотр» или в меню «Просмотр» > «Параметры интерактивного просмотра».

Заморозить JavaScript. Замораживает элементы, затронутые JavaScript, в их текущем состоянии.

Отключить JavaScript. Отключает JavaScript и повторно выводит страницу так, как она отображалась бы в браузере с отключенным кодом JavaScript.

Отключить внешние модули. Отключает внешние модули и повторно выводит страницу так, как она отображалась бы в браузере с отключенными внешними модулями.

Выделять изменения в интерактивном коде. Включает или выключает выделение изменений в представлении «Интерактивный код».

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

Следовать по ссылке. При следующем щелчке ссылка в представлении «Интерактивный просмотр» становится активной. Также чтобы сделать ссылку активной, ее можно щелкнуть в представлении «Интерактивный просмотр», удерживая клавишу Ctrl.

Следовать ссылкам непрерывно. Делает ссылки в представлении «Интерактивный просмотр» активными постоянно, пока они не будут отключены снова или страница не будет закрыта.

Автоматически синхронизировать удаленные файлы. Автоматическая синхронизация локальных и удаленных файлов при щелчке значка «Обновить» на панели инструментов «Навигация с помощью браузера». Dreamweaver размещает файл на сервере до обновления, поэтому оба файла становятся синхронизированными.

Использовать тестовый сервер в качестве источника документа. Используется в основном динамическими страницами (например, страницами ColdFusion) и выбрано по умолчанию для динамических страниц. Если выбран этот параметр, Dreamweaver использует в качестве источника данных для отображения интерактивного представления документа его версию, расположенную на тестовом сервере сайта.

Использовать локальные файлы при разрешении ссылок на документы. Параметр по умолчанию для нединамических сайтов. Если этот параметр выбран для динамических сайтов (основной документ которых расположен на тестовом сервере), Dreamweaver использует локальные версии связанных файлов (например, файлов CSS или JavaScript). Это позволяет вносить локальные изменения в связанные файлы и просматривать, как они отображаются, до их переноса на тестовый сервер. Если этот параметр не выбран, Dreamweaver использует версии связанных файлов с тестового сервера.

Параметры запросов HTTP. Открывает диалоговое окно расширенных настроек, где можно ввести значения, используемые при отображении интерактивных данных. Для получения дополнительных сведений нажмите кнопку «Справка» в этом диалоговом окне.

Открыть в браузере

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

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

Щелкните правой кнопкой мыши названия файла на панели инструментов «Документ», а затем выберите «Открыть в браузере».

Примечание.

Если браузеры в списке отсутствуют, выберите «Правка» > «Настройки» или Dreamweaver > «Настройки» (Macintosh), затем откройте категорию «Просмотреть в браузере» слева, чтобы выбрать браузер. Дополнительные сведения см. в разделе Задание установок просмотра в браузере.

Перейдите по ссылкам и проверьте содержимое страницы.
Примечание.

При просмотре документов в локальном браузере содержимое по ссылкам на корневую папку сайта отображаться не будет, если не определен тестовый сервер или в меню «Правка» > «Настройки» > «Просмотреть в браузере» не выбран параметр «Просмотр с использованием временного файла». Это связано с тем, что браузеры не распознают корни сайтов (в отличие от серверов).

Примечание.

Для просмотра содержимого по ссылкам на корень сайта поместите файл на удаленный сервер и выберите «Файл» > «Просмотреть в браузере» для просмотра.

Создание пустых страниц и файлов

This information applies only to the Original Course View. Your institution controls which tools are available.

Вы можете создать два типа содержимого, которые будут отображаться в списке содержимого в виде ссылок. С помощью этих ссылок учащиеся могут просматривать материалы. Эти типы содержимого экономят место на экране и уменьшают необходимость прокрутки.

Пустая страница . Вы можете размещать файлы, изображения и текст на одной странице. Описание не отображается вместе со ссылкой.

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

Создание пустой страницы

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

Кроме того, для важной информации можно создать пустую страницу непосредственно в меню курса. Например, можно добавить изображение карты для предстоящей экскурсии, сведения о приглашенном лекторе или руководство для итогового теста. Удаляйте пустые страницы из меню курса сразу после того, как они утратят актуальность.

Чтобы иметь доступ ко всем возможностям для преподавателей, убедитесь, что включен режим изменений.

С помощью редактора вы всегда можете управлять представлением содержимого, легко изменяя его внешний вид и порядок расположения.

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

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

Если для параметра Режим редактирования установлено значение ВКЛ. и вы щелкнете ссылку на пустую страницу, отобразится страница Изменить . Чтобы просмотреть пустую страницу так, как ее видят учащиеся, установите для параметра Режим редактирования значение ВЫКЛ .

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

Создание файла

Можно использовать тип содержимого файла для создания ссылки на файл в списке содержимого. Добавить описание к ссылке невозможно. Вы можете выбрать, будут ли пользователи просматривать файл как страницу внутри курса или в отдельных окне или вкладке. Чтобы просматривать содержимое, учащиеся должны загрузить определенные типы файлов, например документы Word.

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

Чтобы иметь доступ ко всем возможностям для преподавателей, убедитесь, что включен режим изменений.

1. В области содержимого, учебном модуле, плане занятий или папке нажмите вкладку Построить содержимое и в открывшемся меню выберите пункт Файл .
2. На странице Создать файл введите название и выберите файл. Нажмите кнопку Обзор моего компьютера , чтобы загрузить файл с компьютера. Файл сохраняется в папке верхнего уровня в хранилище файлов курса: «Файлы курса» или коллекции материалов. Файл можно также прикрепить из хранилища. Используйте параметр Выбрать другой файл , чтобы удалить файл, на который вы создали ссылку, и заменить его другим файлом.
3. Для параметра Открыть в новом окне выберите значение Да , чтобы открывать содержимое в новом окне или вкладке.
4. Выберите необходимые параметры доступности, отслеживания, а также даты отображения. Даты отображения не влияют на доступность файла (только на его видимость).

После добавления файл появится в списке содержимого. Содержимое файла можно изменить в любой момент. Откройте меню файла и выберите пункт Изменить .

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

Архивные пакеты содержимого

Вы можете создать занятие из нескольких взаимосвязанных HTML-страниц с переходами, изображениями, веб-ссылками и каскадными таблицами стилей (CSS). После этого можно создать сжатый ZIP-файл, а затем разархивировать его в хранилище файлов курса и выбрать начальную страницу. Учащиеся смогут просматривать содержимое занятия по порядку, и все ссылки будут работать. Стартовая страница откроется в новом окне или вкладке. Учащиеся могут закрыть ее, чтобы вернуться в область курса. Дополнительные сведения см. в следующем разделе.

1. Войдите в хранилище «Файлы курса» или в коллекцию материалов, чтобы добавить пакет. В меню Отправить щелкните пункт Отправить пакет , после чего пакет будет автоматически разархивирован.
2. Перейдите в область содержимого или папку, где вы предоставите ссылку на свое занятие. Щелкните вкладку Построить содержимое , чтобы открыть меню, и выберите пункт Файл .
3. На странице Создать файл нажмите кнопку Обзор курса или Обзор коллекции материалов , чтобы выбрать файл, который будет использоваться как стартовая страница для вашего пакета содержимого. Стартовая страница — это первая страница, которую увидят учащиеся, поэтому она должна включать возможность перехода на другие страницы в вашем пакете.
4. Выберите необходимые параметры доступности, отслеживания, а также даты отображения. Даты отображения не влияют на доступность файла (только на его видимость).

После добавления файл появится в списке содержимого. Содержимое файла можно изменить в любой момент. Откройте меню файла и выберите пункт Изменить .

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

Создание ссылок на HTML-файлы

Можно использовать тип содержимого «Файл», чтобы внедрить HTML-файлы в созданный вами веб-сайт. После отправки файлов HTML в раздел «Файлы курса» или коллекцию материалов необходимо выбрать файл начальной страницы, например index.html или page_1.html . Имя файла отобразится в поле Имя . Укажите имя так, чтобы пользователям было проще находить содержимое. Например, измените имя на «Начните отсюда» или «Смотрите урок 1».

При выборе HTML-файла отображается раздел Управление доступом , где можно установить уровни доступа для учащихся. Есть три варианта выбора:

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