Модуль Основи WEB-дизайну

Скачати 158.19 Kb.

Назва	Модуль Основи WEB-дизайну
Дата	25.03.2013
Розмір	158.19 Kb.
Тип	Документи

bibl.com.ua > Інформатика > Документи

Огляд програмних засобів для розробки WEB-сторінок

Використання Internet для збору довідкової інформації — це лише невелика частина можливостей, які надаються службами всесвітньої мережі. Наявність власного Web-вузла або Web-сторінки дозволяє забезпечити представництво в Internet. В постійному представництві в мережі зацікавлені більшість фірм, що пропонують товари та послуги. Приватні особи використовують персональні Web-сторінки для організації кола спілкування за якою-небудь тематикою або для презентації своїх можливостей потенційним роботодавцям. Тому актуальним є питання методів створення Web-сторінок.

Процес створення Web-документів – це творча робота успіх якої залежить, як від особистих талантів і здібностей автора так і від його рівня досвіду. Крім того важливим є правильний вибір методу створення Web-сторінки, який відповідає індивідуальним можливостям розробника.

Web-документ являє собою вихідний текст з імплантованими в нього тегами. Таким чином Web-документ являє собою звичайний текст і тим самим може створюватися і редагуватися засобами звичайних текстових редакторів.

Основна особливість створення Web-документу полягає в тому, що автору документа невідомо, на які моделі комп’ютера, в якій операційній системі і якими програмами цей документ буде відображатися на екрані користувача. Цей «рівень незнання» не дозволяє чітко задавати параметри форматування Web-документу.

Web-сторінки створюються з допомогою спеціальної мови розмітки гіпертексту – HTML. Крім того можна використовувати спеціальні Web-редактори. Найбільш потужним програмним засобом цього класу є пакет Microsoft Front Page. Серед засобів візуального проектування Web-сторінок початківцями широко використовуються засоби Microsoft Word.

У даному навчальному посібнику розглядається методика створення Web-сторінок за допомогою мови розмітки гіпертексту HTML, програми Microsoft Word та Web-редактора Microsoft Front Page.

Модуль 1. Основи WEB-дизайну

Після вивчення цього модуля Ви будете знати:

·        призначення і функції WWW;

·        поняття програми-броузера;

·        поняття гіпертексту;

·        поняття гіперпосилання;

·        поняття гіпермедіа;

·        основні поняття про мову розмітки гіпертексту;

·        поняття Web-сторінки;

·        поняття Web-сайту;

·        класифікацію програм для створення Web-сторінок;

·        основні етапи проектування Web-сайту;

·        поняття Web-серверу;

·        поняття хостингу.

Після вивчення цього модуля Ви будете вміти:

·        виконувати дослідження та збір інформації для Web-сайту;

·        розробляти структуру Web-сайту.

Попередня підготовка. Для успішного засвоєння матеріалу модуля потрібно мати початкові навички у роботі з персональним комп’ютером та використанні однієї із служб Internet — World Wide Web.

Необхідне обладнання. Для ефективного вивчення матеріалу потрібно мати доступ до службb Internet — World Wide Web.

Рекомендації до роботи та мотивація до застосування знань. Для поглиблення вмінь та навичок потрібно виконати самостійні завдання та тести, наведені в останній частині цього модуля.

Вивчення матеріалу модуля підготує Вас до сприйняття матеріалу модулів №2, №3 та №4 цього посібника та дасть можливість самостійно розвивати свої вміння в створенні Web-сторінок та Web-сайтів шляхом самоосвіти.

Ключові слова: World Wide Web (WWW), броузер, гіпертекст, гіперпосилання, гіпермедіа, HTML, HTML-документ, Web-сторінка, Web-сайт, візуальний HTML-редактор, редактор HTML-текстів, деревоподібна структура сайту, лінійна структура сайту, Web-сервер, хостинг.

§ 1. Служба Internet World Wide Web. Поняття про мову HTML

Ключові слова:

World Wide Web (WWW), броузер, гіпертекст, гіперпосилання, гіпермедіа, HTML, HTML-документ, Web-сторінка, Web-сайт, візуальний HTML-редактор, редактори HTML-текстів

1.1. Служба World Wide Web

World Wide Web (WWW), або просто Web, у перекладі означає «всесвітня павутина» (мережа).

World Wide Web (WWW), або просто Web — це всесвітня інформаційна мережа, що являє собою великий набір взаємопов'язаних один з одним документів. Вони називаються Web - сторінками

Для перегляду Web- сторінок використовуються програми - клієнти, що називаються Web-броузерами (від англ. to browse — переглядати, перегортати, читати безладно).

Броузери — це програми, які відображають документи Web на екрані і дають змогу мандрувати по WWW у "онлайновому" режимі.

Найпопулярнішими зараз Web-броузерами є Internet Explorer (від, англ. explorer — дослідник) фірми Microsoft і Netscape Navigator (від англ. navigator — навігатор) фірми Netscape.

Web — одна з найновіших інформаційних служб Internet, що швидко здобули широку популярність. Вона була розроблена в 1980 році в європейській лабораторії фізики елементарних частинок. Співробітник цієї лабораторії Тім Бернес Лі створив програму, яка дозволила зв'язати документи один з одним за допомогою введення в них посилань одного на одного (саме у такий спосіб, вважав він, організована інформація в людському мозку). Так з'явилося поняття гіпертексту (англ. Hypertext). Префікс «гіпер* означає «більше ніж», тобто гіпертекст — це більше, ніж звичайний текст,

Гіпертекст — це текст (документ), в якому містяться посилання на інші документи.

Слово або фраза, що є посиланням, або, як її називають, гіперпосиланням, звичайно підкреслюється і виокремлюється іншим кольором, щоб відрізнити її від решти тексту. Клацання на гіперпосиланні виводить на екран пов'язаний з нею текст (документ).

Гіперпосилання – елемент Web - сторінки, зазвичай виділений кольором і підкреслений. Використовується для швидкого переходу до другого Web-документа або іншого розділу цього ж електронного документа.

У 1989 році автор ідеї гипертексту запропонував її узагальнити: зв'язати гіпертекстові документи — Web- сторінки — по всьому світу. З того часу почався бурхливий розвиток Web. Саме гіпертекст є основою структури Web. Завдяки йому Web- сторінка стає інтерактивною.

Гіпертекст не має ні початку, ні кінця, він нагадує павутину з невизначеним центром. У цьому полягає важлива особливість гіпертексту: інформація ніяк не впорядковується, документи просто зв'язуються один з одним за допомогою посилань. При цьому можуть зв'язуватися найрізноманітніші документи, які перебувають у різних місцях загальної структури.

Оскільки сучасні документи можуть містити не тільки текст, але й зображення, звукову і відеоінформацію, то для опису Web- сторінок використовується також термін гіпермедіа (англ. ; hypermedia).

Гіпермедіа — це природне узагальнення поняття гіпертексту, що стосується документів, які містять не тільки текст, але й інформацію мультимедіа (графіку, звук, відео).

Web- сторінка — це документ гіпермедіа. Після клацання на гіпермедіа - посиланні Web - броузер завантажує відповідний мультимедійний файл і запускає програму для відтворення його вмісту. Сучасні Web-броузери підтримують технологію, яка дозволяє відтворювати відео- і аудіозаписи безпосередньо під час відображування Web-сторінки, тобто так, немов мультимедійний файл є частиною документа. Елементи мультимедіа Web- сторінки можна зв'язати з іншими документами гіпермедіа, щоб, наприклад, при клацанні на зображенні завантажувався відповідний йому документ з інформацією (можливо, мультимедійною).

1.2. Поняття про мову розмітки гіпертексту

Основою всесвітнього «павутиння» World Wide Web є мова гіпертекстової розмітки HTML (Hyper Text Markup Language). Вона була створена вченими Європейського центру ядерних досліджень (CERN, м. Женева). Наприкінці 80-х років у CERN зайнялися проблемою збереження і відображення даних, які отримували колеги-фізики. Складність полягала у тому, що кожний фахівець, який приїздив до Центру, застосовував власні методи відображення інформації, і потрібно було терміново створити універсальну систему, яка б не залежала від використовуваної комп'ютерної платформи і була б досить простою.

Ідея розв'язання проблеми обміну документами між різними комп'ютерами полягала у тому, що документи мали бути розмічені за допомогою визначеного коду — HTML. Такі документи могли б читатися на будь-якому комп'ютері, на якому встановлена одна програма перегляду — броузер.

Згодом мова HTML стала основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із виділеними словами, посиланнями тощо.

HTML —- набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми броузера.

Документи, підготовлені мовою HTML, називаються HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у броузер і виконаєте команду Вид ® В виде HTML У вікні Блокнот ви побачите код поточного документа.

HTML-документ (або Web-сторінка) — це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить інформацію для публікації в World Wide Web.

Код HTML дуже компактний, і HTML-документи мають значно менший розмір, ніж документи, підготовлені в текстових процесорах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування інформації, що розповсюджується по Інтернету.

HTML-документи розміщаються в WWW не поодинці, а у виді так званих сайтів.

Web-сайт — це сукупність Web-сторінок (десятків, сотень, навіть тисяч), об'єднаних однією загальною темою і поміщених, як правило, на одному вузловому комп'ютері.

1.3. Програми для створення HTML-файлів

Документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад, у додатках Блокнот чи WordPad, що входять до складу ОС Windows. Однак нині існують більш зручні та розвинуті програми підготовки HTML-документів. Їх умовно можна розділити на візуальні редактори HTML і редактори HTML-текстів. Вибір редактора, що буде використовуватися для створення HTML-документів, залежить винятково від поняття зручності й особистих пристрастей кожного автора.

Працюючи у візуальному HTML-редакторі, користувач має справу з графічними образами елементів HTML, а не з кодом документа. Він може шляхом перетягування мишею і простими операціями в інтерфейсі розміщати на сторінці необхідні елементи. Завдяки цьому навіть користувачеві, що не знає мови HTML, під силу створювати прості Web-сторінки. До візуальних редакторів HTML належать програма FrontPage фірми Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold та ін. З іншого боку, більшість традиційних засобів для створення документів мають конвертери, що дозволяють перетворювати документи до формату HTML.

Редактори власне HTML-текстів, серед яких найбільш відомі HomeSite і HotDog, мають основні можливості текстових редакторів (використання буфера обміну, засобів пошуку слів тощо). Але, на відміну від звичайних редакторів тексту, ці додатки надають у розпорядження розроблювача візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів дають можливість користувачеві швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і налагодження сторінки, не залишаючи вікна редактора.

При створенні сайта користувач звичайно сам визначає, працювати йому в візуальному чи в HTML-редакторі, вручну складаючи HTML-код. Але при цьому потрібно врахувати, що ефективно керувати HTML-документами і вирішувати питання Web-дизайну можна тільки використовуючи мову розмітки.

Контрольні запитання:

1.      Що таке WWW?

2.      Для чого призначені програми броузери?

3.      Дайте визначення гіпертекстового документа.

4.      Для чого призначені посилання в гіпертекстовому документі?

5.      Дайте визначення поняттю "гіпермедіа".

6.      Що таке мова HTML?

7.      Що називають Web-сторінкою?

8.      Що таке Web-сайт?

9.      З допомогою яких програм можна створити Web-сторінку

§2. Розробка Web-сайту

Ключові слова:

Деревоподібна структура сайту, лінійна структура сайту, Web-сервер, хостинг.

2.1. Попередні етапи розробки сайту

Приступаючи до розробки свого сайту, потрібно чітко уявити собі його призначення. Звичайно сайти створюються для того, щоб заявити про себе чи про свою організацію, повідомити про результати роботи чи про свої досягнення, налагодити ділові зв'язки, дати рекламу про товари чи послуги тощо.

Крім призначення сайту, потрібно визначити коло його потенційних відвідувачів, тобто аудиторію, на котру розрахований ваш сайт.

Наступним етапом буде підбір матеріалу. Не весь матеріал по тематиці сайту, що ви маєте, варто публікувати в Інтернеті. Потрібно оцінити якість матеріалу та його цікавість для відвідувачів. Відібраний матеріал розділіть по темах — ці теми будуть визначати розділи майбутнього сайту. Якщо матеріалу по кожній темі набирається досить багато, розсортуйте його за ступенем важливості.

При плануванні сайту, призначеного для якої-небудь організації, немаловажним є питання фінансування робіт.

2.2. Розробка структури сайту

Матеріали, що ви плануєте опублікувати на сайті, потрібно організувати у визначену структуру. Найчастіше для Web-сайтів обирається деревоподібна структура організації інформації. На верхньому рівні знаходиться початкова сторінка сайту, з якої відвідувач за допомогою меню чи посилань може переходити на сторінки наступного рівня. Деревоподібна структура може складатися з декількох рівнів підпорядкування.

Приклад структури сайту: Широке дерево

Дуже важливо визначити оптимальне співвідношення між кількістю рівнів (глибиною коренів чи висотою дерева) і кількістю варіантів вибору на кожному рівні (шириною дерева). Якщо дерево виявиться дуже широким, то відвідувачеві важко буде орієнтуватися в поданій інформації й утримувати у пам'яті безліч варіантів вибору. Якщо ж рівнів буде багато, то відвідувачу доведеться довго «докопуватися» до потрібної йому інформації. Для цього він має зробити безліч клацань мишею і дочекатися завантаження проміжних сторінок.

Щоб полегшити подорож усередину сайту, на сторінках верхнього рівня розміщають посилання, що можуть перевести відвідувача відразу ж до сторінок нижнього рівня. На глибоких сторінках також можуть розміщуватися посилання для зворотного переходу вгору по ієрархічних рівнях сайту.

Приклад структури сайту: Вузьке дерево

Іноді для сайту замість деревоподібної структури доцільно вибрати структуру у вигляді простого ланцюжка (лінійна структура). При цьому перехід з кожної сторінки може здійснюватися тільки в двох напрямках: на наступну і на попередню сторінки. Для цього на сторінках розташовуються кнопки Вперед та Назад, — за допомогою їх легко переглядати розділи книги чи набір фотографій. На практиці лінійна структура застосовується в поєднанні з різними відгалуженнями й альтернативними переходами.

Приклад лінійної структури сайту: лінійний ланцюжок

Відвідувач може скласти уявлення про структуру сайту за допомогою засобів навігації: списків-посилань, меню і т.д. Для кращої орієнтації відвідувачів до складу сайту може бути включена окрема сторінка, так звана карта сайту.

2.3. Збирання файлів Web-сайту

Коли ви підготували матеріали і подали у вигляді схеми структуру вашого сайту, можете приступати безпосередньо до розробки, тобто до складання HTML-коду. У результаті на диску вашого комп'ютера будуть створені файли Web- сторінок, а також будуть розміщуватися файли впроваджених об'єктів (зображень, аудіо, відео).

Скопіюйте всі файли в окрему папку і назвіть її, наприклад, Website. У цій папці має бути файл index.html, що подає початкову сторінку сайту. Інші файли папки Website містять HTML-код інших сторінок (файли з розширенням .html). Імена усіх файлів повинні бути набрані малими латинськими буквами.

У папці сайту бажано передбачити папку, у якій будуть зберігатися зображення у форматі GIF чи JPEG.

Якщо при формуванні папки сайту ви перейменовували файли, простежте, щоб відповідні зміни були внесені й у код HTML сторінок. Після цього завантажте початкову сторінку сайту в броузер (Internet Explorer або Netscape Navigator) і переконайтеся, що всі переходи на інші сторінки сайту працюють, сторінки відображаються потрібним чином, а малюнки виводяться на сторінки. Якщо яка-небудь сторінка чи малюнок не відображаються, то, мабуть, ви помилилися у написанні імен файлів. Виправте ці помилки, і ще раз перевірте роботу сайту.

2.4. Вибір Web-серверу

Коли ви створили свій невеликий сайт, вам потрібно вибрати Web-сервер, на якому цей сайт буде розміщений.

Web-сервер виконує збереження, пошук і обмін файлами в WWW. Наприклад, коли клієнт Web запитує файл із WWW, програма броузера відправляє цей запит на Web-сервер, на якому знаходиться даний файл. Сервер відшукує файл на своїх дисках і відправляє його комп'ютеру-клієнту, від якого був отриманий запит. Обмін інформацією між клієнтом і Web-сервером відбувається відповідно до протоколу HTTP — загального протоколу, що відповідає за функціонування World Wide Web.

Web-сервер — це комп'ютер, що працює під керуванням однієї з операційних систем UNIX, Windows NT, Macintosh і на який установлена спеціальна програма Web-cepвepy.

Найбільш поширеною програмою Web-серверу є Apache Server, яка працює швидко і встановлюється безкоштовно (див. вузол www.apache.org). Часто використовуються також програми TomCat, Microsoft IIS, NCSA та ін. За допомогою однієї з таких програм свій Web-сервер може створити будь-яка організація, училище і навіть приватна особа. Однак це не завжди виправдано, оскільки повноцінний Web-сервер повинен мати швидке з'єднання з Інтернетом (наприклад, через виділену лінію) і повинен працювати цілодобово. Тому користувачі вирішують проблему Web-серверу за допомогою сторонніх організацій — фірми вашого провайдера чи спеціалізованих фірм, які займаються хостингом.

Хостинг (від англ. слова hosting—- спільне розміщення) — це розміщення Web-сайту на обладнанні компанії. Ресурси серверу і лінії зв'язку використовуються спільно безліччю клієнтів.

При виборі стороннього Web-серверу керуються двома основними критеріями: ціною і продуктивністю. У професійних розробників Web-сайтів вибір визначається можливостями замовника і стосунками з компаніями, що володіють Інтернет-серверами.

Нині з'являється усе більше Web-серверів, що здійснюють безкоштовний хостинг (наприклад, російськомовні сервери www.chat.ru, www.narod.ru, і www.boom.ru). Такі сервери не вимагають оплати за підтримку Web-сайтів клієнтів і існують за рахунок рекламодавців. Зареєстрованому клієнту дається обмежений, але достатній простір на диску серверу — від 5 до 50 Мбайт. На ньому клієнт може розмістити як невеликий, так і солідний сайт. Єдине зобов'язання, що бере на себе клієнт безкоштовного Web-серверу, це розміщення на своєму сайті банерів — маленьких помітних зображень (часто анімованих), призначених для реклами. Утім, згоди клієнта на це, як правило, не запитують — банери вставляються й обновляються без участі власника сайту.

Безкоштовні Web-сервери мають також обмеження у наданому сервісі: вони, як правило, не підтримують сучасні Інтернет-технології PHP, JSP, ASP та ін. Однак свій сайт, що містить звичайні файли HTML, ви зможете розмістити на безкоштовному сервері без особливих проблем.

Контрольні запитання:

1.        У чому полягає попередня робота зі створення Web-сайту?

2.        Що таке структура сайту?

3.        Як можна визначити структуру нового для вас сайту?

4.        Які розбіжності є між сайтами з лінійною і з деревоподібною структурами?

5.        У якому вигляді має існувати сайт перед його безпосереднім розміщенням в Інтернеті?

6.        Що таке хостинг і які види його вам відомі?

Висновки

1.     Найбільш розвинута і найбільш популярна служба Internet — World Wide Web (WWW) або просто Web. Ця служба для передачі даних використовує протокол HTTP. Документи, які використовуються в цій службі, повині мати особливу структуру. Їх називають Web-сторінками.

2.     Кожна Web-сторінка у всесвітній мережі має унікальну адресу. Ця адреса називається адресою URL. Вона включає ім’я сервера, на якому дана Web-сторінка опублікована, і шлях пошуку сторінки на жорсткому диску даного сервера.

3.     Тематично однорідна група Web-сторінок утворює Web-сайт.

4.     Основою для створення Web-сторінок є мова розмітки гіпертексту HTML. Гіпертекст відрізняється від звичайного тексту тим , що в нього вбудовані спеціальні коди, які зв’язують активний Web-документ з іншими Web-документами. Такі коди називаються гіперпосиланнями.

5.     Для роботи з Web-документами використовується спеціальний клас програм, серед них програми для перегляду Web-сторінок — броузери.

6.     Web-сторінка представляє собою вихідний текст з імплантованими в нього тегами. Таким чином, Web-сторінка є звичайним текстом і тому може створюватись і редагуватись засобами найпростіших текстових редакторів.

7.     Процес створення Web-сторінок — це творча робота, успіх якої залежить як від особистих талантів автора, так і від його рівня досвіду.

Схожі:

Урок із спецдисциплін операторів комп’ютерного набору Урок-конкурс «Найкращий оператор!» ...	Мета: заміщення посади дизайнера в сфері поліграфії, web-дизайну, дизайну інтер'єру чи ін ...
Основі принципу дизайну слайдів Напрямки дизайну У процесі розробки дизайну об’єкта, наприклад комп’ютерної презентації, виділяють кілька етапів	Керівництво підготовкою та проведенням конкурсу покладається на ОЦТТУМ ...
Основи веб-дизайну. Огляд технологій та сервісів Веб Веб-спільноти. Вікі технології ТЕМА: Основи веб-дизайну. Огляд технологій та сервісів Веб Веб-спільноти. Вікі технології	Основи роботи в Microsoft Office FrontPage 2003 В даний час створення власного або корпоративного віртуального представництва в Internet не є складною задачею навіть для початківців...
Змістовий модуль 3: «Основи діагностики, лікування та профілактики... Змістовий модуль 3: «Основи діагностики, лікування та профілактики основних хвороб органів дихання»	РОЗРОБКА ЗАСОБІВ УПРАВЛІННЯ КОМПОНЕНТАМИ СИСТЕМИ ЕЛЕКТРОННОЇ КОМЕРЦІЇ В наш час поєднання “життя” реального підприємства з Web-ом, проблема управління контентом (вмістом) Web-сайту стає все гострішою....
1. Фінансовий ринок: сутність, функції і роль в економіці МОДУЛЬ І. Основи функціонування фінансового ринку та характеристика його суб’єктів	Календарне планування курсу «Основи веб-дизайну» для ІІ-го курсу на 2011-2012 н р Структура веб-сайтів, різновиди веб-сторінок. Реєстрація веб-сайту на сервері безкоштовного хостинга

Додайте кнопку на своєму сайті:
Портал навчання