View source for Converting an existing website to a Joomla! website

<noinclude><languages /></noinclude>
{{underconstruction}}
== Introduction ==
<translate><!--T:1--> Many first-time Joomla! users already have a website, often written using HTML with CSS style sheets. In this case, you may wish to keep the existing website structure and just convert it to Joomla!. This article provides instructions for doing this with Joomla {{JVer|3.x}}. It is intended as a walk-through for Joomla! beginners and contains links to pages with further information on the topics covered here.</translate>

<translate>== Converting Basic Static Content == <!--T:2--></translate>

<translate><!--T:3--> Static content is content that doesn't change frequently. In simple HTML-based websites, each menu choice simply displays a page of content.</translate>

<translate>=== Page Content Conversion === <!--T:4--></translate>
<translate><!--T:5--> The basic steps for converting this type of content are as follows:</translate>
[[Image:Help-3x-content-article-manager-add-new-article-en.png|thumb|400px|Article Manager Edit Screen]]
* <translate><!--T:6--> Go to {{rarr|Content, Articles|size=1}}. Add one article for each page of static content. Each article will contain the contents of one of your existing static pages. Give your articles descriptive names so you can find them again. Unless you want the article to be shown on your Front Page, select '''No''' for Featured.</translate>
* <translate><!--T:7--> If you have a relatively small number of pages (20 or fewer), you can leave the Category set to '''Uncategorized'''. If you have a large number of static pages, create one or more Categories and Sub-Categories. Then assign each Article to a Category. This will make it easier to manage your articles at a later time. For example, when viewing your article list, you can filter or sort articles using Categories.</translate>
* <translate><!--T:8--> For each article, you can often just copy and paste the content from your existing site (as shown in your browser) into the edit area of Joomla!. Note: In some cases, depending on the amount of custom HTML in the source page, you may need to copy the page to a plain text editor first (such as Notepad++) and then copy from there into Joomla!. The editor also lets you add images, links and other HTML elements such as tables.</translate>
<translate>* For more information on the creation and configuration of articles please see '''[[S:MyLanguage/Help39:Content_Article_Manager_Edit|Article Manager]]'''.
=== Linking Articles to a Menu === <!--T:9-->
At this point, you have the articles created in Joomla!. Now we need to attach them to menus. We will achieve this using the '''Menu Manager'''.
[[Image:J3 menu manager entry new2-en.png|thumb|400px|Expandable List of Menu Item Types]]
* Determine the menu structure you need. If your existing site just has a single main menu, you will just use the Joomla! '''mainmenu''' module. If your existing site has a two-level menu structure, you may create the top level first, and then set the second level by choosing a parent top level menu item. Alternatively, you can use the '''mainmenu''' menu for the top level and then add one new menu for each existing submenu. For the latter, add the submenus by going to {{rarr|Menu Manager,Menus,New|size=1}}.</translate> 

* <translate><!--T:10-->
Go to {{rarr|Menus, Menu Items|size=1}} and click '''New''' to add one Menu Item for each article created above. Click on '''Menu Item Type - Select''' to open a modal window where you can choose an Item Type from an expandable list as shown on the right.
* For our purposes, each Menu Item has the type '''Single Article'''.</translate>
* <translate><!--T:11--> '''Note''': Even if you installed Joomla! with no sample data, you will already have a Main Menu with a  Featured Articles type menu item set as the default (home) menu item (i. e. your homepage). You may either keep this and add new menu items or change this menu item to a Single Article Layout. If you want to have a Featured Articles page, these articles need to a marked as '''Featured''' in the Articles manager.</translate>
* Enter the Title for the Menu Item. The title can be the same as the article title, so you know which article goes with which menu item. But you may choose whatever title you want.
* <translate><!--T:13--> Add a Menu Item for each article you created earlier. If needed, add one or more submenus and then add Menu Items for these in the same manner.</translate>
* For more information on the creation and configuration of menu items please see '''[[S:MyLanguage/Help39:Menus_Menu_Item_Manager_Edit|Menu Item Manager]]'''.
=== Placing the Menu on the Website ===

<translate><!--T:14--> At this point, each article should be associated with one menu choice. Now we need to tell Joomla! on which pages and which location on the page to put each menu.</translate>
[[Image:J3 module manager mod menu-en.png|thumb|400px|Module Manager - Menu]]
* In Joomla!, menus have to be assigned to a '''[[S:MyLanguage/module|module]]''' in order to show up on your website.
* <translate><!--T:15--> Go to {{rarr|Extensions,Modules|size=1}} to access the Module Manager. Even if you started with no sample data, you will already have a Main Menu module. Open this for editing to display the Module Edit form.</translate>
* <translate><!--T:18--> If not already selected, select the '''Menu Name''' for this module from the drop-down list. This will be the name of the Menu you just created in the Menu Manager.</translate>

[[Image:J3 template preview mode-en.png|thumb|400px|Template Preview Mode]]
* <translate><!--T:16--> The '''Position''' selection on the right side of the edit form tells Joomla! where to display the menu module on each page. This may vary depending on the '''[[S:MyLanguage/template|template]]''' you are using. Typical menu locations include '''top''', '''left''' and '''navigation'''. A trick in Joomla! for seeing the available positions is to add the letters '''?tp=1''' to the end of a Joomla! URL after enabling the '''Preview Template Position''' option (go to {{rarr|Extensions,Templates,Options Button|size=1}}). For example, if you are working on a localhost site called '''joomla3''', typing in the URL '''/localhost/joomla3/?tp=1''' will display a screen showing the positions for your current template, similar to the one shown on the right.</translate>
[[Image:J3 module manager menu assignment-en.png|thumb|400px|Menu Module Assignment - Advanced Tab]]
* <translate><!--T:17--> The '''Menu Assignment''' drop-down list in the Module Manager is where you tell Joomla! what pages the current menu module should be displayed on. Typically, your main menu module will display in all pages. If you have additional menus assigned to a module, each of them will be displayed in the pages you assign them to by selecting the corresponding menu items from the drop-down list. </translate>
* '''Note''': If you enable '''[[S:MyLanguage/Allowing_user_registration|user registration]]''', you can configure a module to be displayed to certain user groups only, for example to registered users.
* <translate><!--T:20--> You may press the Preview link in the upper right corner at any time to display the home page so far. The article you choose for the first item on your main menu should display, along with the main menu, something like the example below.</translate>
* <translate><!--T:21--> If you have submenus, repeat this process for each submenu, checking as you go by previewing the website.</translate>
* <translate><!--T:19--> Optionally you may select the Menu Style from  the '''Advanced''' tab. The available styles will vary depending on the template (see below) you use and the position you assign to the module. Some menu styles display the menu items in a vertical list (for example, suitable for the left position), others in a horizontal list. (for example, suitable for the top position).</translate>
* If you need more information on the configuration options for menu modules, please see the '''[[S:MyLanguage/Help39:Extensions_Module_Manager_Menu|Module Manager - Menu]]''' page.
* <translate><!--T:22--> '''Congratulations!''' At this point, your static content should be available. Now you can think about adding new modules, customizing your pages, or taking advantage of the many other Joomla! functionalities.</translate>

[[Image:J3 homepage protostar-en.png|border|center]]

<translate>== Graphics Conversion == <!--T:23--></translate>
[[Image:J3 template edit style advanced-en.png|thumb|400px|Template Manager - Edit Style]]
<translate><!--T:24--> Converting existing graphics from a static website can be easy or somewhat difficult, depending on several factors. These include:</translate>

* <translate><!--T:25--> how close your existing layout is to one of the available Joomla! templates.</translate>
* <translate><!--T:26--> how exactly you want the Joomla! site to resemble the existing site.</translate>
* how familar you are with the customization of CSS and HTML files

<translate><!--T:27-->
You can chose from available templates by going to {{rarr|Extensions,Template Manager|size=1}}. In Joomla 3.x, two templates are already included and many others are available, either for free or for a charge. 

<!--T:28-->
* If you have some knowledge of HTML and CSS, you can adjust a lot in the template by looking at the '''template.css''' file in the templates directory for the template you are using. All template files can also be accessed and edited in {{rarr|Template Manager,Your Template,Editor Tab|size=1}}. 
* '''Tip''': Many templates also provide an interface for editing some template properties directly, such as background color, header image and fonts. This comes in handy if your are not comfortable working with template files or only need to change a few things. Just go to {{rarr|Extensions,Templates,Styles|size=1}} and open the Style you want to change.
* See also '''[[S:MyLanguage/J3.x:Modifying_a_Joomla!_Template|Modifying a Joomla! Template]]''' for more information on working with templates.</translate>

<noinclude>
[[Category:Tutorials{{#translation:}}]]
[[Category:Installation{{#translation:}}]]
[[Category:Beginners{{#translation:}}]]
</noinclude>