Клехо О. ВИКОРИСТАННЯ СТИЛІВ CSS У ВЕБ-СТОРІНКАХ

Клехо Олена,

викладач інформатики Луцького педагогічного коледжу

ВИКОРИСТАННЯ СТИЛІВ CSS У ВЕБ-СТОРІНКАХ

Методична розробка заняття з основ веб-дизайну

для студентів, які вивчають основи розробки веб-ресурсів

Тема: Створення тематичного веб-сайту.

Мета: сформувати навички створення веб-сайтів засобами HTML з використанням для оформлення заголовків тексту стилями; розвивати вміння грамотно використовувати теги та їх атрибути; підготувати студентів до майбутньої професійної діяльності.

Обладнання: комп’ютери, картки із завданнями.

Хід заняття

І. Організаційний етап

ІІ. Мотивація навчальної діяльності (можна провести у формі фронтального опитування, тестів, письмових відповідей тощо).

- Для чого використовують таблиці каскадних стилів у веб-сторінках?

- Як створити зовнішню таблицю стилів CSS?

- В якому розділі HTML-документу розміщується внутрішня таблиця стилів?

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

- Які види гіперпосилань використовують для навігації по сайту

- Для чого використовують фрейми у веб-сторінках?

ІІІ. Робота з картками над виконанням завдань

1. Створити головну сторінку веб-сайту «Домашні улюбленці» з назвою index.html, використавши для цього зображення з папки (викладач самостійно підбирає зображення і вказує шлях для їх відкриття).

HTML-код сторінки index.html

<html>

<head>

<title>Домашні улюбленці</title>

<style>

.основа {text-align:center; margin-top:-210px; font-size:80px; line-height:240px; font-family:Times}

.тінь {color:#DBDBDB; text-align:center; margin-top:30px; font-size:70px; line-height:250px; font-family:Times}

.шар1 {color:blue; text-align:center; margin-top:-100px; medium; font-size:50px; line-height:65px; font-family:Arial}

</style>

<body>

<DIV CLASS=тінь>ДОМАШНІ УЛЮБЛЕНЦІ</DIV>

<DIV CLASS=Основа>ДОМАШНІ УЛЮБЛЕНЦІ</DIV>

<DIV CLASS=шар1>ДОМАШНІ УЛЮБЛЕНЦІ</DIV><br><br><br>

<p align=center><a href=fr.html>ВПЕРЕД</a></p>

<h1 style="position:absolute; top:320; left:50"><IMG SRC="1.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:420; left:140"><IMG SRC="2.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:520; left:210"><IMG SRC="3.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:620; left:300"><IMG SRC="4.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:620; left:450"><IMG SRC="5.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:520; left:550"><IMG SRC="6.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:420; left:650"><IMG SRC="7.jpg" width=150; height=150></h1>

<h1 style="position:absolute; top:320; left:750"><IMG SRC="8.jpg" width=150; height=150></h1>

</head>

</html> [1]

2. Створити 3 веб-сторінки 1.html, 2.html, 3.html, у яких розташуйте інформацію про трьох домашніх улюбленців з картинкою та описом тварини.

HTML-код сторінки 1.html

<img src=9.jpg><br>

<br>

Кіт або кішка (Felis silvestris catus), також відомий як свійський кіт для відрізнення від диких котів — невеликий ссавець ряду хижих (Carnivora) родини . (опис домашнього улюбленця може бути довільним)

3. Створити веб-сторінку g.html, яку зв’язати зображеннями-гіперпосиланнями (або текстові гіперпосилання) із сторінками 1.html, 2.html, 3.html.

HTML-код сторінки g.html

<a href=1.html target=fr><img src=9.jpg width=150><br>Кіт</a><br>

<a href=2.html target=fr><img src=10.jpg width=150><br>Пес</a><br>

<a href=3.html target=fr>

<img src=11.jpg width=150><br>Півень</a><br><br><br>

<a href=index.html target=prev>НАЗАД</a>

4. Створити веб-сторінку fr.html, у якій розбити екран на два фрейми у співвідношенні 30% і 70%, для відображення у них вмісту попередніх сторінок.

HTML-код сторінки fr.html

<frameset cols="30%,70%">

<frame src=g.html>

<frame name=fr>

</frameset>

5. Зв’язати головну сторінку index.html гіперпосиланням із сторінкою fr.html, через кнопку ВПЕРЕД та повернення на головну через кнопку НАЗАД на інших сторінках.

ІV. Підведення підсумків, оцінювання .

Література:

1. Дорошенко Ю.О., Тихонова Т.В., Луньова Г.С. Технологічне навчання інформатики. – Ранок, 2011.

2. Пасічник О.Г., Пасічник О.В., Стеценко І.В. [Основи веб-дизайну] - Навчальний посібник, Київ, 2009.

Поиск по сайту

Конференции

Please publish modules in offcanvas position.