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.


 

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

2662. Бухгалтерський облік в Україні 91.5 KB
  Бухгалтерський облік в Україні: завдання, вимоги, стандарти. Завдання бухгалтерського обліку Господарська діяльність кожного виробничо-комерційного підприємства базується на найбільш раціональному використанні матеріальних і грошових ресурсів,...
2663. Микропроцессоры и микро-ЭВМ 166.7 KB
  Целью изучения дисциплины “Микропроцессоры и микро-ЭВМ” является формирование у студентов знания общей методологии, а также конкретных методов проектирования основных разновидностей современных микропроцессорных средств. Необходимо...
2664. Экология как наука. Предмет и задачи экологии 237 KB
  Предмет и задачи экологии. Предмет экологии – совокупность связей между организмом и средой. Экология – наука изучающая взаимодействия организмов с окружающей средой и друг с другом. Сюда относятся и все условия существования, как неорганиченные...
2665. Социальная психология. Особенности предмета исследования социально психологии 1.8 MB
  Настоящее издание предпринято через восемь лет после последнего выхода учебника в свет. Как минимум два обстоятельства потребовали существенных изменений. Прежде всего, это значительные изменения в самом предмете исследования, т.е. в социально-психо...
2666. Биоэнергетика – альтернативное моторное топливо 1.39 MB
  Мир вступает в эру биоэкономики, т. е. экономики, основанной на биотехнологиях, использующих возобновляемое сырье для производства энергии и материалов. Международная энергетическая ассоциация (IEA) прогнозирует, что к 2030 г. производство биотоплив...
2667. Основы стандартизации как инструмента обеспечения качества 441.5 KB
  Стандартизация является инструментом обеспечения качества продукции, работ и услуг – важного аспекта многогранной коммерческой деятельности. Проблема качества актуальна для всех стран независимо от зрелости их рыночной экономики. Чтобы стать уч...
2668. Исследование характеристик конструкционных материалов 145.5 KB
  Диаграмма состояния железо-цементит. Проведена вертикальная линия соответствующая 0,2% содержания углерода. Точки 1, 2, 3, 4, 5, 6, 7 соответствуют изменениям сплава при медленном охлаждении. На промежутке от точки 1 до 2, сплав...
2669. Основы общей психологии 1.51 MB
  Классический труд С.Л. Рубинштейна Основы общей психологии относится к числу наиболее значительных достижений отечественной психологической науки. Широта теоретических обобщений в сочетании с энциклопедическим охватом исторического и экспериментал...
2670. Механическая обработка детали на универсальных станках с ЧПУ 591.31 KB
  Главными направлениями повышения эффективности народного хозяйства страны являются ускорение научно-технического прогресса, перевод экономики на интенсивный путь развития, рост производительности труда, повышение качества и количества выпуск...