Step-by-Step Tutorial on SharePoint Site Creation – Part 8

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.

I am going to continue on with this tutorial right away, I didn’t want to waste too much time on the initial ‘site-setup’ as I assume anyone reading this far into the tutorial is well aware of how to do that.

In the last installment we finally reached SharePoint, we now have a site set-up that we want to turn into the site we created in the comps.

As mentioned we’re going to use FrontPage 2003 for the customzation of this site template.

There are several debates we could have on the usage of FronrPage 2003, it’s pro’s and con’s but that also is for a later time, for now we’re going to make use of the features that FrontPage has to offer when dealing with SharePoint sites.

Important Notice:
This again is a site template, this is NOT a site definition, this will not be attached to any site-definition/template. The most common term for this type of template would be “unghosted”.

In this situation that’s ok, we are not going to be dependant on the portal for future changes, and we don’t want sub-sites, or any other sites following this template.

Site definitions are very powerful and more often than not the best way for customization, again that’s another discussion which we will have at the end.

For now let’s get FrontPage 2003 open and dig in …

Let’s get started and turn the site we created into a ‘real website’.

Connecting to your SharePoint (WSS) site using FrontPage 2003

Select File then select Open Site from the FrontPage 2003 menu.

Next type in the address of the site you created from the last tutorial, for example: the click open.

You will notice FrontPage 2003 connects to your WSS website allowing you to make edits.

Notice: Again – The very moment you make a change from FrontPage 2003 and select save your site becomes ‘unghosted – meaning it detaches itself from the site defintion used to create it’ (if you remember in our case that was the “Blank Site – site definition”.)

As mentioned in our situation that’s perfectly ok, I just feel the need to stress that point as doing this type of customization when it’s not ok can ‘really lead to a lot of trouble!’.

Continuing on …

Open your default page

Go ahead and open your default.aspx file (the main page of your site).

Always Backup First!

What I usually do at this point is save this file so that I have something to reference in case I need a control, or other element.

Go ahead and choose file, save as and save it as default2.aspx. You can then close default2.aspx and re-open default.aspx, this is just a precaution, always backup anything you change in SharePoint first.

Editing in Code View

Let’s switch to code view (located at the bottom of FrontPage 2003) and replace the current default.aspx files contents (select all, and delete it) with this files contents (note: This is a VERY slimmed down default.aspx file that has the very basics for the site to actually work in sharepoint).

This will give us to a very slimmed down SharePoint page.

Adding your regular website code/html

From here we can copy and paste the HTML from the static site we created earlier in the installment.

Simply grab everything within the body tags of the static page we created and paste it between the body tags of the default.aspx file in SharePoint.

If you preview the SharePoint site now you will notice that the images are missing, and no styles are applied, let’s go ahead and move those over as well.

Importing your Images

To add your images from FrontPage 2003, go to File and select Import.

Make sure you have the Images folder for the SharePoint site selected in the list on your left.

If you do not see a file listing click this button to toggle your pane.

Next select Add File, browse to the folder containing the images you wish to upload. In this case you can browse to where you extracted the static site we created and select all the images in the images folder.

Then click open and finally click ok to import the images.

That does it for our importing of images, let’s move on …

Importing and attaching your stylesheet(s)

We want to import the stylesheet to the root so select the top (site) in your left menu.

Then follow the same steps as before, locating the stylesheet from the static site and importing it.

Then you can add your stylesheet to the HTML as you normally would using link href=”yourstylesheet.css” rel=”stylesheet” type=”text/css”

Now things are really starting to look good!, our SharePoint site is now looking a lot more like a real website.

In the next installment we will start breaking down the site elements and converting them to something more dynamic using lists, and web parts.

You may also like...

1 Response

I would love to hear from you.

%d bloggers like this: