Способността да създадете връзка в документ, който ви отвежда до друг документ, може би в мрежата по средата на света, е може би най-важната причина, поради която е изобретен World Wide Web. Тези връзки, наричани хипервръзки, са "H" в HTML - HyperText Markup Language. Без хипервръзки мрежата не би била много полезна. Няма да има машини за търсене, социални медии или банерни реклами (добре, повечето от нас можеха да видят, че отиват).
Когато създавате свои собствени уеб страници, вие ще искате да създавате хипервръзки, а KompoZer има инструменти, които улесняват добавянето на връзки от всякакъв тип. Примерната страница, представена в този урок, ще съдържа връзки към други уебсайтове в четири категории, до други части на една и съща уеб страница и за стартиране на имейл съобщение. Ще започна с заглавие и четири H3 заглавия за всяка категория. На следващата страница ще добавим някои връзки.
01 от 05
Създаване на хипервръзка с
Инструментите за хипервръзки на KompoZer са достъпни, като кликнете върху бутона "Връзка" в лентата с инструменти. За да създадете хипервръзка:
- Поставете курсора на страницата, на която искате да се показва вашата хипервръзка.
- Кликнете върху бутона "Връзка" в лентата с инструменти. Ще се покаже диалоговият прозорец "Линк".
- Първото поле, което трябва да попълните, е полето за връзка в текста. Въведете текста, който искате да се показва на страницата за вашата хипервръзка.
- Второто поле, което трябва да попълните, е полето "Местоположение на връзката". Въведете URL адреса на страницата, която вашата хипервръзка ще отведе на потребителя при кликване. Добра идея е да копирате и поставите URL адреса от адресната лента на вашия браузър. Много по-малко вероятно е да направите грешка по този начин и поне в момента на създаването на връзката си знаете, че страницата е жива и тази връзка не е нарушена.
- Кликнете върху OK и диалоговият прозорец Свойства на връзката ще се затвори Вашата връзка ще се появи на страницата ви.
В повечето браузъри хиперлинката ще се показва със синьо подчертан текст по подразбиране. Можете да приложите собствени стилове към хипервръзки с KompoZer, но засега ще се придържаме към основната хипервръзка. Добра идея е да прегледате страницата си в уеб браузър и да кликнете върху връзките, за да сте сигурни, че те работят.
02 от 05
Създаване на анкерен линк с KompoZer
Има и друг вид хипервръзка, която ще ви отведе до друга част на една и съща уеб страница, когато я кликнете. Този вид хипервръзка се нарича котва, а зоната на страницата, в която сте принудени, когато кликнете върху тази връзка, се нарича котва. Ако някога сте използвали връзката "отгоре нагоре" в долната част на уеб страница, кликвате върху връзка към котва.
Композер ви позволява да създавате котви, към които можете да свържете, като използвате инструмента Anchor в лентата с инструменти.
- Кликнете върху зоната на страницата си, където искате да поставите котва. Тоест, откъде искате да се преглежда програмата за преглед на страница, когато се кликне върху котва. За този пример кликнах точно преди "F" в заглавката на любимата музика.
- Кликнете върху бутона за закотвяне в лентата с инструменти. Появява се диалоговият прозорец "Named Anchor Properties".
- Всяка котва на страницата се нуждае от уникално име. За тази котва използвах името "музика".
- Кликнете върху "ОК" и трябва да видите, а в мястото, където искате да поставите котвата, се появява символът за закотвяне. Този символ няма да се покаже на уеб страницата ви. Точно така ще ви покаже къде се намира вашата котва.
- Повторете процедурата за всички останали части от страницата, където искате потребителите да могат да прескочат. Ако имате много текст на страницата, разделена на заглавия или друг логически делител, котвите са лесен начин за навигация на страница.
След това ще създадем връзките, които приемат читателя до създадените от Вас котви.
03 от 05
Създаване на навигация на страници с
След като имате котви на страницата си, нека създадем връзките, които ще бъдат използвани като преки пътища към тези котви. За този урок създадох таблица с 1 ред и 4 колони под заглавния ред на страницата. Всяка таблица клетки съдържа един и същ текст като една от заглавията на категории, които се използват за отделяне на връзките на страницата. Ще направим текста във всяка от тези таблични клетки връзка към съответната котва.
04 от 05
Създаване на хипервръзки на котви с
Сега, когато имаме котви на място и текстът, който ще използваме за навигация на страници, можем да превърнем тези къси текстови парчета в връзки. Ще използваме бутона "Линк" отново, но този път ще работи малко по-различно.
- Изберете текста, който искате да превърнете в връзка. В този пример избрах текста "Любима музика", който е в първата клетка на таблицата в горната част на страницата.
- Кликнете върху бутона "Връзка" в лентата с инструменти. Ще се отвори диалоговият прозорец "Линк".
- В този случай ние избрахме текста, преди да кликнем върху бутона "Връзка", така че секцията "Линк текст" на прозореца вече е попълнена и не може да бъде редактирана. Кликнете върху стрелката надолу в секцията "Местоположение на връзката". Ще видите списък на котвите, които сте създали в предишните стъпки. За този пример избирам #music anchor.
- Кликнете върху OK. Текстът "Любима музика" в навигационната лента се превръща в връзка, която ще накара зрителя да премине към този раздел на страницата, когато бъде кликнат.
Ще забележите, че всеки име на котва в падащото меню има знак "#" пред него. По този начин ще създадете връзка към котва в HTML. "#" Пред името на котва казва на браузъра, че тази връзка ще ви отведе до друго място на същата страница.
05 от 05
Създаване на хипервръзка от изображение с
Знаете ли, че можете да създадете връзка от изображения, както и текст? Композер ви позволява да направите това само с няколко кликвания. Тук вмъкнах малка икона, показваща стрелка нагоре и текст "TOP" в долната част на страницата. Аз ще използвам това изображение като връзка, за да се върна в горната част на страницата.
- Щракнете с десния бутон на мишката върху изображение и изберете Image and Link Properties от контекстния етикет. Ще се отвори диалоговият прозорец "Image Properties"
- В раздела "Местоположение" ще видите името на файла на изображението и изгледа с миниатюри, който вече е попълнен. Трябва да въведете текст в текстовото поле Алтернативно. Това се случва, когато преместите курсора на мишката върху изображението, а също така и това, което се чете от екранен четец, когато човек с увредено зрение прочита уеб страницата.
- Кликнете върху раздела Връзка. Тук можете да изберете котва от менюто, точно както направихме с котвите. Всъщност това изображение се използва като котвена връзка. Избрах конеца #Links_Of_Interest, който ще ни отведе на върха.
- Кликнете върху OK. Изображението сега се свързва обратно към горната част на страницата, когато е кликнато.