Прикладные программы для создания сайта
Прикладная программа FrontPage 2003 – это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования Web — среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на сервер в сети Интернет.
Web–страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).
Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на Web — страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML.
Сайт или Web-узел – это набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые веб — страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов.
На каждом сайте существует одна Web-страница, которая называется главной или домашней. Домашняя страница – первая Web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта.
Обычно сайт размещается на Web-сервере – компьютере, который предоставляет доступ к Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.
Окно прикладной программы FrontPage
После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появится окно программы, в котором отображается новая страница (нов_стр_1.htm). В области задач отображается панель Приступая к работе.
Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: «Конструктор», «Код», «С разделением» и «Просмотр». В режиме «Конструктора» как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.
В режиме «Код» на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .
В режиме «С разделением» — на экране отображается Web-страница одновременно в режиме Код и в режиме Конструктор. В режиме просмотра Web–страница имеет вид аналогичный ее отображению в Web–браузере.
Команды, которые предназначены для работы с Web–страницами и Web–узлами, расположены в меню Вид программы FrontPage:
Страница – это режим просмотра и разработки страницы.
Папки – отображается структура папок текущего сайта.
Удаленный узел – узел, который находится на сервере сети Интернет.
Отчеты – предоставляется сводка об Web – узле.
Переходы – отображается структура переходов между страницами сайта.
Гиперссылки – открывает список ссылок текущей страницы.
Задачи – открывает список задач для текущего сайта
Создание Web-страниц в прикладной программе FrontPage
Создание новой пустой Web-страницы
Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб — страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.
Создание веб–страницы на основе шаблонов FrontPage
Создать новую страницу можно также на базе одного из шаблонов. Для этого необходимо выбрать команду «Другие шаблоны страниц» в области задач. На экране будет отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны страниц по категориям.
Создание веб–страницы на основе имеющихся Web-страниц в ПК
Создать веб–страницу можно и на базе имеющихся, на компьютере веб–страниц. Для этого необходимо в области задач выбрать команду «Из имеющейся страницы» и в появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.
Создание сайта в прикладной программе FrontPage
Создание нового пустого сайта или создание веб-узла без содержимого
Для создания нового пустого сайта надо выполнить команду Файл/Создать и выбрать в области задач команду «Другие шаблоны веб–узлов». Откроется окно диалога Шаблоны веб–узлов, в котором необходимо выделить Пустой веб–узел и щелкнуть ОК. В окне приложения FrontPage будет отображаться веб — узел, который представлен на рисунке.
Для создания пустой домашней страницы в новом веб-узле необходимо перейти в режим Переходы и щелкнуть на кнопке Новая страница на панели Переходы, в рабочем поле появится домашняя страница (для создания домашней страницы можно также использовать контекстное меню).
Дважды щелкните на домашней странице левой кнопкой мыши, и она откроется в режиме конструктора для редактирования (страница — index.htm).
Далее можно осуществить разработку домашней страницы (создать разметку или структуру страницы, ввести текст, рисунки и т.д.), а затем к домашней странице можно добавить страницы в режиме Переходы. Для этого в режиме Переходы выделите домашнюю страницу и щелкните на кнопке Новая страница на панели Переходы или примените контекстное меню. Будет добавлена Новая страница 1, которая представлена на рисунке. Далее добавьте столько страниц, сколько необходимо для сайта, затем страницы можно переименовать и изменить порядок их следования. Далее на каждую страницу нужно ввести содержание или контент (текст, таблицы, картинки и т.д.), в результате получим сайт.
Создание сайта на основе шаблона редактора FrontPage
Для создания сайта на основе шаблона выполните Файл/Создать и в области задач щелкните команду Веб – пакеты, откроется окно диалога Шаблоны веб–узлов.
Выберите требуемый шаблон или мастера для создания нового сайта. Созданный сайт имеет разметку и дизайн, но в нем отсутствует контент. Далее в страницы этого сайта необходимо ввести соответствующий текст, рисунки, скрипты, счетчики и другие элементы сайта.
3.3. Прикладные программы для создания Веб-сайтов
3.3.3. Обучение созданию Web — страниц
Создание новой пустой Web — страницы
Если при открытии окна приложения FrontPage в нем отображается новая пустая страница, то разработку веб — страницы можно осуществлять на базе этой страницы. Если при открытии редактора, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач «Пустая страница».
В окне приложения появится новая пустая страница. Сохраняем страницу, но перед тем, как сохранить страницу в окне «Сохранить» создаем папку, например EN101, в которой создаем вложенную папку images для рисунков, а затем сохраняем страницу в папке EN101. Имя страницы назначаем — index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением .htm. Таким образом, в папке EN101, будет находиться вложенная папка images и файл index.htm.
Рисунки для веб — страницы должны быть заранее подготовлены и вставлены в папку images, причем имя рисунка должно состоять из символов латинского алфавита. Скопируем в папку images рисунки для создания веб – страницы, посвященной изучению английского языка в Интернет.
Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы, можно применить Макеты страницы, которые расположены на панели задач «Макеты таблицы и ячейки» в области задач. Установим в области задач «Макетные таблицы и ячейки»
Далее щелкаем на требуемом макете таблицы, в результате чего получим размеченную страницу, которая представлена на рисунке.
1. Устанавливаем ширину (в точках или процентах) странички равную 900 точек (ширина первого столбца – 213 точек, ширина второго столбца – 687 точек). Для этого подводим указатель мыши к верхней границе и когда от примет вид наклоненной влево стрелки щелкаем левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину столбца.
3. В ячейках таблицы я установил цифры: 1, 2, 3, 4 (эти цифры будут заменены содержанием ячеек), чтобы можно было легко ориентироваться. Итак, в первую ячейку можно установить рисунок («Вставка / Рисунок / Из файла», выбираем рисунок из папки images). Вставим, например, логотип компании EN101, которая ведет курсы дистанционного обучения иностранных языков в Интернет.
5. Во вторую ячейку помещаем заголовок сайта, например «Английский язык в Интернет». В режиме конструктора вводим текст. Выбираем шрифт Verdana (наиболее распространенный шрифт для веб — страниц), размер 24 пт, цвет темно-синий (код цвета: 000080), выравнивание по центру.
6. В ячейке 3 размещаем навигацию, для перехода на другие (будущие) странички. Вводим текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание по центру. Далее вводим текст (шрифтом Verdana, размер шрифта 8 пт): Главная, О компании En101, Бизнес-обзор проекта, Способы оплаты, выделяем эти строки и щелкаем на кнопке маркеры на панели инструментов форматирования. Таким образом, создали маркированный список для навигации.
7. Устанавливаем гиперссылку для строки Главная. Выделяем строку Главная, щелкаем правой кнопкой мыши и из контекстного меню выбираем команду Гиперссылка. Откроется окно диалога, в котором надо в папке EN101 выделить файл index и нажать ОК.
8. Создаем ссылки на партнерские сайты. Устанавливаем курсор ниже списка и выбираем команду «Таблица / Вставить / Таблица», в открывшемся окне диалога устанавливаем: Строк – 1, Столбцов – 1; Выравнивание – по центру; Задать ширину: 98%; Задать высоту: 30 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет-темно-синий (код: 000080). Далее щелкаем Применить и ОК. Затем в созданную таблицу вводим текст « ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размер шрифта 10 пт, выравнивание по центру, цвет белый.
Ниже таблицы ПАРТНЕСКИЕ САЙТЫ вводим адреса требуемых сайтов:
http://lessons-tva.info/
http://tva.jino.ru/
http://vladant.inmarket.biz/
http://tva.en101.com
http://en101.tva.jino.ru/
и создаем гиперссылки. Например, выделяем адрес http://lessons-tva.info и вызываем контекстное меню, в котором выбираем команду Гиперссылка. В открывшемся окне диалога в строке Текст выделяем http://lessons-tva.info и копируем (Ctrl+C), затем установить курсор в строку Адрес и вставить из буфера обмена (Ctrl+V), щелкнуть ОК.
9. В ячейке 4 размещаем текст и рисунки. Текст можно вводить с клавиатуры или вставлять скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только из папки images, которую предварительно создаем при сохранении веб – страницы.
10. Добавляем таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты Вашей интеллектуальной собственности на данную веб-страницу. Кроме того, в этой таблице располагаются счетчики. Для этого устанавливаем курсор ниже страницы (вне поля страницы, т.е. ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выбираем команду «Вставить макетную таблицу». Размеры этой таблицы подгоняем под размеры страницы, например, устанавливаем 900х57 точек, размер границы — 1, цвет — темно-синий (код: 000080), цвет фона — белый. В созданную таблицу вводим текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved
11. Добавляем цвет фона вокруг страницы. Выбираем команду Формат / Фон, в открывшемся окне диалога на вкладке форматирование устанавливаем цвет фона – темно-синий (код: 000080)
12. Добавляем и заполняем метатеги (между тегами
и ) в режиме Код:В результате разработки получим готовую веб–страницу, фрагмент которой представлен на рисунке
3.3. Прикладные программы для создания сайтов
3.3.4. Создание сайта и страниц в FrontPage
Планирование сайта
Планирование сайта является одной из самых сложных задач. Как правильно расположить на страницах будущего сайта имеющуюся у Вас информацию? Какова должна быть структура сайта? Какие страницы должен иметь сайт? Какой дизайн должны иметь страницы сайта? Какая должна быть навигация по сайту?
Эти и многие другие проблемы, связанные с разработкой сайта, должны быть решены до применения прикладных программ для разработки сайтов.
Допустим, что мы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у нас информацию мы можем изложить на четырех страницах:
Способы оплаты
Выбираем имя сайта исходя из вида деятельности, например: lessons-en101.
Назначаем имена страницам:
info — О компании
business- Бизнес-обзор проекта
pay — Способы оплаты
В качестве главной страницы используем созданную ранее веб-страницу Главная (index). Создаем структуру сайта, которая представлена на рисунке.
Подготовим текст в редакторе Word для каждой страницы и рисунки в Adobe Photoshop в форматах GIF, JPEG или PNG с разрешением 72 пикс/дюйм, кроме того, можно использовать скрипты.
Далее можно зарегистрировать домен второго уровня в одной из зон (ua, ru, com, net, info и т.д.) и после разработки сайта выбрать платный хостинг, который устраивает по скорости доступа и предоставляет необходимые услуги для эффективной работы сайта. Если мы будем располагать сайт на бесплатном хостинге, то можно выбрать, например, хостинг на сервере narod.ru. Для этого необходимо будет зарегистрироваться на сервере и получить бесплатный хостинг. В этом случае у Вас будет домен третьего уровня, например: lessons-en101.narod.ru.
Создание сайта с помощью приложения FrontPage
1. Для создания сайта с помощью приложения FrontPage необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage, в котором будет отображаться предыдущий сайт или страница. Для выхода из предыдущего сайта или страницы в FrontPage надо выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел», либо то и другое, если были открыты узел и страница.
Затем выполняем команду Файл / Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:\Documents and Settings\ТВА\Мои документы\Мои веб-узлы\lessons-en101) и щелкнуть ОК. На рисунке представлен фрагмент окна диалога «Шаблоны веб – узлов», в котором указан адрес нового сайта.
После сохранения сайта на экране в окне приложения FrontPage будет отображаться новый веб-узел в режиме папки.
2. Создание в FrontPage домашней страницы для нового сайта. Создание домашней страницы в FrontPage можно осуществлять по-разному. Например, можно щелкнуть на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке
3. Затем копируем содержимое ранее созданной папки EN101, в которой находятся папка images и страничка index (папка _vti_cnf формируется автоматически при создании веб-страницы). Содержимое папки EN101 представлено на рисунке.
Вставляем сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла lessons-en101, которая представлена на рисунке.
4. Далее дважды щелкаем на странице index.htm в открытом окне веб-узла, в результате главная страница откроется в режиме страница, которая показана на рисунке.
Таким образом, в качестве домашней страницы в новом сайте использована ранее созданная страница index.htm (Английский язык в Интернет). Можно создавать главную страницу и другими способами, изложенными в разделе 3.3.2. Знакомство с программой FrontPage.
5. Создаем в редакторе FrontPage структуру сайта , т.е. к главной странице добавим еще три страницы: info — О компании; business — Бизнес-обзор проекта; pay — Способы оплаты. Для этого надо перейти в режим Переходы, выполнив команду Вид/Переходы. Затем необходимо выделить домашнюю страницу и щелкнуть на кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1. Аналогичным образом добавляем еще две новые страницы. Структура сайта представлена на рисунке.
6. Переименование Новых страниц в FrontPage. Переходим в режим папки и с помощью контекстного меню меняем имена Новая страница 1 на info, Новая страница 2 на business, Новая страница 3 на pay.
7. С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы info, business, pay. Для этого открываем главную страницу в режиме Страница и выполняем команду «Правка / Выделить все», и щелкаем на кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды на страничке info, она откроется в режиме Страница, затем щелкаем на кнопке Вставить. Содержимое главной страницы скопируется в страницу info, аналогично копируем содержимое главной страницы в остальные две страницы.
8. На каждой страничке сайта создаем ссылки для всех пунктов навигации:
Например, выделяем пункт навигации «Бизнес-обзор проекта» и с помощью контекстного меню открываем окно диалога Добавления гиперссылки, в котором выделяем business.htm и щелкаем ОК. Аналогично создаем гиперссылки для всех пунктов навигации на всех страницах. На рисунке представлен фрагмент окна диалога Добавления гиперссылки.
9. Далее на страницах: «О компании»; «Бизнес-обзор проекта»;»Способы оплаты» изменим содержание в некоторых ячейках, т.е. введем новый текст и рисунки, которые были подготовлены заранее для этих страниц.
10. Добавляем и заполняем метатеги (между тегами
и ) на страницах: «О компани»; «Бизнес-обзор проекта»; «Способы оплаты» в режиме Код.11. Переименование заголовков страниц в режиме Переходы. Выделить страницу и с помощью контекстного меню осуществить переименование:
Новая страница 1 переименовать на «О компании».
Новая страница 2 переименовать на «Бизнес-обзор проекта».
Новая страница 3 переименовать на «Способы оплаты».
В результате разработки получим сайт, который состоит из четырех веб-страниц. Этот сайт, созданный с помощью FrontPage в файловой системе ПК, можно разместить на веб-сервер в сете Интернет или Интранет.
Для разработки собственного сайта в FrontPage скачайте:
Образец созданного сайта — Скачать
Образец созданной веб-страницы — Скачать
Приложение для подбора цвета — «Color» — Скачать
Книга Book-html. Азы HTML — Скачать
Текст для создания страницы и сайта — Скачать
Рисунки для создания страницы и сайта — Скачать
Для разработки собственной веб-страницы скачайте:
Образец созданной веб-страницы — Скачать
Приложение для подбора цвета — «Color» — Скачать
Книга Book-html. Азы HTML — Скачать
Похожие страницы:
Создание индивидуального сайта
Лабораторная работа >> Информатика
. «Создание индивидуального сайта» студента 5 курса, группы М-064 Ткаченко Ивана Сергеевича Специальность – 010501 «Прикладная . Цель работы 3 Введение 4 2 Структура сайта 5 3 Основные средства, используемые для создания сайта 6 Язык HTML 6 4 Структура .
Программы обработки и просмотра графических изображений
Дипломная работа >> Информатика
. окраской. Пакеты прикладных программ растровой графики предназначены для работы с . Создание текстур для 3D моделей. 8. Создание графических элементов дизайна и оформления для сайтов . Microsoft», то найти программу для создания презентаций более интегрированную .
Научно-методические основы изучения темы Прикладное программное обеспечение в профильном курсе
Реферат >> Информатика
. для их реализации. Желание объединить функции различных прикладных программ в единую систему привело к созданию . ориентированного программирования и электронных таблиц»; «Технология создания сайтов»; «Компьютерная графика»; «Учимся проектировать .
Создание приложений для динамического представления Web-страниц
Реферат >> Информатика, программирование
. среду выполнения для прикладных компонентов, расположенный между клиентом – с одной стороны и данными и прикладными программами – с другой . его возможности в некоммерческой среде. Для создания динамического сайта нужно выбрать один из следующих .
Разработка дистанционных технологий обучения для гуманитарных специальностей
Реферат >> Информатика
. приходится создавать отдельные прикладные программы для разных систем управления обучением – для того, чтобы . сайтов. Основные инструменты дистанционного обучения Содержимое также может формироваться с помощью инструментов для создания программ .
1. Технологии создания сайта
1. HTML — это язык гипертекстовой разметки, который используют для создания сайтов. С помощью специальных тегов и текста необходимо описать команды для браузера. Записывается такая последовательность в простом текстовом редакторе (Блокнот). Можно воспользоваться программой Notepad++ , которая подсвечивает синтаксис и ошибки языка HTML .
Рис.\(1\) Код HTML
2. Можно создать документ в текстовом процессоре ( Microsoft Word, Writer ). Этот способ отлично подойдёт для тех, кто не умеет пользоваться профессиональными инструментами для создания сайтов. Для этого необходимо открыть Word , назвать документ, например, домашняя страница и сохранить как веб-страницу. Далее можно оформить страницу по вашему желанию, если сайт планируется сделать многостраничным, то необходимо каждую отдельную страницу создавать в новом файле, после чего связать все файлы гиперссылками.
3. Воспользоваться программой инструментом для создания сайтов — HTML редактором . Такие программы имеют больший функционал, по сравнению с текстовым редактором. Проверка синтаксиса, подсказки, механизмы автозаполнения, визуализация кода (т.е. при написании кода в отдельном окне программы сразу показывается результат). Все эти инструменты значительно сокращают затраченное время на создание сайта и в результате получается чистый функциональный код. Примеры HTML редакторов : WYSIWYG , Visual Studio Code , Atom и другие.
 |
 |
 |
| Рис. \(2\) Редактор WYSIWYG | Рис. \(3\) Visual Studio Code | Рис. \(4\) Редактор Atom |
Создание Web-страниц с помощью Word
ТЕМА 8
СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ 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-страниц, рекомендуется помещать сайт в отдельную папку, и при перемещении или публикации сайта строго сохранять всю внутреннюю структуру папок. При подготовке публикации в Интернет материалов, созданных в Word, полезно знать особенности преобразования в формат HTML. Некоторые из них приводятся ниже (табл. 8.1). Таблица 8.1
Рекомендуемые материалы
Ответы на Аттестацию официального партнера amoCRM 2023
Информатика
Расчетно-графическая работа по курсу «Программирование». Семинар 2. Овладение навыками обработки символьных данных.Вариант 16
Программирование и алгоритмизация
РК №1 — Вопросы
Информатика
Семинар 2, вариант 4
Программирование и алгоритмизация
Пак ответов итоговый тест
Программирование и алгоритмизация
Все домашки МИРЭА по информатике.
Информатика
При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода. Это можно сделать, вызвав окно редактора через меню «Вид» — «Источник HTML». До того, как перейти в этот режим следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить. Другая возможность – открыть документ в Браузере и вызвать меню «Вид» — «В виде HTML». По умолчанию редактирование выполняется в Блокноте. Хотя Word отображает документ практически в том же виде, как он в дальнейшем будет выглядеть в Браузере, предварительный просмотр Web-документа можно выполнить, не покидая Word.
 Рис. 8.1 |
На рис. 8.1. приведены способы отображения документа Word, устанавливаемые в меню «Вид». При выборе «Web-документ» файл отображается так, как будет выглядеть в Браузере, установленном на компьютере. Через меню «Вид» можно вернуться к обычному режиму работы с документом. |
ОСНОВНЫЕ ТЕРМИНЫ ASCII (American Standard Code for information Interchange – Американский стандартный код для обмена информацией) – семиразрядный код для представления текстовой информации. GIF (Graphics Interchange Format – формат обмена графикой) – используется для немногоцветных четких изображений, поддерживает прозрачные области и анимацию. HTML (Hyper Text Markup Language) – язык разметки гипертекстов. JPEG (Joint Photography Experts Group – объединенная группа экспертов по машиной обработке фотоизображений) – распространенный формат растровой графики, который идеально подходит для сканируемых фотографий. Web—page (Web-страница) – электронный документ, предназначенный для размещения (размещенный) в Интернет. Web—site (Web-сайт) – совокупность Web-страниц, связанных между собой темой, гиперссылками и близким расположением в Интернет. Web server (Web-сервер) – сервер, предназначенный для размещения Web-сайтов в Интернет, и предоставляющий услуги по запросам клиентов. WYSIWYG (What You See Is What You Get – что вижу, то и имею) – тип редакторов, в которых документ отображается так, как он будет напечатан или представлен в Интернет. ЗАДАНИЕ № 8
Тема: Создание Web-сайта на основе программных приложений
MS Office (Word и Excel)
 |
Часть 1. Создание группы Web-страниц методом преобразования
документов MS Office 1. На рабочем диске подготовить папку для размещения Ваших документов. 2. Создать документ Word следующего содержания. Главный заголовок, например Объект WordArt: Далее 3 – 4 абзаца о своем происхождении (краткая автобиография). Затем разместить текст: «Далее Вы можете узнать подробности:» И создать оглавление, состоящее, например, из 2-х пунктов. Мои увлечения Мои друзья 3. Оформить документ и сохранить в своей папке на жестком диске под именем main.doc. 4. Создать документ Word, посвященный Вашим увлечениям. Сохранить документ под именем hobby.doc в своей папке. Документ должен быть оформлен, иметь нижний колонтитул и кроме текста содержать рисунки. 5. Создать книгу Excel с таблицей по приведенному образцу (рис. 8.2), сохранить под именем friends.xls.
Для вычисления средних значений должны быть использованы формулы.
| Мои друзья | |||
| Имя | Возраст | Рост | Вес |
| Вася | 18 | 189 | 90 |
| Зина | 22 | 170 | 67 |
| Коля | 45 | 165 | 60 |
| Лена | 25 | 180 | 70 |
| Среднее значение | 27,5 | 176 | 71,75 |
Рис. 8.2. Пример таблицы для файла friends.xls 5.1. Построить графики, иллюстрирующие сведения о Ваших друзей. Расположить графики, под таблицей, подогнать размеры таблицы и графиков. 5.2. Подготовить лист к печати: 5.2.1. Настроить параметры вкладки «Страница…» в режиме Предварительного просмотра, создать колонтитулы. 6. Установить связи между документами с помощью гиперссылок. 6.1. Открыть главный документ main.doc и последовательно выделяя заголовки разделов, закрепить за ними гиперссылки («Меню — Вставить») на соответствующие документы. 6.2. Сохранить документ и проверить работоспособность гиперссылки. Возврат в Главный документ выполнять с помощью кнопки 
на панели инструментов 7. В главном документе установить закладку на заголовок Мои увлечения. Дать ей название «Хобби». Сохранить документ. 8. Создать в конце каждого вспомогательного документа гиперссылки, обеспечивающие возврат в основной документ. 8.1. Подготовить рисунок для обеспечения возврата из вспомогательных документов в главный. Например, рисунок 
можно получить с помощью создания графической копии активного окна в буфере (Alt+PrintScreen) и дальнейшего редактирования рисунка в редакторе Paint. 8.2. Вставить в конец каждого из документов рисунок и закрепить за ним гиперссылку на документ main.doc. В файле hobby.doc гиперссылка должна обеспечивать переход на закладку «Хобби». 9. Сохранить документы и проверить работу гиперссылок. 10. Создать группу связанных Web-страниц, методом преобразования подготовленных документов. 10.1. Подготовить папку для Web-документов с именем My_Web. 10.2. Последовательно раскрывая подготовленные ранее документы, сохранить их в папке My_Web, указав
Тип файла: Web-страница (*.htm; *.html) 10.3. Закрыть все документы, проанализировать изменения, произошедшие в структуре папок. 11. Просмотреть Web-документы, начиная с main.htm. Проанализировать, какие элементы документов изменились или вовсе исчезли. Сделать попытку сделать переход по гиперссылке. Убедиться в том, что связи между Web-страницами нуждаются в редактировании. 12. Отредактировать Web-документы, изменить гиперссылки, выполнить дополнительное оформление. Внимание: Для перехода из Браузере в режим редактирования нужно воспользоваться меню «Файл» — «Править в Microsoft Word for Windows» или кнопкой 
на панели инструментов. 13. Сохранить и закрыть все документы, скопировать папку My_Web на диск A:. Предъявить работу Web-страниц преподавателю. Часть 2. Создание новых Web-документов с помощью
приложений MS Office 1. Познакомиться со структурой и составом многостраничного гипертекстового документа, объединяющего четыре страницы (см. приложение). 2. Создать папку с именем Presentation, а в ней папку для Ваших рисунков — Gallery. 3. Подготовить рисунки для включения их в соответствующие страницы. Сохранить их в папке Gallery в виде отдельных файлов формата bmp, gif или любого другого формата, используемого в Интернет. Обратить внимание на размер рисунков и объем файлов. Объем файлов не должен превышать 3 — 10 КБ. 4. Создать отдельный файл для каждой страницы с помощью текстового процессоа Word (стр.1,2,4). Для Страницы 3 использовать готовый файл friends.htm. Сохранять файлы в формате htm или html в папке Presentation. 4.1. Запустить текстовый процессор Word и с его помощью создать главную страницу, сохранить файл в формате html под именем index.htm. 4.1.1. При создании структурированного документа рекомендуется использовать таблицу. После размещения объектов снять обрамление таблицы. 4.1.2. Выполнить оформление документа. Для главного заголовков использовать объект WordArt, для прочих – стиль Заголовок 4.1.3. Для оформления фона использовать один из текстурных способов заливки (меню «Формат» – «Фон» – «Способы заливки») или тематическое оформление (меню «Формат» – «Тема»). 4.1.4. Просмотреть в броузере изменения в структуре папок, произошедшие при сохранении Web-странички. Открыть созданную страницу, при необходимости отредактировать ее. 4.2. Создать вторую страницу сайта с помощью редактора Word. 4.2.1. Для создания документа воспользоваться пунктом меню «Файл»-«Создать», в открывшемся диалоговом окне «Создание документа» выбрать вкладку «WEB-станицы» и пиктограмму «Новая WEB-страница». Сохранить чистую WEB-страницу в папке Presentation, дав странице имя на английском языке childhood.htm 4.2.2. В качестве заголовка «Мое детство» использовать Бегущую строку, отобразив предварительно панель Web-компонентов. Познакомиться с параметрами Бегущей строки, настроить ее так, чтобы она появлялась не более 2-х раз. 4.2.3. Разметку для размещения объектов сделать с помощью таблицы.
Рисунок вставить из папки Gallery. 4.2.4. Оформить фон страницы, используя двухцветную градиентную заливку. Выбрать цвета близкие к цвету текстуры или темы главной страницы. 4.2.5. Сохранить документ и просмотреть его в Internet Explorer. При необходимости отредактировать. 4.3. Создать третью страницу на основе созданного в Части 1 файла friends.htm. 4.3.1. Скопировать файл и сопутствующую ему папку в папку Presentation. 4.3.2. Открыть файл в Браузере, убедиться, что документ отображается правильно. При необходимости отредактировать. 4.4. Создать четвертую страницу сайта с помощью редактора Word. 4.4.1. Подготовить рисунок – вид здания ГУТ со стороны Мойки (найти старый сайт ГУТ). Сохранить рисунок в папке Gallery. 4.4.2. Создать файл в папке Presentation, с именем university.htm. 4.4.3. Вставить в файл рисунок – вид здания ГУТ, предварительно сохраненный в папке Gallery. Скопировать или ввести электронный адрес университета. Написать несколько фраз о Вашем факультете и вставить гиперссылку на сайт факультета. 5. Установить связи между документами сайта. 5.1. Открыть в Word документ index.htm, и последовательно выделяя пункты «Содержания», вставить гиперссылки на соответствующие документы. 5.2. Сохранить файл и обновить его просмотр в броузере. Проверить правильность выполнения переходов по гиперссылкам. 6. Вставить в конец каждого из документов рисунок ( 
). Создать гиперссылки, обеспечивающие возврат в главный документ, закрепив из за рисунком. Внимание! Рисунок для переходов на главную страницу также должен находиться в папке Gallery. 7. Сохранить изменения в файлах и обновить просмотр сайта в Internet Explorer. 8. Просмотреть содержание каждого из вновь созданных файлов в формате HTML. 8.1. Найти тэги, обеспечивающие вставку гиперссылок, рисунков. 8.2. Убедиться, что ссылки на рисунки имеют относительную адресацию. В противном случае отредактировать их. 9. Скопировать папку Presentation со всем ее содержимым на диска А: или на диск C: в папку Temp. Протестировать работу сайта, запустив его просмотр из нового места размещения. 10. Предъявить преподавателю Ваш сайт, начать его просмотр с главной страницы. Приложение Структура сайта
 |
Страница 1 (главная страница)
| Приветствие | ||
| Содержание Мое детство (ссылка на стр. 2) Мои увлечения (ссылка на стр. 3) Мои университеты (ссылка на стр. 4) | Представление – краткое резюме | Рисунок или фотография |
| Пишите мне (адрес e-mail) |
Страница 2 (Мое детство)
| Мое детство | |
| Фотография или рисунок | Текст (комментарии к фотографии) |
| Текст (несколько строк на заданную тему) |
Бесплатная лекция: «4. Табель форм документов» также доступна. Страница3 (Мои друзья) – использовать ранее созданный Web-документ friends.htm, созданный с помощью Excel. Страница 4 (Мои университеты) Полное название Университета, адрес сайта ГУТ, картинка с фотографией главного здания ГУТ О Вашем факультете, ссылка на сайт Вашего факультета.
Лучшие программы для создания сайтов
Преимущество – чистый код HTML, который можно загружать. Минус такого способа в том, что в памяти устройства должны быть все данные с сайта, сам хостинг должен быть куплен, чтобы загружать на него. Программы покупаются 1 раз по лицензии (исключение – подписка AdobeDreamweaver) и бесплатны.
В данном топе представлены лучшие программы для создания сайтов.
Brackets
Доступ: бесплатно. Сложность: 6/10.
Позволяет создавать сайты, работать с HTML, CSS и JavaScript. Подходит для любой операционки, поддерживает русский язык. Понимает большое количество видов современного кодинга.
Особенности
Хотя утилита интуитивна в управлении, не подойдет новичкам, так как не все наглядно. Однако опытные разработчики оценят настройки и функции. Для начала выберите локальную папку в директории сервера. Чтобы смотреть через браузер, используйте Google Chrome.
Brackets без проблем контактирует с Emmet (набор плагинов для работы с HTML, XSL, XML). Для понимания всех возможностей есть магазин, где можно выбрать плагин.
Notepad++
Доступ: бесплатно. Сложность: 6/10.
Редактор текстов, несложный и быстрый. Работает с плагинами, синтаксисом кода. Поиск по директориям, замена кода в разных файлах. Notepad++ подходит и для начинающих, и для профи.
Особенности
С чистого листа утилита может показаться сложной, а вот для редактирования удобна. Обилие опций путает, если прежде не создавался сайт. Программа будет полезна в случае наличия базовых навыков, типовые операции проходят быстро. При создании страниц рекомендуют использовать UTF-8 (формат кодирования). Есть автоматическое завершение (функции и слова) и замена кода в больших участках.
Кроме того, Notepad ++ может выполнять функцию программируемого блокнота (с большим количеством настроек).
Dreamweaver
Программа от Adobe. Доступ: от 1500 до 2400 рублей в месяц (есть бизнес предложения). Сложность: 8/10.
Для широкомасштабной разработки сайта. Работает на Windows и Mac. Популярна среди веб-разработчиков и дизайнеров.
Особенности
Используется для полноразмерных сайтов – полная web-разработка и редактор кода. Среди специфики – предпросмотр, LiveView и автозаполнение тегов, кодов. Упомянутая функция LiveView имитирует онлайн-конструктор с поддержкой созданных элементов, инструмент перетаскивания. Можно посмотреть, как все будет выглядеть после запуска сайта – в оффлайн режиме.
Dreamweaver сосуществует с программами от Adobe и дает спектр стандартных возможностей. Можно делать сайт из существующих моделей (многие предоставлены сторонними разработчиками). Вкупе с визуальным редактором подсказки, упрощающие и ускоряющие процесс создания. Если привычна работа с облаком Adobe или Git, программа подойдет лучше других.
В любом случае, новичкам будет непросто использовать без навыка программирования. Особенно без HTML, CSS. В Dreamweaver-пользователь опирается на Less, Sass, Java и прочие популярные языки кодирования. Поэтому обязателен опыт прохождение специальных курсов.
Утилита требовательна к компьютеру.
Komodo Edit
Доступ: бесплатно. Сложность: 7/10.
Программа для разработки сайтов. Кроссплатформа с опорой на многие языки программирования (HTML, Ruby, PHP, Java и другие). Желательно работать с XML.
Особенности
В Komodo присутствуют автозавершение, подсвеченный синтаксис. Использование макросов и работа с файлами удаленно. Утилита понятна новичкам, но полный функционал будет активен в руках уже практикующих веб-разработчиков.
В помощь пользователю – выделение и замена участков текста, улучшенный поиск, сравнение валидности кода. Интерфейс не слишком интуитивный, но богат на опции. Возможность легко менять темы, встроено исправление ошибок кода и лакун.
Komodo Edit зависнет, если проект весит много (больше нескольких гигабайт), при этом активно использует оперативную память.
Mobirise
Доступ: бесплатно (есть платный контент). Сложность: 5/10.
Программа, которая создает веб-страницу, функционирует с адаптивными блоками. Не требует опыта и знания HTML. Как редактор страниц подходит новичкам – например, для статичных проектов. Можно запускать сайты-визитки, портфолио или одностраничники.
Особенности
Сначала нужно скачать приложение и архив на компьютер. Завести аккаунт. Страница выгружается на хостинг при настройке FTP-доступа. При желании размещаете на бесплатном домене – от самого Mobirise. Легкая структура кода и понятный интерфейс. Программист получает полный контроль над созданием сайта и ваянием кода.
Как оффлайн конструктор Mobirise дает доступ к многочисленным блокам, которые нужно переносить в окно редактора. Проект будет такой конструкции, какую задает пользователь. Стоит обратить внимание на блоки: они разделаются на разные виды и упрощают работу (футеры, прайсы, меню, опции и т.д.). Блоки можно переразбирать по содержанию. Есть SEO функционал и лендинг.
Если начальных настроек мало, можно скачать платные дополнения и функции (например, AMP-формат). Сайт делается с 0 или с опорой на шаблон. Существует возможность интеграции динамических элементов и сторонних разработок.
Минусом можно назвать платный контент, который пригодился бы в начальной версии. Многие опции продаются отдельно (от 40 до 100 долларов), это невыгодно. Все бонусы покупаются на год, после чего подписка на них исчезает (созданные сайты продолжат работать). Грамотнее брать MobiriseKit за 150 долларов.