Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
тема_HTML (1).doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
423.42 Кб
Скачать

Елементи для створення і роботи з фреймами:

-

 FRAMESET

Визначає фреймову (віконну) структуру документа: розміри і и розташування фреймів на сторінці

-

 FRAME

Визначає фрейм і його властивості всередині FRAMESET-структури

-

 NOFRAMES

Визначає що відображати, якщо браузер не підтримує фрейми

Створення фреймів

Щоб одержати сторінку, що містить фрейми, потрібно спочатку створити кілька документів:

по-перше: документ, що визначає загальну структуру сторінки.

Його звичайно називають документом фреймової структури {frameset document), або просто структурним документом. Документ фреймової структури, як і будь-який інший HTML-документ, має ім`я index.html.

Для створення структурного документа використовується контейнер FRAMESET. Дескрипторна пара <FRAMESET></FRAMESET> повністю заміняє в структурному документі пару тегів <BODY></BODY>.

У дескрипторі <FRAMESET> використовуються два атрибути: ROWS і COLS, які визначають орієнтацію фреймів-вертикальні чи горизонтальні.

ROWS – визначає кількість і розміри горизонтальних фреймів (фреймів-рядків) у вікні браузера. Як значення задається список розмірів фреймів через кому.

COLS – визначає кількість і розміри вертикальних фреймів (фреймів-стовпців) у вікні браузера. Як значення задається список розмірів фреймів через кому.

Обоє вони приймають числові значення (у пикселях або у відсотках):

Наприклад: "30%,30%,40%"

Також можна використовувати значення *(зірочка) яка вказує на те, що фрейм буде займати весь вільний простір вікна браузера,яке не зайняте іншими фреймами з вказаними розмірами

Наприклад: «25%,25%,*» - *-означає 50%

Усі три способа можливо поєднувати.

Створюючи фрейми, ви повинні вирішити, як буде розділена сторінка: по вертикалі (за допомогою атрибута COLS) або по горизонталі (за допомогою атрибута ROWS). Ви повинні використати в дескрипторі <FRAMESET> той або інший атрибут;

Для цих атрибутів використається наступний формат:

<FRAMESET ROWS="числа, відсотки, * ">

<FRAMESET COLS=" числа, відсотки, * ">

Це означає, що ви повинні вибрати значення в пикселях, у відсотках або просто *.

по-друге: треба створити документи, які будуть розміщуватия у фреймах.

Приклад1.

У наведеному нижче прикладі створюються два горизонтальних фрейми: один має довжину 50 пикселей, а інший займає всю іншу частину сторінки:

<FRAMESET ROWS="50,*">- сторінка розділена на два горизонтальних фрейма.

Приклад2.

У наступному прикладі створюється сторінка, розділена на два фрейма-стовпці, де лівий займає 25% екрана, а правий - інші 75%:

<FRAMESET COLS="25%,75%">

Як завантажувати у фрейми цілі сторінки

За допомогою дескриптора <FRAME>, поміщеного в контейнер FRAMESET, можна визначити, який саме файл буде відображатися в конкретному фреймі.

Кожний дескриптор <FRАМЕ> є одиночним.

Атрибути:

SRC  обов'язковий атрибут, вказує адресу (URL) та ім`я HTML-файлу, що відображатиметься в даному фреймі.

NAME – визначає ім'я даного фрейму, що буде надалі  використовуватися для посилання на нього з інших документів за допомогою атрибута TARGET. Як значення, потрібно вказати будь-яке ім'я без пробілів з використанням латинських символів і цифр. Ім'я не повинно починатися із цифр і спеціальних символів.

SCROLLING – визначає наявність лінійок прокручування вмісту фрейму. Можливі значення:

yes – відображати лінійки прокручування. no – не відображати лінійки прокручування. auto – відображати лінійки прокручування при необхідності (якщо документ, зазначений в атрибуті SRC, не вміщається у фреймі).

Приклад3.

Простий шаблон фреймової структури:

<HTML>

<HEAD>

<ТIТLЕ>Шаблон фреймової структури</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="25%, 75%">

<FRAME SRC="Таблиці.html">

<FRAME SRC="Малюнки.html">

</FRAMESET>

</HTML>,

у даному прикладі сторінка розділена на два горизонтальних фрейма, в верхньому фреймі розміщується файл "Таблиці.html", в нижньому фреймі-файл "Малюнки.html">.

Приклад4.

<HTML>

<HEAD>

<ТIТLЕ>Шаблон фреймової структури</ТIТLЕ>

</HEAD>

<FRAMESET COLS="265,*">     <FRAME SRC="Таблиці.html">  <FRAMESET ROWS="165,*">         <FRAME SRC="Списки. html">         <FRAME SRC="Малюнки.html">     </FRAMESET> </FRAMESET>

</HTML>,

зверніть увагу на змішану структуру фреймового документа:

- спочатку сторінка розбивається на два вертикальних фрейма, в лівому фреймі розташовується файл "Таблиці.html"; другий вертикальний фрейм розбивається на два горизонтальних фрейма, де у верхньому розташовується файл "Списки. html", а в нижньому ="Малюнки.html".

Завдання1

Реалізувати приклади №3 і №4.

Як правило, фрейми використовуються для полегшення навігації по сайту, створення навігаційного меню, тому розглянемо створення сторінки з фреймами для полегшення навігації по сайту.

Для цього треба створити:

  • файл з описом структури фреймів, де кожному фрейму дати своє ім`я, а також у вкладених тегах <FRAME> вказати: які файли в якому з фреймів будуть відображатися; файл зберігають з іменем index.html.

  • підготувати файли, які будуть розміщуватися в кожному з фреймів.

Одним з цих файлів має бути файл, який містить гірепосилання на ті файли, що ви хочете переглядати у одному з фреймів, при виконанні щиглика на гіперпосиланні. Як правило файл, який складається зі списку гіперпосилань розташовують у лівому фреймі-це і є навігаційна панель. Для того, щоб браузер розумів, де відкривати файл по гіперпосиланню, в гіперпосиланні застосовують атрибут TARGET= «ім`я фрейма».

Приклад5

1. <HTML>

<HEAD>

<ТIТLЕ>Файл фреймової структури</ТIТLЕ>

</HEAD>

<FRAMESET COLS="265,*" >     <FRAME SRC="Посилання.html" name=”left”>                <FRAME SRC="Малюнки.html" name=”right”> </FRAMESET> </HTML>

Створіть файл "Посилання.html".

<A href = «Списки.html» target=”right”> Списки <A>

<A href = «Таблиці.html» target=”right”> Таблиці <A>

Вказані файли існують і містяться в вашій папці, тому готувати ї х не потрібно.

Завдання2

Реалізувати Приклад5. В цьому прикладі результатом має бути 2 горизонтальних фрейма . В лівому буде два гіперпосилання у вигляді тексту, а в правому фреймі спочатку відобразиться вміст файлу з Малюнками, а при натиску на гіперпосиланні, змінеться на Списки, а потім на Таблиці.

Завдання3

Створіть сторінку з трьома фреймами:

Один вертикальний-зліва–навігаційна панель, що буде відкривати усі створені вами файли за час проходження практики:

  • Про себе,

  • Заголовки,

  • Списки,

  • Таблиці,

  • Малюнки,

  • Мої гіперпосилання,

  • Країни світу,

  • Моє захоплення чи Відпочинок ,

і два горизонтальних фрейма, верхній –вузький і містить ваше прізвище, групу і будь- яке привітання, а нижній фрейм призначений для перегляду створених файлів.

Оформлення веб-сторінки на ваш розсуд.

Зміст

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 1

Вступ 3

Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики. 3

3

ЧАСТИНА I 3

Теоретичні відомості до теми «Основи Web-дизайну» 3

ПРАКТИЧНЕ ЗАНЯТТЯ №1. 7

Тема: Мова HTML. Сумісне застосування програм Блокнот та IE для створення сайту. Структура HTML-файлів. Обов’язкові теги, атрибути. Заголовок документа. 7

< HTML >...< /HTML >, 8

ПРАКТИЧНЕ ЗАНЯТТЯ №2 8

Тема: Текстові блоки мови HTML. 8

Текстові блоки 8

Використовується для створення заголовків тексту. Взагалі існує 6 рівней заголовків. Заголовки створюються за допомогою парних тегів <Hn>…..</Hn>, де n-номер рівня заголовка. Чим менший номер заголовка тим більше він за розміром. Заголовок є окремим типом абзаца. 10

Завдання 10

4.Створити усі шість рівнів заголовків, з текстом: 10

Заголовок 1-го рівня 10

Заголовок 2-го рівня 10

… 10

… 10

Заголовок 6-го рівня 10

5.Користуючись різними засобами вирівнювання, кожні 2 види заголовків вирівняти по центру, по правому краю, по лівому краю вікна документа. 10

6.Збережіть файл у своїй папці з іменем Заголовки.html і перегляньте у вікні браузера. 10

ПРАКТИЧНЕ ЗАНЯТТЯ №3 10

Тема: Форматування тексту. 10

ПРАКТИЧНЕ ЗАНЯТТЯ №4. 14

Тема: Створення різноманітних списків. 14

ПРАКТИЧНЕ ЗАНЯТТЯ №5. 18

Тема: Створення таблиць. 18

ПРАКТИЧНЕ ЗАНЯТТЯ №6 30

Тема: Зображення. Зв’язування файлів за допомогою 30

гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок. 30

Завдання 33

2. Вам необхідно створити у новому файлі з іменем «Мої гіперпосилання.html » наведений нижче приклад, з трьома гіперпосиланнями-мітками на різні частини одного файлу, при цьому мітки-гіперпосилання мають бути організовані як нумерований список , а також імена міток на відповідні фрагменти файлу повинні мати номери 1,2,3. 33

Ми наводимо вам текст у кодах фрагменту, який описує створення мітки-гіперпосилання на перший фрагмент: 33

<A href=#1>Жил да был...</A> - створення самої мітки з іменем 1 33

Приклад4 33

Крокодил 34

ПРАКТИЧНЕ ЗАНЯТТЯ №7 36

Тема: Фрейми. 36