Како обликовати Таг Цлоуд

Користите ЦСС да обликујете Таг Цлоуд

таг цлоуд је визуелно приказивање листе ставки. Често ћете видети облаке ознака на блоговима. Било је популарно на сајтовима попут Флицкр-а.

Области ознака су листа веза које се мењају у величини и тежини (понекад иу боји) у зависности од неког мјерљивог атрибута. Већина таг облака су изграђене на основу популарности или броја страница које су означене са одређеном ознаком. Али можете креирати облак ознака из било које листе ставки на вашој веб локацији које имају најмање два начина приказивања. На пример:

• Листа чланака по абецедном реду са стиловима који указују на популарност чланака.
• Списак Веб локација по абецедном реду са стиловима који указују на оне који вам највише воле.
• Списак Веб уређивача који су наведени у редоследу цена са стиловима који указују на то колико близу сваки долази до унапред дефинисаног скупа критеријума.
• Списак пријатеља са стиловима који указују на удаљеност од куће до њих.

Шта треба да направите цлоуд облак?

Једноставно је направити облак ознаке, потребне су вам само двије ствари:

• Списак ставки (попут веб чланака, веб локација или ваших пријатеља)
• Мерење за сваку од ставки (као што су прикази странице дневно, ваш ранг 1-10, или растојање до куће).

Већина облака ознака су спискови веза, па помаже да свака јединица има УРЛ везан за њега. Али то није потребно за стварање визуелне хијерархије.

Кораци за изградњу таг цлоуд популарних веза

Моја страница садржи чланке који добијају приказе страница сваког дана, а то је једноставна метричка метода за кориштење за креирање облака ознаке. Зато ћемо у овом примеру креирати цлоуд таг са листе чланака, топ 25 чланака на мом сајту за недељу 1. јануара 2007. године.

1. Одредите колико нивоа желите у вашој хијерархији.
   1. Иако је могуће имати толико нивоа у вашем облаку као што имате ставке у вашој листи, ово је досадно кодирање, а разлике могу бити врло минималне. Препоручујем да имате више од 10 нивоа у вашој хијерархији.
2. Одлучите о прекинутим тачкама за сваки ниво.
   1. То би могло бити једноставно као и смањење приказа ваших страница дневно на 1/10 комада - тј. ако највећа страница на вашој страници добије 100 приказа дневно, могла би да је резимирате на 100+, 90-100, 80-90, 70-80 итд. На тај начин сам исецкала поглед моје странице.
3. Наведите своје ставке у редоследу приказивања страница и дајте им чин на основу корака 2
   1. Не брините ако у неким слотовима немате било какве ставке, што само чини да је облак интересантнији.
4. Одредите своју листу по абецедном реду (или било којој другој врсти коју желите користити).
   1. То је оно што чини облак интересантним. Ако га оставите сортиран по рангу, онда ће бити само листа са највећим ставкама на врху до најмањих на дну.
5. Напишите свој ХТМЛ тако да је чин број класе. цласс = "таг4"> Додајање Стреаминг аудио датотека

Када имате ХТМЛ за сваку појединачну ставку листе и редослед којим желите да их прикажете, онда морате донети одлуку. Можете поставити везе у параграфу и бићете урађени. Али то не би било семантички обележено, а свако без ЦСС-а који би дошао на ваш таг цлоуд само би видио велики став линкова. ХТМЛ за ову врсту списка би изгледао овако:

<п ид = "цлоуд"> <а хреф="/стреамингмедиа/а/аа071000а.хтм" цласс="таг4"> Додавање стреаминг аудио датотека <а хреф = "/ хтмл101цлассес / а / бл_кцласс1_2а.хтм" цласс = "таг3"> Основне ознаке за веб локацију <а хреф="/хтмледиторс/а/аа121304.хтм" цласс="таг7"> Најбољи софтвер за веб дизајн <а хреф = "/ Почетак туториала / а / аа033103а.хтм "цласс =" таг2 "> Изградња веб странице за потпуно изгубљен <а хреф="/цолор/а/аа072604.хтм" цласс="таг2"> Цолор Симболисм а>

Уместо тога, препоручујем вам да креирате свој таг таг користећи неуређену листу. То је још неколико линија ХТМЛ и ЦСС кода, али он обезбеђује да садржај буде читљив без обзира ко долази да га погледа. ХТМЛ би изгледао овако:

<ул ид = "цлоуд"> <ли> <а хреф="/стреамингмедиа/а/аа071000а.хтм" цласс="таг4"> Додавање аудио фајлова са стреамингом <ли> <а хреф = <ли> <а хреф = "/ хтмледиторс / а / аа121304.хтм" цласс = " таг7 "> Најбољи софтвер за веб дизајн <ли> <а хреф="/бегиннингтуториалс/а/аа033103а.хтм" цласс="таг2"> Изградња веб странице за потпуно изгубљен <ли> <а хреф="/цолор/а/аа072604.хтм" цласс="таг2"> Цолор Симболисм

Али где су стилови за облак ознаке

Сада стигнемо до забавног дела - ЦСС стилова. Када обликујете цлоуд таг, обично промените величину слова и тежину фонта. Такође можете променити боју фонта или позадине или неког другог атрибута стила, али величина и тежина су традиционални.

Потребне су вам 10 класа класе, по један за сваки таг:

#цлоуд а.таг1 {фонт-сизе: 0.7ем; фонт-веигхт: 100; } #цлоуд а.таг2 {фонт-сизе: 0.8ем; фонт-веигхт: 200; } #цлоуд а.таг3 {фонт-сизе: 0.9ем; фонт-веигхт: 300; } #цлоуд а.таг4 {фонт-сизе: 1.0ем; фонт-веигхт: 400; } #цлоуд а.таг5 {фонт-сизе: 1.2ем; фонт-веигхт: 500; } #цлоуд а.таг6 {фонт-сизе: 1.4ем; фонт-веигхт: 100; } #цлоуд а.таг7 {фонт-сизе: 1.6ем; фонт-веигхт: 700; } #цлоуд а.таг8 {фонт-сизе: 1.8ем; фонт-веигхт: 1000; } #цлоуд а.таг9 {фонт-сизе: 2.2ем; фонт-веигхт: 900; } #цлоуд а.таг10 {фонт-сизе: 2.5ем; фонт-веигхт: 900; }

Желим да укључим неке стилове око самог облака: средирам текст облака, подесите висину линије тако да се облак може читати и уверите се да ознаке сидра немају подлогу на њима:

#цлоуд {паддинг: 2пк; линија-висина: 3ем; текстуално поравнање: центар; } #цлоуд а {паддинг: 0пк; }

Коначно, ако користите метод семантичког стила (тј. Неуређену листу), мораћете додати још двије линије ЦСС-а тако да листа нема метке и није удаљена:

#цлоуд {маргин: 0; } #цлоуд ли {дисплаи: инлине; }