50754

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

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

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

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

Украинкский

2014-01-30

230 KB

1 чел.

Лабораторна робота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.


 

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

12727. Знакомство с Visual Basic. Среда разработки проекта 123 KB
  Знакомство с Visual Basic. Среда разработки проекта. Общие сведения Рабочее окно рис. 1 представляет собой интегрированную среду разработки – интерфейс языка программирования Visual Basic. Эта среда может настраиваться с помощью диалогового окна вызываемого командой Tools Op...
12728. Разработка меню пользователя в Visual Basic 64 KB
  Лабораторная работа № 2 Тема: Разработка меню пользователя Цель занятия: Приобрести навыки в разработке меню пользователя создании родительских MDIформ и дочерних форм. Задание: Создать форму для вычисления площади плоской фигуры по варианту. Входны...
12729. Создание массивов элементов управления в Visual Basic 60.5 KB
  Лабораторная работа № 3_1 Тема: Создание массивов элементов управления. Цель занятия: Изучить способы создания массивов элементов управления и их использования для вывода информации. Задание: Найти значения функции на заданном отрезке согласно варианту...
12730. Работа с массивами элементов управления в Visual Basic 32.5 KB
  Лабораторная работа № 3_2 Тема: Работа с массивами элементов управления. Цель занятия: Продолжить изучение работы с массивами элементов управления. Задание: На созданной форме из Лабораторной работы №3 1 создать командную кнопку CommandButton. Свойству Caption эт
12731. Что такое HTML 2.61 MB
  Что такое HTML Всемирная паутина World Wide Web WWW соткана из Webстраниц которые создаются с помощью так называемого языка разметки гипертекста HTML Hyper Text Markup Langage. HTML не является языком программирования это язык разметки документа. Разметка служит для указания формы предста
12732. Кэш или сверхоперативная память 30 KB
  Кэш или сверхоперативная память очень быстрое ЗУ небольшого объёма которое используется при обмене данными между микропроцессором и оперативной памятью для компенсации разницы в скорости обработки информации процессором и несколько менее быстродействующей операти
12733. Работа с большими документами в Microsoft Office Word 2007 223 KB
  Лабораторная работаТема: Работа с большими документами в Microsoft Office Word 2007 Цель работы: Научиться работать со стилями текста колонтитулами создавать оглавление и указатель оформлять документ используя макросы. Задание: В свою папку скопируйте файл Основы HTML. ...
12734. Выполнение расчетов в Microsoft Office Excel 2007 83 KB
  Лабораторная работаТема: Выполнение расчетов в Microsoft Office Excel 2007 Цель работы: Научиться создавать расчетные таблицы и выполнять расчеты в Microsoft Office Excel 2007. Упражнение 1. Построение расчетной таблицы простейшие вычисления Откройте Microsoft Excel. На Листе 1 создайт
12735. Работа со стандартными функциями в Microsoft Office Excel 2007 125.5 KB
  Лабораторная работа Тема: Работа со стандартными функциями в Microsoft Office Excel 2007 Цель работы: Научиться работать со стандартными функциями СЧЁТЕСЛИ СУММЕСЛИ ЕСЛИ в Microsoft Office Excel 2007. Задание: В MS Office Excel 2007 создайте расчетную таблицу. Выполните расчеты используя станд