2018-01-08
1121
Web-технології
Методичні вказівки
для виконання лабораторних робіт
студентами денного відділення спеціальності 5.05010301 «Розробка програмного забезпечення»
Лабораторні роботи № 1-9
Дрогобицький механіко-технологічний коледж
 | |||||
 | |||||
 |
Web-технології. Методичні вказівки для виконання лабораторних робіт студентами денного відділення спеціальності 5.05010301 « Розробка програмного забезпечення».Лабораторні роботи № 1-9
Дрогобич, видавничий центр коледжу, 2012 – 96 стор.
Рекомендовано до друку
цикловою комісією комп'ютерних дисциплін
спеціальності 5.05010301 «Розробка програмного забезпечення» Протокол №______від___________20__р.
© І.В. Кожух, З.В.Андрушко 2012
ЗМІСТ
Лабораторна робота № 1. 6
Тема: Створення односторінкового сайту. Виділення даних використовуючи шрифтові оформлення. 6
Лабораторна робота № 2. 12
Тема: Добавлення зображень на сайт. Використання списків. 12
|
|
|
Лабораторна робота № 3. 17
Тема: Добавлення додаткових сторінок і навігація по них. Карти-зображень. 17
Лабораторна робота № 4. 25
Тема: Розробка web-сайту використовуючи таблиці. 25
Лабораторна робота № 5. 29
Тема: Каскадні таблиці стилів. 29
Лабораторна робота № 6. 41
Тема: Робота з редактором Macromedia Dreamweaver. 41
Лабораторна робота № 7. 50
Тема: Рисування простих зображень в графічному редакторі Adobe Photoshop. Робота з текстом 50
Лаборраторна робота № 8. 80
Тема: Рисування зображень в графічному редакторі Adobe Photoshop. Робота з шарами та стилями. 80
Лаборраторна робота № 9. 101
Тема: Робота із документами в редакторі FlashMX. 101
Література: 110
Лабораторна робота № 1
Тема: Створення односторінкового сайту. Виділення даних використовуючи шрифтові оформлення.
Мета: Навчити створювати односторінкові сайти.
ТЕОРЕТИЧНІ ВІДОМОСТІ
Коли WEB-броузер одержує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, що зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-броузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ буде виглядати так:
<HTML>...тіло документа... </HTML>
Заголовна частина документа <HEAD>
Тег заголовної частини документа повинен бути використаний відразу після тегу <HTML> і більш ніде в тілі документа. Даний тег представляє із себе загальний опис документа. Уникайте розміщувати який-небудь текст усередині тегу <HEAD>. Стартовий тег <HEAD> міститься безпосередньо перед тегом <TITLE> й іншими тегами, що описують документ, а завершальний тег </HEAD> розміщається відразу після закінчення опису документа. Наприклад:
|
|
|
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
...
Заголовок документа <TITLE>
Більшість WEB-броузерів відображають вміст тегу <TITLE> у заголовку вікна, що містить документ й у файлі закладок, якщо він підтримується WEB-броузером. Заголовок, обмежений тегами <TITLE> й </TITLE>, розміщається усередині <HEAD>-тегів, як показано вище на прикладі. Заголовок документа не з'являється при відображенні самого документа у вікні.
Тіло документа <BODY>
Тіло документа повинне перебувати між тегами <BODY> й </BODY>. Це та частина документа, що відображається як текстова й графічна (основна) інформація вашого документа.
Рівні заголовків <Hx>
Коли пишеться HTML-документ, текст структурно ділиться на просто текст, заголовки частин тексту, заголовки більш високого рівня. Перший рівень заголовків (найбільший) позначається цифрою 1, - 2, і т.д. Більшість броузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному з них власний стиль. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером. Заголовок самого верхнього рівня має позначку "1". Синтакс заголовка рівня 1 наступний:
<H1> Заголовок першого рівня </H1>Заголовки іншого рівня можуть бути представлені в загальному випадку так:
<Hx> Заголовок x-го рівня </Hx>де x - цифра від 1 до 6, що визначає рівень заголовка.
Тег абзацу <P>
У відмінності від більшості текстових процесорів, в HTML-документі звичайно ігноруються символи повернення каретки. Фізичний розрив абзацу може перебувати в будь-якому місці вихідного тексту документа. Однак броузер розділяє абзаци тільки при наявності тега <P>. Якщо ви не розділите абзаци тегом <P>, ваш документ буде виглядати як один великий абзац.
Додаткові параметри тега <P>: <P ALIGN=left|center|right>
дозволяють вирівнювати абзац по лівому краю, центру й правому краю відповідно.
Центрування елементів документа
Ви можете центрувати всі елементи документа у вікні броузера. Для цього можна використати тег <CENTER>.
Всі елементи між тегами <CENTER> й </CENTER>
будуть перебувати в центрі вікна
Тег преформатування <PRE>
Тег преформатування <PRE>, дозволяє представляти текст із специфічним форматуванням на екрані. Попередньо відформатований текст закінчується завершальним тегом </PRE>. Всередині попередньо відформатованого тексту дозволяється використати:
· переклад рядка
· символи табуляції (зрушення на 8 символів вправо)
· непропорційний шрифт, установлюваний броузером
Використання тегів, що визначають формат абзацу, таких як <Hx> або <ADDRESS>, буде ігноруватися броузером при приміщенні їх між тегами <PRE> й </PRE>.
Далі йде трохи більше докладний приклад, зібраний з попередніх:
<HTML> <HEAD> <TITLE> Список співробітників </TITLE> </HEAD> <BODY> <H2> Список співробітників нашої фірми </H2> <H3> Складено: 30 липня 2009 року </H3> Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. <P> Список може бути використаний тільки в службових цілях. </P> </BODY> </HTML>
Розрив рядка <BR>
Тег <BR> сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега – форматована адреса або будь-яка інша послідовність рядків, де броузер повинен відображати їх одну під іншою.
Додатковий параметр дозволяє розширити можливості тега <BR>.
<BR CLEAR=left|right|all>
Даний параметр дозволяє виконати не просто переклад рядка, а розмістити наступний рядок, починаючи із чистої лівої (left), правої (right) або обох (all) границь вікна броузера. Наприклад, якщо поруч із текстом ліворуч зустрічається малюнок, то можна використати тег <BR> для зсуву тексту нижче малюнка:
|
|
|
Цитата <BLOCKQUOTE>
Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегом <BLOCKQUOTE>, відступає від лівого краю документа на 8 пробілів. Наприклад:
На відкритті даної конференції глава представництва вимовив: <P>
<BLOCKQUOTE>
Сьогодні один з найбільших днів для нашої компанії. <BR>
Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їхніх настільних систем у кілька разів.
</BLOCKQUOTE>
