Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Комп.сети / МУ КомпМереж 2к Авт.doc
Скачиваний:
46
Добавлен:
09.02.2016
Размер:
1.13 Mб
Скачать

8.2. Практична частина

1. Створити свій електронний розклад занять:

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

  • при виборі певного дня тижня - тільки пари, які є в цей день.

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

  1. Для відображення потрібних сторінок в центральному вікні використовувати властивості TARGET.

  2. Для визначення кількості та структури фреймів використовувати властивості тегу <FRAMESET>.

    ЕЛЕКТРОННИЙ РОЗКЛАД ЗАНЯТЬ

    тиждень

    23-29 жовтня

    16-22 жовтня

    9-15 жовтня

    2-8 жовтня

    дні

    1 пара

    2 пара

    3 пара

    4 пара

    5 пара

    6 пара

    Понеділок

    Вівторок

    Середа

    Четвер

    П'ятниця

    Субота

  3. Показати і захистити виконану роботу викладачеві.

8.3. Контрольні питання

  1. Яким тегом відкривається фрейм?

  2. Як фрейми розташовуються на екрані: горизонтально або вертикально? Наведіть приклади.

  3. Для чого використовується параметр scrolling ="..." тегу FRAME?

  4. Для чого використовується параметр name ="..." тегу FRAME?

  5. Що означає тег <FRAMESET ROWS="20%,3*,*"> ?

  6. Що означає тег <FRAMESET ROWS="*,60%,*">?

  7. Що означає тег <FRAMESET COLS="25%, 75%"> ?

  8. Що означає тег <FRAMESET ROWS="*,50%,*"> ?

Лабораторна робота № 9. Використання каскадних таблиць стилів (css)

Мета роботи: вивчити підключення таблиць стилів до документа, навчитися змінювати css-файли.

9. Теоретичні відомості

9.1. Стилі. Загальні відомості

Таблиці стилів, так звані CSS (Cascading Style Sheets) містять опис формату частини або цілого тексту. Задання стилю відбувається за допомогою тегу <style>…</style>.

<head>

<style>

тег {властивість1:значення1; ...;властивістьN:значенняN}

</style>

</head>

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

<link rel="stylesheet" type="text/css" hreaf="x.css">

За допомогою стилів ми можемо змінити вигляд тегів h, p, body, table тощо. Наприклад, задання стилю body {background:honeydew} означає, що лише вказуючи тег body він завжди позначатиме фон кольору honeydew.

Можна також вводити власні стилі. Наприклад, стиль .blue {color:blue} означає, що текст буде написаний блакитним кольором.

При використанні стилів доцільно користуватись тегом <div> - він не форматує документ, але помічає фрагмент тексту, який розглядатиметься як єдиний об'єкт. Тоді для цього об'єкта можна вказати певний стиль форматування <div class=blue> При цьому всередині тегу <div> можуть бути розміщені й інші елементи та теги.

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

Таблиця 8.1 - Властивості тексту

Властивість (можливі значення)

Призначення властивості

1

font-family (Arial | Times New Roman | Courier | Tahoma)

назва шрифту

2

font-weight (normal | bold | lighter)

насиченість шрифту (ширина букв)

3

font-size (small | large | medium | 120% | 14px)

розмір шрифту

4

font-style (normal | italic)

стиль шрифту (зазвичай курсив)

5

font-stretch (normal | width | condensed | expanded)

розтягнуте накреслення шрифту

6

text-indent (число px | %)

відступ першого рядка, при негативному значенні - виступ

7

text-align (left | center | right | justify)

горизонтальне вирівнювання

8

line-height (normal |…px |…% |…em)

висота рядка (міжрядковий інтервал)

9

vertical-align (sub | sup | top | middle | bottom)

вертикальне вирівнювання тексту в контейнері

10

word-spacing (… px| normal)

відстань між словами

11

letter-spacing (… px| normal)

відстань між буквами

12

text-transform (uppercase | lowercase | capitalize | none)

регістр букв

13

text-decoration (none | underline | overline | line-through)

оформлення тексту

14

text-shadow (цвет длина длина)

тінь до тексту

15

white-space (normal | nowrap | pre)

обробка пробілів

16

Color

колір