Основы гипертекстового представления интернет-контента.-4

Министерство наукивысшего

образованияРоссийскойФедерации

Федеральноегосударствеобразовательноебюджетучреждение высшегообраз вания

«ТОМСКИЙГОСУДАРСТВЕННЫЙУНИВЕРСИТЕТ СИСТЕМУПРАВЛЕНИЯРАДИОЭЛЕКТРОНИКИ»ТУСУР()

Кафедраавтоматизации бработкиинформацииАОИ()

ОСНОВЫГИПЕРТЕКСТОВОГО ПРЕДСТАВЛЕНИЯ

ИНТЕРНЕТ-КОНТЕНТА

Методическиеуказания	выполнениюлабораторныхработ
иорганизациисамостояработыельной	длястудентов заочной
	фобучениярмы

2018

АхтямовЭмильКамильевич
СеменовЕвгенийВалериевич
Основыгипертпредкинтернетстаовленияого		-контента:
Методическиеуказания	выполнениюлабораторныхработ	и
организациисамостоярабодлястудентыельнойв		заочнойформы
обучения / Э.К. Ахтямов,Е.В.	Семенов. – Томск, 2018.	– 34 с.

©Томгосударственныйкийуниверситет системуправлениярадиоэлектроники, 2018

© АхтямовЭ.К	., 2018
© СеменовЕ.В.	, 2018
	2

		Оглавление
1	Введение............................................................................................			4
2	Содержлабораторныхниебот .....................................................			5
2.1. ЛабораторабС« птазданиеростейшейнаяHTML			-страницы
подключениемCSSJ		-скриптов» ...........................................................		5
2.2. Лабораторнаяработа«		GIMP дляверсткивеб	-стра.Информацияиц
слоях» ........................................................................................................				7
2.3.	ЛаборатоработаОсновные« прпостроенияиенаямодульных
сеток» .......................................................................................................				10
2.4.	ЛабораторнаярабС« декоративныхтазданиеэлементоввеб		-
страниц» ..................................................................................................				11
2.5.	ЛабораторнаярабоКаскадные« таблст»илейцы		........................	14
2.6.	ЛабораторнаяработаВведение« Java		-script» ................................	18
2.7.	ЛабораторнаяработаОс« анимацииовыCSS»		..........................	22
2.8.	ЛабораторнаяработаС«	оздмавебниекетов	-приложения» ...........	23
3	Методичеуказаниядляоргансамостояиезацииработыельной			28
3.1.	Общиеположения	...........................................................................		28
3.2.	Самосизучтемоятельноеоретичниечастикурсаской		............	28
3.3.	Прораболекционногоматкаериала	................................................		29
3.4.	Подготовкалабораторнымработамиофотчетоврмлениек
лабораторнымработа		м ............................................................................		30
3.5.	Подготовказачету	.........................................................................		33
4	Рекомендуемаялитература	.............................................................		34

3

1 Введение

ЦелиизучендисцОсновы«игипертяплиныпредкстаовленияого
Интернет-контента»состоятвформзнанийпрактичеровании			ских
навыкиспользовсовременныхязыкова,зметкинияразравеботки			-
интерфейсовтестированиявеб	-приложен,функционирующихвсетий
Интернет.
Вкачествеклиентскогоприложения	будет использоваться браузер,
установленныйоперационнойсистеме.Выполня	ялабораторныеработы,
небудут использоватьсякакие	-либоспецифическиеэлементы		разметки
илистилей,поэтомуограничкбраузерупредъявлятьсянийне. дет
Вкачтекстовогоствередакторабудемиспользоватьпрограмму
«Notepad++». Скачатьпоследнверсиюю	ипрочитатье	ё	описание
можнонасайтеhttp://notepad	-plus-plus.org/.Можноиспользовать
аналогичнуюпрограмму.Есливпроцессевыполнениялабораторных
работпонадобятсядругиепрограммн,одуктытообэтомбудет
сказано.

4

2 Содержание лабораторных работ

2.1. Лабораторнаяработа«		СозданиепростейшейHTML	-страницы
подключениемCSSJ		-скриптов»
Цель работы
Получитьнавыкисоздания		HTML-страницпомощьютекстовогои
графическредактор. гов
Самыйпростойтекстовыйредактор,подходящийдляверстки			– это
NotePad++Помимоэтого,существуютпрофес. редакторыиональные
возмпожностьюдкпл,агиновкотоюченияупрыеощаютаботу.Кним
относятсяSublime Text 3, Atom.
Браузерныйдвижок	–	этоплатформа,переиносящформациюя
разметкеиформатированиистрани		цывинтерактивноеизображениена
экране.Применяевосновномпрограммах,требующихсяотображение
иредактированиесодержимоговеб		-страниц.

Макдлявевртыосновномткипредставляютсяформатах.PSD

(Adobe GIMP, Gimp), .AI (Adobe Illustrator), .SKETCH К(Sketch).

сожалению, доступенSketchтолькодляпользователейOSно X, существуютсторопрограммы,нниеапримерAvocodeПомимофайл. в

Sketchонпозволяеттакжеконвертироватьфайлы GIMP.Условно бес,проблатверсия14днейная.

Порядвыполненик

я лабораторнойработы

Простейшаястраницаможетвыглядетьтак:

<!DOCTYPE html> <html>

<head>

<title>Заголовок страницы.</title> </head>

<body>

5

<h1>Мойпервыйзаголовок.</h1> <p>Мойпервыйабзац.</p>

</body>

</html>

Разметканачинаетсяописаниятипад	окументавтеге<!DOCTYPE>,
дляпоследующегокорректногоотображстраницы.Этообходимония,
чтобыбраузерпонимал,какследуинтетрпрекущуювебтировать	-
страницу,посколькуHTMLществуетнесколькихверсиях,кроме
того,имеетсяXHTML (EXtensible H	yperText Markup Language,
расширенныйязыкразметкигипертекста),похожийнаHTML,но
различающийсянимпосинтаксису.

Далеерасполагатег<html></html>,внбудеттсямописываться текущийдокум.Такжевнможнонтуказатьязыктекущейстраницы

(ru - длярусского, en - дляанглийского)Этопре. дназначеноля многоязычныхсайтов,также

Втеге<head></head>размещаетсяинформация,предназначенная длябраузеровипоисковыхсистем:немподключаютсястили,скрипты, устанавлкодировка,описываютвается сяключесловаифр, ыезы задаголовокетсястра.Иницыформация,заключеннаявтеге<head>

никакнеотображаенастрз(исключениемницетсяега<title></title>,в которомпишетсязаголстраницы,овображаквверхпанемыйли браузераивкладке).

Тег <body></body>	- осн,тоеговнойлькос держимоебудет
отображатьописываетсянастранице.Внем контент.Впримеревыше
внутритега<body></body>лежаттегзаголовкапервур вня
(<h1></h1>)иабзаца(<p></p>).
Браузернеотображаетсамитеги,но	спользуетихкакинструкцию
того,какотображатьдокумент.

Дляподключенияскриис ользуетсяегов<script>,причем

неважнопишителивыскриптывhtml -докуме,илижевыихнвосите отдельныйфайл.Впервомслучаетекстскриптазаписываетсяпросто междуоткрывающимзакрывающимтегом.Еслижескрипты необходимоподключитьвнешнийдокумент,тооназаписывается

атрибуsrc=””Помимоатрибтакжее.srcсуществуют:

● async - загружаетскриптасинхронно;

6

●	defer - Откладывавыполнскрипдотехниета	пор,покався
страницанебудетзагруженаполностью;
●	language - Устанавливаетязыкпрогркоторомммирования
написанскрипт.Этоатрибутявляетсянеобязательным,.к.стандарте
htmlонпринимает5поумолчаниюзначениеtext/javascript,еслинеуказа		н
явно;

●src - Адресскриптаизвнешнегофайладляимпортатекущий

документ;

●type - Определяеттипсодержимого<script>.

Вотличтега<link>и<style>,е можноуказыватькак<script>

втеге<head>,такив<body>.

2.2. Лабораторнаяработа			«GIMP для версткивеб	-страниц.
Информацияслоях			»
Цель работы
Создвграфическомредакторетьпростмакетв йшийб				-страницы.
Порядвыполненияк			лабораторнойработы
Убедитесь,что		GIMP правильнонастроен:выпадаменEdit→ющее
ColorвызываетсяSettShiftngs+ (			Ctrlвыставьте+дляK),RGBвариант
sRGBЭтоцветпр. о,странствокотороераб“ ”весьвеб.мтает
Дополнительнаянастройка: Edit→Preferences→Unitsдля& Rulers (
OSпунктPreferencesX		— ввыпадменсназваниемюпрограммыщем),
ввыпадающихспис		кахдля«Rulers»и«Type»нужновыбратьединицы
измерения«Pixels».
Подвыпамендлиннаящимгоризонтальнаяю область				— вней
отображаютсянастройкиактивногоинструмента.
Панельсовсемиинструмеслева,прочиепасправантамили
«плавают».
Внешнийв	ид	GIMP настраивает:можноперетапанели, скиватья
включатьиотключатьихвидимостьвыпада( менWindow),ющем
			7

своирачиватьзворачдвойной(клпоназваниюкватьпанели), сворачиватьиконки.

Создаврабочееокружеснужпанелямиымискрывиевсё
ненужное,можносохранитьвариантполучившегинтерфей.Списоксяа
рабочихокружений	— вверхнейправойчастиокна, частижней
спискаестьпункт«New Workspace...»		— нажимаем,именуем,сохраняем.
Необхоижелательныедверстальщикаляимыепанели:
1. Layers — панельслоёв		— папкислоимакета.

2. Character — данныеовыдт ленномкстовомслоеиликсте (шрифт,цвет,размер,интедругое)линьяж.

Прочиепанели — повкусуверст,укасвоиждогольщикамет ды работысмакетом.

Какверстальщикуработать GIMP

Есливыправша,держителевуюрукуналевойчастиклавиатуры, чтобылегкодоставатьShift,иПробел.Ctrl, Alt

Вклинейкиючитевыпада( менView→юRules,поставитьщее

галочкуоно(же — Ctrl+убедитесь,чтоR)),онипоказываютпиксели (правойкноп коймышикликнутьналинейке,выбратьпиксели).

Ориентацияподокументу
Tab — показатьилискрытьвсепанели.
ЗажатьПробел,схватить«»мышьюзадокумперенттаскивать		—
перемещениевра асштках.Зажкнопкиавременнобатиеактивирует
инструментHand To	ol.
Ctrl + 0 — вписатьмакетрабочуюобласть.
Ctrl + 1 — установкамасшт100%ба.
ЗажзажатьH,левуюкнопкумыши		— документмасштабируется
так,чтоббылвиденцеликом,можноперетащитьрамкувыдержите(
левуюкнопкунажатой,простотащитемышь)влюб		оеместоиотпустить
— окажитесьвэтойобластитеммасш,кобылтранееорыйабом.
ЗажатьAlt,крутитьколесомыши		— масштабированиеобестороны
вокругтогоместа,гдерасположенкурсор.

8

Выборслоёв
ЗажатьCtrlикликнутьнаслой.Зажатиекнопкивре			менноактивирует
инструментMoveРабовслучаевыбораToolаетлюбогоинструмента.
кромеHandпозажатCtrlвклинструментToolючается(
масшт)и амогбирMoveЧтобыэтовработалоToolния,убедитесь, .
чтонастройкиинструмеMoveэтопаподнтаToolель (			выпадающими
меню,когдаинструмевыставленывыбран) следующие: Auto			-Select —
галкастоит,ввыпадающемспискерядом			— Layer.
Показатьискрыть
Показскрытьиликакие		-либослпростои	— кликнутьнаиконке
«глаз»этогослоявпанеслоёви(ликлави			атуры: Ctrl + ,).
Altклпоик+ глазонке«»впанелислоёв			— показатьтолькоодин
этотслой,прочеескрыть,повторныйклик,чтобывернутьстатускво.
Информацияслоях
Двойнойкликпоминиатюретекстслоявого			— редактированиеслоя,
выставляйтетекстов	ойкурсорвнужноеместо		— узнаётеш,рифтазмер,
инте, рансформациилиньяж,кернспейсинг, цвет.Еслипараметры
HorizontallyилиVerticallyотличаютсяScale100%,нужноScale
экспериментироватьCSS3		-свойствtransformубл,вкоторыймка
включатьтолькоэ отекстиналажвзаидизайнерамодействиевать
верстальщика,еслиэтонтентныйтекст.
Двойнойкликпоминиатюреслояцветом,градиентом,заливкой
текстурой — вызовмодальокнасданнымислоя.ого
Еуслсправаиояестькурсивнаянадпись			«fx»ииконка, (
открывающаясписок),значиту есгоэффектыь.Кликайтена
открывающуюиконку		— увидспэффектовисоктем( жнотключитьих
показ — кликаемнаиконкиглазарядомсэффе),двойнойктамиликпо
эффектувызовастройпанс ельэффекта. ами
Цмакетев :инструментEuedropperвнастройкахуказатьTool (
Sample→PointКликаемпоSizeпроизвольномуSample)пикселю, .
панелицветапод(всеминструментами)видимцветпикселя.
Размервмакете:инструментRuler Tool			— нажать,тащитьмышью,
отпустить — впанелинастроекпод(выпадмен, аюраметрL1)щм

увизмеренноедитерасс.ЕслитащитьояниезажатымShift,измеритель перемещаетсястрогогоризонта,строговертикаподльно45°ляьно( верстальщиканеактуально).

9

МожноиспользоватьRectangl	e MarqueeсоздаваявыделениеTool,
(размервыделбудпоказанерядомниятсвыделением),если	GIMP
версииCS6новее.Убратьполучившепослеизмервыделениенияся	—
Ctrl + D.
Показатьискрытьсетку,напр,гавляющиебаритытрансформации,
нарезку — Ctrl +H.
Отменаиповторпоследнегодействия	— Ctrl + Z
Отменадействийпоследовательно	— Ctrl + Alt + Z
КомандаизвыпадающегоспискаImage→Trim	— подрезка
прозрачныхилиоднотонныхпиксудобно(,еслилейнужноп лучить
слойнапрозрачнкопируемфоне: слв й	новыйдокумент,подрезаем,
экспортируем).

2.3.Лабораторнаяработа« Основныеприемыпостроения модульныхсеток »

Цель работы
Научивыссодержаниетраиватььсявеб		-страницывразныепотоки.
Порядвыполненияк	лабораторнойработы
Поток — этоп отображенирядок		яэлементовнастранице.По
умоблчаэлементыочныеотображаютсяиюкакпрямоугольные
области,идущиедругзадругомсверхувниз,астрочныеэлементы
располагаютсясверхувнизслеванаипрнеобходимостиаво
переносятсянановуюстроку.
ОдинтотжеH	TML-кодможновыстрразныепо.итьтоки
Нап,какнаримерсунке2.

10