Joomla cho người mới bắt đầu part 7 pot

Web Building Basics: Creating a Site in an Hour In the previous chapter, you have acquainted yourself with the Joomla!. In this chapter, you'll learn to: ‹ Remove Joomla!'s sample data t

Chapter 3

[ 67 ]

Summary

We learned a lot in this chapter about what makes building websites with Joomla! special, what the frontend of your site can look like, and how to use the backend Control Panel

‹ You've learned the difference between static websites and building websites

the Joomla! way A Joomla! powered website is a collection of building blocks, dynamically constructed from the database

‹ The frontend of the website—the site as your visitor experiences it—is constructed out of different building blocks The central part of the page is called the mainbody; the surrounding blocks are called modules

‹ Joomla! offers a great number of options to present information in the central content area, the mainbody Moreover, you can combine the mainbody with

almost any combination and number of modules in the header, in the footer, in the left-hand side column, and the right-hand side column

‹ Every Joomla! site has a backend; a Control Panel to administer your site When you log into the backend you can manage content, add new features, change settings, and so on You add an article through the Article Manager, rearrange elements

on the page through the Module Manager, and change site settings in the Global Configuration panel

In the next chapter we'll get up to speed and take things much further Now that you've experimented with Joomla! a bit, you'll create a fully functional website that perfectly meets your first client's demands—and it will be finished in an hour!

Web Building Basics: Creating a Site

in an Hour

In the previous chapter, you have acquainted yourself with the Joomla! interface, explored the example site, and tried out Joomla!'s administration interface.

You know your way around, you've got a good idea of how things work—so

now it's high time to start building a website! In this chapter, you'll build a

complete site in just one hour Imagine, you've just got a call from your first

client They have founded a club that is about to get some media attention,

but they still haven't got a website they can refer to They need a website and

they need it fast Can you help them out?

That's a perfect opportunity to put your new web building toolkit to the test

And, well, being new to Joomla!, maybe you'll need a little bit more than

just one hour However, if you start now, you're certain to meet tomorrow's

deadline—and have time left to have dinner in time, take a hot bath, and grab

a movie too.

In this chapter, you'll learn to:

‹ Remove Joomla!'s sample data to create a blank canvas for your site

‹ Customize the site's template

‹ Add content: create a framework, add articles, and add menu items

‹ Add new features: create a contact form and a poll

Web Building Basics: Creating a Site in an Hour

[ 70 ]

What you will be making

In the following screenshot, you see what you will be building throughout this chapter It's based on Joomla!'s sample site, but it's perfectly tailored to the client's specifications:

Chapter 4

[ 71 ]

SRUP's the word

Allow me to introduce you to your first client! It's the Society for the Reappreciation of Ugly Paintings They just love amateur paintings that mostly end up dumped in the trash heap or turn up in charity shops According to the SRUP philosophy, those ugly paintings represent the ordinary people's artistic view on reality, and this should be treasured Now that a big newspaper is about to write an article about SRUP, the society needs a website to broadcast their message and tell the public what they're all about You may not be into art, but you are into the art of building websites, so you're just the one the SRUP people need

SRUPs wish list is as follows:

‹ The look and feel of the site should fit with the logo and colors found on the

society's stationery

‹ The site should present several content pages in a well organized way, providing

a solid basis for further expansion

‹ The home page should show a poll, to increase visitor interaction

‹ Visitors should be invited to get in touch; there has to be a contact form

Logging in again

If you want to follow along with the exercises in this chapter, I'll assume you're logged in to the backend of your site Remember, it only takes two steps:

1 In your browser, log in to the backend, by adding administrator to the URL of your website: www.mysite.com/administrator

2 At the login prompt, enter your username and password and click on

the Login button Once you are logged in, you'll see the Control Panel.

The Control Panel is the home page of the backend

Cleaning up: Removing the sample data

In Chapter 2, you've installed Joomla! with the example site data You'll only do that once, when you're new to Joomla! and want have a first look at its possibilities Once you start building your own site, you don't need the sample data anymore Unfortunately, there is no

"Uninstall Sample Data" button You could install Joomla! again without sample data, but it's faster to clean things up In the next two steps we'll do just that

Web Building Basics: Creating a Site in an Hour

[ 72 ]

Admittedly, cleaning up Joomla! may seem about as exciting as wiping clean a wall-to-wall classroom blackboard before the lesson starts However, it's a great way of preparing

yourself for your very first Joomla! site You'll find that stripping Joomla!'s example site will give you some useful insight in the way it's constructed Bit by bit, it will reveal the different types of content that have been used to fill the empty CMS framework

If you have installed Joomla! with no sample data you can skip these two steps

Step 1: Hide the unnecessary stuff

The sample data consists of two types of content On the one hand, you have articles (basic content), on the other hand there are modules (remember, these are prefab function blocks,

such as banners, forms, and additional menus)

Time for action – hiding modules

Let's start with the modules As much of the default ones are redundant for our goal, we'll switch them off In Joomla! lingo, switching things off is called disabling Disabling doesn't erase these modules; you can always enable them again

1. In the Extensions drop-down menu, click on Module Manager The Module

Manager displays a big list of modules that are installed: Breadcrumbs,

Banners, Footer, and so on In the Enabled column, you see whether

or not the module is in use (and therefore visible in the frontend):

Chapter 4

[ 73 ]

2 Click on the green check mark to the right-hand side of the Banners module name.

The check mark changes to a cross indicating that the module is now disabled

3. Now disable all of the following modules by clicking on the Enabled check mark next to the module name: Banners, Footer, Example Pages, Advertisement, Polls, Resources, Key Concepts, Login Form, Who's Online, Newsflash, Latest News, Popular, Top Menu, and Syndication If you've followed along in Chapter 3, some

of the menu modules may already be disabled Make sure you don't inadvertently enable them again!

4. To see the results click on Preview Only a few modules are left, such as the main

menu and the search box:

Web Building Basics: Creating a Site in an Hour

[ 74 ]

What just happened?

To be able to put together our first Joomla! site, we're getting rid of a lot of distracting extras so that we can build on a solid, simple foundation—a blank canvas perfectly suitable for the new Ugly Paintings site That's why you have hidden a few extras that come with the example site They're still ready for use, but you won't be needing them for now

Step 2: Remove sample content

Let's remove the sample content now It consists of three groups:

‹ Actual content: articles

‹ The containers Joomla! uses to organize articles; these are called sections

and categories We'll learn more about them in the rest of this chapter.

‹ Menu links to these articles, sections, or categories

Time for action – deleting articles, categories, and sections

To remove content you always start with the actual articles That's because you cannot remove containers (categories and sections) as long as they're not empty

1. Navigate to Content | Article Manager.

2. In the # Display drop-down menu at the bottom of the screen, select all Now all

of the articles are displayed in one list

3. Select the checkbox at the top of the list (just to the right-hand side of #) This way

all of the items in the column are selected:

4. Click on the Trash button in the toolbar Joomla! shows a message confirming

that the articles have been sent to the Trash

5. When articles are in the Trash, they're still in Joomla!'s database should you wish to restore them However, you won't be needing these articles again To

permanently delete them navigate to Content | Article Trash Select all

of the items and click on Delete.

Chapter 4

[ 75 ]

6 In the next screen, click on Delete again to confirm you want to delete all

of the articles

Now remove the sample categories and sections These are containers for articles that no longer exist:

7. Navigate to Content | Category Manager Select the top row checkbox to select all of the categories Click on Delete.

8. Navigate to Content | Section Manager Select the top row checkbox to select all

of the categories Click on Delete.

Finally, you have to empty the Main Menu Nothing new here; this is done in a similar way:

9. Navigate to Menus | Main Menu Select the top row select box to select all of the menu items Click on Trash A message is displayed that all of the items are sent

to the Trash except for the default menu item, Home This item can't be deleted

because without at least a home link it would be impossible to make any

of the site's contents visible

10. As you won't be needing these menu links any more, you might as well permanently

remove them from the Menu Trash Navigate to Menus | Menu Trash, select all of the items, click on Delete, and confirm.

Now all of the content has been removed from the example site except for the Home link

and the Search module:

Web Building Basics: Creating a Site in an Hour

[ 76 ]

What just happened?

There it is! You have peeled the Joomla! onion The website is stripped of its contents You've seen how Joomla! content consists of content containers (called sections and categories) and articles (the actual content) Apart from this, menu items are used to make the content visible In a few minutes we'll add new content in the same order that we've just used deconstructing the example site First we'll create sections and categories, then we'll create articles assigned to those sections or categories, and finally we'll create menu links to this

new content We'll be practicing this content containers—articles—menu links mantra quite

a lot—but don't worry, soon enough it will come natural

Remember, installing Joomla! with sample data is only recommended when

you're new to Joomla! and want to get familiar with the system by exploring its

page layouts, menus, modules, and so on When you already know Joomla!, it's much easier to start without sample data

Have a go hero – clean up those menus

Actually, there is some more content that comes with the Joomla! installation There are more menus! You have disabled all menu modules apart from the Main Menu, which means they're invisible on the frontend But these menus (Top Menu, Resources, and so on) are still available in the backend, and their contents (the menu links) still exist Although they

won't be in your way when constructing a new site, they will still show up in Menus | Menu Manager If you like to a have a thoroughly cleaned slate to start with, why don't you delete

all unused menus? Throughout the course of this book, you'll only need the Main Menu To

delete any of the other menus, first delete the menu contents (in the Menu Manager, select the menu and click on Delete) and then delete the menu modules (in the Module Manager, select the menu module and click on Delete).

Building your site is a three step process

You've now got a blank canvas The site is empty, there's no content, and there are just a few basic layout elements It's high time to start building something new, cool, and attractive! We'll do this in three steps:

1 Customize the layout: Tweak the basic layout to fit your needs.

2 Add content: Design a structure for your content (using sections and categories) and

add articles that fit the content framework

3 Add extras: Add further functionality to your site, such as a contact form or a poll.