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.


 

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

35399. Тема: Програмування арифметичних дій множення і розподіл. 53.5 KB
  Індивідуальне завдання Скласти програму яка знайде приватне чисел 99 і 9. Множення двійкових чисел без знаку. Для множення чисел без знаку призначена команда mul сомножитель_1 Розташування операндів і результату при множенні. Перший співмножник Другий співмножник Результат Байт L 16 бітів в АХ: L молодша частина результату; АН старша частина результату Слово АХ 32 біти в парі DX:X: АХ молодша частина результату; DX старша частина результату Подвійне слово ЕАХ 64 біти в парі EDX:EX: ЕАХ молодша частина результату; EDX ...
35401. Тема: Програмування арифметичних виразів. 443 KB
  Розташування операндів і результату при множенні. Перший співмножник Другий співмножник Результат Байт L 16 бітів в АХ: L молодша частина результату; АН старша частина результату Слово АХ 32 біти в парі DX:X: АХ молодша частина результату; DX старша частина результату Подвійне слово ЕАХ 64 біти в парі EDX:EX: ЕАХ молодша частина результату; EDX старша частина результату Розподіл чисел із знаком і помилки що виникають в результаті розподіли Для розподілу чисел із знаком призначена команда idiv дільник Для цієї команди...
35403. СОЦИАЛЬНЫЕ И ЛИЧНОСТНЫЕ ОСОБЕННОСТИ ЖЕНЩИН, ПЛАНИРУЮЩИХ ПРЕРЫВАНИЕ БЕРЕМЕННОСТИ 519.5 KB
  Проблема абортов стоит на особом месте в нашей стране, в связи с социально-демографическими условиями. Эффективность мер принимаемых государством по охране репродуктивного здоровья женщин и здоровья населения в целом оценивается с учетом динамики, количества проведенных абортов.
35404. Теоретическая механика, краткий курс 8.07 MB
  В теоретической механике изучается одна из форм движения материи – механическое движение, состоящее в том, что тело с течением времени изменяет свое положение в пространстве по отношению к другим телам. Механическим называют тот вид взаимодействия тел, в результате которого происходит изменение их движения или изменение их формы (деформация).
35406. Тема: Управління процесом завантаження ОС. 85.5 KB
  Мета: Навчитися створювати завантажувальну дискету різними способами; навчитися використовувати її у разі аварійної ситуації в роботі ПК. Використовуючи можливості Windows створіть системну дискету для аварійного завантаження ПК у разі неполадок в її роботі. Які файли при цьому скопіюються на дискету Створіть завантажувальну системну дискету командою formt з командного рядка MS DOS. Які файли при цьому скопіюються на дискету formt[ :] [ q] [ fs файловая_система] Тип файловой системы которая будет создана на диске: FT...
35407. ПРЕОБРАЗОВАТЕЛЬ ПОСЛЕДОВАТЕЛЬНОГО КОДА В ПАРАЛЛЕЛЬНЫЙ С КОНТРОЛЕМ ПО КОДУ ХЭММИНГА И С ИСПРАВЛЕНИЕМ ОДИНОЧНЫХ ОШИБОК 1.02 MB
  Разработать преобразователь последовательного кода в параллельный с контролем по коду Хэмминга и с исправлением одиночных ошибок. Скорость приема по кадру - 10МБод. Количество стартовых бит – 1, количество стоповых бит – 1, количество байт в кадре – 32, преобразованные данные передаются далее по 16 разрядной шине со скоростью 100 Мбайт/сек. Если кадр принят с ошибкой, вырабатывается сигнал ошибки. Информация поступает в устройство по одному проводу