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 . 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. 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. 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