Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення web-сторінок з використанням фреймів, навігаційних панелей, та таблиць стилів(CSS).
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Не вказано
Інформація про роботу
Рік:
2024
Тип роботи:
Лабораторна робота
Предмет:
Робота в Інтернеті
Частина тексту файла (без зображень, графіків і формул):
Створення web-сторінок з використанням фреймів, навігаційних панелей, та таблиць стилів(CSS).
Теоретичні відомості.
Фрейми.
Поняття про фрейми. Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на де кількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна об ласть. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логіч ний заголовок.
Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вік на броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану ко ристувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лі вий фрейм називають навігаційною панеллю. Навігаційну па нель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузь кий фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь про думати фреймову структуру, визначитися з кількістю фрей мів, їхніми розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні бро узера. Тут описується структура фреймів, зазначаються ад реси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.
Основний html-файл. Оскільки основний файл запус кає сайт, то його прийнято називати index.html.
Приклад 1. Розглянемо типовий вигляд основного файла:
<HTML>
<HEAD>
<ТІТLЕ>Це мій сайт з фреймами </TITLE>
</HEAD>
<FRAMESET COLS="25% ,75% ">
<FRAME SRC"leftframe.html"
NAME= "left"
<!--або "лівий" або інша назва фрейму->
SCROLLING="no"
<!-або "yes" або "auto"-->
FRAMEBORDER="1"
<!--або "О" межа фреймів є чи ні-->
BORDER = "15" <!--товщина межі-->
MARGINHIGHT= "10"
'<!-- відступи від країв-->
MARGINWIDTH="10"
NORESIZE
<!—не можна пересувати межу-->
BORDERCOLOR = "red" >
<FRAME SRC - "rightframe.html"
NAME="right" <!--або "правий" тощо--> </FRAMESET>
<NOFRAME> <!--Текст, що відображатиметься у броузері, який не підтримує фреймів, наприклад:-->
Вибачте, цей сайт містить фрейми. Скористайтесь іншим броузером для його перегляду.
</NOFRAME>
</HTML>
Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використову ють тег-контейнер
<FRAMESET параметри>... </FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS приз начений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсот ках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75%" означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.
У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, на приклад, так:
<FRAMESET COLS - "25%, 75% ">
<FRAME описуємо лівий фрейм>
<FRAMESET ROWS= "25%, 75% >
<FRAME описуємо верхній правий фрейм>
<FRAME описуємо нижній правий фрейм>
</FRAMESET>
</FRAMESET>
У тезі <FRAME параметри> користувач описує конкрет ний фрейм. Обов'язковими тут є параметр SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення па раметра TARGET тега <А>.
Призначення деяких інших параметрів такі:
Допоміжні HTML-файли. Коли основний файл спро ектовано, створюють файли для кожного фрейму.
Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текс тових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити броузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголов ків, списків чи одностовпчикової таблиці.
Приклад 2. Файл leftframe.html може мати такий вигляд:
<HTML>
<HEAD>
<ТІТLЕ>Це мій лівий фрейм</ТІТLЕ>
</HEAD>
<BODY задаємо параметри стартової сторінки>
<НЗ> Сайт Васі Квакіна</НЗ><ВR>
<Н4>
<А HREF="file1.html" TARGET="right">
Моя біографія </А> <BR>
<А HREF="file2.html" TARGET="right">
Мої захоплення </А> <BR>
<А HREF="file3.html" TARGET="right">
Мої університети </А> <BR>
<А HREF="file4.html" TARGET="right">
Моя адреса </А> <BR>
</BODY>
</HTML>
Другий допоміжний файл, нехай rightframe.html, виз начає зміст правого фрейму у момент відкривання сайту. Цей файл може містити будь-який текст чи графіку. Тут варто по дати красиво оформлений заголовок сайту, рекламну інфор мацію тощо. Як такий файл можна, наприклад, використати filel.html. Тоді у правому фреймі у момент відкривання сайту буде відображатися перша сторінка проекту.
Приклад 3. Файл right.html може мати такий вигляд:
<HTML>
<HEAD><TITLE> Це правий фрейм</ТІТLЕ>
<BODY задаємо параметри для правого сторінки>
<Н2>ЗАПРОШУЄМО НА САЙТ ВАСІ </Н2>
</BODY>
</HTML>
На цьому проектування сайту з фреймами закінчується. Залишилося створити файли filel.html, file2.html, file3.html, file4.html тощо з описами робочих сторінок сайту.
Навігаційні карти
Основні поняття. Одним з головних завдань web-ди зайну є створення навігаційної панелі для багатосторінкового сайту. Навігаційна панель може бути текстовою або графіч ною.
Графічна навігаційна панель - це рисунок, окремі час тини якого, так звані гарячі області, слугують гіперпосиланнями на відповідні сторінки сайту. Різновидом такої панелі є навігаційна карта.
Для створення навігаційної карти можна взяти за ос нову відскановану фотографію чи векторний рисунок з зобра женням декількох осіб чи об'єктів, клацання над якими мишею веде до відкривання відповідних сторінок сайту. Рису нок із зображенням кнопок чи просто тексту на деякому тлі можна створити засобами графічного редактора. Клацання мишею над окремими елементами такого рисунка-карти ак тивізує те чи інше гіперпосилання. Найчастіше навігаційна карта має вигляд вертикальної чи горизонтальної смуги, розташованої у фреймі, однак є також навігаційні карти, що займають увесь екран чи значну його частину.
Те, що рисунок на екрані є навігаційною картою, можна розпізнати, провівши над ним укажчиком миші. Під час та кої операції укажчик періодично перетворюватиметься на до лоню, на екрані з'являтиметься текстова підказка, а у рядку стану броузера можна буде побачити URL-адреси відповідних ресурсів.
Опис навігаційної карти. Спочатку потрібно відска нувати фотографію або створити відповідний рисунок за допомогою графічного редактора у форматі gif, jpg чи bmp.
Приклад 4. Розглянемо карту Мій сайт, зображену на рис.1. Рисунок ство рено редактором Paint з метою демонстрації суті карти. Верхній лівий кут рисунка має координати (0,0). Перша координата гори зонтальна, а інша - вертикальна. Одиниця вимірювання - піксель. Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описуєть ся координатами двох діагонально проти лежних вершин: (20, 175) і (150, 230). Прямокутник з текстом Навчання однознач но задається такими координатами (20, 260) і (150, 310), а з текстом Адреса - (20, 340) і (150, 390).
Створений графічний файл розташовують на диску і описують його у html-файлі web-сторінки за допомогою тега <IMG>. Цей тег має містити, крім уже відомих, новий пара метр USEMAP = "#назва1", де назва1 - це назва карти. На приклад,
Рис.1.
<IMG SRC -"адреса граф, файлу" USEMAP = "#mymap1">.
Тепер опишемо, як створити карту. Це роблять за допо могою тега
<МАР параметр>...</МАР>
У середині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #mymap1.
Гарячі області карти. У середині тега-контейнера <МАР>...</МАР> розташовують декілька одинарних тегів <AREA параметри>, що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області на зивають гарячими. Для їхнього задання призначені такі па раметри тега <AREA>:
HREF = "адреса ресурсу, який викликають"
ALT = "альтернативний текст-підказка"
SHAPE = "rect" або "circle" або "poly" або "default"
COORDS = "список координат області"
Гарячою областю може бути область, охоплена прямо кутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямо кутника - це записані через кому координати діагонально-протилежних вершин, для кола - координати центра і зна чення радіуса, для багатокутника — координати всіх вершин. Координати гарячих і холодних областей достатньо задавати приблизно, а не точно, головне, щоб області не перекривались. Якщо ж області перекриваються, то область, яка описана першою, має пріоритет. Властивість пріоритетів використовують для створення в середині гарячої області холодного фрагменту. Для цього його описують без гіперпосилання перед описом гарячої області так:
<AREA NOHREF ALT = "це є опис холодної області" SHAPE = ... COORDS = ...>
Для створення карт є спеціальні програмні засоби, на приклад Live Image тощо. Вони дають змогу автоматизувати створення карти за допомогою шаблонів рисунків, фотогра фій, заготовок кнопок та інших графічних елементів.
Приклад html-файлу навігаційної карти. Наведемо текст html-файлу, що описує наведену вище навігаційну карту.
<HTML> <HEAD> <ТITLЕ> Навігаційна Kapтa </TITLE> </HEAD>
<BODY> <IMG SRC = "karta.bmp" TITLE = "Навігаційна карта"
BORDER = 5 WIDTH=167 HEIGHT = 425 USEMAP = "#MyMap1"> <MAP NAME="MyMap1">
<AREA SHAPE ="circle" COORDS ="80, 110,50" ALT ="Моя фотографія"
HREF ="mainpage.htm">
<AREA SHAPE ="rect" COORDS ="20,175,150,230" ALT ="Моя біографія"
HREF = "biography, htm ">
<AREA SHAPE ="rect" COORDS ="20,260,150,310" ALT ="Мої університети"
HREF =" studies, htm ">
<AREA SHAPE ="rect" COORDS ="20,340,150,390" ALT ="Моя адреса"
HREF =" address, htm ">
</MAP> </BODY> </HTML>
Таблиці стилів
Основні поняття. Таблиці стилів дають змогу спрости ти процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізо вана в сучасних текстових редакторах - текст спочатку вво дять, а потім форматують, користуючись стилями. Застосу вання стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виг лядом і розташуванням.
За допомогою стилів можна змінити відстань між ряд ками, словами чи навіть символами, задати всі допустимі відступи для елементів, змінити розміри, вигляд та інші ат рибути шрифтів, створити рамки, задати тло, створити ефек ти накладання текстів, управляти порожнім простором тощо.
Таблиці стилів користувач зазвичай створює окремо від html-файлу. Під час створення html-файлу він концетрує ува гу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів - навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удоскона лення зовнішнього вигляду сторінки.
Вважатимемо, що таблиця стилів уже створена. Тепер потрібно забезпечити взаємодію таблиці стилів та основного html-файлу.
Розглянемо три способи такої взаємодії: 1) зв'язування, 2) імпортування, 3) вбудовування.
1. Зв'язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням сss. Таку табли цю стилів називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <HEAD> застосову ють одинарний тег <LINK> з інформацією про таблицю:
<HEAD>
<LINK HREF ="адреса таблиці стилів"
TYPE = "text/ess" REL = "stylesheet" TITLE = "назва таблиці стилів": </HEAD>
Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде ство рена мовою CSS як текстовий файл. Таблиця стилів може знаходитися на локальному комп'ютері або будь-де в мережі. У другому випадку адресу задають, наприклад, так: http: /WWW. microsoft. com/... /css/beststyle.сss.
Імпортування. Це те ж саме, що і зв'язування, але вза ємодію файлів забезпечують засобами тегу <STYLE> і команди @import URL("адреса таблиці стилів").
Вбудовування. Якщо таблицю створено лише для де якого конкретного html-файлу, то її розташовують у цьому файлі за допомогою тега-контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціонування сторінки. Таку таблицю стилів називають внутріш ньою або вбудованою. Таблицю стилів можна застосувати або до всього файлу, або його частини, або до окремого тега.
Якщо дизайнер для створення сторінки застосовує де кілька таблиць стилів, то такі таблиці називають каскадни ми. Каскад - це впорядкована послідовність таблиць стилів, у якій однотипні стилі з таблиць, які розташовані ближче до початку послідовності, мають більший пріоритет. Саме ця властивість дає змогу легко змінювати зовнішній вигляд сто рінки і з декількох альтернатив вибирати найліпшу методом зміни послідовності описів таблиць стилів.
Мова CSS. Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої. Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо, які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового ре дактора, наприклад NotePad, як текстовий файл і дають йому деяку назву з розширенням css.
Таблиця стилів складається з правил, а правило - з наз ви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого html-файлу.
Опис стилю - це послідовність пар <властивість>: <значення>,
які записують через крапку з комою та охоплюють фігур ними дужками.
Отже, загальний вигляд правила такий:
Список тегів {властивість1 : значення1; властивість2 : значення2; ... , властивістьN : значенняN}
Приклад правила для одного тега: Р {color:red}.
Броузер відтворить на екрані тексти всіх абзаців черво ним кольором.
Ось приклад складнішого правила для списку тегів:
НЗ, LI { color:green; font-family:pragmatica; font-size: 16pt; text-align:left; border-style:ridge; border-width: 2mm}
Броузер виведе всі заголовки третього рівня НЗ і еле менти списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
Властивості стилів та їхні значення. Імена властивос тей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Властивості стилів наведені у таблиці:
Одиниці вимірювання, прийняті у мові CSS:
Групування властивостей і успадковування. Перше слово чи перші два слова у складній назві властивості є наз вою групи (категорії) властивостей. Наприклад, font - назва групи властивостей font-family, font-size, font-style, font-vari ant, font-weight. Групування властивостей дає змогу компакт но задавати їхні значення, наприклад, так:
font:"times new roman", 12pt, italic, lighter.
Зауваження. Якщо значення властивості складається з декількох слів, то його беруть у лапки. Значення властивос тей у групах margin і padding перелічуються у строгій послі довності їх знаходження у таблиці. Наприклад,
Top right bottom left Margin:1cm, 1cm, 2cm, 2cm
Деякі властивості можуть успадковуватися різними тегами. Властивості, що стосуються тега <BODY>, діють на всі інші відповідні теги сторінки. Кажуть, що ці теги успадкову ють властивості тега <BODY>.
Наприклад, правило BODY {margin-left: 2cm} задає від ступ зліва 2см для всіх елементів сторінки. Тому, щоб при тиснути заголовок другого чи іншого рівня до лівого краю, правило для нього має бути таким: H2{margin-left: -2 cm}.
Теги <STYLE>, <DIV> і <SPAN>. Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега-контейнера <STYLE> ... </STYLE>.
Приклад 5. Розглянемо головний файл з описом стилів:
<HTML> <HEAD>
<ТІТLЕ>Застосування стилів</ТІТLЕ> <STYLE TYPE="text/css">
тут записують правила
</STYLE> </HEAD> <BODY>...</BODY> </HTML>
Правила можуть починатися або з назви тега без куто вих дужок, або з деякого слова користувача, перед яким є крапка. Це слово стає назвою типу, який можна застосувати в контейнері тега <BODY> до іншого тега, до текстового бло ка, фрагмента тексту чи деякого елемента, наприклад,
.mystylel{color:red; font-size:40pt; margin-top:30px}
.mystyle2{color:black; font-size: 16pt; margin-top:-50px}
Для виокремлення текстового блока, до якого застосову ватимуть стиль, призначений тег-контейнер <DIV пара метр>.. </DIV> з параметром CLASS, який задає конкрет ний стиль, що діятиме на блок:
<DIV СLАSS=назва стилю > блок </DIV>.
Для виокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег-контей нер <SPAN>...</SPAN>:
<SPAN CLASS = назва стилю > фрагмент </SPAN>.
Перекривання текстів на рекламній сторінці. Розгля немо застосування стилів для створення ефекту перекривання текстів.
Нехай потрібно створити рекламну сторінку туристичної компанії „Мандри" зі Львова, яка запрошує відвідати Кіпр, Грецію, Італію. Створимо і застосуємо стилі так, щоб різно кольорові назви країн частково перекривались.
Приклад 2. Розглянемо такі правила (стилі): body
.mystylel { coloured; font-size:120px; margin-top: 120px; margin-left: 70px}
.mystyle2 { color:blue; font-size: 120px; margin-top: -90px; margin-left:200px}
.mystyle3 { color:green;font-size:120px; margin-top: -85px; margin-left:340px}
.mystyle4 { color:black;font-size:35px; font-style:italic; margin-top: -270px;
margin-left:75px}
.mystyle5 { color:black; font-size:25px; margin-top:17px; margin-left:340px}
У цих стилях передбачено ефект перекривання текстів. Іншим способом цього ефекту з текстом досягнути не можна. Перекривання досягається застосуванням від'ємних значень властивості margin-top, що веде до підняття тексту вгору від носно деякої базової лінії. Перший текст закінчуватиметься на висоті 120 + 120 = 240 пікселів. Наступний текст висотою 120 пікселів буде піднятий відносно лінії 240 пікселів на 90 пікселів і зсунутий вправо згідно із значенням властивості margin-left і т.д. Значення властивості margin-top успадковує наступний елемент. Таке успадковування дає змогу вирівню вати елементи один відносно іншого. Отже, за допомогою стилів можна позиціювати елементи на екрані. Оскільки вимірювання у цьому прикладі ведеться в пікселях, то якісне зображення буде досягнуто на екрані з роздільною здатністю 1024x768 пікселів. Для інших екранів ефект буде втрачено.
Приклад 6. Розглянемо такий зміст рекламної сторінки:
<BODY>
<DIV CLASS=mystylel> Kinp</DIV>
<DIV CLASS=mystyle2> Греція</DIV>
<DIV CLASS=mystyle3> Італія</DIV>
<DIV CLASS=mystyle4> "Мандри" запрошують подорожувати </DIV>
<DIV CLASS=mystyie5> Тел.: (0322) 97-56-46</DIV>
</BODY>
Завдання
Мета: створення сайту з використанням фреймів, навігаційних панелей та таблиць стилів.
Створіть сайт із фреймами на базі описаних прикладів, методом їх введення за допомогою текстового редактора і відтворення у броузері.
Створіть сайт про себе та свою діяльність з чотирма фреймами. Розташування фреймів і розміри згідно варіанта. Назви файлів подати за таким зразком: index.html, leftframe.html, rightframe.html, logoframe.html, file1.html, file2.html, file3.html…. і т.д. У файлах file1.html, file2.html, file3.html… fileN.html подати інформацію згідно варіанту.
Вдало розташуйте інформацію у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>.
Задайте різного кольору фони у лівому та правому фреймі.
Придумайте стартову сторінку-заставку з використанням графічних елементів, чи оригінального фону.
У верхньому фреймі розмістіть свій логотип чи емблему з деякого графічного файлу і рекламну інформацію.
У правому фреймі організуйте перегляд сторінок.
У нижньому фреймі розмістіть свої реквізити, деяку рекламу та вкажіть авторські права.
Удоскональте сайт, щоб він виглядав якнайкраще.
Збережіть web-сайт в папку Frame.
Створіть рисунок для навігаційної карти (наповнення згідно варіанту) за допомогою графічного редактора.
Уточніть координати гарячих областей (подати гарячі області в формі прямокутників, кіл, та багатокутника).
Запишіть html-файл для навігаційної карти і виконайте його. Проекспериментуйте з картою.
Розмістіть навігаційну карту у лівому фреймі. Забезпечте відображення сторінок у правому фреймі.
Удоскональте сайт, щоб він виглядав якнайкраще.
Збережіть web-сайт в папку Map.
Придумайте і застосуйте стилі для створення попереднього сайту.
Форматування текстів та таблиць повністю здійснити за допомогою таблиць стилів. Внутрішні таблиці стилів для парних варіантів, зовнішні — для непарних. Кількість таблиць стилів згідно варіанту.
Збережіть web-сайт в папку Style.
Варіанти завдань:
Схеми розміщення фреймів:
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора