Тема 1: Изисквания за изработване на уеб-сайт




ИмеТема 1: Изисквания за изработване на уеб-сайт
страница1/4
Дата на преобразуване27.12.2012
Размер352.91 Kb.
ТипДокументация
източникhttp://pgikj.com/old/temi/pgi_temi_9062.doc
  1   2   3   4
УЕБ ДИЗАЙН


ТЕМА 1: Изисквания за изработване на уеб-сайт


1. Проучване.

Преди да започнете работа трябва да знаете:

- за коя аудитория ще е предназначен сайта; какви са интересите на посетителите;

- защо има необходимост от сайта;

- какво искате да получат посетителите му;

- от какво съдържние ще има нужда;

- какво ще изразява сайтът т.е.какво искате да кажете на посетителите с него;

- важно е да знаете кои са конкурентите Ви и как изграждат сайтовете си.

2. Планиране и структура.

Яснотата и лекотата на употреба са сред най-важните компоненти на един добър уеб сайт.

а) създаване на структурата на сайт – за да е ясен, комуникативен и лесен за употреба сайтът трябва да има планирана структура. Трябва да създадете подробна схема на сайта.

б) създаване на структура от файлове и папки – препоръчва се да създадете отделни папки за различните видове файлове (папка за HTML код, за изображения, за мултимедия, за каскадни набори от стилове (CSS)).

3. Разработка и дизайн на сайта.

На този етап се създават основни насоки за стиловете, даващи конкретна информация за външния вид, интерфейса, цветовете и стиловете, които ще се използват в сайта.

4. Тестване.

Трябва да тествате начина, по който различните браузъри (Microsoft Intrrnet Explorer, Mozilla Firefox, Opera, Safari) изобразяват страниците, тествайте всички страници и връзки.

5. Поддръжка.

Към този етап се отнасят добавяне на нови страници, обновяване на връзки, подмяна на съдържание и изображения.


ТЕМА 2: Проектиране с помощта на таблици. Създаване на таблица. Форматиране на таблици. Влагане на таблици


В Dreamweaver те са достъпни в 3 режима: Standard, Layout, Expanded (лента Insert, категория Layout, бутоните за изглед или View/Тable Mode, избирате режим). В режим Expanded таблиците изглеждат леко уголемени и с по-дебела рамка. Този режим не отговаря на начина на показване на таблиците в браузърите.

1. Създаване на таблица

1н.) лента Insert, категория Layout, бутон Table

2н.) лента Insert, категория Common, бутон Table

3н.) Insert/Table

2) Отваря се диалогов прозорец – Table със следните полета:

Секция Table Size:

Rows – брой редове в таблицата

Columns – брой колони в таблицата

Table Width – ширина на таблицата в пиксели или като % от прозореца на браузъра

Border Thickness – ширина на рамката на таблицата

Cell Padding – разстояние между съдържанието на дадена клетка и стените й. Въвеждате 0 ако не искате да има разстояние

Cell Spacing – пространството между клетките на таблицата, без да се включва рамката. Ако не желаете да има давате 0. Ако ги оставите празни ще се използва стойност 1. Тези свойства можете да променяте като маркирате таблицата, панел Properties, секция Table Size

Секция Header – опции за мястото на съдържанието в заглавната клетка: None - без, Left – само за редовете, Top – само за колоните, Both – и за двете.

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

Пример: Ако използвате опцията за горен колонтитул Top и въведете Order в най-горната клетка на първата колона, останалите клетки в нея ще започват с думата Order.

  • Caption –то се показва на всички потребители и може да бъде подравнено отгоре, отдолу, отляво или отдясно на таблицата.

  • Summary – извличението от дадена таблица не се показва на страницата. Обяснява предназначението и контекста на таблицата.

Когато е избрана една таблица се показват хоризонтални и вертикални зелени линии. Това са ширината и височината на колоните и редовете. Тези линии изчезват, когато щракнете извън таблицата. Можете да активирате и деактивирате визуалната помощ за таблицата от View/Visual Aids/Table Widths.

За преминаване от клетка в клетка – Tab. При въвеждане на по-дълъг текст, таблицата автоматично променя ширината на съответните колони, така че да се събере текста. Най-горният ред е заглавен и въведеният в него текст се центрира и е удебелен.

2. Форматиране на клетки - панел Properties

а) фон на клетка – панел Properties/BackGround Color (Bg) – избирате фонов цвят бутон BackGround URL of cell – избор на фоново изображение

б) автоматично форматиране на таблица

1) Commands/Format Table…

2) отваря диалогов прозорец Format Table – избирате от предварително зададените опции за форматиране. Командата не е активна за таблици със заглавия.

в) подравняване на съдържанието в клетка

панел Properties, поле Horz – по хоризонтала, Vert – по вертикала

г) No wrap – не позволява пренасяне на думите; клетките увеличават ширината си, за да съберат данните; Header – форматира избраната клетка като заглавна на таблицата; съдържанието в нея се показва удебелено и центрирано

д) цвят на рамка – бутон Brdr, панел Properties

3. Сортиране на таблица

Извършва се по съдържанието на някоя колона (или повече от една). Не могат да се сортират таблици, съдържащи обединени клетки.

1) селектирайте таблицата

2) Commands/Sort Table

3) отваря се диалогов прозорец - Sort Table със следните полета:

Sort By – избирате колоната, по която ще сортирате

Order – дали колоната да се сортира в азбучна последователност или по реда на номерата

Then By – сортиране по втори критерий

Sort Includes the First Row – дали първият ред да бъде включен в сортирането

Sort Header Rows, Sort Footer Rows – дали заглавните редове да бъдат включени в сортирането

Keep All Row Colors The Same After the Sort has been Completed – при промяна атрибутите на редовете те се запазват, когато има отметка.

Пример: Ако сортирате таблица с оцветен първи ред след сортирането данните в него се преместват на втори ред. Ако тази опция е избрана ще се премести и цветът. Иначе оцветяването остава на 1-я ред.

4. Модифициране на таблица

а) промяна размера на редовете и колоните - панел Properties, полета W и H

б) добавяне на нов ред/колона

1н.) поставяте курсора в последната клетка на таблицата и натискате Tab

2н.) кликате в последния ред/колона, Modify/Table/Insert Row, Insert Columns, Insert Rows or Columns

в) разделяне на клетки

1) маркирате клетката

2) панел Properties, бутон Split Cell или Modify/Table/Split Cell

г) обединяване на клетки

1) маркирате клетките

2) панел Properties, бутон Merge Cell или Modify/Table/Merge Cell

Можете да обединявате произволен брой клетки, стига те да образуват правоъгълник.

5. Вложени таблици

1) създайте структурата на двете таблици

2) попълнете таблицата, която ще влагате

3) селектирайте я; Edit/Cut

4) кликнете в кетката, в която ще вмъквате от другата таблица; Edit/Paste.


ТЕМА 3: Създаване на хипертекстови и графични връзки. Вмъкване и свързване към именувани котви


1. Предназначение.

Осигуряват възможност за пренасочване на потребителите към документи в текущия уеб сайт или към други ресурси в глобалната мрежа.

2. Видове.

а) относителни – те са в границите на един сайт и водят до файлове в рамките на неговите папки. Използвате само тази част от пътя, която е различна за текущия и свързания с хипервръзката документ.

б) абсолютни – преставят пълния уеб адрес на даден сайт или информационен ресурс

3. Създаване на хипервръзки.

а) на относителни

1) маркирайте думата (фразата)

2) панел Properties, бутон Browse for file

3) избираме желания файл от твърдия диск; OK – името на файла се появява в текстовото поле Link на панел Properties

б) на абсолютни

1) маркирайте думата (фразата)

2) панел Properties, текстовото поле Link – въведете пълен уеб адрес; Enter;

в) хипервръзка към email адрес

1н.) вмъкване на текста и email адреса едновременно

1. кликате на желаното място

2. лента Insert, категория Common, бутон Email Link (или Inser/Email Link)

3. в диалогов прозорец Email Link: в поле Text – въведете името си; в поле E-mail - въведете email адреса си;

4. OK - текста се появявя на страницата във вид на хипервръзка;

2н.) добавяне на хипервръзки към текст, който вече присъства на страница

1) маркирайте текста

2) лента Insert, категория Common, бутон Email Link (или Insert/Email Link)

3) в диалогов прозорец Email Link маркираният тест ще се появи в поле Text

3н.) 1) кликаме на желаното място

2) въвеждаме дума mailto: и Email адреса веднага след нея в полето Link на панел Properties

4. Редактиране на дестинацията на хипервръзка.

1) кликаме на произволно място във вече създадена хипервръзка

2) в полето Link на панел Properties правите желаните промени

5. Именувана котва (anchor).

Място в страницата, до което отвежда дадена хипервръзкa

6. Добавяне на котва и насочване на вътрешна хипервръзкa към нея.

1) Modify/Page Properties, категория Links – настройте цветовете на хипервръзкa

2) Поставете маркера пред думата, към която ще води хипервръзкa

3) 1н.) Insert/Named Anchor

2н.) лента Insert, категория Common, Named Anchor

4) отваря се диалогов прозорец Named Anchor в текстовото поле Anchor Name – въведете името на котвата

5) маркирайте текста за хипервръзкa

6) 1н.) панел Properties, панел Link – въвеждате #име на котвата. Знакът # е необходим, тъй като инструктира браузъра, че тази хипервръзка е вътрешна.

2н.) издърпайте с мишката иконата Point to File от панел Properties до котвата. Отпуснете бутона на мишката, когата курсорът е над нея. В текстовото поле Link се появява #име на котвата. Този начин спомага за избягване на правописни грешки.

7. Добавяне на котва и насочване на външна хипервръзкa към нея.

1н.) 1) създайте котва в желания файл

2) отворете файла, в който ще създавате хипервръзкa и маркирайте текста за хипервръзкa

3) панел Properties, панел Link – въвеждате името на файла, съдържащ котвата #име на котвата

2н.) 1) отворете едновременно в отделни прозорци файловете, съдържащи хипервръзкa и котвата

2) маркирайте хипервръзкaта от единия файл, кликнете върху иконата Point to File и се посочва желаната котва във втория файл.

8. Редактиране на котви.

1) кликнете върху котвата

2) панел Properties, поле Name – променете името й.


ТЕМА 4: Разработване на набори от стилове. Създаване на вътрешни и външни стилове


1. Същност.

а) стил (Style) – нарича се още правило (rule) – набор от свойства, които дефинират и контролират външния вид на даден елемент. Всеки стил има име, по което браузърите определят как да изобразят елементаб) набор от стилове (Style Sheets) – група стилове;

в) каскадни (Cascading) – отнасят се до подредената последователност и приоритет на стиловете. Всеки следващ добавен стил в една страница предефинира предходния.

2. Предназначение.

Контролират форматирането, външния вид и разположението на елементите в уеб страниците. CSS се поддържа от браузъри с версии 4.0 и по-нови. Кодът за CSS стиловете се поставя в тага head на HTML страницата.

3. Видове.

а) вътрешен – дефинира се и се използва само в текущия документ (когато се налага да се форматира само една страница). Dreamweaver го създава автоматично при форматиране на текста или самата страница.

б) външен – текстов файл, съдържащ форматиращи атрибути (само CSS код). Към него трябва да има препратка от всички страници, които трябва да имат този външен вид. Използва се, когато искате сайтът да има еднотипен външен вид, независимо коя страница е отворена.

4. Създаване на вътрешни стилове.

Modify/Page Properties, категория Appearance

а) определяне на фонов цвят – Background Color

б) смяна на шрифта – Page Font Комбинациите от шрифтове в менюто Page Font указват на браузъра как да изобразява текста. Ако първият от групата не бъде намерен, браузърът се опитва да използва втория. Ако и той не е наличен – използва третия. Ако нито един от изписаните не бъде намерен браузърът използва собствения си подразбиращ се.

в) промяна на размера на шрифта – Size

г) избор на цвят на шрифта - Text Color

5. Създаване на външни стилове.

Те се прилагат автоматично върху съдържанието, което се намира в тях – във всички документи, върху които се прилага наборът от стилове.

А) Създаване на стил за конкретен таг

1) Поставете курсора в текста, използващ тага или селектирайте тага в Tag selector

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag

4) Текстовото поле Tag трябва да съдържа избрания таг, без < >

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in …..

В необходимите категории направете желаните настройки; OK

Файлът с външния набор от стилове се отваря автоматично в нова подстраница на прозореца Document. CSS файловете се изобразяват в изглед Code. Ако правите някакви промени в него, задължително запишете CSS файла.

Б) Създаване на стил за форматиране на текст с тагове за параграф

1) Поставете курсора в желания параграф – лента Tag selector показва HTML тага p за дефиниране на параграф

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag

4) Текстовото поле Tag трябва да съдържа p. Ако не е така, изберете го.

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in …..

В необходимите категории направете желаните настройки; OK

В) Създаване на стил за предефиниране начина на форматиране на списък

1) Поставете курсора в 1-я ред на списъка. В Tag selector щракнете върху ul, ol (това са HTML тагове за целия списък; li - отнася се само за отделни позиции в списъка)

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule, изберете радиобутон Tag

4) Текстово поле Tag трябва да съдържа ol. Ако не е така – изберете го.

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in ….., категория Type – направете желаните настройки; OK


ТЕМА 5: Работа с графика. Позициониране на изображение. Разполагане на текст около изображение. Редакция на изображение


1. Графични формати за уеб пространството.

Процесът на записване на изображенията във форма, подходяща за уеб пространството се нарича оптимизиране и може да бъде извършен в програма за графична обработка като Macromedia Fireworks и Adobe Photoshop. При избора на граф.формат целта е да се постигне възможно най-голямо качество при възможно най-малък размер на файла.

а) GIF (Graphic Interchange Format) – подходящ е за текст, векторна графика, изображения с малко цветове и изображения с много малки размери. GIF поддържа максимум 8-битов цвят т.е. само 256 цвята. GIF се зареждат бързо, предлагат се повече опции за оптимизирането им и поддържат анимация и прозрачност. Разширението на файловете е gif.

б) JPEG (Joint Photographic Experts Group) – най-добрият избор за фотографски изображения (позволява създаването на много по-малки файлове от GIF при много по-високо качество) и изображения с голяма палитра на цветовете. JPEG използва 24-битов режим, запазвайки всички цветове. Разширенията на файловете са jpg и jpeg.

в) PNG (Portable Network Graphic) – предлага повече възможности за контролиране на цветовете – могат или да се запазят всички цветове като при JPEG, или да се ограничат като при GIF. PNG не поддържа анимация и не се поддържа от по-старите браузъри. Разширението на файловете е png.

2. Поставяне на фоново изображение.

Може да бъде:

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

- по-голямо изображение като за определяне на разположението му се използва CSS. С тях се определя дали изображението да се редува хоризонтално, вертикално, в двете посоки или да не се редува.

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

а) на отделна страница (чрез създаване на вътрешен стил)

1) Modify/Page Properties, категория Appearance

2) бутон Browse – за търсене на изображения. Има възможност за избор на метода на повторение. Могат да се определят и полетата на страницата – това е полезно, ако размерът им зависи от фоновото изображение.

б) на всички страници в сайта (чрез външен стил)

1) ако нямате създаден външен стил (правило) за страницата създайте такъв; ако имате – панел CSS Styles, списък All Rules – селектирайте правилото body (предефинира тага, в който се намира съдържанието на документа) от външния набор, бутон Edit Style

2) отваря се диалогов прозорец CSS Rule Definition for body in име_на_файл, категория Background, бутонBrowse

3) отваря се диалогов прозорец Select Image Source – намерете желаното изображение; OK или Select

Ако изображението, което изберете е извън локалния сайт, Dreamweaver показва предупреждение и ви дава възможност да го качите в сайта. Страниците и елементите, които използвате в сайта се намират в кореновата папка. Освен тях могат да се използват елементи, които не се намират в нея, а в Интернет. За целта се използват абсолютни пътища. Такива елементи не се изобразяват в прозореца Document и за да ги видите трябва да преглеждате страницата си в браузър.

4) в диалогов прозорец CSS Rule Definition :

- изберете начина на повторение на селектираното фоново изображение – меню Repeat. Възможни са следните опции:

Repeat – y – повтаря избраното фоново изображение вертикално

Repeat – x - повтаря избраното фоново изображение хоризонтално

Repeat - повтаря избраното фоново изображение хоризонтално и вертикално (по подразбиране)

No-Repeat – не води до повторение на изображението

- Attachment – позволява да се определи дали фоновото изображение трябва да е фиксирано или да се превърта с останалата част на страницата (това свойство се използва с изображения, които не се повтарят)

- Horizontal position и Vertical position – използват се за контролиране на позицията на фоновото изображение. Стойностите на хоризонталната позиция са left, center, right, а за вертикалната - top, center, bottom.

3. Изтриване на фоново изображение.

1н.) Modify/Page Properties, категория Appearance, поле Background – изтрийте името на файла

2н.) панел CSS, списък Properties, свойство Background – променете или изтрийте името на файла

4. Нагласяване на пространство около изображение.

Използват се мерни единици пиксели

1н.) чрез CSS – мястото на всяка страна на елементите може да се контролира поотделно

1) аналогично на 4.1)

2) диалогов прозорец CSS Rule Definition, категория Box

В областта Margin махнете отметката от полето Same for all и направете необходимите настройки за Top, Right, Bottom, Left; Enter

2н.) чрез атрибутите H space, V space на тага img - те добавят еднакво разстояние от двете страни на изображението (не можете да добавите само от едната страна, както със CSS)

1) селектирайте изображението

2) панел Properties, полета H space, V space – въведете желаната стойност

5. Редактиране на изображения.

1н.) чрез външна програма за графична обработка – необходимо е да я имате на своя PC и да направите следните настройки:

1) Edit/Preferences

2) отваря се диалогов прозорец Preferences – използва се за свързване на различни външни програми като подразбиращи се редактори с файловете с различни разширения

3) категория File Types/Editors

4) от списъка Extensions изберете .gif. Натиснете бутон + над списъка Editors и селектирайте графична програма от типа на Fireworks; бутонMake Primary

5) повторете стъпка 4) за разширения .jpeg и .png; OK

6) селектирайте изображение

7) панел Properties

Бутон Edit – отваря и модифицира изображението във външна програма

Бутон Optimize In Fireworks – промяна на формата на изображението, качеството (за JPEG) и цветовата палитра (за GIF)

Бутон Resample – промяна на разделителната способност на изображение Добре е да се започне с изображение с висока такава и тя да се намалява до желаната.

2н.) чрез вградените в Dreamweaver инструменти на Fireworks

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

- Отрязване Отрязване на изображение

1) селектирайте изображението

2) панел Properties, инструмент Crop

В изображението се появява селектирана област. В краищата и средите на страните й има манипулатори. Тя е по-малка от самото изображение и има приблизително същите пропорции. В областта изображението е чисто. Когато курсорът бъде поставен в центъра й, той се превръща в кръст със стрелки и областта може да бъде местена. Оразмеряването й става с издърпване на манипулаторите.

3) променете селектираната област както желаете, но оставяйки я по-малка от изображението; Enter (или щракате 2 пъти в селектираната област или щракате върху иконата Crop в панел Properties)

Изображението е отрязано по селектираната област. Големината на файла намалява.

За отмяна на отрязването щракнете в прозореца Document извън изображението (или Edit/Undo Crop или Ctrl+Z).

- яркост и контраст Яркост и контраст на изображение

1) селектирайте изображението

2) панел Properties, инструмент Brightness And Contrast

3) появява се диалогов прозорец Brightness/Contrast, който има 2 плъзгача с обхват от -100 до +100. Направете желаните промени; OK

- острота (изясняване) Острота на изображение

1) селектирайте изображението

2) панел Properties, инструмент Sharpen

3) появява се диалогов прозорец Sharpen, който има 1 плъзгач с обхват от 0 до 10. Направете желаните промени; OK


  1   2   3   4

Свързани:

Тема 1: Изисквания за изработване на уеб-сайт iconАнкетен формуляр поръчк а за изработване и изграждане на уеб сайт
Клиент
Тема 1: Изисквания за изработване на уеб-сайт iconПо начина, по който е изработен един уеб сайт и по това как изглежда неговият уеб дизайн, хората си създават своето мнение, като то може да е разбира се както
За да получи необходимата популярност, на която се надява всеки собственик на уеб сайт, е необходим качествен уеб дизайн, който се...
Тема 1: Изисквания за изработване на уеб-сайт iconВъпросник за изготвяне на задание за уеб сайт
Моля мислете за този документ като за бизнес план за Вашия уеб сайт. Колкото повече информация ни предоставите, толкова по-добре...
Тема 1: Изисквания за изработване на уеб-сайт iconТема Име
Самостоятелни компютърни приложения и уеб- сайт 9-12 клас, Седмо соу "Кузман Шапкарев" гр. Благоевград
Тема 1: Изисквания за изработване на уеб-сайт iconКурс за учители по информатика на тема „уеб програмиране- ІІ фаза курсът е предназначен за обучаеми, които желаят да развият знанията и уменията си в програмипане в Интернет
Разучават различни иновационни техники, свързани с дизайна  на  уеб сайт.   В края на курса се придобиват умения за работа с езика...
Тема 1: Изисквания за изработване на уеб-сайт iconТема: Анализ на фирмен сайт в туризма и предложения за усъвършенстване
Уеб сайтът,който аз съм избрала да анализирам е на хотел „Маджестик,Слънчев бряг
Тема 1: Изисквания за изработване на уеб-сайт iconЗадание за създаване на уеб сайт на тема
Основна цел – представяне на знанията и уменията на ученика в края на обучението в гимназиалния етап по Информационни технологии
Тема 1: Изисквания за изработване на уеб-сайт iconТема : web
Темата на уеб проложението е създаване на сайт за облекла/предимно тениски/ включващ галерия която ги онагледява и информация, както...
Тема 1: Изисквания за изработване на уеб-сайт iconБриф вашият нов сайт е по-близо до вас
За да можем точно и правилно да проектираме вашият уеб сайт, ни е необходимо да научим някои неща за вашата фирма. Добре би било...
Тема 1: Изисквания за изработване на уеб-сайт iconСамостоятелни компютърни приложения (ІХ – XIIІ клас) и уеб сайт ІХ-ХІІ

Поставете бутон на вашия сайт:
Документация


Базата данни е защитена от авторски права ©bgconv.com 2012
прилага по отношение на администрацията
Документация
Дом