 Министерство образования и науки Российской Федерации
Старооскольский технологический институт им. А.А. УГАРОВА
(филиал) федерального государственного автономного образовательного учреждения
высшего образования
«Национальный исследовательский технологический университет «МИСиС»
ОСКОЛЬСКИЙ ПОЛИТЕХНИЧЕСКИЙ КОЛЛЕДЖ
УТВЕРЖДено
НМС опк
пРОТОКОЛ №1
ОТ «01» сентября 2016г.
ПМ.03. ВЫПОЛНЕНИЕ РАБОТ ПО ПРОФЕССИИ «ОПЕРАТОР ЭЛЕКТРОННО-ВЫЧИСЛИТЕЛЬНЫХ И ВЫЧИСЛИТЕЛЬНЫХ МАШИН»
МДК.03.01. ОБРАБОТКА ИНФОРМАЦИИ С ПОМОЩЬЮ ПРИКЛАДНОГО ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ДЛЯ ПЕРСОНАЛЬНОГО КОМПЬЮТЕРА
Методические указания для студентов очной формы обучения для выполнения практических заданий и внеаудиторной самостоятельной работы
Часть 4. Технологии создания сайта
Специальность 09.02.04 Информационные системы (по отраслям)
Старый Оскол 2016
Рассмотрены на заседании П(Ц)К 09.02.04
Протокол № 1
от «01» сентября 2016г.
Председатель
Назарова О.И.
|
Методические указания составлены в соответствии с рабочей программой по ПМ 03. Выполнение работ по профессии «Оператор электронно-вычислительных и вычислительных машин»
Специальности
09.02.04 Информационные системы (по отраслям)
Зам .директора по М Р
к.п.н., доцент _______________А.М. Степанова
|
Составитель: Артюхина Д.Д.
Рецензенты:
внутренний: Коренькова Т.Н. - преподаватель ОПК СТИ НИТУ МИСиС
внешний: Анпилов А.Э. – инженер ООО «КМАЭМ»
Содержание
Задание 1.РАЗДЕЛ 4. ТЕХНОЛОГИИ СОЗДАНИЯ САЙТА 5
Задание 2.Практическая работа №23 5
Задание 3.Практическая работа №24 12
Задание 4.Практическая работа №25 19
Задание 5.Практическая работа №26 26
Задание 6.Практическая работа №27 41
Задание 7.Практическая работа №28 50
Задание 8.Практическая работа №29 57
Задание 9.Практическа работа №30 70
Задание 10.Задания для внеаудиторной самостоятельной работы 99
Задание 11.РАЗДЕЛ 4. ТЕХНОЛОГИИ СОЗДАНИЯ САЙТА 99
Задание 12.Определение целевой аудитории Web-сайта. Прогноз эффективности проекта 99
Задание 13.Оценка окупаемости и доходности Web-сайта 99
Задание 14.Анализ сайтов типа Интернет-магазин 99
Задание 15.Анализ сайтов типа Корпоративное представительство 99
Задание 16.Выбор и регистрация доменного имени 100
Задание 17.Размещение Web-сайта в сети Интернет 100
Задание 1.Разработка структуры Web-сайта 101
Задание 18.Разработка простой Web-страницы 101
Задание 19.Основы разработки Web-сайта 103
Задание 20.Списки в HTML-документе 109
Задание 21.Таблицы в HTML-документе 111
Задание 22.Изображения в HTML-документе 114
Задание 1.Разработка Web-сайта средствами MS Word 116
Задание 23.Разработка Web-сайта средствами MS Excel 118
Задание 24.Создание Web-страниц средствами PowerPoint 120
Задание 1.Создание Web-сайтов средствами MS FrontPage 120
Задание 25.Оформление таблиц средствами MS FrontPage 125
Задание 26.Создание ссылок и форм на страницах средствами MS FrontPage 127
Задание 27.Контроль над разработкой Web-сайта 132
Задание 28.СПИСОК ЛИТЕРАТУРЫ 134
Введение
Современную жизнь трудно представить без мультимедиа. Однако даже, несмотря на то, что мультимедийными технологиями ежедневно пользуются десятки тысяч людей, далеко не каждый из них имеет представление о том, что означает данное понятие.
В наши дни переоценить значение мультимедиа практически невозможно. Это связано с тем, что мультимедийные технологии с каждым днем все более активно приходят в наши дома. Однако необходимо добавить и то, что благодаря мультимедиа мы получаем огромную пользу. В качестве примера можно сказать о том, что современные мультимедийные технологии нашли свое широкое применение в обучающей сфере. Благодаря их использованию усвоение информации улучшилось в значительной степени.
Термин «мультимедиа» с английского можно перевести как «многие Среды» (от multi - много и media - среда).
В настоящее время мультимедиа-технологии являются бурно развивающейся областью информационных технологий. В этом направлении активно работает значительное число крупных и мелких фирм, технических университетов и студий (в частности IBM, Apple, Motorola, Philips, Sony, Intel и др.). Области использования чрезвычайно многообразны: интерактивные обучающие и информационные системы, САПР и др.
Благодаря развитию мультимедийных технологий появилась возможность объединять многокомпонентную среду (текст, звук, графику, видео, фото) в однородное цифровое представление и надежно и долго сохранять большие объемы информации. Информация гарантировано хранится не менее десяти лет. При этом переработка информации превращается из рутинных операций в творческие.
Основными характерными особенностями этих технологий являются:
объединение многокомпонентной информационной среды (текста, звука, графики, фото, видео) в однородном цифровом представлении;
обеспечение надежного (отсутствие искажений при копировании) и долговечного хранения (гарантийный срок хранения - десятки лет) больших объемов информации;
простота переработки информации (от рутинных до творческих операций).
На сегодняшний день мы не можем не задумываться над тем, что ожидает наших учащихся. Известно, что будущее потребует от них огромного запаса знаний в области современных технологий. Сегодня уже 60% предложений о работе требуют минимальных компьютерных знаний, и этот процент будет возрастать. Но подготовка молодёжи к будущему заключается не только в плане «готовности работать». Учащиеся должны освоить новые жизненно необходимые навыки в связи с тем, что современные информационные технологии всё глубже проникают в нашу жизнь. Информационный депозитарий глобальной компьютерной сети Интернет настолько велик, что умение извлечь из такого большого объёма информации нужный кластер выходит на первый план.
Таким образом, использование мультимедиа технологий в учебном процессе не только целесообразно, но и позволяет достичь цели, которую ставит перед педагогами «Концепция модернизации Российского образования» - подготовка разносторонней развитой личности.
Задание 1.РАЗДЕЛ 4. ТЕХНОЛОГИИ СОЗДАНИЯ САЙТА
Задание 2.Практическая работа №23
Основные средства языка html
Цель: изучить основные средства языка html
Студент должен:
иметь практический опыт:
осуществления навигации по ресурсам, поиска, ввода и передачи данных с помощью технологий и сервисов Интернета (ПО2);
создания и обработки объектов мультимедиа (ПО3);
уметь:
создавать и редактировать объекты мультимедиа (У2);
знать:
назначение, разновидности и функциональные возможности программ для создания объектов мультимедиа (З2).
Введение в HTML
Основные понятия
Для создания Web-страницы можно воспользоваться специальными программами редактирования документов Всемирной паутины. Другой способ подготовки Web-страниц заключается в «ручном» создании кода документов на языке HTML – HyperText Markup Language – Язык разметки гипертекста. Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение .html или .htm.
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный файл, с добавленными в него управляющими НТМL-кодами (тегами). В нем разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами.
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например или . Для ряда тегов характерно наличие атрибутов (т.е. параметров тега), которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга пробелами. Порядок записи атрибутов в теге значения не имеет. Атрибут тега состоит из имени, знака равенства и значения – language=“JavaScript”. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Теги принято писать заглавными буквами, а атрибуты и их значения – прописными (например:
), это не учитывается программой , но облегчает прочтение кода.
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив закрывающая пара представляет собой , для тега заголовка <�ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Атрибуты прописываются в начальных тегах. Конечные теги никогда не содержат атрибутов. Теги определяют область действия правил интерпретации текстовых документов.
Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения ![]() , который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (
), горизонтальная линейка (
) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например тег В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <�Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <�Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.
Для краткости и образности мы будем в ряде случаев вместо словосочетания "элемент разметки" применять термин "контейнер".
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
"контейнер"= <"имя тега" "список атрибутов"> содержание контейнера </"имя тега">
Следует отметить, что в литературе кроме термина "контейнер" еще используется и термин "элемент". Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера.
Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER.
Например, чтобы представить символ "<" в документе HTML, нужно заменить его на <, а символ ">" — на >. То есть, если указать в тексте HTML строку <BODY>, она будет выглядеть на экране как текст .
Может возникнуть вопрос: как быть с символами "</>", "&" и со специальными символами, типа знака ударения? Можно выводить их, используя соответствующие CER, например для "&" это будет &, и т. д.
CER легко обнаружить, если посмотреть на структуру любого документа HTML, поскольку каждый из них начинается с амперсанта "&". В отличие от наименований тегов HTML, наименования CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;. Далее в таблице приведены наиболее часто используемые CER и соответствующие им числовые коды.
Числовой код
|
Именная замена
|
Символ
|
Описание
|
"
|
"
|
"
|
Кавычка
|
&
|
&
|
&
|
Амперсант
|
<
|
<
|
<
|
Меньше
|
>
|
>
|
>
|
Больше
|
|
|
|
Неразрывный пробел
|
¡
|
¡
|
¡
|
Перевернутый восклицательный знак
|
¢
|
¢
|
¢
|
Цент
|
£
|
£
|
£
|
Фунт
|
¤
|
¤
|
¤
|
Валюта
|
¥
|
¥
|
¥
|
Йена
|
¨
|
¨
|
¨
|
Умляут
|
©
|
©
|
©
|
Копирайт
|
«
|
«
|
«
|
Левая угловая кавычка
|
®
|
®
|
®
|
Зарегистрированная торговая марка
|
±
|
±
|
±
|
Плюс или минус
|
»
|
»
|
»
|
Правая угловая кавычка
|
Гипертекст породил много специальных терминов:
Элемент – конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста – возможность вложения элементов.
Тег – начальный или конечным маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Атрибут – параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от данного документа к другому.
Структура Web-страницы
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега и заканчивается тегом . Он указывает браузеру, что данный текст представляет собой HTML-документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.
Типичная Интернет-страница состоит из двух частей: головная часть (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно представить следующим образом:
|
Начало HTML-документа
|
|
Начало головной части
|
|
Начало строки названия страницы
|
…
|
Строка названия страницы
|
|
Конец строки названия страницы
|
|
Конец головной части
|
|
Начало тела документа
|
…
|
|
|
|
