50754

Програмування графіки засобами CSS та Html, використовуючи список, що випадає

Лабораторная работа

Информатика, кибернетика и программирование

Мета: Отримати навички програмування графіки засобами CSS. Обладнання: ПЕОМ IBM PC, текстовий редактор, Internet Explorer.

Украинкский

2014-01-30

230 KB

2 чел.

Лабораторна робота12

Тема:  «Програмування графіки засобами CSS та Html, використовуючи список, що випадає»

Мета:  «Отримати навички програмування графіки засобами CSS»

Обладнання: ПЕОМ IBM PC, текстовий редактор, Internet Explorer.


Хід роботи

1. Розглянути роботу прикладів керування фоном документу:

— приклад Lab6_1_1.html , що задає фоновий колір елементу

— приклад Lab6_1_2.html , що задає фонове зображення, що повторюється. Модифі-кувати приклад так,  щоб зображення повторювалося тільки по вертикалі (горизонталі).

— приклад Lab6_1_3.html , що задає фіксоване фонове зображення. Модифікувати приклад так,  щоб зображення прокручувалося разом з документом.

— приклад Lab6_1_4.html , в якому всі властивості фону задані в одному оголошенні.

2. Розглянути роботу прикладів керування оформленням тексту документу:

— приклад Lab6_2_1.html , в якому задається колір тексту

— приклад Lab6_2_2.html , в якому задається колір фону тексту.

— приклад Lab6_2_3.html , в якому регулюється розрідженість тексту .

— приклад Lab6_2_4.html , в якому текст вирівнюється

— приклад Lab6_2_5.html , в якому наведене оформлення тексту

— приклад Lab6_2_6.html , в якому створено відступ для першого рядку абзацу.

— приклад Lab6_2_7.html , в якому здійснюється керування регістром символів.

3. Розглянути роботу прикладів керування оформленням границь.

— приклад Lab6_3_1.html , в якому задаються різні типи границь

— приклад Lab6_3_2.html , в якому задаються різні кольори границь.

— приклад Lab6_3_3.html , в якому задається товщина нижньої границі .

— приклад Lab6_3_4.html , в якому задаються всі властивості верхньої границі в од-ному оголошенні

— приклад Lab6_3_5.html , в якому задається товщина всіх границь

— приклад Lab6_3_6.html , в якому всі властивості границь задаються в одному ого-лошенні.

4. Оформити розклад занять, використовуючи стилі фону, тексту та границь

5. Оформивши розклад, отриманий код перенести в Html та додади списки, що випадають.

6. Оформити звіт, у який включити коди модифікованих та розроблених прикладів.

Лістинг розробки:

<html>

<head>

<title>Расписание занятий</title>

<style type="text/css">

table

{

border: thin dotted #3caa3c;

background-color: #e4f0d9;

}

td

{

border: thin dotted #3caa3c;

}

h1

{

font-size: 25px;

}

span.back

{

background-color: #3caa3c;

font-size: 20px;

}

.line {

border-bottom: 2px dotted #3caa3c;

padding-left: 90px;

}

</style>

</head>

<body background="121212.jpg">

 

<table width="1000px" align="center">

<tr>

<td valign="top" width="879px"><center>

<br><h1>Расписание занятий группы 381 на второй семестр</h1></center>

</td>

</tr></table>

<table width="1000px" align="center">

<tr>

<td valign="top" width="200px">

<span class="line"><span class="back">&nbsp;&nbsp;&nbsp;Понедельник&nbsp;&nbsp;&nbsp;</span></span><br><br><br>

1. <br>

<select>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

<br><br>

2. <br>

<select>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

<br>

3.<br>

<select>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

</td>

<td valign="top" width="200px">

<span class="line"><span class="back">&nbsp;&nbsp;&nbsp;Вторник&nbsp;&nbsp;&nbsp;&nbsp;</span></span><br><br><br>

1.

<select>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

<br><br>

2.

<select>

<option value="ОК ЭВМ / Архитектура">ОК ЭВМ / Архитектура</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

3.

<select>

<option value="Комп. графика / МПС">Комп. графика / МПС</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

</td>

<td valign="top" width="200px">

<span class="line"><span class="back">&nbsp;&nbsp;&nbsp;Среда&nbsp;&nbsp;&nbsp;</span></span><br><br><br>

1.

<select>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

<br><br>

2.

<select>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

3.

<select>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

</td>

<td valign="top" width="200px">

<span class="line"><span class="back">&nbsp;&nbsp;&nbsp;Четверг&nbsp;&nbsp;&nbsp;</span></span><br><br><br>

1. <select>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>классный час</i><br>

2.<select>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

3.

<select>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

</td>

<td valign="top" width="200px">

<span class="line"><span class="back">&nbsp;&nbsp;&nbsp;Пятница&nbsp;&nbsp;&nbsp;</span></span><br><br><br>

1.

<select>

<option value="ФВС">ФВС</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="Английский язык">Английский язык</option>

</select>

<br><br>

2.

<select>

<option value="Английский язык">Английский язык</option>

<option value="ФВС">ФВС</option>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

</select>

3.

<select>

<option value="Архитектура ЭВМ">Архитектура ЭВМ</option>

<option value="Програм. и алгоритм. яз.">Програм. и алгоритм. яз.</option>

<option value="Микропроц.системы">Микропроц.системы</option>

<option value="Разработка WEB приложен.">Разработка WEB приложен.</option>

<option value="Компьютерная графика">Компьютерная графика</option>

<option value="Украинский язык по ПН">Украинский язык по ПН</option>

<option value="Осн. констр. ЭВМ">Осн. констр. ЭВМ</option>

<option value="ФВС">ФВС</option>

<option value="Английский язык">Английский язык</option>

</select>

</td>

</tr></table>

<h3><div align="left" style="padding-left: 180px; color: #000000;">&copy; Егориус Тимановский</h3></div>

</body>

</html>

Висновок: На цій лабораторній роботі я отримав навички програмування графіки засобами CSS.


 

А также другие работы, которые могут Вас заинтересовать

37463. Экологическое право. Концепции экологического права 667.5 KB
  Эта концепция была подвергнута резкой критике во всем мире. Призывы к торможению экономического развития человечества оценивались как утопичные и реакционные.
37464. Антропология права 2.94 MB
  Ковлер Антропология права Учебник для вузов Издательство НОРМА Издательская группа НОРМА ИНФРА М Москва 2002 УДК 340. руководитель Центра сравнительного правоведения Института государства и права РАН и главный редактор журнала Государство и право в настоящее время судья Европейского Суда по правам человека избранный от Российской Федерации. Специалист в области теории и истории права сравнительного правоведения.
37468. ФИЛОСОФСКИЕ СКАЗКИ ДЛЯ ОБДУМЫВАЮЩИХ ЖИТЬЕ или Веселая книга о свободе и нравственности 683 KB
  Как называется Истинная правда или Учебник для психолога по жизни . Про Клуб Синтон то есть тоже про жизнь и про психологов то есть про отношение к жизни. Она для повседневности для живого и чувствующего человека с утра до вечера его дня и жизни в привычном окружении близких и далеких для работы и праздников болезней и телевизора. Клуб этот мир созданный мною двенадцать лет назад попрежнему занимает в моей душе и жизни большое место: он много требует но и много дает.
37470. Новый этап в развитии физики рентгеновских лучей 54.26 KB
  Первое что бросается в глаза это следующее. фантастическое увеличение потока информации и все возрастающая узкая специализация приводят к тому что большинство книг представляет собой сборники а не монографии в прямом смысле этого слова. Из них 28 это сборники обзоров такого же типа что и рецензируемая книга. Разумеется в том что такая книга будет неровной будет содержать повторения.
37471. Классики мировой философии о политику, государстве и праве 26.46 KB
  Противопоставление Гераклитом аристократического права и государства справедливым законам за которые люди должны биться как за стены родного города. Четыре свойства государства: мудрость мужество рассудительность справедливость. Структура государства. Разработал теорию возникновения и существования государства ради достижения благой жизни.