5. Питання для самоконтролю
Як задати товщину рамки навколо таблиці?
Як можна змінити відстань між рамками клітинок і відстань від рамки клітинки до вмісту клітинки?
У яких випадках і яким чином задається фіксована ширина і висота таблиці?
Як можна задати розташування таблиці по центру у вікні перегляду?
Як можна задати обтікання таблиці текстом?
Які засоби завдання кольору рамки таблиці і форматування колонок таблиці можна використати в Internet Explorer?
Лабораторна робота № 7 Використання карт посилань і фреймів в Web- сторінках
1. Мета роботи
Метою роботи є знайомство із засобами створення карт посилань і фреймів в мові HTML.
2. Склад робочого місця.
2.1. Устаткування: IBM- сумісний персональний комп'ютер(ПК).
2.2. Програмне забезпечення: операційна система Windows, Web- браузер Internet Explorer версії 6.0 і вище.
3. Підготовка до лабораторної роботи
Для підготовки до виконання лабораторної роботи необхідно повторити наступні розділи (дивись електронний конспект лекцій по розділу 4 «Технології програмування»).
4. Порядок виконання роботи
Відкрийте модифіковану в лабораторній роботі 2-06 Web- сторінку для вашого варіанту в текстовому редакторові.
Помістіть вміст контейнера <style>…</style> у окремий файл з ім'ям stylesномер-варианта.css. Видаліть з документу HTML контейнер і вставте на його місце елемент <link> з посиланням на створену вами зовнішню таблицю стилів.
Створіть файл Headerномер-варианта.html і скопіюйте в нього наступні фрагменти вашого документу в заданій послідовності: початок документу (з першого рядка до рядка <body>), контейнер <h1>…<h1>, елементи </body> і </html>. Замініть зміст контейнера <title>…</title> на слово "Заголовок".
Створіть файл Contentномер-варианта.html і скопіюйте в нього наступні фрагменти вашого документу в заданій послідовності: початок документу (з першого рядка до рядка <body>), заголовок "Оглавление", рядки змісту документу(з гіперпосиланнями), елементи </body> і </html>. Замініть зміст контейнера <title>…</title> на слово "Оглавление".
Створіть файл Introномер-варианта.html (якщо в документі є введення) або файл Part-01-номер-варианта.html (якщо документ розпочинається з першого розділу) і скопіюйте в нього наступні фрагменти вашого документу в заданій послідовності: початок документу (з першого рядка до рядка <body>), введення або перший розділ із заголовком, елементи </body> і </html>. Замініть зміст контейнера <title>…</title> на слово "Введение" чи найменування першого розділу.
Аналогічним чином скопіюйте в окремі файли інші розділи документу з їх заголовками і новими значеннями контейнера <title>…</title>.
Відкрийте файл Contentномер-варианта.html у текстовому редакторові і зміните в рядках змісту внутрішні посилання на розділи в атрибуті href посиланнями на відповідні Web- сторінки розділів, а посилання на підрозділи і пункти - внутрішніми посиланнями в сторінках розділів.
Помістіть створені вами в лабораторній роботі 2-02 малюнки в папку images вашої папки.
Відкрийте, знаходячись у вашій папці програму ImageReady. Відкрийте в ній ваш малюнок, що містить елементи "Оглавление" і "Стрелка «Вперед»". Задайте карту посилань для елементів цього малюнка. Для елементу "Оглавление" параметр URL – посилання на файл змісту, а для елементу "Стрелка «Вперед»" – посилання на Web- сторінку з першим розділом(якщо в документі є введення) або на Web- сторінку з другим розділом(якщо в документі немає введення). У параметрі Цель задайте значення "main". Збережіть опис карти посилань у файлі з довільним ім'ям.
Скопіюйте з цього файлу елемент <img> і контейнер <map>. Відкрийте в текстовому редакторові Web- сторінку з введенням(якщо воно є) або Web- сторінку першого розділу(якщо введення немає). Вставте елемент <img> і контейнер <map> у кінець тіла сторінки (перед елементом </body>). Перевірте правильність посилання на малюнок в атрибуті src елемента <img>.
Відкрийте в ImageReady ваш малюнок, що містить елементи "Стрелка «Назад»" і "Оглавление". Задайте карту посилань для елементів цього малюнка. Для елементу "Оглавление" параметр URL – посилання на файл змісту, а для елементу "Стрелка «Назад»" – посилання на Web- сторінку з передостаннім розділом. У параметрі Цель задайте значення "main". Збережіть опис карти посилань у файлі з довільним ім'ям.
Повторіть операцію вставки, описану в п.10, для Web- сторінки, що містить останній розділ документу.
Відкрийте в ImageReady ваш малюнок, що містить елементи "Стрелка «Назад»", "Оглавление" і "Стрелка «Вперед»". Задайте карту посилань для елементів цього малюнка. Для елементу "Оглавление" параметр URL – посилання на файл змісту, для елементу "Стрелка «Назад»" – посилання на Web- сторінку, що містить введення(якщо введення є), або на Web- сторінку, що містить перший розділ (якщо введення немає), а для елементу "Стрелка «Вперед»" – посилання на Web- сторінку, що містить другий розділ(якщо введення є), або на Web- сторінку, що містить третій розділ (якщо введення немає). У параметрі Цель задайте значення "main". Збережіть опис карти посилань у файлі з довільним ім'ям.
Повторіть операцію вставки, описану в п.10, для Web- сторінки, що містить перший розділ документу(якщо введення є) або другий розділ документу(якщо введення немає). Потім повторіть операцію вставки для усіх наступних Web- сторінок документу до передостанньої Web- сторінки включно. При цьому в кожній Web- сторінці скоректуйте атрибут href в елементі (або елементах) <area> для елемента "Стрелка «Назад»" так, щоб він утримував посилання на Web- сторінку з попереднім розділом, а той же атрибут в елементі(чи елементах) <area> для елемента "Стрелка «Вперед»" так, щоб він утримував посилання на Web- сторінку з наступним розділом.
Перевірте дію гіперпосилань в картах посилань на ваших Web- сторінках в Web- браузері і покажіть результати викладачеві.
Створіть документ HTML з ім’ям indexномер-варианта.html, що описує фрейми і має структуру, представлену на мал. 7.1.
80%
20%
Рис. 7.1. Структура фреймів для Web-сторінок
Задайте горизонтальну рамку фреймів завтовшки 10 пікселів, вертикальну рамку - завтовшки 2 пікселі, а також відстань 20 пікселів від межі фрейма для розділів документу(по вертикалі і горизонталі).
Щоб усі Web- сторінки виводилися у фрейм з ім'ям main, додайте в усіх рядках змісту (файл Contentномер-варианта.html) в елементі <a> атрибут target зі значенням "main".
Створіть (в файлі stylesномер-варианта.css) правило стиля для селектора div класу icenter зі значенням властивості вирівнювання тексту, рівним "center".
Створіть (в файлі stylesномер-варианта.css) правило стиля для селектора p класу iframe з тією ж гарнітурою шрифту, що і для правила стилю селектора p, вирівнюванням по ширині і значенням розміру шрифту на 2 пункти меншим, ніж задано в правилі стилю селектора p.
Створіть правило (в файлі stylesномер-варианта.css) стиля для селектора iframe класу left зі значенням властивості float, рівним "left".
Створіть один внутрішній фрейм, вирівняний по центру (для цього контейнер <iframe>…</iframe> має бути поміщений в контейнер <div>…</div> класу icenter) і один внутрішній фрейм з «обтеканием» тексту (для цього елемент <iframe> повинен бути класу left). Заздалегідь абзац або абзаци, що містять внутрішній фрейм мають бути вирізані зі свій Web- сторінки і поміщені у файл Include1-номер-варианта.html (для внутрішнього фрейму, вирівняного по центру) або у файл Include2-номер-варианта.html (для внутрішнього фрейму, вирівняного вліво). Кожен з цих файлів оформляється аналогічно окремій Web- сторінці, тобто перед вирізаним абзацом або абзацами має бути вставлена заголовна частина (з першого рядка до елементу <body> включно), а після абзаців мають бути вставлені елементи </body> і </html>. Внутрішні фрейми мають бути поміщені в те ж місце, де знаходилися вирізані фрагменти.
Вирізувані фрагменти тексту, їх форматування, а також значення атрибутів width і height елемента <iframe> для кожного варіанту представлені в табл. 7.8.
Таблиця 7.8. Параметри внутрішніх файлів
Вариант
Форматирование
Фрагмент
Атрибуты <iframe>
width
height
1.
по центру
Второй абзац во введении (начиная со слова "Компьютерные" и кончая словами "в сети").
40%
100
влево
Второй абзац в разд. 3.4 (начиная со слова "Представим" и кончая словом "слушают").
60%
100
2.
по центру
Второй абзац в разд. 3 (начиная со слова "Обеспечение" и кончая словом "телевидением").
50%
100
влево
Первый абзац в разд. 4.1 (начиная со слова "Тюнер" и кончая словом "демодулятор").
60%
100
3.
по центру
Второй и третий абзацы во введении (начиная со слов "При передаче" и кончая словом "радиоканал").
45%
150
влево
Третий абзац в разд. 2 (начиная со слова "Наиболее" и кончая словами "на терминал").
50%
100
4.
по центру
Последний абзац в разд. 1.3.1 (начиная со слова "Последнее" и кончая словами "до 100Мбит/с").
55%
120
влево
Предпоследний абзац в разд. 3 (начиная со слова "После" и кончая словом " Windows").
65%
100
5.
по центру
Второй абзац во введении (начиная со слов "До недавнего" и кончая словом "филиалами").
50%
100
влево
Первый абзац в разд. 4.2.1 (начиная со слов "При шифровании" и кончая словом "сообщения").
65%
100
6.
по центру
Второй абзац в разд. 1.1 (начиная со слова "Когда" и кончая словами "с Интернетом").
65%
130
влево
Пятый абзац в разд. 3 (начиная со слов "Каждая часть" и кончая словом "платы").
60%
100
7.
по центру
Второй абзац в разд. 1 (начиная со слова "Человеческий" и кончая словом "линии").
50%
100
влево
Второй абзац после рис. 4 в разд. 3 (начиная со слова "QAM" и кончая словом "несущей)").
65%
100
8.
по центру
Первый абзац в разд. 3.2 (начиная со слова "Концентратор" и кончая словом "станции").
40%
110
влево
Первый и второй абзацы в разд. 4.2 (начиная со слова "Единственное" и кончая словом "конце").
60%
100
9.
по центру
Первый абзац в разд. 1 (начиная со слова "Стандартная" и кончая словом "задачи").
50%
120
влево
Первый абзац в разд. 5.2 (начиная со слова "DSLAM" и кончая словом "пользователей").
65%
100
10.
по центру
Последний абзац в разд. 4 (начиная со слов "В трехуровневой" и кончая словом "маршрутизации").
40%
100
влево
Первый абзац после табл. 1 в разд. 3 (начиная со слова "Как" и кончая словами "к D").
65%
100
11.
по центру
Первый абзац после рис. 6 в разд. 5.2 (начиная со слова "Заготовка" и кончая словом "нить").
40%
100
влево
Первый абзац после рис. 1 в разд. 6 (начиная со слов "В физике" и кончая словом "угла").
70%
90
12.
по центру
Второй абзац в разд. 1 (начиная со слова "Internet" и кончая словом "шлюзов").
50%
110
влево
Первый абзац после рис. 5 в разд. 4 (начиная со слов "Режим" и кончая словом "WWW").
65%
100
Перевірте роботу фреймів і внутрішніх фреймів для вашого варіанту. Покажіть результати роботи викладачеві.