View source for First page

{{stub}}
[[Category:First_steps]]
{{AppliesTo|Version=for 2.9}}
=Introduction=
This tutorial should help you to do the first step creating a website with Contao and show you on a very basic level how to begin. It helps you get answers of the questions ... where to I begin with my Webpage? What are the first steps.

The result of the tutorial will be a web page with two columns, a header and a footer with some pages and articles.
The requirements are:
*Overall with: 960px
*Alignment: center
*High of header: 50px
*With of left column: 220px
*High of footer: 25px

=Requirements=
*Contao needs to be installed with success
*[http://www.contao.org/installation.html Installation] needs to be checked with the [http://www.contao.org/configuring-the-live-server.html#system-check-tool system-check] tool and removed from all errors if there are some.
*The Example Webpage "Musicacademy" will NOT be imported while installing Contao
*Knoledge of HTML and CSS

=Preparations=
==Files==
All files(pictures, documents, Video- Audio-files ...) where belong to the web-project, are stored in the /tl_files/ folder. To get a good overview, you can store the files in several sub-folders. With the integrated [File_Manager] ('''Backend-System --> File manager'''), you can create the structure as needet. For example we put all the files for the Webcontent in a subfolder named "firstsite/theme". As this here is a very simple project we could create the CSS File in the Subfolder "theme". We name it layout.css (more later). The full path will be tl_files/fistsite/theme/.

[[File:firstsite-filemanager_en.png|Filemanager|frame|center]]

==Templates==
Templates (check also [[edit_templates]]) are stored in the folder /templates/. In the '''Back-end''' you can find the templates in '''Layout --> Templates'''. Similar as with the files, you can create a sub-folder named "project-name". In our case it is /templates/firstpage/.

[[File:firstsite-templates_en.png|Templates|frame|center]]

{{Hint|Files in the folders "tl_files" and "templates" will be '''NOT''' overwriten when you do a update from the Contao-Core! But it is '''allways''' a good idea to store this files/folders and also the database when you uptdate the system. Then this /files/folders and the database are the '''hard work''' you do for a web-project.}}

=Theme=
We do create in the [[Theme_Manager]] a new "theme" with the name "fistsite". With this, we do have the controll over all actions where are needed to display a wep-project. This are files, stylesheets, frontend-modules and page-layouts.

When you create a "theme" you have to give a name and also mention the autor. Below you make settings to wich folders the "theme" belongs. Also the template folder can be selected. If you have already a screen-shot of your web-project you will be able to select it to show a small picture.

[[File:firstsite-createtheme_en.png|Create Theme|frame|center]]

If you save your "theme" you will see a overview of it with several functions you can access. From left to right, the small Icons represent the functions as, '''edit themes'''; '''delete themes'''; '''information'''; '''CSS edit of the theme'''; '''front-end Modules'''; '''page layouts'''; and '''export of the theme'''. (For the screen-shot below i used contao 2.9.3)

[[File:firstsite-theme_en.png|Theme Overview|frame|center]]

==Stylesheets==
You can create a Stylesheet for your own theme. On the theme-manager by the theme "fistsite" you have the CSS button. Within this button click you will open a overview where you see all your style-sheets for the theme you selected. With "new style-sheet" you create the necessary file.

[[File:firstsite-createcss_en.png|Create Stylesheet|frame|center]]

It is also possible to import a CSS file. You just have to put it in the tl_files. As I mentioned while explaining the "File Manager" under the section "Files" when you put your CSS files in this Folder, you will also get it while you do a export of your theme.

[[File:firstsite-cssimport_en.png|Import Stylesheet|frame|center]]

The CSS-Manager looks like this after creation and import of the CSS Files:

[[File:firstsite-cssmanager_en.png|Import Stylesheet|frame|center]]

==Page Layout==
On the next step we will create a [[Page_layout|Pagelayouts]]. Back in the theme-manager on the theme "fistsite" we have to click on the "page-layout" button (second last one on the right). Now it is up to create a new Layout and we name it default. As mentioned in the [[#Introduction|Introduction]] we do the following configuration:

[[File:firstsite-createlayout-1_en.png|Create Layout #1|center]]
[[File:firstsite-createlayout-2_en.png|Create Page Layout|frame|center]]

The Layout Manager looks like this now:

[[File:firstsite-layoutmanager_en.png|Page Layout Manager|frame|center]]

==Modules Part 1==
The theme just needs the modules. For our example page we do just need one module. It is a Navigation Module. But because we not have a site-structure yet, we will finish this part in the section (see [[#Modules_Part_2|Modules Part 2]]). The module "article" makes an exeption. It not has to be created by yourself. The system does this Module automaticly. You just have to thell the system where you want to display the Articles. In the section "Frontend-Module" you can select where to display it. We need it for the example-page in the "main column".

[[File:firstsite-module-1_en.png|Layout Artikel zuweisen|frame|center]]

=Site structure=
The [[Site_structure|Site structure]] you can find in the ''' "Back-end" ''' under the section ''' "Layout" '''. The Site-structure makes the hierarchy of the "Articles" in the Website. Contao has a "Multi-domain" functionality. So, first you have to create the Start-point of the website. The Page-type you select here is the Website-root. Page Alias is not really needed, then Contao is creating a unic one on it self if you don't put one. The advantage is, that when you let this field free, Contao will use it's own taxonomy. As example the Page Name ''' "My First Site" ''' will be made with small letters and for the blank it will be used a dash (''' my-first-site '''). The URL will look much more standardized in the end. The rest of the settings you can get from the Screen-shot below:

[[File:firstsite-startpoint-1_en.png|Website root #1|center]]
[[File:firstsite-startpoint-2_en.png|Website root|frame|center]]

{{hint|A ''' "Page-layout" ''' has not to be selected. Contao uses automatically the standard layout. If you want to change the layout for the whole page while develop it, you just have to select a second layout as standard. This settings are inherit to the page structure below.}}

Next we just use the "Regular-page" type within the Website root.

[[File:firstsite-regularpage_en.png|Reguläre Seite|frame|center]]