decoroom.info - створи сайт безкоштовно!

:: Меню ::


Головна

Новости
1. Як створюють веб-сторінки
1.1 Як створюють веб-сторінки
1.2. Як розмістити веб-сервер-сторіночку на сервері
1.3. Як написати веб-сторінку
1.4. Огляд програм для проглядання веб-сторінок
1.5. Огляд програм для створення веб-сторінок
1.6.(Частина-I) Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion
1.6.(Частина-II)Автоматизація введення

2. Основні засоби мови htmL
2.1. Просте форматування тексту
2.2. Найголовніше на будь-якій веб-сторінці - гіперпосилання
2.3. Як створити списки на веб-сторінці
2.4. Створення таблиць
3. Графіка на веб-сторінці
3.1.(Частина-I) Основні способи застосування графіки
3.1.(Частина-II)Зображення-карта
3.2. Графічні формати Інтернету
3.3. Графічні елементи оформлення веб-сторінок
3.4. Графічні маркери
3.5. Підготовка малюнків в програмі Xara Webstyle
3.6.(Частина-I)Підготовка малюнків в програмі Adobe Photoshop
3.6.(Частина-II)Прикраса зображення дрібними деталями
4. Оформлення веб-сторінки з використанням стилів
4.1. Оформлення за допомогою атрибуту STYLE
4.2. Визначення стилів в спеціальній таблиці
4.3. Огляд інших можливостей стильових таблиць
5. Використання звуку на веб-сторінці
5.1. Додавання звукового оформлення
5.2. Програми для стиснення звукових фрагментів
5.3. Маленькі хитрощі
6. Динамічні веб-сторінки на основі JavaScript
6.1. Прості приклади
6.2. Як писати власні функції
6.3. Динамічна зміна зовнішнього вигляду сторінки
6.4. Інші можливості мови JavaScript
7. Веб-сторінки, що реагують на дії користувача
7.1. Введення даних користувачем у форми htmL
7.2.(Частина-I)Сторінка, керована за допомогою миші
7.2.(Частина-II)Динамічне управління позиціонуванням елементів
7.3. Сторінка, керована з клавіатури
7.4.(Частина-I)Динамічне відображення тексту веб-сторінки
7.4.(Частина-II)Використання інших властивостей при роботі з текстом
7.5. Динамічна зміна графічних елементів веб-сторінки
8. Розміщення елементів на веб-сторінці і навігація по сайту
8.1. Використання структури фреймів
8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць
9. Додаткові можливості формування веб-сторінок
9.1. Приклад використання елементу управління Tabular Data
9.2. Приклад простого серверного сценарію
Цікаві сайти!
Карта сайту xml

Карта сайту htm

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Контакти
Додати у вибране

:: Друзі:

Biz-nes.info самовчитель по веденню бізнесу в інеті
Каталог
літня сукня жіноча моделі diadia.ua своє виробництво
 

:: Статистика ::

 

 

 

 

 

 

літня сукня жіноча моделі diadia.ua своє виробництво

Автоматизація введення

Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы. Элементы управления, представленные на этой панели, предназначены для автоматизации ввода элементов веб-страницы. Элементы управления сгруппированы в несколько вкладок:

• Common — для введення тегов, які використовуються найчастіше;

• Fonts — для зміни параметрів шрифту;

• Tables — для створення таблиць;

• Frames — для створення фреймових структур;

• Lists —для створення списків;

• Forms — для введення елементів форм;

• Script — для підготовки до введення сценаріїв, Java-аплетів і елементів ActiveX;

• CFML—для введення тегов ColdFusion;

• ASP — для визначення деяких елементів динамічних сторінок active server pages;

Linkbot — для автоматичної перевірки посилань за допомогою зовнішньої програми Linkbot.

Якщо на панелі QuickBar видно не всі вкладки, клацніть на ній правою кнопкою миші, і в меню, що відкрилося, відзначте ті вкладки, які хочете зробити видимими. Детально розбирати всі вкладки панелі Quick Bar ми тут не будемо, але загальний принцип роботи з ними розглянемо.

На кожній вкладці представлені командні кнопки, за допомогою яких можна швидко ввести потрібний тег або цілий блок-заготівку. Наприклад, якщо перед вами абсолютно чиста сторінка, натисніть на найлівішу кнопку вкладки Common - це кнопка Quick Start (Швидкий старт). Із списку, що відкрився, можна вибрати тип документа і швидко згенерувати його .HTML-заголовок. А якщо натиснути другу кнопку тієї ж вкладки - кнопку Body, то відкриється діалогове вікно, в якому можна змінити властивості поточної сторінки. Наочно, за допомогою списку, що розкривається, організований вибір кольору тексту і фону, а якщо жоден із запропонованих квітів не підходить, командою Custom (Набудувати) можна відкрити повну палітру доступних квітів. У невеликому вікні справа можна побачити, як виглядатиме вибране колірне поєднання.

Для вибору фонового малюнка служить кнопка, розташована поряд з полем Background Image (Фоновий малюнок). Вона відкриває стандартне вікно вибору файлу з можливістю його попереднього перегляду. Звичайно, можна ввести назву графічного файлу і просто з клавіатури.

Для введення значення атрибуту STYLE= також можна скористатися розкриваючою кнопкою відповідного поля. При цьому відкривається вікно зовнішньої програми TopStyle. Це ж вікно відкриватиметься при кожній установці атрибуту STYLE= для будь-якого тега або при редагуванні стильового блоку. У його правій частині знаходиться панель Інспектора стилів (Style Inspector), на якій в алфавітному порядку приведені всі доступні властивості стилів. Звернете увагу на те, що набір доступних властивостей можна змінювати відповідно до своїх запитів. Це може бути повний набір із специфікації CSS рівня 1 або 2, або набір властивостей, підтримуваних різними версіями броузеров. Необхідний набір можна вибрати із списку, що розкривається, в Інспекторові стилів.

Значення доступних властивостей стилів можна вибирати в Інспекторові за допомогою списків, що розкриваються. Правда, деякі значення, наприклад цифрові значення параметрів у відповідних діалогових вікнах, краще все-таки вводити уручну. Всі зміни значень тут же відображаються в лівій частині вікна TopStyle. Після закінчення настройки натисніть кнопку Done (Готово) - і відповідний текст з'явиться в полі введення Style (Стиль). Тепер звернете увагу на ще одну особливість вікна Body . На його нижній панелі (там, де є поля Left Margin, Top Margin і Fixed Background) зображений значок броузера Internet Explorer 4. Наявність цього значка означає, що атрибути, представлені в даному розділі, будуть ( працювати тільки в цьому броузере.

До цього питання ми ще повернемося, а поки натисніть кнопку ОК, і ви побачите, що всі встановлені атрибути тега <BODY> з'явилися в тексті, наприклад, от так:

<BODY TEXT="Blue" BACKGROUND="arrowl.gif" BGCOLOR="Fuchsia" LINK="Aqua" VLINK="Black" ALINK="Gray" STYLE="background-position: right;

border-style: dotted; background-repeat: repeat-y;">

Діалогові вікна редагування тегов

Про те, що це все означає, ми поговоримо в наступних розділах, а поки що розглянемо ще одне типове діалогове вікно програми. Відкрийте вкладку Tables і натисніть кнопку Table dialog - зазвичай вона друга зліва. Відкриється діалогове вікно пелактопа тегов ТagEditor — TABLE

— Internet Explorer 3;

— Netscape Navigator 3;

—Internet Explorer 4;

— Netscape Communicator 4;

— броузер Opera (мається на увазі версія 3.5).

Як правило, властивості, які підтримуються яким-небудь типом броузера нижчої версії, підтримуються і в його подальших версіях, тобто, якщо значок показує, що той або інший атрибут підтримується в броузере Internet Explorer 3, то це означає, що він, швидше за все, підтримуватиметься також і в броузере Internet Explorer 4 або в п'ятій версії. Проте броузери інших типів, навіть більш старших версій, підтримувати цей атрибут, швидше за все, не будуть.

Крім того, в подібних діалогових вікнах є вкладка HTML 4.0, на якій можна встановлювати значення нових атрибутів, стандартизованих в четвертій версії мови HTML. Якщо який-небудь з цих “ нових ” атрибутів підтримувався і в раніших версіях деяких броузеров, то на цій вкладці ви побачите розділ Also in: (А також в...), у якому ці броузери позначені за допомогою значків.

Додатково, дане діалогове вікно містить ще три вкладки. Засоби вкладки Style Sheets/Accessibility (Списки стилів) служать для установки значення атрибуту STYLE= (за допомогою зовнішньої програми TopStyle, як вже мовилося вище) або для визначення стильового селектора (CLASS) і ще деяких пов'язаних з цим атрибутів. Засоби вкладки Language (Мова) призначені для установок, пов'язаних з мовою тексту, і, нарешті, засобу вкладки Events (Події)

Відзначимо ще одну корисну особливість програми HomeSite. У ній можна клацнути усередині будь-якого тега правою кнопкою миші і вибрати з контекстного меню пункт Edit Tag (Правка тега). Після цього відкривається діалогове вікно Редактора тегов (Tag Editor), в якому теж дуже зручно встановлювати значення всіх доступних атрибутів.

До речі, ще одна цікава можливість полягає в тому, що теги І можна “згортати” командою Collapse Tag (Скрутити тег) з контекстного меню. При цьому вміст тега (все, що знаходиться між його відкриваючим і закриваючим елементами, наприклад, між <BODY> і </BODY> ) згорнеться в невеликий значок-кнопку. Це корисно при редагуванні великих файлів, якщо треба швидко окинути поглядом вміст всій веб-сервер.

Принаймні, вони не зобов'язані цього робити.

межі. У контекстному меню є також команда Collapse All Identical QS (Скрутити все ідентичні теги), яка згортає вміст всіх тегов, ідентичних даному по імені. Наприклад, якщо при подачі цієї команди був виділений тег <TR>, то в значки згорнеться вміст всіх гов <TR>, наявних у файлі. Щоб знову розвернути ці значки в текст, клацніть правою кнопкою миші в будь-якому місці панелі редагування і виберіть в контекстному меню пункт Expand All (Розвернути все).

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

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

Для створення графічної карти посилань служить кнопка New Image Map (Створити зображення-карту) на верхній панелі інструментів. Вона відкриває діалогове вікно, в якому можна вибрати яке-небудь зображення, що вже є на сторінці, або завантажити нове. Після цього відкривається вікно редактора графічної карти посилань (Image Map Editor)

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

інструменту Стрільця можна легко відредагувати місцеположення заданий них областей. Після визначення кожної області автоматично откри ваєтся вікно, в якому вибирають URL-адреси гіперпосилань (атрибут HREF= тега <AREA>). Таким чином, створення графічної карти посилань пре обертається з складного і утомливого заняття (яким воно завжди раніше вважалося) в легку і приємну процедуру.

Отже, ми розглянули деякі корисні можливості панелі редак тірованія. Проте крім вкладки Edit (Правка) на ній є ще дві вкладки.

Попередній перегляд сторінки

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

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

Вбудований броузер рекомендується використовувати тільки в тих випадках, коли немає ні Internet Explorer версії хоч би 3.01 (раніші версії цього броузера не здатні вбудовуватися в Homesite), ні Netscape. Вбудований броузер не підтримує ні фрейми, ні сценарії, ні більшість ново введень HTML 4.0. Крім того, у нього іноді (хоч і рідко) виникають проблеми з відображенням російських шрифтів.

Навпаки, використовувати броузери Internet Explorer або Netscape як внутрішнього засобу перегляду дуже зручно, оскільки так можна про- подивлятися вміст своєї веб-сторінки в “справжньому” броузере, не запускаючи зовнішню програму. Втім, проглядання сторінки в зовнішньому броузере теж передбачене. Для цього служить кнопка із значком External Browser (Зовнішній броузер) на інструментальній панелі. Натиснувши на неї, можна побачити список зовнішніх броузеров, встановлених на комп'ютері, і, вибравши із списку який-небудь броузер, проглянути в нім вміст сторінки. Якщо ніяких броузеров в списку не немає, їх можна додати уручну командою Options > Configure External Browsers (Параметри > Настройка зовнішніх броузеров). А для того, щоб вказати, який броузер використовуватиметься як внутрішній, виберіть з меню Options (Параметри) пункт Settings (Настройки) і далі в лівій частині вікна, що відкрилося, - пункт Browse (Перегляд).

Дретья вкладка панелі редагування - Design (Оформлення). Її засоби надають редактор веб-сторінок, WYSIWYG, що працює за принципом. Оскільки свого вбудованого WYSZWYG-редактора в програмі Homesite немає, використовуються засоби, вбудовані в броузер Internet Explorer 4.01. Якщо на комп'ютері немає цієї (або пізнішій версії) програми, засобами вкладки Design (Оформлення) скористатися не можна. Проте ми і так не рекомендуємо ними користуватися, оскільки після цього важ початковий код може бути переформатований, аж до заміни одних тегов іншими, без можливості відновлення. Крім того, з відображенням російських шрифтів тут теж іноді виникають проблеми. До речі, якщо вибрати в меню Options (Параметри) пункт Settings (Настройки) і далі пункт Design (Оформлення), то можна встановити прапорець Disable (hide) design tab (Приховати вкладку Оформлення), щоб взагалі прибрати цю вкладку з екрану. Про всяк випадок.

У програмі Homesite є ще багато цікавих можливостей, таких, як автоматична зміна розміру вікна внутрішнього броузера (до 640х480 або 800х600), пошук і заміна текстових фрагментів у всіх файлах проекту або теки, відображення внутрішнього броузера під вікном редагування (з “майже синхронним” відображенням змін, що вносяться) і ін. Проте про все неможливо розповісти в невеликому розділі. Ми познайомили вас з основними можливостями цієї чудової програми, а остальниє ви легко виявите самі в процесі роботи.

 

 


:: Наша кнопка ::

Отримати код:


:: Реклама ::


:: Ссилки ::

-


:: Баннери ::

 

 

 


Copyright © DecoRoom.info, 2008 - 2021