Главная страница
Навигация по странице:

  • Порядок выполнения

  • Варианты задания

  • Содержание отчета

  • Технология выполнения работы

  • Учебнометодическое пособие к лабораторнопрактическим занятиям по дисциплине Введение в информационные технологии для студентов направления подготовки 44. 03. 04 Профессиональное обучение всех форм обучения


    Скачать 1.6 Mb.
    НазваниеУчебнометодическое пособие к лабораторнопрактическим занятиям по дисциплине Введение в информационные технологии для студентов направления подготовки 44. 03. 04 Профессиональное обучение всех форм обучения
    АнкорPrakticheskaya_rabota
    Дата30.11.2021
    Размер1.6 Mb.
    Формат файлаdocx
    Имя файлаVvedenie_v_IT.docx
    ТипУчебно-методическое пособие
    #286920
    страница27 из 31
     

    Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7. 

    Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта (см. лабораторную работу №1). 

    4. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры . Окончательно контейнер первой строки выглядит так: 













    5. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры . Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так: 













    6. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры . Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так: 









    7. Аналогично п. 6 заполните контейнер четвертой строки. Сохраните документ и просмотрите его через браузер. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться.

    8. Добавьте в таблицу сведения о гостинице Спортивная. Они располагаются в пятой и шестой строках. Похожие строки находятся во второй и третьей строках таблицы, и теги, создающие их, уже сформированы. Скопируйте теги из второй и третьей строк соответственно в контейнеры пятой и шестой строк, замените содержание ячеек. Так как здесь первая и вторая ячейки по высоте занимают только 2 строки, поменяйте значение атрибута ROWSPAN. Получаем для новых строк: 



     

     

     

     





     

     



    9. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек: 



     

     

     

     



    Сохраните документ и просмотрите его через браузер.

    10. Форматирование таблицы. Добавьте в тег
    1   ...   23   24   25   26   27   28   29   30   31
    Название Адрес Тип номера Цена за день
    Россия Пр. Ленина, д. 42 Люкс одноместный $150
    Люкс двухместный $250
    Спортивная Профсоюзов, д. 15 одноместный $50
    двухместный $80
    Бысым Привокзальная пл., д. 3 Четырехместный $50
    атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов). 

    Посмотрите через браузер, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через браузер, за что отвечает этот атрибут. Подробнее см. п. 8.

    11. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров. Необходимые для этого сведения – в п. 8.

    Задание 3

    В документ Таблица_Фамилия.html вставить файл-картинку в виде фона для одной ячейки таблицы, затем для таблицы в целом, затем для документа в целом. После таблицы вставить гиперссылку на администратора конференции.

    В документ Резюме_Фамилия.html вставить файл-фотографию, проверить разные варианты обтекания изображения текстом.

    Порядок выполнения.

    1. Подготовьте необходимые для работы файлы. Для этого нужно:

    • с помощью функции Windows "Найти Файлы и папки" найти все файлы на диске С с расширением *.jpg;

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

    • в своей папке создать новую папку с именем Сайт_Фамилия;

    • открыть в папке своей группы файл Таблица_Фамилия.html;

    • в окне браузера выполнить команду Вид → Показать код HTML.

    2. Создайте фон в разных частях документа. Для этого нужно:

    • в открывающий тег какой-нибудь ячейки таблицы вставить атрибут BACKGROUND="имя файла-пейзажа с расширением". В результате тег должен выглядеть примерно так: 


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

  • скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл другого пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Теперь вся таблица изображается на фоне второй картинки, а в ячейке по-прежнему сохраняется предыдущий фон;

  • скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл третьего пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Фон, указанный в , заполняет все окно браузера, а фон, заказанный во внутренних тегах, распространяется только на область их действия. 

    Вывод: внутренние назначения заменяют внешние.

    3. Проанализируйте способы указания адресов нужных файлов (URL). Для этого сделайте следующие манипуляции:

    • перенесите в папку Сайт_Фамилия все файлы пейзажей, нажмите кнопку Обновить в окне браузера. Фон пропал;

    • в атрибутах BACKGROUND="…" добавьте перед именами файлов название папки, в которой они находятся. В результате получим примерно это: BACKGROUND="Сайт_Иванов\море.jpg"

    • Сохраните изменения и просмотрите их через браузер. Фон появился. Прочтите п. 6 (фрагмент про относительный URL) и просмотрите примеры п. 9 при разных ссылках на файлы. В нашем примере мы сделали ссылку на файл в дочерней папке;

    • поменяйте местами файл с таблицей и файлы пейзажей (файл с таблицей – в папку Сайт…, а файлы пейзажей – в папку своей группы), закройте окно браузера и откройте таблицу снова из папки Сайт… Фон опять пропал;

    • в атрибутах BACKGROUND="…" замените название дочерней папки на значок родительской. В результате получим примерно это: BACKGROUND="..\море.jpg"

    • Сохраните изменения и просмотрите их через браузер. Фон появился. В этом примере мы сделали ссылку на файл в родительской папке. 

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

    4. Добавьте первую гиперссылку. Для этого нужно:

    • в код документа с таблицей после закрывающего тега
  • добавить текст: Ответственный за размещение гостей … (Ваша фамилия) . Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через браузер;

    Подробнее о гиперссылках и их атрибутах см. п. 10.

    5. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:

    Сообщите нам о нужном Вам номере по e-mail

    Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 6 о структуре URL и разберите в п. 10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.

    6. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 9.

    Варианты задания

    Создать сайт из 5 документов на выбранную тему. Минимальный набор средств языка HTML, который должен быть использован в документах:

    • разные приемы форматирования текста;

    • оформление списков;

    • оформление таблиц;

    • гиперссылки;

    • использование изображений.

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

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

    В документах Пункт1.html, Пункт2.html, Пункт3.html, Пункт4.html можно разместить разные группы информации по выбранной теме. Например, если выбрана тема «спортивная команда», Пункт1.html может содержать текстовые сведения об истории ее создания, Пункт2.html – список игроков, Пункт3.html – таблицу игр.

    Документ Приветствие.html должен содержать гиперссылки на Пункт1.html, Пункт2.html, Пункт3.html, Пункт4.html.

  • Содержание отчета

    После выполнения работы составить отчет, включающий исходный код html-страниц, описание основных использованных тегов и снимки экрана (скриншоты).

    Технология выполнения работы

    В данной работе с помощью языка разметки HTML должны быть созданы 5 web-страниц, оформленных с помощью основных html-тегов.

    Вопросы для защиты работы

    1. Дайте определение понятиям "HTML", "гиперссылка", "браузер", "тег".

    2. Общая структура тегов.

    3. В каких случаях используются &-последовательности и комментарии?

    4. Расскажите об общей структуре html-документа.

    5. Перечислите теги форматирования шрифта.

    6. Как оформляются смысловые части текста и списки?

    7. Создание таблиц с помощью языка HTML.

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

    9. Как создать гиперссылку?
    1   ...   23   24   25   26   27   28   29   30   31


    написать администратору сайта