МИНИСТЕРСТВО ОБЩЕГО И ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ СВЕРДЛОВСКОЙ ОБЛАСТИ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ СВЕРДЛОВСКОЙ ОБЛАСТИ «КАМЫШЛОВСКИЙ ТЕХНИКУМ ПРОМЫШЛЕННОСТИ И ТРАНСПОРТА» СОГЛАСОВАНО: руководителем РГ или ОС ____________________________ Пр № от «__» __________ 2016 г. УТВЕРЖДАЮ: директор ГАПОУ СО «Камышловский техникум промышленности и транспорта» __________ / Потапова З.А. / М.П. от «__» ____________ 2016 г. МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО ЛАБОРАТОРНЫМ И ПРАКТИЧЕСКИМ РАБОТАМ  ОП. 10  Основы программирования для студентов специальности/профессии 09.01.03  «Мастер по обработке цифровой информации» Составила: Ю. Л. Бейтельмахер преподаватель  спецдисциплин Камышлов 2015 АННОТАЦИЯ В данном пособии  подробно освещены вопросы, касающиеся создания HTML­ страниц и WEB­сайтов. Рассмотрены базовые понятия создания WEB­страниц, основы планирования структуры сайтов и форматирования HTML­документов для   студентов   по   профессии  09.03.01   «Мастер   по   обработке   цифровой информации»  и предназначено для выявления уровня  сформированности  общих и   профессиональных   компетенции   по  ОП.   08   Программные   средства разработки WEB­страниц. Методическая разработка содержит теоретический и практический материал по основным разделам курса обучения. Практикум предназначен для приобретения практических навыков работы, а так же для закрепления и проверки полученных знаний по темам курса и  может быть использован как для проведения лабораторно­практических занятий, так и для индивидуального усовершенствования навыков работы с  веб страницам и веб сайтами. СОДЕРЖАНИЕ ОП. 10 Основы программирования...............................................................................1 АННОТАЦИЯ....................................................................................................................2 В данном пособии подробно освещены вопросы, касающиеся создания HTML- страниц и WEB-сайтов. Рассмотрены базовые понятия создания WEB-страниц, основы планирования структуры сайтов и форматирования HTML-документов для студентов по профессии 09.03.01 «Мастер по обработке цифровой информации» и предназначено для выявления уровня сформированности общих и профессиональных компетенции по ОП. 08 Программные средства разработки WEB-страниц. Методическая разработка содержит теоретический и практический материал по основным разделам курса обучения......................................................2 ВВЕДЕНИЕ.......................................................................................................................5 Раздел №1. Создание простейшего HTML-документа.................................................6 Лабораторная работа №1..............................................................................................6 Цель работы:...............................................................................................................6 Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот..................................................................................6 Научиться использовать теги форматирования шрифта и абзаца.........................6 Задание на выполнение................................................................................................6 Раздел 2. «Структура HTML-документа. Создание Web-страницы».........................13 Лабораторная работа № 1...........................................................................................13 Раздел № 3. «Форматирование текста Web-страницы»............................................15 Лабораторная работа № 1...........................................................................................15 Раздел №4. «Ссылки на другие документы и файлы»..............................................19 Лабораторная работа №1............................................................................................19 Лабораторная работа №2............................................................................................20 Лабораторная работа №3............................................................................................21 Раздел № 5. «Создание списков»................................................................................22 Лабораторная работа №1............................................................................................22 Раздел № 6. «Создание таблиц».................................................................................23 Лабораторная работа №1............................................................................................23 Цель работы:.............................................................................................................23 Научиться использовать таблицы для оформления WEB-страниц.......................23 Раздел №7 « Макетирование web-страниц с графикой»...........................................26 Лабораторная работа №1............................................................................................26 Цель работы:.............................................................................................................26 Научиться выполнять вставку рисунков в HTML-документ...................................26 Научиться создавать закладки и гиперссылки......................................................26 Основные теги вставки рисунков, закладок и гиперссылок....................................28 Раздел №8. «ФРЕЙМЫ».................................................................................................29 Лабораторная работа №1............................................................................................29 Лабораторно-практическая работа № 2.....................................................................34 Тема: «Фреймовая структура Web-документа».........................................................34 Список источников информации.................................................................................38 Приложение 1...............................................................................................................39 ВВЕДЕНИЕ Цели   и   задачи    изучения:    знакомство     студентов     с    компьютерными телекоммуникациями  и  возможными  подходами  к  разработке гипертекстовых документов, предназначенных для публикации в  глобальной  компьютерной  сети Internet,   освоение  практических  приемов создание простейших веб­страниц и сайтов.   Содержание   дисциплины   охватывает   круг   вопросов,   связанных   с  изучением современной   Web­технологии,   одной   из   составляющих   интернет­технологии, изучением языка гипертекстовой разметки HTML, а также получение навыков практического создания web­страниц и простейшего сайта с его размещением на сервере.  Изучение   курса     предусматривает   следующие   формы   организации   учебного процесса:   лекции,   практические   занятия,     самостоятельную   работу   студента, консультации.  В результате освоения дисциплины студент должен:    знать   основные   определения   и   понятия   HTML­документа   и   Web­ программирования,  основные  приемы  создания  и  продвижения  веб страниц и сайтов;     методы     проектирования,     разработки     и     маркетинга     проблемно­ ориентированных   Web­ресурсов;   о   проблемах,   тенденциях   и   перспективах развития Web­конструирования.  уметь    разрабатывать   и   продвигать   проблемно­ориентированные   Web­ ресурсы;     владеть   навыками     проектирования,     разработки     и     маркетинга проблемно­ориентированных Web­ресурсов;   Изучение дисциплины заканчивается дифференцированным зачётом. РАЗДЕЛ №1. СОЗДАНИЕ ПРОСТЕЙШЕГО HTML­ ДОКУМЕНТА. ЛАБОРАТОРНАЯ РАБОТА №1. Цель работы:   Научиться создавать простейший гипертекстовый документ средствами  текстового редактора Блокнот.   Научиться использовать теги форматирования шрифта и абзаца. Задание на выполнение 1. Создать файл с гипертекстовым документом:  Запустить редактор Блокнот, ввести текст: Приветствую Вас на моей первой web­страничке!  Сохранить   файл   в   созданной   папке.   При   сохранении,   в   окне   диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .htm, например 1_name.htm (где name – ваше имя)  Закрыть документ, найти его пиктограмму в окне  Мой компьютер  или в окне программы Проводник.   Открыть   файл.   Проанализировать,  с   помощью   какого   приложения отображается файл и как выглядит введенная фраза. 2. Ввести теги, определяющие структуру html­документа:  С   помощью   контекстного   меню   открыть   файл   с   помощью   редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами  ) указать свою фамилию.   Приветствую Вас на моей первой web­страничке!  Сохранить  документ   под   тем   же   именем,   обновить   его   отображение   в броузере   (выполнить  Вид/Обновить  или нажать   кнопку  Обновить  на панели инструментов).   Проанализировать   произошедшие   изменения   в   отображении документа. 3. Отредактировать документ:  Вызвать   меню   броузера  Вид/Просмотр  HTML­кода  и   добавить   после текста   «Приветствую Вас на моей первой web­страничке!»  текст подписи: Студент группы NNN  Фамилия  Имя Сохранить документ (но не закрывать) и обновить его просмотр в броузере.  Используя   одиночный   тег 
,   отредактировать   документ   так,   чтобы подпись начиналась с новой строки, а  Фамилия Имя  – в следующей строке. Просмотреть в броузере новый вариант.  Внимание!  После  каждого  изменения  документ  нужно   сохранять,   а просмотр   в   броузере   начинать   с   обновления   загрузки   документа   с помощью кнопки «Обновить» на панели инструментов. 4. Оформить фрагменты текста с помощью стилей Заголовков:  Первую   строку   документа   оформить   стилем  Заголовок   1­го   уровня  с помощью парного тега 

 …

. Вторую строку оформить как Заголовок 6­го уровня, а третью как Заголовок 4­го уровня.  Просмотреть   документ   в   броузере,   изменяя   настройку   отображения шрифтов (меню Вид / Размер шрифта  / Самый крупный, Средний, Мелкий и Самый мелкий).  Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки ­ на Заголовок 5 уровня, последней строки  ­ на Заголовок 3­го уровня.  5. Выполнить форматирование шрифта:  После строки  Фамилия Имя добавить  еще одну строку текста  Оформить фразу по приведенному ниже образцу. Нас утро встречает прохладой В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.   Оформить строку с подписью   (Студент группы  NNN   Фамилия   Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги  и   Просмотреть полученный документ в броузере. 6. Выполнить форматирование  абзацев:  Создать   новый   документ  2_name.htm,   сохранить   его   в   той   же   рабочей папке.  Ввести текст (использовать копирование текста из документа 1_name.htm):   Приветствую Вас на моей второй web­страничке! 
 Монолог Гамлета  Выровнять текст по центру.  Ввести текст: Быть иль не быть ­ вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы ­ иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...  Оформить выравнивание абзаца по ширине.  Ограничить   абзац   горизонтальными   разделительными   линиями   сверху   и снизу, используя тег 

---

.   Скопировать монолог и разбить его на абзацы. Выровнять по центру. Быть иль не быть ­ вот в чем вопрос. Что благороднее: сносить удары Неистовой судьбы ­ иль против моря Невзгод вооружиться, в бой вступить И все покончить разом...  Сохранить документ.   Просмотреть документ в окне броузера, изменяя размер окна. 7. Выполнить оформление списков:  Создать новый документ 3_name.htm, сохранить его в той же рабочей папке  жесткого диска.  Ввести текст:   Приветствую Вас на моей третьей web­страничке!  Дополнить текст документа (между тегами …)  следующим текстом: Я знаю как оформлять: Шрифты, Заголовки, Абзацы  Оформить   три   последние   строки   как  список   нумерованный.   Для   этого использовать следующую конструкцию тегов:

1.  Шрифты, 
2.  Заголовки, 
3.  Абзацы 

 Поменять   оформление   списка   на  список   маркированный.   Использовать теги 

, 

 Создать «смешанный» список: Я знаю как оформлять: 1. Шрифты  Размер  Цвет  Гарнитуру  Индексы 2. Заголовки  От 1­го до 6­го уровня 3. Абзацы  Выравнивание  Разрыв строк внутри абзаца  С использованием переформатирования. 8. Предъявить результаты работы преподавателю. Таблица основных тегов HTML­документа. Теги форматирования шрифта Назначение Тип  документа Имя  документа Заголовок и абзаца Вид тегов Примечание Общая структура документа HTML Начало и конец документа Не отображается  броузером Содержимое строки Тело  документа заголовка окна броузера Содержимое WEB­ страницы Структура содержания документа Внутренние   текст  заголовки  различного  уровня  Заголовок с  выравниванием  текст  Форматирование абзацев Создание 

 текст 

абзаца  (параграфа) Перевод  строки внутри  абзаца Выравнивани е абзаца
текст 

текст

  текст

 текст

Разделительн ая  горизонтальная  линия между  абзацами Форматирование шрифта Жирный Курсив Подчеркнуты  текст   текст   текст  й Перечеркнут  текст  ый Где № – номер уровня  заголовка (от 1 до 6).  Например, 

…

 ­  заголовок 1­го уровня. LEFT ­ по левому краю, CENTER ­ по центру, RIGHT ­ по правому краю. Абзацы отделяются  двойным межстрочным  интервалом Одиночный тег LEFT ­  по левому краю CENTER ­  по центру  RIGHT  ­ по правому краю JUSTIFY – по ширине Одиночный тег.   «?» ­  толщина линии в пикселях.  Толщину линии можно не  указывать. Жирный  Курсив   Подчеркнутый   Перечеркнутый Увеличенный  текст  размер Уменьшенны  текст  й размер Верхний  индекс Нижний  индекс Размер  шрифта Базовый  размер шрифта  ^текст   _текст   текст    Гарнитура    текст  Цвет шрифта    текст  ^{Верхний индекс}   _{Нижний индекс}  ?­ значения от 1 до 7 или   изменение относительное (например, +2)  Одиночный тег  ?   –   размер   от   1   до   7;   по умолчанию равен 3 и задается для всего документа в целом  оформляется первым,   установленным   на компьютере   шрифтом   из списка названий Текст   Цвет   задается   либо ключевым   словом,   либо шестнадцатеричным   кодом   с символом # RED –красный,  #FF0000 –  шестнадцатеричный код –  красного цвета  Создание списков Нумерованны й

элементы списка

1. Элемент списка 1  Маркированн
    элементы списка 
ый Элемент  списка
2.  элементы списка 
3. Элемент списка  2
4. Элемент списка  3

Таблица основных цветов Шестнадцатеричный код цвета Green Цвет Color's  name Черный Темно­синий Голубой Зеленый Темно­ зеленый  Салатный Бледно­ голубой Вишневый Фиолетовый Оливковый Серый Светло­серый Красный Лиловый Желтый Белый black navy blue green teal lime aqua maroon purple olive gray silver red fushsia yellow white Red 00 00 00 00 00 00 00 80 80 80 80 C0 FF FF FF FF Blue 00 80 FF 00 80 00 FF 00 80 00 80 C0 00 FF 00 FF 00 00 00 80 80 FF FF 00 00 80 80 C0 00 00 FF FF РАЗДЕЛ 2.  «СТРУКТУРА HTML­ДОКУМЕНТА. СОЗДАНИЕ WEB­СТРАНИЦЫ» ЛАБОРАТОРНАЯ РАБОТА № 1. Цель: научиться создавать простейшие HTML­документы, разбивать текст на абзацы,  выполнять вырав­нивание различными способами, просматривать Web­ страницы с помощью браузера. Теги — это определённые последовательности символов, заключенные между знаками  < (меньше) и > (больше). Символ < обозначает начало тега, символ > обозначает конец тега. Задание 1. Создание простейшего HTML­документа. 1. 2. Откройте текстовый редактор Блокнот.  Создайте в нем следующий документ:      <ТITLE>  Моя страничка      Привет! Это моя первая страничка!      3. Сохраните этот файл  в своей папке, выполнив команду  Файл  / Сохранить   как,   в   поле  Имя   файла  введите  Пример.html.  НЕ ЗАКРЫВАЯ  Блокнот,  откройте   этот   файл   в   окне  программы просмотра Internet Explorer с помощью команды Файл / Открыть.  Разбиение на абзацы, различные способы выравнивания Разбиение на абзацы Абзац с выравниваем Перевод на новую строку в абзаце Заголовок (уровни от 1 до 6) Заголовок с выравниваем

 текст 

 текст 

 текст 

 текст 

 текст 

 текст1 

…

 текст6 

  текст  По левому краю По центру По правому краю По ширине Задание 2. Усовершенствование странички. 1. Добавьте в свою страничку следующий текст:    Привет! Это моя первая  страничка!  В лесу родилась елочка. В лесу она росла.  Зимой и летом стройная, зеленая  была.  Метель ей пела песенку: «Спи, елочка, бай­бай».  Мороз снежком укутывал:  «Смотри, не замерзай!» 2. Сохраните изменения, выполнив команду Файл/ Сохранить. НЕ ЗАКРЫВАЯ  Блокнот, откройте этот файл в окне программы просмотра Internet Explorer с  помощью команды Файл/ Открыть, чтобы увидеть изменения нажмите кнопку  Обновить.  3. Приведите свою страничку к предложенному виду, добавив, необходимые теги. лесу родилась елочка.  лесу она росла.  Привет! Это моя первая страничка! В В Зимой и летом стройная, Зеленая была. Метель ей пела песенку: «Спи, елочка, бай­бай». Мороз снежком укутывал: «Смотри, не замерзай!» 4. Сохраните изменения,. НЕ ЗАКРЫВАЯ Блокнот, просмотрите с помощью  браузера Internet Explorer (чтобы увидеть изменения нажмите кнопку  Обновить). 5. Вставьте после фразы «Привет! Это моя первая страничка!» два  заголовка: Заголовок первого уровня: Меня зовут (впишите свое имя).  Заголовок второго уровня: Я учусь в классе (впишите 11 класс). Заголовок третьего  уровня: Это моя любимая песенка.  6. 7. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .  Выровняйте заголовки следующим образом:  Заголовок первого уровня по левому  краю, Заголовок второго уровня по центру,  Заголовок третьего уровня по правому краю. 8.  Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . РАЗДЕЛ № 3. «ФОРМАТИРОВАНИЕ ТЕКСТА WEB­ СТРАНИЦЫ» ЛАБОРАТОРНАЯ РАБОТА № 1. Цель: научиться форматировать текст Web­страницы. Форматирование шрифта Назначение Жирный Подчеркнутый Курсив Верхний индекс Нижний индекс Размер  шрифта(от  0 до 7) Цвет та(задается Формат  текст   текст   текст   _текст  ^текст те кст текст Значение аргументов (вместо звездочки *) 0, 1, 2 , 3, 4, 5 ,6 ,7 См. ниже значения дом ) Гарнитура (задается шрифта)  текст Arial, Arial Black, Comic Sans MS, Monotype Corsiva, Courier New, Times New Roman и др. Таблица значений цветов Название Код Имя Название черный темно­бордовый зеленый оливковый темно­синий фиолетовый чирок серый #000000 #800000 #008000 #808000 #000080 #800080 #008080 #808080 0 серебряный красный известь желтый голубой фуксия аква белый black maroon green olive navy purple teal gray Бегущая строка Код #C0C0C Имя silver red #FF0000 lime #00FF00 yellow #FFFF00 blue #0000FF fuchsia #FF00FF #00FFFF aqva #FFFFFF white  текст  — направление движения – справа­ налево. Scroll – стандартное движение от правого края к левому — бесконечный цикл. Число циклов можно ог­раничить: текст slide – надпись один раз пробегает от правого края к левому и там остаётся. alternate   –   движение   от   правого   края   страницы   к   левому   и   обратно, бесконечный цикл. Определение ширины участка, занимаемого бегущей строкой: текст, где n – ширина той части  страницы, на которой располо­жена бегущая строка. Задание 1. Оформление шрифта HTML­документа. Откройте созданный вами файл Пример.html и преобразуйте его  следующим обра­зом:       Привет! Это моя первая страничка!    Меня зовут  Я учусь в классе  Это моя любимая песенка     В лесу родилась елочка. 
  В лесу она росла.
  Зимой и летом стройная, 
  Зеленая была.
   Метель  ей пела песенку:
 «Спи, елочка, бай­бай» 
 Мороз  снежком укутывал:
  «Смотри, не замерзай!» 2. Сохраните   изменения,   НЕ   ЗАКРЫВАЯ  Блокнот,  просмотрите   с помощью браузера  Internet Explorer  (чтобы увидеть изменения нажмите кнопку   Обновить).  3. Подчеркните фразу «Зимой и летом стройная».  4. Выделите все «елочки» полужирным курсивом.  5. Измените,   размер   шрифта   на   5   единиц   для   фразы   «Смотри,   не замерзай!».  6. Cделайте   бегущей   строкой   фразу   «Привет!   Это   моя   первая страничка!».  7. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .  8. Для третьего заголовка внесите следующие изменения:   

     Это моя любимая песенка 

     9. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .  Цвет фона и текста Назначение Формат Значение аргументов (вместо звездочки *) (задается Цвет  фона названием цвета или его кодом ) См. цвет шрифта Вместо * прописывается название файла в формате bmp Например: Цвет текста (задается названием цвета или его кодом ) Фоновое ние изображе­ РАЗДЕЛ №4. «ССЫЛКИ НА ДРУГИЕ ДОКУМЕНТЫ И ФАЙЛЫ» ЛАБОРАТОРНАЯ РАБОТА №1. Важнейшим средством языка HTML является возможность включения в документ  ссылок на другие документы. Возможны ссылки:  на удаленный HTML­файл,   на некоторую точку в текущем HTML­документе,   на любой файл, не являющийся HTML­документом.  В качестве ссылки можно использовать любой текст или графику.  Ссылки в пределах одного документа Такие   ссылки   требуют   двух   частей:   метки   и   самой   ссылки.   Метка   определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты  LINK=  и  VLINK= тега . Описание ссылки Понедельник Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке. Определим метку Понедельник 1 Дополните файл 5.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web­страницы.            Понедельник Вторник Среда Четверг Пятница Суббота 
... 2.  Вставьте в файл 5.HTML метку, указывающую на понедельник. ... Понедельник
... 3.  Вставьте в таблицу с названиями дней недели ссылку для выбранной метки: ...   Понедельник Вторник Среда ... 4 Создайте таблицы расписаний для других дней недели. 5 Сохраните файл 5.HTML в личной рабочей папке.  6 Просмотрите полученную Web­страницу.  ЛАБОРАТОРНАЯ РАБОТА №2. Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу. Опишем ссылку: 5 класс После имени файла (5.HTML) между символами «>» и «<» располагается текст («5 класс»), на  котором должен быть произведен щелчок для перехода к этому файлу. 1.  Внесите изменения в файл RASP.HTML     Расписание
 занятий на вторник

 

5 класс 6 класс  7 класс 8 класс  9 класс 10 класс  11 класс  2 Сохраните файл RASP.HTML  3 Просмотрите полученную Web­страницу.  На экране вы увидите то, что изображено на рисунке 10. 20 ЛАБОРАТОРНАЯ РАБОТА №3. 1 Внесите   изменения   в   файл   5.HTML   так,   чтобы   в   конце   страницы   была   ссылка   на   головную страницу   Расписание   занятий   5   классов   (RASP.HTML).   В   качестве   ссылки   используйте графический файл (HOME.GIF) следующим образом:  ... 
      .. 2 Просмотрите   полученную   Web­ страницу.  На экране вы увидите то, что показано на  рисунке 11. В качестве ссылки выступает рисунок –  стрелка Рис. 11 21 РАЗДЕЛ № 5. «СОЗДАНИЕ СПИСКОВ» ЛАБОРАТОРНАЯ РАБОТА №1. Цель: научиться создавать различные виды списков. Виды списков Назначение Формат Маркированный Нумерованный start=" устанавливает   на­ чальн номер  в   текущем списк type=" устанавливает  тип марке " ый е, " ра. Многоуровневый

 элемент списка …

 элемент списка Значения атрибутов устанавливает тип маркера.  type=”disc” type=”square” type=”circle” A — маркер в виде прописных букв,

 элемент списка a — маркер в виде строчных букв, … I  —  маркер  в  виде  больших  римских

 элемент списка цифр, i — маркер в виде маленьких римских цифр, 1 — маркер в виде арабских цифр. Задание 1. Создание списков. Откройте текстовый редактор Блокнот.  Создайте в нем следующий документ:  1. 2.   <ТITLE> Списки  

 
• Сливы 
• Яблоки 
• Груши 

      3. зере Internet Explorer.  Сохраните этот файл в своей папке, с именем Списки.html, просмотрите его в брау  22 Добавьте в этот документ предложенный нумерованный список:  Информатика,  Английский язык,  Математика,  История.  4. 1. 2. 3. 4. 5. 6. как в образце.  Сохраните изменения и просмотрите их в браузере Internet Explorer.  Добавьте в этот документ предложенный многоуровневый список. Измените вид маркеров, РАЗДЕЛ  № 6. «СОЗДАНИЕ ТАБЛИЦ» ЛАБОРАТОРНАЯ РАБОТА №1. Цель работы:  Научиться использовать таблицы для оформления WEB­страниц 1. Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1 При отображении таблицы в броузере должны удовлетворяться следующие условия:  правильной (симметричной) формы; таблица   должна   быть   выравнена   по   центру     и   быть  в   центральной   ячейке   поместить   символ    *  (звездочка), остальные ячейки должны быть пустыми. Примечание.  Для   отображения   пустых   ячеек   в   них   нужно поместить символьный примитив пробела   2. В этом же документе создать копию таблицы №1, ввести заголовок  Таблица №2 и модифицировать ее:  В центральной ячейке разместить рисунок Arrows3.wmf  «Раскрасить» все остальные ячейки в различные цвета.  3. Создать   еще   одну   копию   таблицы   –  Таблица   №3  и   отредактировать   теги таблицы так, чтобы она соответствовала приведенному ниже образцу. Примечание.  Для объединения ячеек в тегах  необходимо  использовать параметры colspan=  и  rowspan=  HTML­документ   ­  rasp_name.htm  с 4. Создать   новый расписанием занятий.  23 Документ должен начинаться заголовком Расписание занятий гр. NNN на весенний семестр 2005 г.  Первая   строка   таблицы   должна   быть   оформлена   как   заголовки   полей   (с использованием тегов ).  Таблица по ширине должна занимать полный размер окна. Ширину отдельных столбцов   задать   в   относительных   единицах   (в   %),   с   тем,   чтобы   при   изменении ширины окна пропорции таблицы сохранялись. День недели Время Предмет Преподаватель 8:30­10:05 Математика (лек) доц. Иванов А.А. Понедельник 10:15­ 11:50 12:30­ 14:05 Математика (пр) преп. Петрова И.А. Физика (лаб) доц. Сидоров О.И. 8:30­10:05 История (лек) проф. Громова О.А. Вторник 10:15­ 11:50 12:30­ 14:05 История (сем) преп. Попов М.А. Физика (лаб) доц. Сидоров О.И. Аудитори я 320 302 307 310 302 307  Просмотреть созданный документ в броузере при различных размерах окна и различных настройках размера шрифта. 5. Сохранить   файл   с   расписанием   под   именем  rasp_menu_name.htm  и модифицировать его. 6. После заголовка создать таблицу, состоящую их одной строки меню с  названиями дней недели. 7. В таблице с расписанием установить закладки на названия дней недели. 8. В таблице меню создать гиперссылки на соответствующие дни недели. 9. Выполнить цветовое оформление каждой ячейки меню. 10. Проверить правильность выполнения переходов по гиперссылкам.  11. Создать группу web­страниц, объединенных меню: 24  На рабочем диске создать папку  My_raspisanie для размещения файлов  расписания.  Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.  Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.  В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.  Оформить   фон   каждого   дня   недели   собственным   цветом,   совпадающим   с цветом ячейки таблицы меню. 12. Предъявить результат преподавателю. 25 РАЗДЕЛ №7 « МАКЕТИРОВАНИЕ WEB­СТРАНИЦ С ГРАФИКОЙ» ЛАБОРАТОРНАЯ РАБОТА №1. Цель работы:   Научиться выполнять вставку рисунков в HTML­документ  Научиться создавать закладки и гиперссылки 1. Скопировать из Интернета или какой­либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf). Убедиться,   что   созданные   ранее   документы  1_name.htm,  2_name.htm   и 3_name.htm также находятся в вашей папке на жёстком диске. 2. Вставка рисунков в документ.  Открыть в Блокноте документ 2_name.htm.    Вставить   рисунок  Arrows1.wmf  в   начало   документа  2_name.htm.   Для вставки   использовать   тег  IMG  с   параметрами  WIDTH  и  HEIGHT  для установки  размеров рисунка 50 пикселов по горизонтали и по вертикали.    Сохранить документ под именем 4_name.htm.  Просмотреть в броузере полученный результат.  Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в броузере.  Вставить   рисунок  Arrows2.wmf  в   конец   документа  4_name.htm  перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали.  С помощью параметра ALT  создать   всплывающую   подсказку  «Рисунок   2»,   появляющуюся   при 26 наведении курсора мыши на рисунок.   Просмотреть в броузере полученный результат. 3. Создание гиперссылок и закладок.  В документе 3_name.htm закрепить гиперрсылки за следующими элементами списка: За словом Шрифт – гиперссылка на документ 1_name.htm. За словом Заголовки – на документ 1_name.htm. За словом Абзацы ­ на документ 2_name.htm.  Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».   Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на   закладку «Morning» в документе 1_name.htm.   Создать закладку в начале текущего документа  3_name.htm.. Присвоить ей имя  «Hello».  Изменить   вторую   гиперссылку   (на   слове  Заголовки),   определив   для   неё переход в начало текущего документа на установленную закладку «Hello».  Создать   закладку   в   документе  2_name.htm  перед   фрагментом   монолога. Присвоить ей имя «Mono».   Установить   на   слово  переформатирования  гиперссылку   на     закладку «Mono».  Проверить правильность переходов по всем гиперссылкам.   4. Закрепить гиперссылки за графическими файлами:  Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.  Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на  документ 3_name.htm. Выполнить переход между документами. 5. Предъявить результат преподавателю. 27 Основные теги вставки рисунков, закладок и гиперссылок Вставка изображений Вставка  графического  файла Пример: Выравнивание  картинки  относительно  текста  Вывод текста  всплывающей  подсказки при  наведении  курсора мыши  на рисунок Вставка ссылок Ссылки на  другую страницу Ссылка на  закладку в  другом  документе Ссылка на  закладку в том  же документе текст  Ссылка1  текст  На главную  страницу ”   текст  Ссылка2 Определить  закладку текст Цвет фона, текста и ссылок Фоновая  картинка TEXT=”black”        (черный) Цвет текста Цвет ссылки Цвет пройденной ссылки Цвет активной  ссылки LINK=”#FF0000”    (красный) VLINK=”#FFFF00”    (желтый) ALINK=”#FFFFFF”    (белый) РАЗДЕЛ №8. «ФРЕЙМЫ» ЛАБОРАТОРНАЯ  РАБОТА №1. ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Фреймовая структура Web­сайта Обычно Web­страница представляет собой единый документ, демонстрируемый в рабочем   окне   браузера   и   занимающий   это   окно   целиком.   Однако   современный стандарт HTML позволяет разделить рабочее окно на несколько независимых зон (фреймов), в каждой из которых будет демонстрироваться своя Web­страница.  Например, можно сформировать на экране три фрейма: сверху – горизонтальную полосу с заголовком страницы, слева – вертикальную полосу с «кнопочным меню», где каждая кнопка является гиперссылкой на одну из подчиненных страниц, а вся остальная   часть   окна   браузера   отведена   под   собственно   страницу,   причем   при щелчке   мышью   на   «кнопках»   содержимое   третьего   фрейма   будет   менятся,   а остальных   двух   –   оставаться   неизменным.   Кроме   того,   если   основная   часть страницы слишком велика и не уменьшается в отведенной для нее области экрана, то   при  прокручивании   ее  текста   в  третьем   фрейме  с  помощью   клавиш PageUp, PageDown   содержимое   двух   первых   фреймов   также   не   меняется,   тогда   как   на обычной,   бесфреймовой   странице   заголовок   и   «кнопки»   при   такой   прокрутке «уплывали» бы за верхний край рабочего окна. 29 Палитра   Frames  (Фреймы)   визуально   представляет   фреймы   документа.   Вы можете   щелкнуть   на   фрейме   или   наборе   фреймов   в   палитре  Frames  (Фреймы), осуществив   таким  образом  их   выбор,  а  затем  просмотреть  или   отредактировать свойства выделенного элемента в палитре Properties (Свойства). Палитра  Frames  (Фреймы) отображает иерархию структуры набора фреймов в таком   виде,   который   не   может   быть   представлен   в   окне   самого   документа.   В палитре Frames (Фреймы) набор фреймов окружает толстая трехмерная граница, фреймы окружены тонкой серой линией, а каждый фрейм имеет собственное имя. Чтобы  показать палитру Frames  (Фреймы) выберите в меню  Window  (Окно) пункт Frames (Фреймы). Чтобы  выбрать отдельный фрейм  в палитре  Frames  (Фреймы), щелкните на рамке в этой палитре. Чтобы  выбрать   набор   фреймов  в   палитре  Frames  (Фреймы),   щелкните   на границе, которая окружает фреймы в палитре Frames (Фреймы).  Настройка свойств фрейма Палитра  Properties  (Свойства)   используется   для   утсановки   или   изменения свойств отдельного фрейма. Чтобы просмотреть все свойства фрейма, щелкните на кнопке­стрелке в нижнем углу палитры Properties (Свойства). Чтобы определить свойства фрейма: 1. Выберите фрейм, щелкнув на нужной рамке в палитре Frames (Фреймы); 2. В поле Frame Name (Имя фрейма) палитры свойств присвойте фрейму имя.  Замечание.   В   поле  Frame   Name  (Имя   фрейма)   определяется   имя   текущего фрейма. В дальнейшем это имя можно использовать для ссылок и в сценариях. В качестве   имени   фрейма   должно   использоваться   только   одно   слово.   Символы подчеркивания (_) допустимы, но дефисы (­), периоды (.) и пробелы запрещаются. Имена   фреймов   должны   начинаться   с   буквы,   а   не   с   цифры.   Не   используйте   в качестве имен зарезервированные слова JavaScript (например, top или navigator). 3. Задайте следующие настройки: ­ в поле  Src  выберите файл страницы, которая будет отображаться в данном фрейме изначально. Введите имя файла или щелкните на значке папки, чтобы найти и выделить файл.  30 ­ раскрывающийся список  Scroll  определяет появление полос прокрутки, когда не   хватает   пространства   для   отображения   содержимого   текущего   фрейма. Большинство броузеров по умолчанию используют настройку Auto; ­   флажок  No   Resize  ограничивает   размер   текущего   фрейма   и   запрещает пользователям перемещать его границы. Вы всегда можете изменить размер фрейма в окне документа. Однако если указана эта настройка, то пользователь не сможет изменить размеры фрейма в броузере; ­   раскрывающийся   список  Borders  управляет   отображением   рамки   текущего фрейма. Возможные настройки:  Yes, No, Default. Это свойство изменяет значения рамки, определенные для набора фреймов. Большинство броузеров по умолчанию используют значение Yes.  ­ поле  Border Color  устанавливает цвет для всех рамок, смежных с текущим фреймом. Эта настройка заменяет цвет рамки набора фреймов. ­ поле  Margin Width  устанавливает ширину левых и правых полей в пикселях (пространство между рамкой фрейма и его содержимым); ­   поле  Margin   Height  устанавливает   высоту   верхнего   и   нижнего   поля (пространство между рамками фрейма и его содержимым). 1. Знакомство с frameset­страницей  1. Создайте новую папку, в которой будут находится файлы сайта, созданного с использованием фреймовой технологии. Дайте ей имя Frame­site. 2. В данную папку скопируйте файлы context.htm, author.htm, 2.gif 3. Запустите программу Блокнот и напишите следующий html­код: < head> < title>Страница с фреймами < /head> < frameset rows=”*,25%”> < frame src=”context.htm”> < frame src=”author.htm”> < /frameset> < /html> 4. Выберите пункты Файл > Сохранить. В диалоговом окне выберите папку Frame­ site, а в поле Тип файлов выберите Все файлы.  5. В поле Имя файла введите frameset.htm и нажмите ОК. 31 6. Загрузите данную страницу в браузер. 2. Создание фреймовой структуры в DW  1. Запустите программу Macromedia Dreamweaver MX. 2. В главном меню программы выберите пункты Site > New Site. 3. В появившемся диалоговом окне выберите вкладку Advanced. 4. В поле Site Name напишите имя сайта, которое будет идентифицировать сайт в программе Dreamweaver, например, Site­Frame. 5. В поле Local Root Folder требуется указать папку на вашем жестком диске, в которой будут находится файлы нашего будущего сайта в технологии фреймов. Для этого щелкните на значке папки справа от поля и в появившемся диалоговом окне выберите папку Frame­Site.  6. Остальные поля и категории оставьте без изменений и нажмите кнопку ОК. 7.   Создайте   новую   страницу   с   перечнем   всех   вопросов   теории   (информацию возьмите из файла index.doc) и сохраните ее под именем oglav.htm. 8. В панели объектов выберите вкладку Frames.  8. Активизируйте палитру Frames. Для этого выберите Window > Others > Frames. 9. В панели объектов (Insert) выберите следующую фреймовую структуру .  10. В палитре Frames выберите левый фрейм.  11. В поле src палитры свойств выберите файл oglav.htm. 12. В палитре Frames выберите правый фрейм. 13. В поле src палитры свойств выберите файл teor1.htm. 14. В окне документа поставьте курсор в верхний фрейм. 15. Вставьте в верхний фрейм таблицу (2 столбца, 1 строка, width=100%). Если не помните, как вставить таблицу, обратитесь к лаб.работе №4 “Таблицы”) 16. В первую ячейку таблицы вставьте изображение логотипа из файла wd.gif. 17. Во вторую ячейку напишите «Web­дизайн: дистанционный курс». 18. Размеры ячеек таблиц и верхнего фрейма подберите по вашему вкусу. 19. Сохраним файл верхнего фрейма. Выберите пункты File > Save Frame As….  20. Введите имя файла top.htm. 21. Выберите любой фрейм в палитре Frames. 22. Выберите пункты меню: File > Save frameset as… 23. Введите имя файла index.htm 24. В левом фрейме выберите ссылку на первый пункт теории. 25. В раскрывающемся списке target выберите mainFrame.  26. В левом фрейму выберите ссылку на второй пункт теории. 27. В раскрывающемся списке target выберите mainFrame.  28. Проделайте аналогичные действия для всех пунктов теории. 29. Просмотрите результат в браузере. Перед просмотром DW предупредит вас, что сохранит сделанные в отдельных фреймах изменения. 32 САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТА Разработать фреймовую структуру сайта. Сделать аналогичный второй сайт, но  во фреймовой структуре. 33 ЛАБОРАТОРНО­ПРАКТИЧЕСКАЯ РАБОТА № 2 ТЕМА: «ФРЕЙМОВАЯ СТРУКТУРА WEB­ДОКУМЕНТА» Цель работы:  1. Научиться создавать  Web­документ, имеющий фреймовую структуру. 2. Выработать навык эстетического оформления web­документа. 3. Получить навык работы, используя целевой вывод информации в нужный  фрейм. Ход работы: 1. Создать в папке Мои документы свою папку Задание_1. 2. Скопировать в эту папку содержимое папки Материалы_3. 3. Создать  в блокноте HTML­документы, используя файлы из папки Материалы_3  (разбить страницу на фреймы, сделать ссылки из левого фрейма на вновь  созданные HTML­документы).      4. Каждый HTML­документ, на который делается ссылка, должен содержать   текстовый фрагмент и картинку (для размещения текста и картинки  использовать неявную таблицу и форматирование текста по ширине). 5. Результат должен быть примерно такой:  6. Создать в папке Мои документы свою папку Задание_2. 7. Создать  в блокноте HTML­документы, используя файлы из папки Материалы_ 3 (1­ый HTML­документ должен разделить страницу на  кадры, во 2­ой HTML­ документ вставить картинку с изображением­картой; создать также HTML­ документы, которые будут загружаться в левом фрейме при щелчке на  соответствующих областях изображения ­карты.)  8. Для определения координат областей на изображении­карте воспользоваться  графическим редактором Photoshop (фильтром MapTag). 9. Результат должен быть примерно такой: 34 Индивидуальные задания: 1. 2. 3. 4. 5. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов  на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите   оглавление   в   виде   списка,   при   выборе   пунктов   которого соответствующий раздел должен появляться в нижней части окна. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов  на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите  оглавление, представленное с помощью  графического горизонтального меню, например в виде таблицы. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов  на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление. Оглавление представьте с помощью изображения­карты. При выборе   активной   области   в   нижнюю   область   окна   должен  быть   загружен соответствующий пункту раздел. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов   на   две   прямоугольные   области:   левую   и   правую.   В   левой   области поместите   оглавление,   при   выборе   пунктов   которого   соответствующий   пункту раздел   должен   появляться   в   правой   части   окна.   Оглавление   представьте   с помощью изображения­карты. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В верхнюю область  А  поместите графическое изображение, в область  В  — оглавление,   при   выборе   пунктов   которого   соответствующий   раздел   должен появляться в области С. Оглавление может быть представлено:  списком;  изображением­картой. Пунктам меню могут соответствовать разделы: 35  одного документа;  разных документов. Представьте материалы в виде HTML­документов с описанной структурой. 6. 7. 8. 9. 10. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В область В поместите оглавление ­ меню, представленным в виде таблицы.  Разделы,   соответствующие   пунктам   меню,   должны   появляться   в   области  С. (данное задание можно сделать, изучив основы скриптового программирования). При   попадании   курсора   мыши   на   соответствующий   пункт   меню,   в   области  А должна   появляться   краткая   аннотация   выбранного   пункта.   Представьте материалы в виде HTML­документов с описанной структурой. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С).   В   верхнюю   область   А   поместите   изображение­карту,   дублирующую   меню области В. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на три прямоугольные области. Верхняя область окна делится на две части:  левую  (В)  и   правую  (С).  Нижняя   область  (А)  занимает   по   ширине  весь экран.   В   область  А  поместите   оглавление   для   некоторых   художественных шедевров.   При   выборе   пункта   оглавления   в   части  В  должна   появиться репродукция картины, в части — С сведения о художнике или о картине. Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на три прямоугольные области. Верхняя область окна разбивается на две части:  левую  (В)  и   правую  (С).  Нижняя   область  (А)  занимает   по   ширине  весь экран. В область В поместите оглавление, представленное  меню в виде таблицы. Разделы, соответствующие пунктам меню и содержащие теоретический материал, должны появляться в области  С. В область  А  поместите документ, содержащий ссылки   на   примеры,   практическую   работу,   контрольные   вопросы,   список литературы по выбранному разделу.  Создайте   документ,   разбивающий   окно   просмотра   с   помощью фреймов на четыре прямоугольные области, как показано на рис. . В области  А поместите   оглавление.   При   выборе   пункта   оглавления   в   область  В  должен помещаться теоретический материал, соответствующий пункту меню, в область С —   список   контрольных   вопросов   по   рассматриваемой   теме,   в   область  D  — практическая   работа.   Представьте   материалы   в   виде   HTML­документов 36 описанной структуры. Контрольные вопросы: 1. Что такое фреймы? 2. Каким образом задается фреймовая структура Web­документа? 3. Какие атрибуты имеются у тега ? 4. Перечислите атрибуты тега  5. Как описываются внедренные окна? 6. Как описать карту изображения? 37 СПИСОК ИСТОЧНИКОВ ИНФОРМАЦИИ 1. Алексеев А.П. Введение в Web­дизайн: учебное пособие. ­ М.: СОЛОН­ ПРЕСС, 2014 2. Барисов Р. Постройте профессиональный сайт сами. ­ СПб., 2009 3. Дронов В. А. Самоучитель Macromedia Dreamweaver 8. ­­ СПб.: БХВ­ Петербург, 2011 4. Кроудер Д. Создание web­сайта для чайников: 3­е издание. ­ М.: Диалектика,  2013 5. Печников В.Н. Сомоучитель Web­страниц и Web­сайтов. ­ М.: Триумф, 2010 6. Печников В.Н. Создание Web­сайтов без посторонней помощи. ­ М.: Триумф,  2012 7. Панфилов К. По ту сторону веб­страницы. ­ СПб.: ДМК Пресс, 2008 8. Теоретический материал по языку HTML взят из материалов сайта  http://www.w3.org/pub/WWW/TR/ 38 Методические рекомендации к выполнению самостоятельной работы по Приложение 1. «Программные средства разработки Web» дисциплине 1. Разработать веб­сайт организации (организация выбирается самостоятельно). Требования, предъявляемые к сайту: • Сайт должен содержать не менее 6 взаимосвязанных между собой страниц и включать в себя следующие разделы: Об организации (профиль, краткая история, предоставляемые услуги). Каталог продуктов/услуг (перечень и описание продаваемых товаров, либо  предоставляемых услуг с указанием стоимости). Новости (список новостей, событий и пр.). Контактная информация (адреса, телефоны и пр.). Остальные разделы по усмотрению разработчика. • Каждая страница сайта должна иметь средства навигации (панели навигации, ссылки,  кнопки и пр.) для связи страниц друг с другом. • Каждая страница должна быть оформлена в едином стиле с использованием  графических изображений. • Сайт может быть разработан с использованием любых программных средств, например  Notepad (блокнот), Microsoft Word, Microsoft Publisher и пр. По окончании разработки сайта каждым студентом составляется пояснительная записка, которая оформляется в печатном виде на стандартных листах формата A4. Требования  к оформлению: шрифт Times New Roman 12 пт; межстрочный интервал 1,5; поля 30, 10­ 15, 20, 20 мм слева, справа, сверху и снизу соответственно; нумерация страниц снизу по  центру, начиная со второй страницы. Содержание пояснительной записки: • Титульный лист • Оглавление • Введение • Описание сайта • Заключение Во введении обосновывается необходимость разработки сайта конкретной организации,  формулируются требования к разрабатываемому сайту, обосновывается выбор  программных средств разработки. Описание сайта включает в себя: назначение, логическую структуру (список страниц с  их кратким описанием), физическую структуру (список файлов, составляющих каждую  страницу), описание принятых дизайнерских решений. Скриншоты (образы экрана) web­ страниц должны быть размещены в тексте как рисунки с соответствующей подписью и ссылками из текста. В заключении описываются достигнутые результаты, преимущества, полученные  организацией в результате разработки сайта. 40