Створення web-сторінки

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.


Нажми чтобы узнать.
скачати

ЯК СТВОРИТИ WEB-СТОРІНКУ

Найпростіший спосіб створити сторінку для розміщення в Інтернеті - скористатися інструментами пакета Microsoft Office. Останні версії цього пакета надають можливість перетворити звичайний документ у HTML-формат з непоганим якістю коду.

Можливості Word

Підготовлений у текстовому редакторі Word документ можна легко перетворити на web-сторінку. Однак вона буде виглядати не так привабливо, як хотілося б, якщо не вжити додаткові кроки. Розглянемо кілька прикладів.

Візьмемо деякий текст.

Перетворимо документ у web-сторінку за допомогою операції Зберегти як web-сторінку ... (викликається з головного меню - позиція Файл). Тоді html-подання документа буде мати вигляд:

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

Використання таблиці

Можна в цьому випадку вчинити зовсім просто: завести у вихідному документі таблицю і помістити в неї потрібний текст. У таблиці можна задати рамку. Тоді вид web-сторінки набагато покращиться, і в браузері сторінка буде виглядати привабливіше.

Фон і стиль

Можна піти далі - наприклад, змінити колір і фактуру фону, вигляд гіперпосилань, оформлення списків. Для зміни загального дизайну сторінки можна скористатися командою Тема з розділу головного меню Формат.

Бажано вибрати не надто яскравий фон, щоб на ньому добре читався текст. Таким фоном в запропонованому списку є, наприклад, Рисова папір. Вид сторінки помітно преобразився:

Вставка картинки

У документ можна додати картинку, взявши її, приміром, з колекції кліпів.

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

Якщо ви вставляєте картинку всередину абзацу, то краще змінити властивості картинки, задавши обтікання тексту навколо картинки (потрібно вибрати позицію головного меню Формат і далі Малюнок):

У документі при цьому не буде створюватися зайвого пустого простору.

Нарешті, можна додати картинці рамку і тінь з допомогою кнопок на панелі Малювання - Тип лінії і Стиль тіні. Подібні нюанси помітно додають виразності сторінці.

Якщо панелі Малювання немає на сторінці, то потрібно встановити її, вибравши позицію головного меню Вид і далі Конфіденційність та Малювання.

Та, що біжить рядок

Word дозволяє внести на web-сторінку і інші оформлювальні елементи, наприклад "біжучий рядок". Щоб скористатися цією можливістю потрібно відкрити на екрані панель web-компонентів (з головного меню - позиція Вид, далі Конфіденційність та Веб-компоненти). Клацання по кнопці операції Біжучий рядок відкриває додаткове вікно для завдання тексту параметрів біжучого рядка.

Як завжди, в рядку можна поміняти шрифт і атрибути: розмір шрифту і колір символів. Web-сторінка буде виглядати на екрані таким чином:

Ми навели приклад лише дуже скромного набору дизайнерських прийомів, за допомогою яких можна оформити web-сторінку на основі наявного документа у форматі Word.

Використання шаблонів оформлення

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

Далі в пропонованій заготівлі документа ви повинні ввести тексти та малюнки:

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

Створення гіперпосилань і закладок

Останнє питання, яке ми плануємо розглянути в даному розділі - створення гіперпосилань у документі.

Якщо ми хочемо послатися в документі на інший документ чи інший сайт в Інтернеті, то таку гіперпосилання можна зробити так: виділити в документі фрагмент тексту (слово) і виконати операцію Вставка - Гіперпосилання ... На екрані з'явиться форма, в якій задається адреса гіперпосилання. Адреса можна ввести явно чи можна вибрати файл у вікні.

Тут слід пам'ятати, що адреса обраного файлу на вашому комп'ютері може змінитися, коли ви будете формувати свій сайт. Тому неявний спосіб завдання адреси підходить тільки в тому випадку, якщо структура вашої папки на комп'ютері та на сайті Інтернету збігаються.

Якщо гіперпосилання має посилатися на іншу частину цього ж документа, то попередньо потрібно вставити закладку на початку потрібного фрагмента. Потрібно виконати операцію Вставити - Закладка, і в що з'явилася на екрані формі ввести ім'я закладки.

Тоді при створенні гіперпосилання потрібно вказати цю закладку (кнопка Закладка ... розташована в правій частині форми), вибравши, наприклад, її зі списку у формі:

Веб-презентація в PowerPoint

Програма PowerPoint орієнтована на створення презентацій на комп'ютері. Однак у неї є функція перетворення підготовленої презентації у веб-формат.

Ви можете відкрити підготовлену презентацію та виконати операції (з головного меню) Файл - Зберегти як веб-сторінку. Як завжди потрібно задати ім'я веб-презентації у вікні,. В результаті виконання перетворення презентації буде створено файл із заданим ім'ям і розширенням. Htm і однойменна папка з додатковими матеріалами.

Якщо тепер з браузера викликати веб-презентацію, то на екрані можна побачити результат перетворення.

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

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

За допомогою кнопки Показ слайд можна переглядати слайди на повному екрані.

Створення гіперпосилань

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

Нехай у нас є кілька заготовлених слайдів на тему рослинного світу Байкалу, складених з колекції фотографій. Створимо новий слайд - зміст колекції.

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

На новий слайд помістимо зменшені копії всіх фотографій. Найпростіше це зробити самим прямолінійним способом: на порожній слайд послідовно скопіювати всі фотографії колекції, зменшити їх розмір і розмістити, наприклад, у дві лінії. Картинки можна буде в подальшому оформити рамками з тінню. На слайд-зміст можна додати назву презентації. Вид презентації в режимі Сортувальник слайдів наведено нижче:

Перейдемо в звичайний режим перегляду слайдів (команди Вид і далі Звичайний). На слайді-змісті виділимо фотографію і виконаємо команду Вставка - Гіперпосилання. У вікні, задамо перехід за гіперпосиланням - номер слайда з великою фотографією, з якою був скопійований менший зразок для змісту.

Аналогічно зв'яжемо інші картинки на слайді-змісті з відповідними слайдами за оригіналами фотографій.

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

Залишилося зовсім трохи вдосконалити нашу структуру. Додамо на кожен слайд з фотографією в його верхню ліву частину стрілку (Автофігура на панелі інструментів Малювання), і зробимо з цієї стрілки гіперпосилання, виконує перехід на слайд-зміст. Тепер рух по створеній нами структурі гіпермедіа стане "двостороннім": зі змісту можна перейти на слайди з фотографіями, і з будь-якого слайду повернутися на зміст.

Після виконання перетворення презентації у веб-формат наша перша сторінка буде мати вигляд:

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

Огляд редакторів для верстки веб-сторінок

Існує багато інструментів для верстки веб-сторінок, з яким з них будете працювати ви - вибирати вам же. Я рекомендую вам випробувати різні редактори, і тільки тоді вже вирішувати, з яким вам краще працювати.

У цій статті я дам короткий огляд по найбільш популярним редакторам, щоб допомогти вам зорієнтуватися. Крім того я наведу корисні посилання по кожній програмі: сайт розробника, де можна придбати / завантажити в інтернет цей редактор, посилання на навчальні програми та інструкції по роботі з редактором.

Редактори для верстки веб-сторінок буваю двох типів: візуальні і текстові.

Візуальні редактори не вимагають від вас знань html, css та інших технологій для розмітки сторінок. У візуальному редакторі ви маєте в своєму розпорядженні різні елементи вашого сайту, як ніби на аркуші паперу, а редактор пише за вас код самостійно. Саме тому візуальні редактори ще називають WYSIWYG-редакторами. Абревіатура WYSIWYG розшифровується як What You See Is What You Get - що бачиш, те й отримуєш.

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

Якого ж типу вам слід заводити редактор? Якщо ви вивчаєте html, css або інші технології для розмітки сторінок, якщо ви хочете вміти створювати якісні сторінки і бути професійним кодером, то безумовно вам потрібен текстовий редактор. Якщо ж у вас немає часу на вивчення html, css та інших технологій, якщо перед вами не варто дуже складних завдань у виконанні сторінки, то сміливо заводите собі візуальний редактор і користуйтесь ним, він дуже економить час і сили. А краще всього мати у себе на комп'ютері і візуальний, і текстової редактори для різних потреб.

Візуальні редактори

Macromedia Dreamweaver MX

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

Розробники стверджують, що Macromedia Dreamweaver MX призначена для проектування, розробки та адміністрування професійних web-сайтів і додатків. Крім того Dreamweaver легко інтегрується з іншими програмами від Macromedia, наприклад, такими, як Flash. Тобто Dreamweaver набагато більше, ніж просто візуальний редактор, це досить потужний і складний інструмент, а кожен складний інструмент вимагає, щоб на його освоєння було витрачено якийсь час, перш, ніж користувач зможе працювати в ньому. Однак, я вважаю, що вас не повинно бентежити, що доведеться вивчати, як користуватися програмою, Dreamweaver варто того.

Adobe GoLive і LiveMotion

Можливо, Adobe GoLive сподобається тим, хто любить програми від Adobe, і багато з ними працював: знайома середа, досить легко розібратися, що до чого. Крім того, ще один плюс для любителів Adobe - всі програми від Adobe чудово взаємодіють один з одним і доповнюють один одного, GoLive не виняток, він чудово дружить з побратимами. Однак, GoLive не більше, ніж візуальний редактор для верстки веб-сторінок, більше ніж підтримки таких технологій, як Html, Dhtml, CSS, XML і декількох готових Javascript `ів не варто чекати від цієї програми. Однак, слід зазначити, що вбудований редактор коду (текстової) у цій програмі дуже хороший. Тобто можливо, GoLive оптимальне поєднання візуального і текстового редактора (два в одному).

Хочу також додати, що, ймовірно, варто використовувати з GoLive таку програму, як Adobe LiveMotion (у попередніх версіях вона називалося Image Styler). Хоча, за ідеєю, LiveMotion є графічним редактором, в якому ви можете створювати невигадливу, але якісну графіку для своїх веб-сайтів, ця програма також вміє верстати веб-сторінки, на основі того, що ви намалювали (не кращим чином, але досить пристойно , плюсом є те, що LiveMotion сам ріже готовий макет на багато картинок, які ви потім можете використовувати при верстці сайту в GoLive).

Microsoft FrontPage

Якщо вірити розробникам, то програма FrontPage дозволяє створювати веб-вузли, що володіють широкими можливостями, а також надає засоби управління ними. На ділі, FrontPage дружить з Html, Css, Dhtml, Javascript. Дає досить широкі можливості по управлінню зображеннями і flash-роллікамі. Крім того FrontPage дружить з такими технологіями, як ASP, XML, VBScript, XSL. Також розробники стверджувала, що в останній версії FrontPage тепер бореться за чистоту коду, що ж, залишається сподіватися, що це так, тому що раніше даний пункт був не на висоті (раніше FrontPage вставляв у код дуже багато непотрібних коментарів та іншої зайвої інформації, так що правильністю і чистотою коду сторінки, зроблені в цьому редакторі похвалитися не могли).

Hotdog

Програма має простий і зрозумілий користувачеві інтерфейс. Крім того, що Hotdog дружить з користувачем, ця програма дружить також з Flash, SQL, PHP, ASP, має працювати з GIF-зображеннями (оптимізація, анімація), включає в себе Html-компресор, може створювати файли довідки (CHM).

ТЕКСТОВІ РЕДАКТОРИ

Homesite

Цей редактор, мабуть, самий популярний і потужний серед текстових, і не дарма. Крім того, що в ньому досить легко працювати не тільки з Html-кодом (є все, від списку всіляких атрибутів до всіх тегам аж до перевірки коду (правильність перевіряється з точки зору W3C.org)), але також є підтримка XHTML, CSS- редактор, і так далі.

HTML Pad

Ця програма теж користується великою любов'ю користувачів. Крім усього стандартного HTMLPad підтримує JavaScript, VBScript, SSI, ASP і Perl, вміє створювати макроси (нападобіе Word `a і Excel'я), включає в себе купу різних довідкових матеріалів по CSS і Html, і багато іншого.

Notepad

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

За сим все. Якщо у вас не дуже хороша і швидка зв'язок з інтернет, щоб завантажити редактори, то ви можете купити їх у магазині, де продаються програми для комп'ютера.

Якщо ви вважаєте, що якийсь редактор для верстки веб-сторінок був несправедливо упущений у цій статті, якщо ви знаєте цінний підручник або статтю по якому-небудь редактору, якщо ви вважаєте, що ми незаслужено насварили або похвалили той чи інший редактор, то повідомте нам про це на Форумі, або по Е-майл (admin@postroika.ru), ми обов'язково прислухаємося до вашої думки і постараємося виправитися.

Додати в блог або на сайт

Цей текст може містити помилки.

Програмування, комп'ютери, інформатика і кібернетика | Реферат
39.9кб. | скачати


Схожі роботи:
Створення простої web сторінки
Створення простої web-сторінки
Web-Дизайн і програми для створення web-сторінок
Аналізатор колірного набору для WEB-сторінки
Створення WEB
Створення Web-сайту
Створення Web-документа
Основи створення Web-сторінок
Принципи створення Web-сторінок
© Усі права захищені
написати до нас
Рейтинг@Mail.ru