Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Поняття про структуру веб-сайту. Фрейми, теги й атрибути фреймів. Використання посилань у фреймах

Скачати 77.51 Kb.

Поняття про структуру веб-сайту. Фрейми, теги й атрибути фреймів. Використання посилань у фреймах




Скачати 77.51 Kb.
Дата конвертації07.06.2017
Розмір77.51 Kb.
ТипУрок

Урок №12

Тема: Поняття про структуру веб-сайту. Фрейми, теги й атрибути фреймів. Використання посилань у фреймах. Практична робота №5. Розробка веб-сайтів з використанням фреймів.
Мета:

  • познайомити учнів з видами гіперпосилань; формувати навички створення гіперпосилань між HTML-документами та в межах одного HTML-документа;

  • розвивати логічне мислення, творчий підхід до роботи;
    Гіперпосила́ння (або просто посилання чи ланка, пóклик) - активний (виділеним кольором) текст, зображення чи кнопка на веб-сторінці, натиснення на яку (активізація гіперпосилання) викликає перехід на іншу сторінку чи іншу частину поточної сторінки.
    Атрибу́т (attribute) - невід'ємна, необхідна для забезпечення цілісності об'єкта (предмета) або суб'єкта (людини) властивість, його частина, додаток.
    Сайт або веб-сайт (від англ. website, місце, майданчик в інтернеті) - сукупність веб-сторінок, доступних у мережі Інтернет, які об'єднані як за змістом, так і за навігацією під єдиним доменним ім'ям. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.
    Міркування - зіставлення думок, пов’язання їх задля відповідних висновків, логічне мислення. Можна розглядати міркування як аналіз і синтез даних, та їхню оцінку. Хоча знання фактів і є точкою відліку у вивченні суспільних наук, людина також повинна мати здатність до логічного мислення-міркування, адже саме міркування наповнює факти, проблеми і поняття змістом: міркуючи над засвоєним знанням, людина приходить до повнішого розуміння предмета. Міркування є також предметом логіки, яка вказує нам правила, закони або норми, яким повинне підкорятися наше мислення для того, щоб бути істинним.


  • виховувати культуру спілкування, культуру представлення інформації.


Використане обладнання: комп’ютер; дошка;
Хід уроку.

1.Актуалізація опорних знань.

Фронтальне опитування:

- Як створюється таблиця на веб-сторінках?

Веб-сторінка (англ. Web-page) - інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше Wml (для wap-сторінок).
Опи́тування, о́пит - це метод збору соціологічної інформації про досліджуваний об'єкт під час безпосереднього (усне опитування, інтерв'ю) або опосередкованого (письмове опитування, анкетування) спілкування того хто опитує з респондентом.

- Які використовуються атрибути для оформлення таблиці?



2. Мотивація навчальної діяльності.
Мотива́ція (з лат. movere) - спонукання до дії; динамічний процес фізіологічного та психологічного плану, керуючий поведінкою людини, який визначає її організованість, активність і стійкість; здатність людини діяльно задовольняти свої потреби.

Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.

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

Розді́л (рос. Роздол, уточнююча назва - Старий Розділ) - селище міського типу на південно-західному Опіллі (Миколаївський район Львівської області України).
Навіга́ція (від {лат. navigare - керувати кораблем та санскр. navgathi - майстерність керманича). Галузь знань про керування транспортним засобом для спрямування його до цілі. Використовується на воді, на землі, в повітрі, а також останній час і в космосі.
Графіка Гра́фіка (нім. Graphik, грец. graphikos «написаний») - вид образотворчого мистецтва, для якого характерна перевага ліній і штрихів, використання контрастів білого і чорного та менше, ніж у живописі, використання кольору.
Текст Текст (від лат. textus - тканина, з'єднання) - загалом зв'язана і повністю послідовна сукупність знаків. Наука, що вивчає тексти називається герменевтикою.
Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощує навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.

3. Повідомлення теми і завдань уроку.

На уроці ви повинні:



  • познайомитись з тегами створення фреймів;

  • вивчити теги створення фреймів;

  • навчитися застосовувати теги створення посилань;

  • зв’язати свої та HTML-документи, заготовлені вашими однокласниками із вашою домашньою сторінкою.

4. Виклад навчального матеріалу, виконання практичних завдань.
Матеріал Матеріа́л - речовина, або суміш речовин, первинний предмет праці, який використовують для виготовлення виробу (основний матеріал), або які сприяють якимось діям. У останньому випадку уточнюють, що це допоміжний, чи витратний матеріал.
Практика (грец. πράξις «діяльність») - доцільна і цілеспрямована діяльність, яку суб'єкт здійснює для досягнення певної мети. Практика має суспільно-історичний характер і залежить від рівня розвитку суспільства, його структури.


Фрейми, їхні теги й атрибути

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

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

Сторінка з розміткою, як і звичайна, починається з тегу і закінчується тегом . Для поділу екрана на кілька фреймів використовують теги і . Перший має бути розташований після тегу заголовка, але перед тегом . Іноді в таких документах зовсім не використовують тег . Два фрейми можна розташовувати поруч по горизонталі або один над одним.

Докуме́нт - базова теоретична конструкція, яка відноситься до всього, що може бути збережене або представлене, щоб служити як доказ для певної мети.
Горизонталь, ізогіпса (англ. contour lines, horizontal, isohyps, нім. Höhenkurve f, Horizontale f; рос. горизонталь, изогипса; від дав.-гр. ισος - равний і дав.-гр. ὕψος - висота) - лінія на плані (карті), яка з'єднує точки земної поверхні з однаковою абсолютною висотою.
У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу . Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке зали шилося, використовують символ.

Наприклад, тег задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, а другий займає те місце, що залишилося. Тег задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів один в один.

Відсо́ток або також проце́нт (лат. «pro centum» - сота частка, на сто). Відсотком якого-небудь числа називають соту частину цього числа.
Вкладення у математиці - це спеціального вигляду відображення одного екземпляру деякої математичної структури у інший екземпляр того ж типу. А саме, вкладення деякого об'єкту X у Y визначається ін'єктивним відображенням, яке зберігає деяку структуру.

Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег з атрибутами, що керують властивостями фреймів:



  • SRC — задає ім'я файлу, що відображатиметься у фреймі;

  • NAME — задає ім'я фрейму;

  • SCROLLING — визначає наявність (значення yes) або відсутність (значення по) смуг прокручування у вікні фрейму (за замовчуванням — yes);

  • NORESIZE — забороняє користувачу змінювати розміри фрейму;
    Театральна лабораторія «ВідСутність» - зразковий художній колектив заснований в 2010 році за ініціативи Юрія Паскара в місті Рівне. Діє на базі Рівненського міського Палацу дітей та молоді.
    Кори́стува́ч - той, хто користується чим-небудь - майном, землею, комп'ютером тощо.


  • BORDER — визначає ширину розділювальної смуги між фреймами в пікселях;

  • BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

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

  • MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

Оскільки фрейми підтримують не всі браузери, необхідно помістити тег перед тегом , а між І записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після
має йти
.
Робота з підручником

Практичне завдання

Розмістимо на сторінці три документи про навчальні заклади (див.

Навча́льний заклад (осві́тній заклад) - організація, що на постійній і безперервній основі здійснює освітній процес з метою навчання, виховання, розвитку і самовдосконалення особистості.
вправу 2.5). Як видно з таблиці, сторінку поділено спочатку на два рядки у спів відношенні приблизно 60 % та 40 %, перший рядок поділено на впіл на два стовпці, а в утворених комірках розташовано відповідні веб-сторінки про навчальні заклади. Документи 1.html, 2.html та 3.html лежать в папці ЗАГАЛЬНЕ/ВЕБ-ДИЗАЙН/

1. Створіть файл головної сторінки та збережіть його як main.html
у тій самій папці, що й решту документів.



<ТІТLЕ>Навчальні заклади















2. Відкрийте файл main.html. Всі файли, відображені у вікні браузера одночасно, а оскільки документи не вмістилися у визначені для них області, то кадри мають смуги прокручування.



Використання посилань у фреймах

Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, .... У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму. Наприклад:



<А HREF="2.html" TARGET="fгате1">Гімназія «Сихівська»

3. Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів. Використайте файли з описами навчальних закладів із вправи 2.5, а сторінку np.html з навігаційною панеллю та поділену на фрейми сторінку index.html створіть самостійно. 1. Створіть HTML-документ, який розмітьте за допомогою фреймів і збережіть у файлі index.html.





4. Створіть HTML-документ, який міститиме навігаційну панель,


і збережіть його у файлі np.html.



<ТІТЬЕ>Школи, ліцеї, гімназії



<Н2ХА HREF="l.html" TARGET="fгате1">Школа «Дивосвіт»



<Н2ХА HREF="2.html" TARGET="fгате1">Гімназія

«Сихівська»



<Н2ХА HREF="3.html" TARGET="fгате1">Ліцей «Оріяна»



<Н2ХА HREF="l.html" TARGET="fгате1">Школа «Дивосвіт»



<Н2ХА HREF="2.html" TARGET="fгате1">Гімназія

«Сихівська»



<Н2ХА HREF="3.html" TARGET="fгате1">Ліцей «Оріяна»





Скачати 77.51 Kb.

  • Використане обладнання
  • 3. Повідомлення теми і завдань уроку.
  • 4. Виклад навчального матеріалу
  • Фрейми, їхні теги й атрибути
  • Робота з підручником Практичне завдання
  • Використання посилань у фреймах