Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Пример 2. Порядок проведения работы




Пример 1

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

Порядок проведения работы

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

Каскадные таблицы стилей CSS

 

Цель работы – изучение технологии CSS, использование инструкций для организации стиля HTML- документа.

Задача работы – выполнить оформление сайта при помощи CSS стилей.

1. Создать файл style.css для хранения таблицы стилей сайта.

2. Используя инструкции CSS создать таблицу стилей, реализующую стиль, определенный в п.2 Лабораторной работы №1.

3. Из всех html документов сайта удалить информацию о стиле (задание цвета, размера, выравнивания и т.д.)

4. Подключить файл таблицы стилей ко всем страницам сайта.

5. Просмотреть результат в браузере.

6. Сделать выводы по работе.

Содержание протокола

1. Таблица значений полей и цветовой схемы сайта согласно п.2.

2. Текст CSS-документа style.css.

3. Текст страницы contacts.html.

4. Копия экрана с отображением документа contacts.html.

5. Выводы по работе.

Контрольные вопросы.

1. Использование внешних таблиц стилей CSS

2. Использование внутренних таблиц стилей CSS

3. Использование локальных таблиц стилей CSS

4. Преимущества и недостатки внешних, внутренних, локальных таблиц стилей CSS

5. CSS инструкции управления цветом и фоном объектов

6. CSS инструкции управления границами объектов

7. CSS инструкции управления полями и отступами объектов

8. CSS инструкции управления шрифтами и текстом

9. Использование классов в CSS

10.Испльзование псевдоклассов в CSS

 

Задания набираются в любом текстовом редакторе, сохраняются в ВЗУ в формате *.txt, затем просматриваются через любой доступный браузер, например, Internet Explorer.

 

HTML>

<SCRIPT>

Оклад = 10000;

Процент = 15;

Выплаты = Оклад + Оклад*Процент/100;

alert("Выплаты = "+Выплаты);

</SCRIPT>

</HTML>

 

HTML>

<!--

Author: Pavel Khramtsov

Date: February 23, 1996

URL: http://144.206.192.100/radleg/mo_input.htm

-->

<HEAD>

<TITLE>Проверка устного счета.</TITLE>

<SCRIPT LANGUGE="JavaScript">

<!--

var max_value = 0

var operand1 = 0

var operand2 = 0

var result = 0

var flag = 0

var sign = "+"

var input = ""

var v_date = new Date()

var number = v_date.getTime()

 

function init(factor) {

var today = new Date()

return (factor*today.getTime()/1000)%30000

}

//Инициализировать счетчик случайных чисел.

 

IX = init(2)

IY = init(3)

IZ = init(4)

 

//2, 3, and 4 below were arbitrarily chosen.

//They put some distance between the initial

values of IX, IY, and IZ

 

//Датчик случайных чисел.

 

function random() {

IX = Math.floor(171 * IX % 30269)

IY = Math.floor(172 * IY % 30307)

IZ = Math.floor(170 * IZ % 30323)

return (IX/30269.0 + IY/30307.0

+ IZ/30323.0) % 1.0

}

 

//Выбрать сложение или вычитание.

 

function set_sign(x)

{

if(x == "+")

{

flag = 0

sign = "+"

}

if(x == "-")

{

flag = 1

sign = "-"

}

return true

}

 

// Определить первый операнд.

 

function f_operand()

{

operand1 = random()*max_value

return parseInt(operand1)

}

 

// Определить второй операнд.

 

function s_operand()

{

if(flag == 0)

{

operand2 = random() *

(max_value-operand1)

}

else

{

operand2 = random() * operand1

}

return parseInt(operand2)

}

 

// Проверить введенные данные.

 

function input_sign(x)

{

if(x == 10)

{

if(flag == 0)

{

if(operand1+operand2 ==

parseInt(input))

{

window.document.test.r0.

value = "Молодец!"

}

else

{

window.document.test.r0.

value = "Думай!?"

window.document.test.

input = ""; input = ""

}

}

if(flag == 1)

{

if(operand1-operand2 ==

parseInt(input))

{

window.document.test.r0.

value ="__-__-_р!"

}

else

{

window.document.test.r0.

value = "Думай!?"

window.document.test.

input = ""; input = ""

}

}

return true

}

input += x

window.document.test.result.value = input

return true

}

 

// Генерация варианта.

 

function main_calc()

{

operand1 = f_operand()

window.document.test.op1.value = operand1

operand2 = s_operand()

window.document.test.op2.value = operand2

window.document.test.s_sign.value = sign

input = ""

window.document.test.input = ""

window.document.test.r0.value = "??? "

return true

}

// -->

</SCRIPT>

</HEAD>

<BODY>

<CENTER>

<H1>Математический тест</H1>

<HR>

<FORM NAME=test>

<TABLE BORDER=0>

<TR>

<TD><INPUT NAME=i10 TYPE=button VALUE="0-10"

onClick="max_value=10"></TD>

<TD><INPUT NAME=i20 TYPE=button VALUE="0-20"

onClick="max_value=20"></TD>

<TD><INPUT NAME=i100 TYPE=button VALUE="0-100"

onClick="max_value=100"></TD>

<TD><INPUT NAME=i+ TYPE=button VALUE=" + "

onClick="set_sign('+')"></TD>

<TD><INPUT NAME=i- TYPE=button VALUE=" - "

onClick="set_sign('-')"></TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=0>

<TR>

<TD><INPUT NAME=op1 SIZE=2

MAXLENGTH=2></TD>

<TD><INPUT NAME=s_sign SIZE=1

MAXLENGTH=1></TD>

<TD><INPUT NAME=op2 SIZE=2

MAXLENGTH=2></TD>

<TD>=</TD>

<TD><INPUT NAME=result SIZE=3

MAXLENGTH=3></TD>

<TD><INPUT NAME=award

TYPE=button VALUE="? " onClick="main_calc()">

<TD><INPUT NAME=r0 VALUE="??? ">

</TR>

</TABLE>

<HR>

<TABLE BORDER=2>

<TR>

<TD><INPUT NAME=b1 TYPE=button VALUE=" 1 "

onClick="input_sign('1')"></TD>

<TD><INPUT NAME=b2 TYPE=button VALUE=" 2 "

onClick="input_sign('2')"></TD>

<TD><INPUT NAME=b3 TYPE=button VALUE=" 3 "

onClick="input_sign('3')"></TD>

</TR>

<TR>

<TD><INPUT NAME=b4 TYPE=button VALUE=" 4 "

onClick="input_sign('4')"></TD>

<TD><INPUT NAME=b5 TYPE=button VALUE=" 5 "

onClick="input_sign('5')"></TD>

<TD><INPUT NAME=b6 TYPE=button VALUE=" 6 "

onClick="input_sign('6')"></TD>

</TR>

<TR>

<TD><INPUT NAME=b7 TYPE=button VALUE=" 7 "

onClick="input_sign('7')"></TD>

<TD><INPUT NAME=b8 TYPE=button VALUE=" 8 "

onClick="input_sign('8')"></TD>

<TD><INPUT NAME=b9 TYPE=button VALUE=" 9 "

onClick="input_sign('9')"></TD>

</TR>

<TR>

<TD><INPUT NAME=b0 TYPE=button VALUE=" 0 "

onClick="input_sign('0')"></TD>

<TD COLSPAN=2><INPUT NAME=bs

TYPE=button VALUE=" OK "

onClick="input_sign('10')">

</TD></TR>

</TABLE>

</FORM>

</CENTER>

<HR>

</BODY>

</HTML>




Поделиться с друзьями:


Дата добавления: 2014-11-25; Просмотров: 523; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.023 сек.