КАТЕГОРИИ:
Архитектура-(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; Просмотров: 549; Нарушение авторских прав?; Мы поможем в написании вашей работы!