Основы гипертекстового представления интернет-контента.-4
.pdfsetTimeout("moveTxt()", 5000);
}
}
</script>
</head>
<body>
<div id="anim" style="position:absolute; left:10; top:10"> Текст,
шагом марш! </div> </body> </html>
Процессбудетповдотпорех,рятьсяпокаусловиеоператоранеif
станетложным.Последнее,чтонужносделать, - запуститьсценарий выполнение.ДляэтогоследуетвоспользоватьсясобытиемonLoad:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
if (anil.style.pixelLeft < 500)
{
anil.style.pixelLeft +=2; setTimeout("moveTxt()", 50);
}
}
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10"> Текст, шагом марш!
</div>
21
</body>
</html>
2.7. Лабораторнаяработа« |
ОсанимацииовынаCSS |
» |
Цель работы |
|
|
Создатьанимациюнавигационногоэлементавеб |
|
-страницы с |
помощью CSS. |
|
|
Порядвыполненияк |
лабораторнойработы |
|
Создадимкнопкузагрсанимациейзкиподпрыгивания.
Чтобыопределитьанимацию,простонапишитеключевоеслово @keyframesсегоназванием:
@keyframes around { 0% { left: 0; top: 0; }
25% { left: 240px; top: 0; }
100% { left: 0; top: 0; }
}
p { animation: around 4s linear infinite; }
Обратитевним,чтоначалониеконец0%содержат100% одинаковыеправилаCSSЭтогарант.,чтозациклитсямациярует
идеально.Посчёколькутчикерацийустано вленкакinfinite,то анимацбудетидто0%дои100%,яазатнемобратедлек0%и нно такбесконечно.
Названиемацииспользуется, крайнмер,дважды: й
●принаписаниианимациипомощью@keframes;
● прииспользанимациомощьюсвойствании |
ваanimation - |
nameиличерезсокращённ( свойствanimation)ое . |
|
|
22 |
@keyframes whatever { /* ... */
}
.selector { animation-name: whatever; }
ПодобклассовименамCSS,назанимациианиеможетвключать
себятолько:
● буквы(a -z);
●цифры(0 -9);
●подчёркивание( );
●дефис( -).
Названиенеможетначинатьсяцифрыилидвухдеф.Какисов длитпе,рехдлительностьоанимациидаможебытьус ановленаь всекундах(1s)илим ллисекундах(200ms).
.selector { animation-duration: 0.5s; }
Значениепоумо |
лчаниюравно0s,чтозначаетотсутствиеанимации |
|
вообще.Подобнофункциямвременидляпереходов,функциивремени |
|
|
дляанимациимогутиспоключесльз,такиеовакакlinear,ыеть ease |
- |
|
outилимогутбытьопределеныспомощьюпроизвольныхкривыхБезье. |
|
|
Как исзадержкперех,задержкаанимацииойдаможетбыть |
|
|
установсекундах(1s)илименаллисекунд(200ms)Поумолчанию. х |
|
|
равночтоозначает0s,отсутствиелюбойзадержки.Полезно |
|
|
использов,когдавключаетсянесколькоанимацтьсери. ий |
|
|
2.8. Лабораторнаярабо |
та« Созданиемакетоввеб |
-приложения» |
Цель работы |
|
|
Создать файлсгипертекстовымдокументо |
ипрееговмракетить |
|
веб-приложения. |
|
|
|
23 |
|
Порядвыполненияк лабораторнойработы
•Запустимтексторедактор,введемтекстый:
ПриветствуюВаснамоп webрвой |
|
-страничке! |
• Сохранимфайлвсозданнойпапке.Присохра,вокнении |
|
|
диалогаСохранитькак…встрокеТипфайла:выбриВсеатьф йлынт |
|
|
(*а.встроке*)Имяфайла, задимясрасширенть.напрhtm, имерем |
|
|
1_nameгдеname.htm ( |
– вашеимя) |
|
Создадимразметку, |
пределяющиеструктуруhtml |
-документа. |
Ввестиприведенныенижетеги,разаголовкаделедокумента (междутегами<TITLE>указатьсвоюфамилию.</TITLE>)
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
ПриветствуюВаснамоп webрвой |
-страничке! |
</BODY>
</HTML>
ОтредактируемдокументдобавипослетекстаПриветствую« Вас намопеwebрвой -страничке!»текстподписи:
СтудентгруппыNNNФамилияИмя
24
Используяодиночныйтег<BR>,отредактируемдокументтак,чтобы |
|
||
подписьначиналасьновойстр |
оки,аФамилияИмя |
– вследующей |
|
строке.Просмотретьвбраузереновыйвариант. |
|
||
ОфофрагментекстамимпомощьютЗаголовковилейы: |
|
||
• ПервуюстрдокуоформимментастилеЗаголовок1 |
-го |
||
уровняспомощьюпарноготега<H1>Втостроку…оформимую</H1>. |
|
||
какЗаголовок6 |
|
-гоуровня,атретьюкакЗаголовок4 |
-гоуровня. |
• ПоменяемстильофорпервойстрокилениянаЗаголовок2 |
|
||
уровня,второйстроки |
|
- наЗаголур5 ,поовсняокледнейтроки |
- на |
Заголовок3 |
-гоуровня. |
|
|
Выпформатлнимшр: ифтарование
•Послестр окиФамилияИмядобавимещеоднустрокутекста:
Насутровстречаетпрохладой |
|
|
|
• |
Офофразупопрмиведенномунижеобразцу. |
|
|
ВсловеУТРО«@всебуквыдолжныиметьразныецвета.Вслове |
|
|
|
«ПРОХЛАД»оформитьбуквы«» ОЙ |
– краснымцветом, « |
ОЙ» – |
|
синим. |
|
|
|
• ОфостсрпмимокудписьюСтудент(группыNNNФамилия |
|
|
|
Имя)ку,рсивомазмершрифтазадатьотносительизменением. ым |
|
|
|
Использоватьтеги<FONTи<I>SIZE=«+2»> |
|
|
|
Выпформатиролнимабзаце: вание |
|
|
|
• |
Создадимновыйдокумент2 сохраниname.htm, |
|
тьеговтойже |
рабочейпапке. |
|
|
|
• |
Ввтеидемк(спользоватькопировтекстиздокуманиента |
|
|
1_name.htm):
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
25
</HEAD> |
|
<BODY> |
|
ПриветствуюВаснамоейвторойweb |
-страничке! <BR>Монолог |
Гамлета |
|
</BODY> |
|
</HTML> |
|
•Выровняем текстпоцентру.
•Ввте:демкст
Бытьильнебыть - вотчемвопрос.Чтоблагороднее:сносить ударынеистовойсудьбы - ильпротивморяневооружитьсязгод,бой вступить.Ивсепокончитьразом...
•Оформимвырабзацавниваниепоширине.
•Ограничимаб зацгоризонтаразделинияительными сверхуиснизу,используятег<HR>.
•Скопмонологиразобъемруемегонаабзацы.
Бытьилнебыть |
- вотчемвопрос. |
Чтоблагороднее:сноситьудары |
|
Неистовойсудьбы |
- ильпротивморя |
Невзгодвооружиться,бо |
йвступить |
Ивсепокончитьразом... |
|
•Создадимсмешанный« »список:
Язнкакоформлятью:
1.Шрифты
• Размер
26
•Цвет
•Гарнитуру
•Индексы
2.Заголовки
• |
От1 -годо6 -гоуровня |
3.Абзацы
•Выравнивание
•Разрывстроквнутриабзаца
• |
Сиспользованиемпереформ |
атирования. |
27
3 Методические указания для организации самостоятельной работы
3.1. Общиеположения |
|
|
|
|
Целямисамостоярабоявляютсясистематизацияыельной, |
|
|
||
расширениезакртеоретическихплзнанийние |
|
вобласти |
|
|
формированияпроизводствагипертекстаового |
|
влеинтернетия |
- |
|
контента. |
|
|
|
|
Самостработастудпоятисциплинентальная« |
|
Основы |
||
гипертпредИнтернеткстаовленияого |
-контента»включает |
|
||
следующиевидыдеятельности: |
|
|
|
|
1) |
самостоятельноеизучениетем |
теоретическойчастикурса |
; |
|
2) |
проработкалекционногоматериала; |
|
|
|
3) |
подготклабработамраторнымвка; |
|
|
|
4) |
офотчетоврмлениеп |
олабораторнымработам; |
|
|
5) |
подготовкаэкзамену. |
|
|
|
Входесамостояработыстудеориентируясь, ельнойа изложенныерекоме,пласнвдацииируетоепереченьмя необходработвзавиотиндивидуальныхмыхсимопстиихофизических
особенностей.Фо рматсамостояте льнойработыстудентовможет отличатьсявз ависимостиотф рмыбученияобъемааудиторной работы.
3.2. Самостоятельноеизучтеморетическойниечастикурса |
|
Частьучебногоматеривынесеныдляаламостоятельногоизучения |
|
студентом. |
|
Проработкатакихматериаловвключаетдеятельность,связанную |
|
изучениемисточников,которосновныеаженыыхмоменты, |
|
необходимыедлявсецелогопониманияизучапр.едметамого |
|
Вопроесенные,вынаамостоятельноеизучение: |
|
1. Целизадачисозданияв |
еб-представительства.Способы |
использованияинтернет |
-технвкоммерческойлогий |
деятельностифирмы.Знакомствопредметнойобластью. |
|
Базповёрсткинятияые. |
|
|
28 |
2. РазметкатекстапомощьюHTML |
. Созданиепростейшихвеб |
- |
страниц.Представлениеобэлементах,изкотор |
ыхонасостоит, |
|
подключентаблстискрлейцы. иптове |
|
|
3.Инструментыдляработы . Обзорсовинструментовеменныхдля совместнойрабк ,оптимдомты,сжатием.д.зацией
3.3.Прораболекционногоматериалака
Длякачественногоусвоучматниябногоцелесообразнориала |
|
|
||
осуществлятьпроработлекционматериала,котуноаправлраяго |
|
ена |
||
какнасистемеющегатизма,таериаланакпцодготовкусяю |
|
|
||
освоениюпра ктичеаспектвязанных, киходержаниемдисциплины. |
|
|||
Прораболекционногоматвериалалючдеятельность, ет |
|
|
||
связаннуюсизучениемрекомендуемыхпреподавателемисточников, |
|
в |
||
которосновныеаженыыхмоменты,затрагиваемыеходелекций. |
|
|
||
Кртважное, гомеместоотведенорабсс бственноручноте |
|
|
||
составленнымконспе |
ктомлекц.Прконспектированиий вовремя |
|
||
лекциипомните,чтонесл |
|
едуетзаписывсе,чтоговоритать |
и/или |
|
демонстрирует лектор:старайтесьв |
ыявитьглавнзаписатьоэтоелько. |
|
||
Цельконспекта |
– формирцелостногогическиваниеыстроенного |
|
||
взгляданакругвопросов,затраг |
|
иваемыхходеизучения |
|
|
соотве,анемытствующмеханичфи ескаяй |
ксацияте |
кстовойи |
||
графическойинформации. |
|
|
||
Вовнеаудиторнлекционноговремяпроработкаматериаламожет |
|
|
||
бытьвыстроенадвухосновныхформатах: |
|
|
|
|
а)отработкапрослушанлекциипрочтение(ко ойспекта |
|
|
||
рекомендованныхпреподавателемисточниковсопоставлениемзаписей) |
|
|
||
иво сполнениепробелов,еслиониимелинаприм( , слиьтудентнер |
|
|
||
понялчего |
-то,неуспелзаписать); |
|
|
|
б)прочтпередкаждойпосниелепредующейкцией, абыыдущей |
|
|
||
нетратилосьмноговременинавосстаконизучтекстаовленияе |
|
|
||
дисциппрлины |
одолжающейсяилисв |
язаннойтеме. |
|
|
Входепроработкилекциматебращнноговниманиеиалайте |
|
|
||
контрольнвопрос,кото,какры,имеютсяавилоыеконцекаждой |
|
|
||
темыучебника( пос)Отвечая.онабиягоних,можносделатьвывод |
|
|
||
остепенипониманматер.Еслиответыналая |
|
акакие |
-товопросы |
|
вызвализатруднения,тоследуетпредприняещеоднупопытьку |
|
|
||
изученияо |
тдельныхвопросов. |
|
|
|
|
|
|
29 |
|
3.4.Подготклабораторнымработамвкаиоформлениеотчетовк лабораторнымработам
Приподготклабозараторнымвкенеобходимоятиямзаранее |
|
|
|||
изучитьме |
тодические |
рекомендациипоегопроведению, |
|
братить |
|
вниманиенацель,формати |
содержание занят.Есликакиея |
-томоменты |
|||
вызвалидополнительныевопросы,целесообразнообратитьсяк |
|
|
|
||
содержаниюле |
кционногомат,рекриалапремендациямподавателя |
|
|
||
изучениюте |
|
оретичекурсасрекомендуемымкойти( источника)или |
|
|
|
заличнойко |
|
нсультацией.Входеподготклабработамраторнымвки |
|
|
|
можетпотреб |
|
оватьсяобращениекразличнымисточникам.Проявляйте |
|
|
|
инициативусамостоятельностьданномвоп.Приэтомслоседует |
|
|
|
||
пользоваттолькоавторитетнымисяизданиями,какпечатными,так |
|
|
|||
электронными. |
|
|
|
||
Темысамостояработельных |
совпадтемамиют |
лабораторных |
|||
работ.Содержаниерабпкаждойтемывключтризадпервые(аетния |
|
|
|||
двазаданиявыполняютсядо |
лабораторнойработы |
,трет ье – после): |
|||
1Изучентеории. ,необходимойдля |
|
выполнениялабораторной |
|||
работы. |
|
|
|
|
|
2Сборинформации. |
поконкретной |
теме,необходимойдля |
|||
выполнениялабораторнойработы |
.Осуществляетсянаосновеизучения |
|
|||
литературныхисточниковкниг,(статейжурналах, |
|
|
борниках), |
||
публиквИнтернете,зацийко,нодательныхрмативно |
|
|
-правовыхктов, |
||
знанийопытаколлегзнакомых.Источникиинформациивыб раются |
|
|
|||
студентомсамостоятельно. |
|
|
|
||
3Оформление. результатов |
лабораторнойработы |
|
.Составляетсяотчет |
||
впечатномвиде. |
|
|
|
|
|
Самостоятельнаяработа« |
СозданиепростейшейHTML |
- |
|||
страницыподключениемCSSJ |
-скриптов» |
|
|||
1. Изученметодовиприсозданиянципов |
|
HTML-кода. |
|||
2Сборинформации. : |
|
|
|
||
- осинтаксисеязыкаразметки |
HTML; |
|
|
||
- обиспользоскриптовыхязыковнаебнии |
|
-страницах. |
|||
30