Note, the entire tutorial from start to finish will be available as a single zip file when it is complete, it will include all source html, css, PSD/Images etc.
Setting up the dynamic elements – Lists, Libraries and all that fun stuff!
The next logical step in our site creation tutorial is to take what we have created, and start breaking it apart, by this I mean literally starting to remove all those content areas and images in order to make them more dynamic.
Breaking it down
The first thing we have to do is take a look at our page, and figure out what static elements will become dynamic, and what type of dynamic element will they become.
In this example I have broken our comp down as as a guide to show what we need to create in order to turn this into a more dynamic and content managed site.
Trimming the static fat
Now that we know what we will need to create we can go ahead and remove those areas from the actual site leaving just blank cells which we will fill in with new dynamic elements.
This example is prett much what my site would look like at this point.
Create the lists and libraries (on the SharePoint side).
The next logical step is creating the lists and libraries (dynamic elements).
In order to create the lists and libraries you will need to visit the create.aspx page located in the _layouts/1033 folder. So open up your browser, and point it to http://YOURSITE/_layouts/1033/create.aspx.
From here you can see a variety of different out-of-the-box dynamic elements that are quite easy to set up.
Let’s run through a couple just to get your feet wet, we will start with our left column which we decided would be a links list, this list will replace the former “Recent Works” links.
Setting up a Links List.
Step 1. Visit the http://yoursite/_layouts/1033/create.aspx page
Step 2. Click on the “Links List” to create this list.
Step 3. Name your list, in our case we’ll call it Recent Work.
Step 4. Add your description, select NO for quick launch, and click create.
That’s it, you have just created a dynamic list capable of capturing data via forms and storing it in a database … all without a single line of code! – Pretty neat huh?
If the base lists that come with SharePoint do not capture all the information you want you have two choices, a) You can create a “Custom List” and add all the columns yourself, or b) Create a list based on the cloest match to what you want and add to that one.
Each (Field) in your form for capturing data can alternatively be known as a “Column” – So if you wanted to capture (Company Name) in your form, Company Name would be a column.
Adding extra columns to your list is easy, here’s how:
Let’s assume you have THIS list, and you want to add another option where they can select whether or not the link is “Cool!”.
First click on the “Modify Columns and Settings Link”
Then click add a column, you will then select a name for your column and a data/field type (ie: Drop Down Choice Menu, Text Area etc.)
Click ok and you are all done, you just added another field to your form, again without writing a single line of code.
The same idea goes for most all lists, and document libraries so I’ll clue this up here and go ahead and create the rest of the lists and libraries behind the scenes.
I will create a single post for the “Nifty Document Library Navigation” because it’s worthy of it’s own post. That part of the tutorial will be next …
After that all we have left is:
Importing the lists/libraries into our site.
Using the “data-view” web part to create a more flexible and stylish look.
Styling the admin pages, theme setup and customization
and finally backing up our work and taking a look at the final product.