- •Міністерство освіти і науки україни
- •Вступ Методичні вказівки призначені для проходження студентами денної форми навчання навчально-комп`ютерної практики.
- •Частина I Теоретичні відомості до теми «Основи Web-дизайну»
- •Програми для створення|створіння| html - файлів.
- •Теги і структура html-документа
- •Межі документа.
- •Html - документ умовно можна розбити на три частини|частки|:
- •Шаблон html-документа.
- •Практичне заняття №1. Тема: Мова html. Сумісне застосування програм Блокнот та ie для створення сайту. Структура html-файлів. Обов’язкові теги, атрибути. Заголовок документа.
- •Практична частина
- •Практичне заняття №2 Тема: Текстові блоки мови html.
- •Текстові блоки
- •Створення|створіння| абзаців і рядків
- •Атрибуты: width – визначає довжину лініі(рядку) в пікселах або відсотках від ширини вікна браузера; size – визначає товщину лініі в пикселах.
- •Практичне заняття №3 Тема: Форматування тексту.
- •Теоретичні відомості
- •Практична частина
- •Практичне заняття №4. Тема: Створення різноманітних списків.
- •Теоретичні відомості
- •Ненумеровані списки.
- •Нумеровані списки
- •Практичне заняття №5. Тема: Створення таблиць.
- •Теоретичні відомості
- •Практичне заняття №6 Тема: Зображення. Зв’язування файлів за допомогою гіперпосилання. Гіперпосилання –текст та гіперпосилання - малюнок.
- •Теоретичні відомості
- •Гіперпосилання та якоря
- •Крокодил Корней Чуковский
- •Содержание
- •3. Завдання
- •Практичне заняття №7 Тема: Фрейми.
- •Теоретичні відомості
- •Елементи для створення і роботи з фреймами:
- •Створення фреймів
- •Як завантажувати у фрейми цілі сторінки
- •Література
Елементи для створення і роботи з фреймами:
- |
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