hi jigar,
1) I can recommend the videos. You'll need to subscribe. There is one on using .Net controls that would get you up and running.
2) this screen cast on master pages is handy
http://www.creativewebspecialist.co.uk/category/masterpages.aspx
3) Starter kit: http://umbraco.org/documentation/books/how-to-use-creative-website-starter-(cws)-for-umbraco
This is the recommended and easiest way to get up and running with Umbraco in no time.
The Microsoft Web platform installer will handle everything from installing your database, missing files and configuring a website running Umbraco for you automatically.
To get started, simply click the button below, which will launch the installation tool after a quick download.
Alternatively you can download Umbraco from our project hosting on umbraco.codeplex.com which stores the latest release, along with a list of all our earlier releases.
If you need to upgrade an earlier version or want to install a specific version, this is the option to use.
You can find all our releases here
A community written installation guide can be found on our.umbraco.org
HOW TO – Creating your first Umbraco website from first principles
Using Umbraco v4.5.1, August 2010
Hello,
I first looked at Umbraco when it was at about v3 but felt the extra expense of Windows hosting, Full/Medium trust issues and the need to install in the website's root, prevented me from using it, so I went with Joomla. Now about 18 months later, with greater website experience I decided to look again at Umbraco for a personal website and was impressed by the considerable improvements that have taken place. A search of the various Umbraco websites produced much information describing new features such as,working in medium trust, installation in directories and more flexible template creation caused me to undertake a serious in-depth review. Ultimately, any site I create has to work satisfactorily on a shared hosting as for a personal site other forms are too expensive, must work with .Net 3.5 as that's the highest offered by the hoster I'm using and must be able to run from subdirectory as I don't wish to devote one domain to just one site.
In much of the information you find on the Umbraco sites does not mention the version that the author is referring to, so that when reading at some time later the reader can be confused. So, for this document I am using v4.5.1 in August 2010. I will endeavour to keep this post updated if I can.
Also, I'm writing this soon after resolving a few issue I had during the initial installation and at the start of configuration. So while my experiences are fresh in my mind and as a thank you to those that answered my questions in the forums so quickly, this document is my contribution.
Installation:
I'm using Windows 7 Ultimate 64bit with the incorporated IIS v7.5.
1.
Create a subdirectory off c:\inetpub\wwwroot\ to be your website, such as c:\inetpub\wwwroot\MyWebsite.
2.
Unpack the distribution, v4.5.1_for_net_3_5.zip into this directory and rename the “build” directory to Umbraco1 so you have, c:\inetpub\wwwroot\MyWebsite\Umbraco1. (I use Extract Here in 7-zip).
3.
Use IIS Manager to create MyWebsite using c:\inetpub\wwwroot\, bind it to a port. The Umbraco1 directory will appear.
4.
Right click the directory and select Convert to Application.
5.
Right click the converted application and select Edit Permissions.
6.
In the dialogue that opens, select the security tab, add Network Service with Full control:Allow, and change IIS_IUSER to Full control:Allow. As this is a localhost site, we'll make things easier for ourselves.
7.
Since I am using port 182, open a Firefox browser to http://localhost:182/Umbraco1, and the installation program will appear, with the site central in the browser window. If it looks odd and to the left, you have the permissions wrong in the previous step.
8.
Create the database using whatever method you're comfortable with.
9.
Complete the installation wizard using the next button adding the appropriate information, but stop before entering Runway option.
10.
Select “No foundation, please”and press Next. On the final page select the text below, “Launch Umbraco”. The Admin console may open already logged in as the script has remembered the password you entered.
11.
The installation is now complete.
The above is very short, as the main point of this HOW TO is not installation, but I needed to specify how I have created the website for the remainder of this document.
Configuration
My interest is creating a template based on the 960 grid system, http://960.gs. I'd also noticed the package our.umbraco.org/.../960grid-base-templates which gave me the basic idea, but as the latest version of 960 grid has a 24 column grid I decided to use that as the basis of my own templates.
1.
Open a new Firefox browser tab and open, http://localhost:182/Umbraco1, you should see a centrally placed page with the words, “Looks like there's still work to do”.
2.
Unpack the 960 grid download and find the “....\code\css\uncompressed” directory. Copy the css files to “c:\inetpub\wwwroot\MyWebSite\Umbraco1\css”. In my case I did not copy 960.css and the rtl ones.
3.
Return to the admin console and select Settings in the lower left pane. Open Stylesheets and the files you copied should be present.
4.
Open, enter an Enter key and then save each of the css files in turn. We need to do this as Umbraco writes a comment into the end of the file on save.
5.
To eliminate the “Looks like there's still work to do” page we need to enter our Home page. And to enter a Home page, we need a Document Type. So staying in the Settings section, right click Document Types and a small dialogue will open.
The Master Document Type drop down will show None... This is new for v4.5.1, so do not be confused as to the catch22 here as this is correct for the first Document Type you'll create. Keep the “Create matching template” checkbox selected and enter a name. For this example I've chosen “nsz_gridMaster”.
A four tabbed document will be create but for this very minimalistic HOWTO you need to add or change nothing.
6.
Return to Contents and right click to create the Home page.
I chose “Home” as the name and once saved notice the small red addition to the folder icon on left under Contents. This indicates the Home page is not published. Select the icon next to the obvious Save one and this publishes the document. In your other browser window re-request http://localhost:182/Umbraco1 and you should see a blank website.
7.
Return to your 960 grid download, open into a text editor, “….\code\demo_24_col.html”, and select into the clipboard the whole of the contents.
8.
Return to Umbraco's admin console and select Settings. Open the Template nsz_gridMaster that the system created for us, and paste the clipboard into the document between the
Make some changes as follows, then save:-
(a). Remove “uncompressed” from the path of demo.css
(b). Change the tag to
(c). Ensure that all the css link tags have a tilda added, href="~/css/960_24_col.css" />
9.
Refresh your other browser window and the 960 grid demo page should appear correctly centred with the demonstration of the 24 column grid, but missing the background strip image. We'll fix that later.
10.
For a little experiment, return to the Template and remove the ~ front of all the css paths, , and refresh your second browser. All the formatting should disappear and the page should move to far left. That's how I started with Umbraco and it got me very confused.
11.
Now let's fix the demo images. Return to your download of 960 grid and copy the image from “...\code\img\24_col.gif” to “c:\inetpub\wwwroot\MyWebSite\Umbraco1\css”. For this demo we'll jut use the css directory for convernience.
12.
Return to the admin console and locate the demo.css file in Stylesheets. Move to the bottom of the file and update the image path like this “url(../css/24_col.gif)”. Browsing to the website should now show the background image.
Configuration continued – Nested Master pages
We will now add more templates as nested Master pages, msdn.microsoft.com/.../>
1. In admin console, return to Settings\Templates, expand tree and right click on the top level template nsz_gridMaster and create a new Template with the name, nsz_grid24Container. A template with a single line is created where Umbraco maintains the MasterPageFile entry for you automatically.
Enter an opening and closing asp:Content tags and save. The contents should look like this
<%@ Master Language="C#" MasterPageFile="~/masterpages/nsz_gridMaster.master" AutoEventWireup="true" %>
I decided on a convention, of course where possible, of naming the ContentPlaceHolderId as the same name as the current template.
2. Return to the higher template and cut all the contents between the body tags. You might want to temporarily hold in text in a text editor as you'll need it again in a few minutes.
3. Between the body tags enter the single line and save.
By using an ID which refers to the lower, maintenance is easier as you can see where to data is coming from.
4. Return to the lower template and paste the text cut from the body tags between the asp:Content tags.
If you browse the site you might be surprised to find that the data disappears leaving you with a blank black screen. So, nested Master Pages don't work out of Umbraco without setting something else....
5. Refecting on why Umbraco has Documents and Document Types, we need to re-configure them to acknowledge the presence of the lower template.
In the Info Tab of the nsz_gridMaster Document Type you'll now see two Allowed templates including our new lower template, nsz_grid24Container.
Swap over the selection, so now nsz_grid24Container is the only allowed template and save. Once saved you can then select it in the default template drop-down and save again.
6. Move to the Contents:Home page and you'll notice that the template has changed to choose, and the data still does not appear in the browser. However after Selecting nsz_grid24Container and save/publish. Our demo page shown once more.
7. You can see now how nested Master Pages are constructed in Umbraco, but to complete this HOWTO we will add third and fourth levels.
8. Let's simplify our demo page by removing the lines 18 to 340 and saving. That's removing all the group of combinations and the diagonal 30 wide group. Our demo now has five lines including titles.
9. Since I come from Joomla where templates can be based on three columns, we'll create a new row in our demo that will represent 3 column content, which in the 24 column 960 format I have chosen to be, 5,14,5. Therefore, in the template nsz_grid24Container enter the following on line 18 and save.
10. Create nsz_gridContainer as a descendant of nsz_grid24Container and notice how Umbraco creates the outline contents of the template for you,
<%@ Master Language="C#" MasterPageFile="~/masterpages/nsz_grid24Container.master" AutoEventWireup="true" %>
11. Add text within the
<%@ Master Language="C#" MasterPageFile="~/masterpages/nsz_grid24Container.master" AutoEventWireup="true" %>
[Content Left]
[Content Middle]
[Content Right]
12. Create at the fourth level a new template nsz_grid5145Details, which you can edit with some text messages such as this, and save.
<%@ Master Language="C#" MasterPageFile="~/masterpages/nsz_gridContent.master" AutoEventWireup="true" %>
This is Left Content
This is middle Content
This is Right Content
13. Change the entries on the Document Type and the Home page, as described before, to use the fourth level template, nsz_grid5145Details and your messages above will appear on your site.
That's it. I hope you've enjoyed reading this article about the very basic way you can start building your site from first principles and some of the pitfalls I ran into my first time with Umbraco 4.5.1
source:our.umbraco.org
© Blogger templates The Professional Template by Ourblogtemplates.com 2008
Back to TOP
