Основы гипертекстового представления интернет-контента.-3
.pdfМинистерство наукивысшего |
образованияРоссийскойФедерации |
Федеральноегосударствеобразовательноебюджетучреждение высшегообраз вания
«ТОМСКИЙГОСУДАРСТВЕННЫЙУНИВЕРСИТЕТ СИСТЕМУПРАВЛЕНИЯРАДИОЭЛЕКТРОНИКИ»ТУСУР()
Кафедраавтоматизации бработкиинформацииАОИ()
ОСНОВЫГИПЕРТЕКСТОВОГО ПРЕДСТАВЛЕНИЯ
ИНТЕРНЕТ-КОНТЕНТА
Методическиеуказания выполнениюлабораторныхработ иорганизациисамостояработыельной
(уровеньбакалавриата)
2018
АхтямовЭмильКамильевич |
|
|
|
СеменовЕвгенийВалериевич |
|
|
|
Основыгипертпредкинтернетстаовленияого |
|
-контента: |
|
Методическиеуказания |
выполнениюлабораторныхработ |
и |
|
организациисамостояработыельной |
/ Э.К. Ахтямов,Е.В. |
Семенов. – |
|
Томск, 2018. |
– 33 с. |
|
|
©Томгосударственныйкийуниверситет системуправлениярадиоэлектроники, 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. |
Подготовкаэкзаменам |
..................................................................... |
|
32 |
4 |
Рекомендуемаялитература |
................................................................ |
|
33 |
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