Joomla cho người mới bắt đầu part 9 pptx

Chapter 4
[ 87 ]
The Category Manager shows the results (two new categories), all in one secon:
What just happened?
In Joomla!, you create content groups before you can actually start adding arcles and menu
links. Secons are the main, high-level way to organize your site; categories are the second
level. When you add secons and categories in the backend you'll noce nothing changes on
the frontend. Secons and categories aren't automacally shown on the site. To get them to
display we'll create a menu link poinng to this secon and category content later.
By dening a secon and some categories you've now got a foundaon to add any amount
of content on these two main subjects. In later chapters, we'll expand this structure.
Add articles to the categories
Now we come to the core of content management and actually start creang content! We'll
make some arcles, apply the appropriate formang, and add images.
Time for action – create an article
First, let's create an arcle in the Lectures category:
1. Navigate to Content | Arcle Manager. Click on New. The Arcle: [New]
screen opens.
2. In the Title box, type the tle of the arcle (in this example Bad Abstract Painngs).
You can leave the Alias eld blank.
3. In the Secon drop-down box, select Acvies. In the Category drop-down box,
select Lectures. Now you see why you needed to create a secon and a category
before. Without these you cannot assign the arcle to the appropriate "containers"
within in your overall site structure.
4. In the editor screen, write the arcle. In this example, we'll just use dummy
text. It's quite easy to copy and paste any amount of fake paragraph text
from www.lipsum.com.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 88 ]

5. To divide the arcle text into an intro text and the main arcle text , po si o n th e
cursor in the rst line below the rst paragraph. Click on the Read more… buon at
the boom of the editor screen. A red doed line appears indicang the separaon
between intro text and main arcle text.
6. Finally, we'll add an image to the arcle. Click on the Image buon at the boom
of the editor screen. A pop-up screen with thumbnails of the available images in
Joomla!'s default image folder appears. Select one of these images by clicking on
its thumbnail.
7. In the Align drop-down box, click on Right. Click on Insert. The pop-up
window closes.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 4
[ 89 ]
This is what the Arcle: [Edit] screen will look like once you've completed inserng all of the
arcle data:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 90 ]
8. Click on Apply to save changes to the arcle and click on the Preview buon in the
arcle editor toolbar. A pop-up screen opens. This will give you a rough impression
of how the formaed arcle will look. However, it doesn't reect the frontend
formang reliably:
9. Now, click on the other Preview buon (the one in the Info Bar in the top right
screen area). This will show the frontend of the site. Try not to show your
disappointment. There is no sign of your new arcle! That's because you have
to take one last step and add a menu link.
What just happened?
You've created a full-blown arcle, consisng of text and an image. Moreover, you've divided

the arcle text into an intro text and the main arcle text. This way Joomla! will be able
to separately display the intro, with a Read more link to the full arcle. In the editor, the
separaon is indicated by a red doed line.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 4
[ 91 ]
You've seen this division at work on the sample site home page that contains several short
intro texts. Only when a visitor clicks on the accompanying Read More link they are taken
to a page with the full arcle text.
Have a go hero – add your own images to articles
To the arcle you just created, you added an image from Joomla!'s default image set. For
tesng purposes that's okay, but in real life you'll want to add your own imagery. To do this,
click on the Image buon at the boom of the arcle editor screen. In the pop-up screen,
you'll see an Upload box. Click on Browse les to nd an image le on your hard drive.
Select the image le and click on Start Upload. A thumbnail of the uploaded image will
appear among the other thumbnails (you may have to scroll down if there are a lot of
pictures). Click on the desired thumbnail. Choose the appropriate Align seng and click
on Insert. The pop-up window closes; your picture is inserted.
Making content visible: Create a menu link
The arcle you've just created is ready and it's stored in Joomla!'s database—but it's sll
invisible on the frontend of the site. That's because there's no link poinng to it. The Main
Menu is empty, except for the Home link.
Time for action – add a menu link
Let's nish the three steps of content creaon and add a link to your arcle:
1. Navigate to Menus | Main Menu. Click on the New buon.
2. In the Select Menu Item Type box, click on Arcles | Secon Blog Layout. This
menu link type tells Joomla! to display intro texts and Read More hyperlinks to
all secon content. You'll see what that looks like in a minute.
3. In the Title eld, type Acvies.

4. In Parameters (Basic), select the appropriate Secon: Acvies. Click on Save.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 92 ]
What just happened?
Creang just one link to the Acvies secon changes a lot on the frontend. The site now
looks as follows:
The home page is sll
empty, but the menu
does contain a new link,
Acvies.
When the visitor clicks
on the Acvies link
they are shown a Secon
Blog Layout page. This is
an overview page of all
contents of the Acvies
secon. The overview
consists of intro texts
and Read more links to
the full arcles.
For now, there's just one
arcle intro text. When
you add new arcles to
the secon Joomla! will
automacally display
them on this overview
page too.
Download at Wow! eBook

WWW.WOWEBOOK.COM
Chapter 4
[ 93 ]
When the visitor clicks
on the Read more link he
is taken to the full arcle.
The breadcrumb trail
just above the arcle
reects the secons and
categories structure that
you have created: Home
| Acvies | Lectures |
Bad Abstract Painngs.
Have a go hero – create more articles
For the example site you'll need some more arcles. Add a few dummy arcles to each of the
new categories. To do this repeat the steps you just took in Time for acon - create an arcle.
You can create arcles using the tles displayed in the following screenshot. In this example,
three arcles have been added to each of the categories:
As you can see, the Arcle Manager displays an overview of the enre site contents. In
the Title column all of the arcles are shown; at the far right you'll see the secons and
categories these arcles are assigned to.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 94 ]
AAA qqquuuiiiccckkk wwwaaayyy tttooo aaadddddd nnneeewww aaarrrcccllleeesss iiisss uuusssiiinnnggg ttthhheee CCCooopppyyy bbbuuuooonnn iiinnn ttthhheee AAArrrcccllleee MMMaaannnaaagggeeerrr
JJJuuusssttt ssseeellleeecccttt ttthhheee aaarrrcccllleee yyyooouuu wwwaaannnttt tttooo uuussseee aaasss aaa bbbaaassseee fffooorrr aaa nnneeewww aaarrrcccllleee aaannnddd cccllliiiccckkk ooonnn
CCCooopppyyy FFFooollllllooowww ttthhheee ssscccrrreeeeeennn iiinnnssstttrrruuucccooonnnsss tttooo aaadddddd aaa cccooopppyyy ooofff ttthhheee aaarrrcccllleee tttooo aaannnyyy cccaaattteeegggooorrryyy
OOOpppeeennn ttthhheee cccooopppiiieeeddd aaarrrcccllleee (((iiittt wwwiiillllll hhhaaavvveee ttthhheee eeexxxaaacccttt sssaaammmeee tttllleee aaasss ttthhheee ooorrriiigggiiinnnaaalll))) aaannnddd
ccchhhaaannngggeee iiitttsss tttllleee aaannnddd aaasss mmmuuuccchhh aaasss nnneeeeeedddeeeddd ooofff iiitttsss cccooonnnttteeennntttsss

NNNooowww ttthhhaaattt'''sss ttthhheee aaallllll iiimmmpppooorrrtttaaannnttt pppooowwweeerrr ooofff mmmeeennnuuusss
TTThhheee ppprrreeevvviiiooouuusss eeexxxaaammmpppllleee iiilllllluuussstttrrraaattteeesss ttthhheee pppooowwweeerrr ooofff JJJoooooommmlllaaa!!! mmmeeennnuuu llliiinnnkkksss JJJuuusssttt bbbyyy aaaddddddiiinnnggg aaa mmmeeennnuuu llliiinnnkkk
yyyooouuu mmmaaakkkeee cccooonnnttteeennnttt aaacccccceeessssssiiibbbllleee iiinnn ssseeevvveeerrraaalll wwwaaayyysss WWWhhhaaattteeevvveeerrr yyyooouuu aaadddddd tttooo ttthhheee tttwwwooo cccaaattteeegggooorrriiieeesss yyyooouuu'''vvveee
ssseeettt uuuppp,,, nnnooo nnneeewww mmmeeennnuuu llliiinnnkkksss aaarrreee nnneeeeeedddeeeddd AAAnnnyyy nnneeewww cccooonnnttteeennnttt wwwiiillllll ssshhhooowww uuuppp ttthhhrrrooouuuggghhh ttthhheee AAAcccvvviiieeesss
ssseeecccooonnn llliiinnnkkk ttthhhaaattt yyyooouuu hhhaaavvveee aaalllrrreeeaaadddyyy cccrrreeeaaattteeeddd
IIIttt'''sss cccllleeeaaarrr ttthhhaaattt JJJoooooommmlllaaa!!! mmmeeennnuuu llliiinnnkkksss aaarrreee vvveeerrryyy ssspppeeeccciiiaaalll TTThhheeeyyy dddooonnn'''ttt jjjuuusssttt pppoooiiinnnttt tttooo eeexxxiiisssnnnggg pppaaagggeeesss;;;
rrraaattthhheeerrr,,, ttthhheeeyyy dddeeettteeerrrmmmiiinnneee wwwhhhaaattt pppaaagggeee wwwiiillllll bbbeee dddiiisssppplllaaayyyeeeddd MMMeeennnuuu llliiinnnkkk ssseeennngggsss ttteeellllll JJJoooooommmlllaaa!!! eeexxxaaaccctttlllyyy
wwwhhhaaattt tttooo fffeeetttccchhh fffrrrooommm ttthhheee dddaaatttaaabbbaaassseee aaannnddd hhhooowww tttooo dddiiisssppplllaaayyy iiittt TTThhhaaattt'''sss wwwhhhyyy yyyooouuu ssseeeeee sssuuuccchhh aaannn iiimmmppprrreeessssssiiivvveee
llliiisssttt ooofff MMMeeennnuuu IIIttteeemmm TTTyyypppeeesss wwwhhheeennn yyyooouuu aaadddddd aaa nnneeewww llliiinnnkkk tttooo aaa mmmeeennnuuu IIInnn fffaaacccttt,,, ttthhheeessseee MMMeeennnuuu IIIttteeemmm TTTyyypppeeesss
rrreeeppprrreeessseeennnttt dddiiieeerrreeennnttt ppprrreeessseeettt wwwaaayyysss tttooo dddiiisssppplllaaayyy aaallllll kkkiiinnndddsss ooofff cccooonnnttteeennnttt IIInnn ttthhheee ppprrreeevvviiiooouuusss eeexxxaaammmpppllleee,,, yyyooouuu
hhhaaavvveee uuussseeeddd ttthhheee MMMeeennnuuu IIIttteeemmm TTTyyypppeee ttthhhaaattt dddiiisssppplllaaayyysss aaarrrcccllleeesss iiinnn aaa SSSeeecccooonnn BBBllloooggg LLLaaayyyooouuuttt TTThhhiiisss mmmaaakkkeeesss
JJJoooooommmlllaaa!!! dddiiisssppplllaaayyy bbbiiitttsss ooofff aaarrrcccllleeesss iiinnn aaa ssseeecccooonnn iiinnn aaa """bbbllloooggg ssstttyyyllleee""";;; ttthhhaaattt iiisss,,, aaasss aaa ssseeerrriiieeesss ooofff ssshhhooorrrttt iiinnntttrrrooo
ttteeexxxtttsss ooonnn ooonnneee pppaaagggeee IIIfff yyyooouuu wwwooouuulllddd hhhaaavvveee cccrrreeeaaattteeeddd aaa dddiiirrreeecccttt mmmeeennnuuu llliiinnnkkk tttooo ttthhheee nnneeewww aaarrrcccllleee uuusssiiinnnggg
aaannn AAArrrcccllleee LLLaaayyyooouuuttt,,, ttthhheee mmmeeennnuuu llliiinnnkkk wwwooouuulllddd hhhaaavvveee pppoooiiinnnttteeeddd tttooo ttthhheee sssaaammmeee cccooonnnttteeennnttt iiinnn aaa dddiiieeerrreeennnttt
ppprrreeessseeennntttaaaooonnn::: ttthhheee fffuuullllll aaarrrcccllleee pppaaagggeee
IIInnn CCChhhaaapppttteeerrr 888 wwweee'''llllll dddiiivvveee dddeeeeeepppeeerrr iiinnntttooo ttthhheee aaarrrttt ooofff cccrrreeeaaannnggg mmmeeennnuuu iiittteeemmmsss aaannnddd ttthhheee eeeeeeccctttsss ttthhhaaattt
dddiiieeerrreeennnttt MMMeeennnuuu IIIttteeemmm TTTyyypppeeesss aaannnddd ttthhheeeiiirrr ssseeennngggsss hhhaaavvveee ooonnn ttthhheee nnnaaalll rrreeesssuuullltttsss,,, aaa bbbrrroooaaaddd rrraaannngggeee ooofff
wwweeebbb pppaaagggeee tttyyypppeeesss
AAAdddddd sssooommmeee iiinnndddiiivvviiiddduuuaaalll cccooonnnttteeennnttt pppaaagggeeesss::: UUUnnncccaaattteeegggooorrriiizzzeeeddd aaarrrtttiiicccllleeesss
FFFooorrr nnnooowww,,, yyyooouuurrr cccllliiieeennnttt wwwooouuulllddd llliiikkkeee tttooo hhhaaavvveee jjjuuusssttt aaa fffeeewww mmmooorrreee cccooonnnttteeennnttt pppaaagggeeesss ooonnn ttthhheeeiiirrr rrrsssttt wwweeebbbsssiiittteee
LLLeeettt'''sss sssaaayyy ttthhheeeyyy'''ddd llliiikkkeee aaa pppaaagggeee iiinnntttrrroooddduuuccciiinnnggg ttthhheeeiiirrr aaarrrtttyyy sssuuubbbjjjeeecccttt mmmaaaeeerrr aaannnddd aaa pppaaagggeee ooonnn ttthhheeeiiirrr mmmiiissssssiiiooonnn
ssstttaaattteeemmmeeennnttt AAAsss ttthhheeerrreee'''sss nnnooo nnneeeeeeddd jjjuuusssttt yyyeeettt fffooorrr mmmooorrreee cccooonnnttteeennnttt,,, iiittt wwwooouuulllddd bbbeee ooovvveeerrrkkkiiillllll tttooo cccrrreeeaaattteee
cccaaattteeegggooorrriiieeesss tttooo aaaccccccooommmmmmooodddaaattteee fffooorrr ttthhheeessseee tttwwwooo aaarrrcccllleeesss LLLuuuccckkkiiilllyyy,,, JJJoooooommmlllaaa!!! aaallllllooowwwsss yyyooouuu tttooo aaadddddd
uuunnncccaaattteeegggooorrriiizzzeeeddd aaarrrcccllleeesss TTThhheeeyyy'''rrreee ooorrrdddiiinnnaaarrryyy aaarrrcccllleeesss eeexxxccceeepppttt fffooorrr ooonnneee ttthhhiiinnnggg;;; wwwhhheeennn aaaddddddiiinnnggg ttthhheeemmm,,,
yyyooouuu dddooonnn'''ttt aaassssssiiigggnnn ttthhheeemmm tttooo aaannnyyy cccaaattteeegggooorrryyy
DDDooowwwnnnllloooaaaddd aaattt WWWooowww!!! eeeBBBooooookkk
WWWWWWWWW WWWOOOWWWEEEBBBOOOOOOKKK CCCOOOMMM
Chapter 4
[ 95 ]
Time for action – add uncategorized articles

Let's create a Mission Statement page by adding an uncategorized arcle.
1. Navigate to Content | Arcle Manager. Click on New.
2. In the Title box, enter Mission Statement.
3. In the text editor area, add the Mission Statement text and add an image, if you
like. For this example, we've entered the following text:
We all know the works of great art throughout the centuries. But what about
ordinary people's art? What did amateur arsts create? Much of their creave
output has been discarded, thrown away because of its lack of arsc value. Let's
not let that happen to today's amateur painngs. Let's preserve the ordinary man's
arsc view on reality.
The beauty in ugliness
The Society for the Reappreciaon of Ugly Painngs seeks to nd and promote the
beauty that's hidden behind supercial ugliness. Tour our website to discover that
beauty, too!
4. You can add an image to the text if you like; click the Image buon at the boom
of the editor screen; select and insert an image.
5. Click on Save.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Web Building Basics: Creang a Site in an Hour
[ 96 ]
The uncategorized arcle is nished—we just need a menu link to make it visible.
6. Navigate to Menus | Main Menu. Click on New.
7. In the Menu Item: [ New ] screen, we'll create a link to a single arcle. Let's select
the appropriate Menu Item Type; click on Internal Link | Arcle | Arcle Layout.
8. In the Title box, enter Mission Statement.
9. In Parameters (Basic) secon, click on Select to choose the arcle this menu link
will link to. In the pop-up box, select the Mission Statement arcle. The pop-up
window closes.
10. Click on Save. Click on Preview to admire the results. The menu now displays a new

link to the Mission Statement arcle.
Your rst uncategorized arcle is ready. Add the second uncategorized arcle by repeang
the steps you took above. Call the new arcle Introducing Ugly Painngs and create a menu
link Ugly Painngs poinng to this arcle.
Download at Wow! eBook
WWW.WOWEBOOK.COM