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.


 

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

52033. Счет в пределах 100. Решение составных задач 32.5 KB
  Задачи на смекалку: а как с помощью двух палочек образовать на столе квадрат положить их в угол стола; б сколько концов у палки У двух палок У двух с половиной 6 в какое число я задумала 5 ед. 1 сотня 138; г сколько получится: 78 84 212 94 187 97 Молодцы. А квадрат это что Какие еще геометрические фигуры вы знаете Что такое квадрат Посчитайте сколько квадратов на рисунках 102 62 4 = 12 Чтобы снять мультфильм трудятся очень много людей: сценаристы операторы режиссеры.
52034. У світі цікавих чисел. Гра Склади нове слово, гра Цифробокс 265 KB
  Вдосконалювати обчислювальні навички учнів, розвивати знання, отримані на уроках математики, логічне мислення, творчу і просторову уяву, память і увагу; збагачувати словниковий запас учнів; виховувати патріотичні почуття, любов до математики.
52035. Механічна взаємодія тіл. Сила . Види сил у механіці 2.22 MB
  обота Ньютона спиралась на здобутки вчених його попередників і містила основні поняття : маса сила кількість руху прискорення три закони механіки закон всесвітнього тяжіння Закони динаміки дозволяють зрозуміти принцип роботи машин і механізмів які застосовуються на виробництві у побуті . Сила це векторна фізична величина яка характеризує механічну дію даного тіла на інше і є мірою цієї взаємодії .
52037. Дзвони Чорнобилю 62.5 KB
  1й ведучий: Чорнобиль. 2й ведучий: Для України для всіх хто прямо чи побічно причетний до трагедії Чорнобиля та її наслідків час ніби розділився на дві частини: до 26 квітня 1986 року і після нього. 1й ведучий: Ту мирну весняну українську ніч на берегах Припяті люди ніколи не забудуть. 1й ведучий: З руїн реактора виривається стовп зловіщого вогню палаючих шматків графіту.
52038. Свято першого дзвоника 45 KB
  звучить музика Рідна школа заходять 11ки Ведуча: Настав довгоочікуваний для дітвори день 1 вересня Свято першого дзвінка День знань. Перший дзвінок Ведуча: Перше шкільне свято нового навчального року оголошується відкритим звучить Гімн України Ведуча: Слово для зачитання наказу про зарахування учнів до першого класу надається заступнику директора з навчальновиховної роботи Л. Тищенко Ведуча: Зі словами привітання й побажання...
52039. 14 жовтня День Покрови - свято українського козацтва 21 KB
  У тому що ми українці сьогодні є народом нацією провідна роль належить козацтву яке із століття в століття було єдиним і могутнім форпостом що пильно сояв на сторожі свободи гідності і честі України.
52040. 14 лютого - МІЖНАРОДНИЙ ДЕНЬ ЗАКОХАНИХ 47 KB
  Можливо діти заздалегідь самі намалюють святкові газети вислови про кохання виготовлять âвалентинкиâ значки і т. Від їх кохання залишилось одне свідоцтво про яке не забула легенда невеличкий лист майже записочка âвалентинкаâ яку склав юнак для неї соромязливо підписавши: âВаш Валентинâ. Кожному гравцю роздається по конверту в якому знаходиться половинка паперового серця з висловом про кохання видатних відомих осіб.
52041. Правила поведінки під час уроків і на перервах. Поведінка в їдальні, в бібліотеці 44.5 KB
  Отже сьогоднi ми з вами почнемо розмову про нашу поведiнку пiд час урокiв розглянемо як вона впливає на наші успiхи у навчаннi навчимося поводити себе в колективi ознайомимося iз правилами культурної поведiнки. Яких би правил поведiнки ви б не хотiли дотримуватися тепер Якi правила на вашу думку необхiдно залишити у сучаснiй школi 2. Групою iз 4 6 чоловiк обговорiть i складiть правила для школярiв сьогоднiшнiх та з далекого майбутнього. 3робiть висновок про те для чого ми складали певнi правила поведінки.