Основы гипертекстового представления интернет-контента.-2
.pdfsetTimeout("moveTxt()", 5000);
}
}
</script>
</head>
<body>
<div id="anim" style="position:absolute; left:10; top:10"> Текст,
шагом марш! </div> </body> </html>
Процессбудетповдотпорех,рятьсяпокаусловиеоператоранеif |
|
станетложным.Последнее,чтонужносделать, |
- запуститьсценарий |
выполн.ДляэтогоследувоспользоватьсяниесобытиемonLo |
ad: |
<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иличерезсокращённ( свойствanimatiое |
on). |
|
|
|
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) |
подготовкаэкзамену. |
|
|
|
Входесам |
остоятельнойработыстуде,ориентируясьа |
|
||
изложенныерекоме,пласнвдацииируетоепереченьмя |
|
|
||
необходработвзавиотиндивидуальныхмыхсимопстиихофизических |
|
|
||
особенностей.Фо |
рматсамостоярабостудентовможетыельной |
|
||
отличатьсявз |
ависимостиот |
формыбученияобъемааудиторной |
|
|
работы. |
|
|
|
|
3.2. Прораболекционногоматериалака
Длякачественногоусвоучматниябногоцелесообразнориала |
|
|||
осуществлятьпроработлекционматериала,котуноаправленараяго |
|
|
||
какнасистемеющегосяатизма,таериаланакц |
|
|
подготовку |
|
освоениюпра |
ктичеаспектвязанных, киходержаниемдисциплины. |
|
||
Прораболекционногоматвериалалючдеятельность, ет |
|
|
||
связаннуюсизучениемрекомендуемыхпреподавателемисточников, |
|
|||
которосновныеаженыыхмоменты,затрагиваемыеход |
|
елекций. |
||
Кртважное, гомеместоотведенорабсс бственноручноте |
|
|
||
составленнымконспе |
ктомлекц.Прконспектированиий вовремя |
|
||
лекциипомните,чтонесл |
|
|
едуетзаписывсе,чтоговоритать |
и/или |
демонстрирует лектор:старайтесьв |
ыявитьглавноезаписать |
толькоэто. |
||
|
|
|
28 |
|
Цельконспекта |
– |
формирцелостногогическиваниеыстроенного |
|
||
взгляданакругвопросов,затраг |
|
|
иваемыхходеизучения |
|
|
соотве,анемытствующмеханичфи ескаяй |
ксацияте |
кстовойи |
|||
графическойинформации. |
|
|
|
|
|
Вовнеаудиторнвремяпроработкалекцие |
онногоматериалажет |
|
|||
бытьвыстроенадвухосновныхформатах: |
|
|
|
|
|
а)отработкапрослушанлекциипрочтение(ко ойспекта |
|
|
|||
рекомендованныхпреподавателемисточниковсопоставлениемзаписей) |
|
|
|||
иво сполнпробелов, онислимелинаприм( , слиьтудентнер |
|
|
|||
понялчего |
-то,неуспелзаписать); |
|
|
||
б)прочтпередкаждойпосниелепредующейкцией, абыыдущей |
|
|
|||
нетратилосьмноговременинавосстаконизучтекстаовленияе |
|
|
|||
дисциппрлины |
|
одолжающейсяилисвязаннойтеме. |
|
|
|
Входепроработкилекциматебрнногоиала |
ащайтевниманиена |
||||
контрольнвопрос,кото,какры,имеютсяавилоыеконцекаждой |
|
|
|||
темыучебника( пос)Отвечая.онабиягоних,можносделатьвывод |
|
|
|||
остепенипониманматер.Еслиответынкакиеяла |
|
|
|
-товопросы |
|
вызвализатруднения,тоследуетпредпр |
|
инятьещеоднупопытку |
|
||
изученияо |
тдельныхвопросов. |
|
|
||
3.3.Подготклабораторнымработамвкаиоформлениеотчетовк лабораторнымработам
Приподготклабозараторнымвкенеобходимоятиямзаранее |
|
|
||
изучитьметодические |
рекомендациипоегопроведению, |
|
братить |
|
вниманиенацель,формати |
содержание занят.Есликакиея |
|
-томоменты |
|
вызвалидополнительныевопросы,целесообразнообратитьсяк |
|
|
|
|
содержаниюле |
кционногомат,рекриалапремендациямподавателя |
|
|
|
изучениютеор |
етичекурсасрекомендуемымкойти( источника)или |
|
|
|
за личнойко |
нсультацией.Входеподготклабработамраторнымвки |
|
|
|
можетпотреб |
оватьсяобращениекразличнымисточникам.Проявляйте |
|
|
|
инициативусамостоятельностьданномвоп.Приэтомслоседует |
|
|
|
|
пользоватьсятолькоавторитетнымиизданиями,какпечатными, |
|
|
аки |
|
электронными. |
|
|
|
|
Темысамостояработельных |
совпадтемамиют |
|
лабораторных |
|
работ.Содержаниерабпкаждойтемывключтризадпервые(аетния |
|
|
||
двазаданиявыполняютсядо |
лабораторнойработы |
,третье |
– после): |
|
1Изучентеории. ,необходимойдля |
выполнениялабораторной |
|||
работы. |
|
|
|
|
|
|
29 |
|
|
2Сборинформации. |
|
поконкретной |
теме,необходимойдля |
||||
выполнениялабораторнойработы |
|
|
.Осуществляетсянаосновеизучения |
|
|||
литературныхисточниковкниг,(статейжурналах,сборниках), |
|
|
|
||||
публиквИнтернете,зацийко,нодательныхрма |
|
|
тивно-правовыхктов, |
||||
знанийопытаколлегзнакомых.Источникиинформациивыб раются |
|
|
|
||||
студентомсамостоятельно. |
|
|
|
|
|
||
3Оформление. результатов |
|
лабораторнойработы |
.Составляетсяотчет |
||||
впечатномвиде. |
|
|
|
|
|
|
|
Самостоятельнаяработа« |
|
СозданиепростейшейHTML |
- |
||||
страницы сподключениемCSSJ |
-скриптов» |
|
|||||
1. Изученметодовиприсозданиянципов |
|
|
HTML-кода. |
||||
2Сборинформации. : |
|
|
|
|
|
||
- осинтаксисеязыкаразметки |
|
HTML; |
|
|
|||
- обиспользоскриптовыхязыковнаебнии |
|
|
-страницах. |
||||
3. Описаниевыполненнлаборатработы,офорйноймление |
|
|
чета |
||||
всоответствиипорядкомвыполнениялабораторнойработы« |
|
|
|
Создание |
|||
простейшейHTML |
|
|
-страницыподключениемCSSJS |
|
-скриптов». |
||
Самостоятельнаяработа« |
|
GIMP дляверсткивеб |
-страниц. |
||||
Информацияслоях |
|
» |
|
|
|
||
1. Изучениеинтерфейсавозможностейграфическо |
|
|
горедактора |
||||
GIMP дляработысмаквебтами |
|
-страниц. |
|
|
|||
2Сборинформации. способах |
|
|
версткимакетоввеб |
-страниц, |
|||
использовграфическихредпрверсткенктороввеб |
|
|
|
|
-страниц. |
||
3Описание. |
алгоритмовработы |
сграфическимиредакторамидля |
|
||||
версткивеб |
-страниц, |
офотчетармлениевсоответствиипорядком |
|
|
|||
выполнениялабораторнойработы« |
|
|
GIMP |
дляверсткивеб |
-страниц. |
||
Информацияслоях |
|
». |
|
|
|
|
|
Самостработа« ятельная |
|
приепостромодульныхетокния |
» |
||||
1Изучение. понятия |
|
модульныхсетокприверсткевеб |
|
-страниц. |
|||
2Сбор. |
|
информации |
потокахпредставленияинформации |
|
|||
помощью HTML-кода,табличнойверстке,флексбоксах,флоатинлайн |
|
- |
|||||
блоках. |
|
|
|
|
|
|
|
3Описание. |
|
видовпотоковпредстаинформациинавебления |
|
- |
|||
страницах,апробировходелабораторной,ботынных |
|
|
|
оформление |
|||
|
|
|
|
|
30 |
|
|