Ръководство за работа с KompoZerОформление на страницата

Създаване на връзки и навигация

Таблици 1 Работа с изображения

Таблици 2 Съхраняване на файлове

Форматиране на текст ПубликуванеОформление на страницата

Преди да се заемете с проектирането и дизайна на вашия уеб сайт, е добре да си отговорите на няколко въпроса:

Навигация - как да се преминава от една страница към следващата Колко страници ще има

Какви страници желаете да има в сайта

Изображения или снимки, които искате да добавите

Започнете с един празен лист хартия и направете скица на основния дизайн - колко колони 1, 2, 3, цветове, текст и др.

Най-често полето за навигация е в горната част или върху лявата страна (както е показано тук). Обикновено за навигация се използва обикновен текст или графични изображения. В нашия случай заглавието е в горната част, навигацията - в ляво, а основното съдържание - в средата. Ще се придържаме към него с цел уроците по нататък. Вие можете да ги разположите по начин, по който на вас ви харесва или който е най-удачен за съдържанието на вашата страница.

Таблици 1

Има няколко начина за проектиране на оформлението на уеб страницата. Най-бързият и лесен начин е да използвате таблици.Оформлението на сайта ще го направим въз основа на предходната скица.

Ние ще използваме няколко таблици, за да се постигне това оформление.Щракнете върху бутона Таблица.

След това изберате колко редове и колони. За нашата първа таблица, която ще съдържа заглавна част, ние просто искаме един ред от една колона. Затова избираме само 1 х 1, след което натискаме Добре.

Ще получите нещо, което изглежда така ...

Кликнете с десен бутон върху таблицата за да видите менюто с опциите. Изберете Таблична клетка свойства...

Ще се появи съвсем ново меню ...Сега кликнете върху Таблица, както е показано по-долу, за да видите менюто на таблицата.

За Височина определете да е 90 и след това кликнете върху синята стрелка и маркирайте pixels (за да е в пиксели). За Ширина изберете 100, след това щракнете върху синята стрелка и изберете % от прозореца (цялата ширина на страницата).Също така Ръб, Разредка, Уплътняване - всичко трябва да е 0 (нула).

От полете до Подцветка можете да промените цвета на фона (в този случай червен), след това кликнете върху Добре.Сега се върнете и погледнете екрана. Той трябва да изглежда така ...

Вие направихте първата си таблица.

Таблици 2Ако погледнете отново първоначалната скица ще видите, че сме направили само една част от проекта. За да го довършим ще използваме още една таблица.Преместете мишката под червената таблица и натиснете десния бутон. Сега би трябвало да видите мигащ курсор под таблицата.Натиснете Вмъкване и след това Таблица..., за да добавите нова таблица.

Този път тя ще е 1 х 2 (един ред, 2 колони). И натиснете Добре.Вашата нова таблица трябва да се появи.

Преместете курсора на мишката пред втората таблица и натиснете левия бутон на мишката.След това натиснете клавиша delete на клавиатурата - изтриване.Сега двете таблици би трябвало да са плътно една до друга.Кликнете 2 пъти вътре в новата таблица, за да видите свойствата на таблицата.Там идете на Таблица.

Направете ширината 100% а за височината го оставете празно и в пиксели. Стойностите за Ръб, Разредка и Уплътняване трябва да са 0 (нула) за всички. Това, което сте получили трябва да изглежда така ...

Нека да погледнем отново нашата скица.За втората таблица ни трябва по-тясна колона, която е синя. Така че, ще трябва да променим размера на 1-ва колона в новата ни таблица и да я запълним със син цвят.Изберете първата колона в новата таблица и натиснете 2 пъти левия бутон на мишката.Натиснете отдясно на Подцветка и изберете син цвят, а след това щракнете върху Добре.Тук за ширина изберете 120 пиксела. Кликнете върху Добре.

Сега би трябвало да имате тясна синя колона под червеното заглавие, а останалата част от втората таблица да е бяла.

Понеже не зададохме височина на втората таблица, тя ще се променя според съдържанието на синята и бялата колона. Вие приключихте работата по основния дизайн.

ФОРМАТИРАНЕ НА ТЕКСТ

За да направите текст с различен цвят, маркирайте текста, на който искате да промените цвета (с левия бутон на мишката, задръжте и плъзнете, за да се подчертае). След това кликнете върху черното квадратче (в примера по-долу)

За да промените размера на шрифта, маркирайте текста, който искате да промените и

кликнете върху А или А, както е показано по-долу.

За да направите текста по-черен, курсив или подчертан, натиснете B, I или U.

За да добавите водещи символи или цифров брояч, кликнете върху някоя от тези две възможности. Уверете се, че сте маркирали текста. Трябва да натискате "Enter" на клавиатурата, за всяка нова линия, която искате да се появи.

За да промените подравняването на текста (ляво, център или дясно), маркирайте текста и щракнете върху подходящите настройки.

Ако искате да увеличите или намалите разтоянието между ръба на клетката и текста поставете курсора в началото на реда, който искате да промените и изберете вариант, както е показано по-долу ...

За да промените шрифта, който използвате, щракнете върху синята стрелка до Променлива ширина и изберете шрифт от списъка.

Създаване на връзки и навигация

Навигацията е да се създаде връзка от една страница към друга. Независимо дали става въпрос за връзка към страница от вашия сайт или към чужд сайт. Изключително важно е да запомните, че началната ви страница винаги ще е index.html.  Може да бъде index.htm, index.html, index.php или index.asp. Но винаги index. Така че за свързване към началната си страница, винаги ще задавате линк към индекса на файла в директорията. За да създадете текстов линк, маркирайте текста, където искате да създадете връзка и щракнете върху бутона Връзка.

След това въведете в бялото поле името на сайта или уеб страницата, към която искате да се свържете.Трябва да въведете целия уеб адрес, включително http://

Ако искате да се свържете към вашата начална страница, има два начина да направите това ...

Единият се нарича абсолютна връзка. Чрез въвеждаде на целия адрес. http://www.yourwebsite.com/index.html.

Другият се нарича относителна връзка. Чрез въвеждане на index.html.

 Между другото, можете да зададете линк към най-различни неща - изображения, звуци, флаш файлове, електронна поща и др. Ако искате връзката да се отваря в нов прозорец маркирайте Link is to be opened и изберете in a new window .

Работа с изображения

За да вмъкнете изображение, щракнете върху иконата Изображение.

Диалоговия прозорец, който ще се появи изглежда така ...

След това изберете изображението, което искате да вмъкнете. Уверете се, че изображението е в папката с файлове на вашия сайт. По този начин то ще бъде качено правилно, когато се публикува сайта.След като изберете файла, ще видите предварителен преглед на изображението.

 След това въведете заместващ текст. Това е описание на изображението. Не е задължително, но е по-добре да го използвате поради редица причини – достъпност,

търсачки и др.Натиснете Добре. Можете да промените размера на изображението, като кликнете върху размери и после върху зададен размер.За да направите изображението връзка натиснете върху Връзка. Създаването на връзка чрез изображение е както при текстовите връзки.За да добавите рамка към изображението, кликнете върху Облик в изображението и въведете номер от 1 до 10. 1 е тънка, 10 е много дебела. За да премахнете рамката, напишете нула или изтрийте областта изцяло.

Можете също така да зададете линк от снимки или изображения. Но за това малко по-нататък.

Съхраняване на файлове

Последно, но със сигурност не на последно място, е как да запазите и публикувате своите уеб страници.

Когато започнахте този проект създадохте папка на вашия работен плот със същото име като вашия сайт. След това съхранихте в нея всичките си файлове и снимки.Ще наричаме тази папка - работна папка.

След като приключихте работата по началната си страница я съхранихте в работната папка като index.html.

Какво да направите от тук нататък:

1. Отворете index.html с KompoZer.2. Изтрийте съдържанието в бялата част на таблицата, която създадохте по-рано.

3. Въведете съдържанието за следващата страница. Не я запазвайте все още.

4. Натиснете Файл > Запиши като... Уверете се, че сте избрали Запиши като..., а не само Запиши. Въведете новото име и я запазете. Така ще съхраните новата уеб страница като различен файл.

5. Повторете този процес за всички уеб страници, които искате да създадете.

6. Сега отидете в началната си страница (index.html) и в синята колонка, въведете имената на файловете. За всяко име задайте връзка към съответната страница. Това ще бъде навигацията ви за всяка страница.

7. Маркирайте и копрайте менюто. След това го поставете във всяка една от останалите страници. Можете да се придвижвате между страниците, като щракнете върху разделите за всяка страница.

8. Съхранете всички страници.

9. Публикувайте всяка отделна страница.

Отворете браузъра и тествате вашия уеб сайт, за да видите как изглежда.Трябва да изглежда така:

Публикуване

След като сте преминали през процеса на закупуване на домейн и уеб хостинг, тогава ще трябва да зададете параметрите му в KompoZer. Това ще ви позволи да изпращате уеб страниците си, които ще се публикуват от вашата уеб хостинг компания.

Кликнете на Обнародвай.

Въведете информацията в новия прозорец, както е показано в този пример:

Име на възела - името, което сте избрали за вашият сайт.HTTP адрес на домашната ви страница - това е вашето домейн име (винаги включва http:// част).Адрес за обнародване - в повечето случаи започва с ftp:// и съдържа името на вашия домейн ( ftp://www.imedomein.com).Потребителско име - това е потребителското име, което сте задали, когато сте се регистрирали в сайта на вашата хостинг компания.Парола - паролата за потребителското име на вашата хостинг компания.Съхрани паролата - така няма да се налага да я въвеждате при публикуването на всяка страница от сайта.

Натиснете Обнародвай.

Трябва да видите това поле:

Ако изпише publishing complete и затвори прозореца, това означава,че FTP настройките са правилни.

Ако изпише If it's not publishing or can't find the server, това означава, че не може да намери сървъра. Може да има 2 причини:a) Може да отнеме 24 - 48 часа за вашия уеб хостинг да създаде профила ви.b) Вашите FTP настройки, потребителско име или парола са неправилни.Понякога някои уеб хостинг компании изискват от вас да въведете ftp://ftp.imedomein.com, а не само ftp.imedomein.comАко използвате оптимален уеб хостинг, тогава просто въведете ftp.imedomein.comАко след всичко това все още не се получава, тогава се обадете на техническата поддръжка на уеб хостинга.