Уроки html і css, урок 4

1. Організація фреймів

Фрейми використовуються для розбиття вікна браузера на декілька областей, кожна з яких представляє собою окремий HTML-документ (фрейм або кадр).

Істинне призначення фреймів - це навігація (а не засіб для розмітки сторінки). Ідея фрейма полягає в тому, щоб розділити екран на декілька областей або вікон. Це дозволяє одночасно бачити більше одного документа і дає можливість на весь час закріпити навігацію на екрані.

При використанні простого дизайну з двома фреймами (рис.1) задіяно три документа:

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

Мал. 1. Проста фреймова структура з двох фреймів

Фрейми містяться в структурі і . замісної в сторінці з фреймами структуру і , тобто документ, що описує фреймової структур не має тегів і .

Допускається вкладення фреймових областей.

атрибути тега

Цей атрибут визначає кількість і ширину стовпців у кадрі. Ширину стовпців можна задати в пікселях або у відсотках.

cols = n - визначає стовпець шириною в n пікселів.

cols = n% - виділяє даному стовпчику фрейма n% - частку ширини вікна броузера.

Цей атрибут визначає кількість і висоту рядків у кадрі. Висоту рядків можна задати в пікселях або у відсотках.

rows = n - визначає рядок заввишки в n пікселів.

rows = n% - виділяє цьому рядку фрейма n% - частку висоти вікна броузера.

Цей атрибут визначає відображення рамок фреймової структури.

frameborder = yes - відображається тривимірна рамка (значення за замовчуванням).

frameborder = no - рамка невидима

Краще визначати рядки і стовпці не в пікселах, а використовуючи відносні значення. Символ зірочка (*) використовується для вказівки того, що екран поділяється на пропорційні частини: COLS = "*, *, *" - відповідає COLS = "33%, 33%, 33%".

У значеннях COLS (стовпець), ROWS (рядок) перелік повинен бути укладений в лапки. Якщо лапки не використовуються, між значеннями не повинно бути пробілів.

Розглянемо приклад коду простий фреймової структури, зображеної на рис. 1.

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

  1. Створіть папку frames. Скопіюйте в неї файли з зображеннями фонів fon3.jpg, fon8.jpg, fon10.jpg з папки html_css_4
  2. Відкрийте файл shablon.html
  3. Змініть код як в лістингу на малюнку 2. Збережіть документ під назвою frames_2.html
  4. Створіть файл, як на малюнку 3. Збережіть документ під назвою doc1.html
  5. Створіть файл, як на малюнку 4. Збережіть документ під назвою doc2.html
  6. Запустіть файл frames_2.html подвійним клацанням. У вікні браузера Internet Explorer web-сторінка повинна мати вигляд, як на рис. 1

Малюнок 2. Фреймова структура з двох стовпців

Малюнок 3. Документ doc1.html

Малюнок 4. Документ doc2.html

На рис. 1 представлений вид цієї HTML-сторінки в браузері. Екран по вертикалі розбивається на 2 фрейма. Лівий фрейм займає 25% екрану і містить сторінку з назвою doc1.html. Правий фрейм займе 75% екрану і містить сторінку doc2.html.

тег визначає окремий фрейм. Це непарний тег. тегів має бути рівно стільки, на скільки областей ділиться екран. У тега є такі атрибути:

Цей атрибут забороняє користувачеві зміна розмірів фреймів, щоб запобігти спотворення дизайну сторінки.

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

  1. Відкрийте файл shablon.html.
  2. Змініть текст, як в лістингу на малюнку 5.
  3. Збережіть документ у папці frames під ім'ям frames_3.html
  4. У новому документі наберіть текст, зображений в лістингу 6. ​​Збережіть документ під назвою doc3.html
  5. Запустіть файл frames_3.html подвійним клацанням. У вікні браузера Internet Explorer Web-сторінка повинна мати вигляд, як на рис. 7.

Звертаємо Вашу увагу на те, що у фреймовій структурі кількість відкривають має дорівнювати кількості закривають

Малюнок 5. Фреймова структура з трьох фреймів

Малюнок 6. Документ doc3.html

Малюнок 7. Фреймова структура з трьох фреймів

  • Створіть файл з фреймової структурою нашого сайту MyHouse.ru, що складається з трьох фреймів (рис. 8). Збережіть його в папці public_html під ім'ям index.html
  • Правому кадру назвіть main.
  • У верхньому фреймі розташуйте біжучий рядок (файл shapka.html)
  • У лівому фреймі розташуйте список проектів (файл menu.html).
  • У правому фреймі - файл main.html.

Малюнок 8. Фреймова структура сайту MyHouse.ru

2. Організація гіперпосилань

Розглянемо поки тільки обов'язковий атрибут href.

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

Гіперпосилання можна вбудувати в будь-яке місце HTML - документа.

На рис. 9 наведено приклад HTML-коду створення гіперпосилання і вид в браузері сторінки з цим кодом:

Детальну інформацію про послуги нашого агентства Ви можете отримати

тут

У цьому прикладі малюнок "ris.jpg" є графічним елементом прив'язки. Браузер виділяє його синьою рамкою.

  • <а href="../folder/my.htm"> - перехід на інший документ на своєму сайті

приклад: Текстгіперссилкі

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

практичне заданіе4

1. В папці public_html створіть папку project. а всередині неї папку img_d_152_1d.

2. Оформіть web-сторінку про проект d-152-1d, використовуючи матеріали (тексти і фотографії) з папки projects / d-152-1d. Для оформлення web-сторінки повинні бути використані стилі в таблиці стилів і форматування засобами атрибутів тегів.

3. Всі матеріали повинні бути використані. В результаті на web-сторінці у Вас повинні бути наступні блоки: Тема, Анотація, Матеріали, Ціна за проект, Плани, Фасади

4. Збережіть web-сторінку під ім'ям projekt_d-152-1d.html в папці projects. Приблизний результат на рис. 12.

Мал. 12. Web-сторінка projekt_d-152-1d.html.

5. На web-сторінці townhouse.html оформите зображення проекту D-152-1D і фразу «Проект D-152-1D» як гіперпосилання на сторінку projekt_d-152-1d.html. на якій міститься більш повна інформація про цей проект (рис. 13).

6. Перевірте працездатність гіперпосилань.

Мал. 13. Зображення є гіперпосиланням

Наприклад, необхідно створити посилання зі змісту на першу главу

1. У змісті поруч з назвою глави 1 слід створити запис:

2. Усередині web-сторінки поруч із заголовком глави 1 створити мітку і за допомогою атрибута name тега присвоїти їй ім'я. Браузер не виділяє вміст цього тега як посилання, так як воно використовується в якості мітки. В межах документа мітка повинна бути унікальною.

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

1. Відкрийте створену Вами web-сторінку projekt_d-152-1d.html.

2. Під заголовком «Проект будинку № D-152-1D» додайте пункти

3. Створіть внутрістранічние гіперпосилання з кожного щойно створеного пункту на відповідний розділ web-сторінки (рис. 14, а)

4. Внизу сторінки створіть гіперпосилання Наверх. при натисканні на яку користувач буде повертатися на початок сторінки (рис. 14, б).

Мал. 14. Внутрістранічние гіперпосилання

Завдання кольору гіперпосилань

Прийняті в Web за замовчуванням кольору для гіперпосилань: синій - для ще не відвіданих гіперпосилань, червоний - для активізованих гіперпосилань (в момент клацання), фіолетовий - для вже відвіданих.

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

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

  1. Вгорі лівого фрейму зробіть логотип графічної гіперпосиланням таким чином, щоб при її активізації в правий фрейм завантажувалася сторінка про сайті (файл main.html).
  2. Переконайтеся в працездатності всіх гіперпосилань. Ваш сайт повинен виглядати приблизно так, як показано на рис. 15, при переході по посиланню «Проекти таунхаусів і блокованих будинків» так, як на рис. 16, при натисканні на зображенні проекту D-152-1D як на рис. 17.

Мал. 15. Головна сторінка сайту MyHouse.ru

Мал. 16. Вид web-сайту при активному посиланню «Проекти таунхаусів і блокованих будинків»

Мал. 17. Вид web-сайту при активному посиланню «Проект D-152-1D»

Робота зі спеціальними елементами

Робота зі спеціальними елементами визначається за допомогою псевдокласів.

Псевдоклас - спеціальний селектор, який визначає, як виглядає HTML-елемент в певний момент.

Наприклад, CSS визначає псевдоклас, який встановлює, як виглядають гіперпосилання в певні моменти часу:

Можна визначити псевдоклас для першого символу елемента. Наприклад, для абзацу:

p: first-letter. Це зручно для завдання спецефектів виділення заголовних букв.

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

1. Для верхнього меню сторінки проекту змініть файл зовнішню стильову специфікацію, визначальну вид гіперпосилання в певні моменти. Для цього самостійно визначте параметри стилю згідно рис. 18.

2. Перевірте працездатність стилю.

а - не відвідування посилання

Мал. 18. Вид гіперпосилання в певний момент часу

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

1. Для пункту «Проекти таунхаусів і блокованих будинків» змініть файл зовнішню стильову специфікацію, визначальну вид гіперпосилання в певні моменти. Для цього самостійно визначте параметри стилю згідно рис. 19.

2. Перевірте працездатність стилю. Зверніть увагу на те, щоб не змінився колір фону і параметри інших елементів меню. Змінитися повинен тільки вид гіперпосилання.

Мал. 19. Вид гіперпосилання «Проекти таунхаусів і блокованих будинків»

3. Для пункту з назвою проекту на сторінці proekt_townhouse.html змініть файл зовнішню стильову специфікацію, визначальну вид гіперпосилання в певні моменти. Для цього самостійно визначте параметри стилю згідно рис. 20.

4. Перевірте працездатність стилю.

Мал. 20. Вид гіперпосилання для назви проектів

В результаті виконання цієї теми, у Вас повинні бути створені такі файли:

Схожі статті