Основы гипертекстового представления интернет-контента.-2
.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 Hype |
rText 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+ (Ctr |
|
l +выставьте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 Tool. |
|
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 |
|
МожноиспользоватьRectangle Ma |
rqueeсоздаваявыделениеTool, |
(размервыделбудпоказанерядомниятсвыделением),если |
GIMP |
версииCS6новее.Убратьполучившепослеизмервыделениенияся |
— |
Ctrl + D. |
|
Показатьискрытьсетку,напр,гавляющиебаритытрансформации, |
|
нарезку — Ctrl +H. |
|
Отменаиповторпоследнегодействия |
— Ctrl + Z |
Отменадействийпоследовательно |
— Ctrl + Alt + Z |
КомандаизвыпадающегоспискаImage→Trim |
— подрезка |
прозрачныхилиоднотонныхпиксудобно(,еслилейнужноп лучить |
|
слойнапрозрачнкопируемфоне: слвновй |
ыйдокумент,подрезаем, |
экспортируем). |
|
2.3.Лабораторнаяработа« Основныеприемыпостроения модульныхсеток »
Цель работы |
|
|
Научивыссодержаниетраиватььсявеб |
|
-страницывразныепотоки. |
Порядвыполненияк |
лабораторнойработы |
|
Поток — этоп отображениярядокэл |
ементовнастранице.По |
|
умоблчаэлементыочныеотображаютсяиюкакпрямоугольные |
|
|
области,идущиедругзадругомсверхувниз,астрочныеэлементы |
|
|
располагаютсясверхувнизслеванаипрнеобходимостиаво |
|
|
переносятсянановуюстроку. |
|
|
ОдинтотжеHTML |
-кодможновыстрразныепо.итьтоки |
|
Нап,какнаримерсунке2. |
|
|
10