Клехо Олена,
викладач інформатики Луцького педагогічного коледжу
ВИКОРИСТАННЯ СТИЛІВ 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.