Creating a New Site
Let us proceed and build our first page. We could just create a page straight away, but because we would like to publish our page to the SharePoint server, once we have done so, we will create a new site, which we will call "hello world". To create a new site, follow these steps:
- From the menu bar in SharePoint Designer, select File | New | Web Site.
- Select Empty Web Site from the list of possible pages.
- We can store our local version of the site anywhere we wish on our computer or network. For now on, we will use the default location inside
My Documentsbecause it is as good a place as any. Give your new site a new folder within theMy Web Sitesfolder (e.g.,C:\Users\<USERNAME>\Documents\My Web Sites\hello world). - Click OK.
When going through this process, we will see the New dialog which will be similar to the one below.
Creating Our First Page
If we had selected the One Page Web Site option in the previous section, a blank page called Untitled_1.htm would have been displayed in the center of our designer. It would have been possible for us to have used this as our first page, but I recommend we use a different type of page for all the web pages in our site.
HTML pages (i.e. files with the .htm suffix) are simple souls. They will display static information very nicely, but when it comes to actually doing something (such as displaying a list of products contained in our database), they will shrug their shoulders and say they can't do that.
If you want your pages to do more than look pretty (and I am sure you do because you have an interest in SharePoint), then Active Server Pages are for you. The latest generation of ASP pages have .aspx as their suffix.
I recommend always creating ASPX pages because they can contain dynamic content, SharePoint-specific controls, and other ASP.NET controls when necessary.
For example, if we start with an HTML page, which only displays a photo and a few paragraphs of text, then the time comes when we decide we want to quickly add a list of the top ten bottles of wine from our database to that page and we will have to tear up the old HTML page and create it as a new ASPX page. When we do this, not only will all the links to the page on our site and other websites need to change, but we will also lose any good search engine rank the page had and any bookmarks that people had pointing to that page. So, I think it is better to just start with ASPX, even if we don't have any dynamic content to start with.
To add a new page, select File | New | ASPX from the menu bar.
The first thing we should do is give our page a more meaningful filename and save it to our hard drive:
- Select File | Save.
- Leave the default location as
C:\Users\<USERNAME>\Documents\My Web Sites\hello world. - Change the File name to default.
- Save as type ASPX Files.
- Click Change title... and type Hello World and press OK.
This has saved our empty page to our hard drive. You will notice that a couple of things happened when we did this. Firstly, the name of our file changed to default.aspx, as we would expect, but it has also added a new Web Site tab to our tabs in the workspace.
Adding and Formatting Text
You will notice in the white workspace there is a tag that says form#form1. This means that there is a form on the page with an ID of form1. All ASPX pages are required to have a form tag, so SharePoint Designer inserts one for us.
Now, let's go ahead and add some text to our page. Click inside the white workspace and type the words Hello World. For the purpose of this exercise, it does not matter if we type within the form#form1 area or in the blank space beneath it.
Once we have done that, we hit the Enter key and add some more text beneath our Hello World text.
We can make our Hello World text into a heading by doing the following:
- Highlight the Hello World text on the page.
- Click on the Style drop-down on the Common button bar and select the Heading 1 <h1> option.
- Remove the extra carriage return that SharePoint Designer added in front of your second sentence.
You will notice that so far this has not been any more difficult than using Microsoft Word to add content.
Once we have finished making these changes, we must remember to save our page.
There is plenty more that we can do to format our page nicely, but we will save that for the next chapter.
Previewing Our Page
SharePoint allows us to quickly check what our page looks like inside the browsers that are installed on our computer.
To preview our page, we go to File | Preview in Browser and select the browser we would like to use. Once we have previewed our page, for the first time, use anything but the first item in the list; don't be fooled into thinking that our browser is no longer on the list. It has simply moved up to first place on the list.
To quickly preview our page at any time, we can hit F12.
You may have noticed that when we preview our pages, a small icon is added to our system tray. This is because our computer requires a web server to display our page in the browser. Rather than forcing us to install and configure Internet Information Server (IIS) and the latest .NET framework on our computer, it quickly starts the ASP.NET Development Server, which serves our page for us. This server will continue to run on our PC until we either double-click on the icon and click Stop, or close SharePoint Designer.
Don't worry that the port number you see is different from the one in the graphic below, because a different number is selected each time the Development Server is started.
Creating Hyperlinks
Now that we have seen what our page looks like in the browser, let's return to the designer and add a hyperlink.
We can make text link to other pages on our site or on the Internet, allowing users to click trough to those pages:
- Type "Visit the Wine Company." onto our page.
- Highlight the text you would like to use as the linking text (i.e. "Wine Company").
- Go to Insert | Hyperlink.
- Either browse to a page we would like to link to, if we are linking to another page on our site, or type an address into the Address drop-down list (e.g. http://www.winecompany.co.uk), if we are linking to an external site.
Notice that we can also use the Insert Hyperlink dialog to insert a link to an email address (so that it creates a new message addressed to our chosen recipient in the user's email client). We can also specify the target frame or window that the new web page will open in. In addition, there is a Parameters button that allows us to pass information from one page to the other, which is useful when creating dynamic applications.
When choosing suitable text to use for our link, we should bear in mind that it is more useful to users if we use descriptive text for our links. For example, using the text "contact us" or "red wine" is more useful than lots of links dotted around our page saying "click here" or "here".
Adding Images
We will take this opportunity to add the Wine Company logo to our test page. The most common type of image used on web pages for full color images is a JPEG and our logo is no exception.
You can find the logo in the code bundle that you get along with this book. For further details, refer to the Downloading the Example Code for the Book section in the Preface.
Before we can add the logo to our page, we must first copy the logo into our website folder, rather than just inserting the logo from wherever it happens to be on our computer. The reason for this is that when we publish our site to the SharePoint server, we also want to make sure that all the files that are used in the site, including images, are published with it. If we were to publish a page that used an image on our C drive, it may display fine to us (because the browser would be able to find the image on our hard disk), but the image would not appear to users of other computers because they would not have the image on their computers.
Go ahead and copy the logo into the hello world folder that was automatically created within the My Web Sites folder, which is in the My Documents (or just Documents, if you are using Windows Vista) folder on your computer. You should already see the default.aspx file we created earlier in that folder. Because I am an organized soul, I would usually make a folder called images within the My Web Sites folder and put the image there, but because we are just creating a small test site, let's not worry about that.
Now that we have copied the image into the folder our site uses, let's return to SharePoint Designer and insert the logo into our page by clicking on the spot on the page where we would like our logo and selecting Insert | Picture | From File.... This allows us to browse to the hello world folder, select the image, and insert it to our page. It is also possible to drag and drop the image from our Folder List onto the design surface.
By default, we will see an Accessibility Properties dialog before the image is added. This allows us to specify Alternate text, which will be used by speech browsers used by the blind. Something meaningful, such as "Wine Company logo", should be added here, rather than an unhelpful generic term like "picture". It should also be noted that search engines also use this ALT text in their algorithms, so it is in our best interest to use something meaningful wherever possible (e.g. the name of the product we are selling). The Long description is not as necessary.
Creating Tables
Web designers love using tables (often perhaps when they should not, but more about this later in the chapter). It is not uncommon for a single web page to have three or more tables nested inside one another. We will add a table to our test page that will display a list of the company's five bestselling wines, with the help of the following steps:
- Go to Table | Insert Table.
- Change the Size options to 7 for Rows and 3 for Columns.
- Set Alignment to Center.
- Under Specify width, type 450 instead of the default 100.
- Click the In pixels radio button.
- Set the Cell padding to 5 and the Cell spacing to 0.
- Click OK.
We can now click inside the table, which was created, and type our data like so:
Believe it or not, these are the names of real wines (not made-up names such as Nasti Spumante).
As we type the data into the cells, notice how the width of the columns automatically resizes to give the text the best fit.
Once we have created our table, we can edit the table properties at any time by right-clicking on the table and selecting Table Properties... from the shortcut menu.
Let's take a more detailed look at the table options:
- Size allows us to specify how many rows and columns our table has. A word of caution — if our columns are going to have anything longer than a few words in them, then we will probably want to keep the number of columns to five or less, so that our page does not become too wide.
- Layout allows us to control the size and location of our table as well as the size of the gaps in and around the cells:
- Alignment allows our table to be positioned on the left, in the center, or on the right of our page.
- Float can be set so that our table floats to the left or to the right of the page. "So how is Float different from Alignment?" I hear you ask. Good question. The difference is that when Float is enabled, the content on the page outside of the table will wrap around the table nicely.
- Cell padding specifies the size of the margin in pixels, between the content of the cell and the edge of the cell.
- Cell spacing is similar to Cell padding, but is the size of the margin between different cells. The choice whether to use Cell padding or Cell spacing to provide space between the contents of our cells only really needs to be made if our table has a visible border or background color.
- Specify width allows us to enter either a set width for our table (if we click In pixels) or a percentage of the page or cell width (if we select In percent). A table does not need to have a specified size, but it is a good idea to provide one so that we can be sure about how wide our table will be. If we do not specify a size, the table will become whatever width other content on the page thinks it should be.
- Specify height, on the other hand, is usually left blank, allowing the table to continue down the page for as long as it requires. It should be noted that when specifying height or width, using fixed sizes rather than percentages is preferred by the standards bodies (see http://www.w3.org/TR/REC-CSS2/tables.html for more information about table standards).
- Borders allows us to specify the width and color of any borders that we might use in our table:
- Size allows us to specify how many pixels wide the outer border of our table is. If we do not want to have a border, then we simply select 0. If we specify a border of greater than zero, then a border of one pixel wide will also appear between each of the cells in our table.
- Color gives us the opportunity to not only make the border of our table a nice color to match the rest of our page, but also remove the basic 3D effect that some browsers render wider borders with.
- Collapse table border changes the table from using W3C's Separated Borders Model to using their Collapsing Border Model. In the Collapsing model, it is possible to specify borders that surround individual cells, rows, and columns (and indeed row groups and column groups). This model is rather complex and would take a good number of pages to describe, so I won't go into it any deeper here (see http://www.w3.org/TR/REC-CSS2/tables.html#borders for further details of these models).
- Background allows us to edit the background details of our site with the help of the following options:
- Color allows us to set the background color for the entire table. Clicking on More colors... provides us with a web-safe color picker. Web-safe colors are those that will display on any monitor. Because of advancements in screen technology, colors ceased needing to be web safe to display on our computers a good while ago (our monitors now tend to be far better than our eyes!). Interestingly, though, now that mobile devices have become more common, some thought again needs to be given to choosing colors that are web safe.
- Use background picture allows an image on our web server to be used as the background pattern for our table. As with other graphical techniques, this should be used with care, otherwise it can look garish and can make the content of the table more difficult to read. When used sparingly, specifying a background image allows some very nice techniques. For instance, we can use a subtle faded flag image for each country behind the name of the wine, when editing the background images of individual cells.
- Set as default for new tables does exactly what it says on the tin. If we would like to create a lot of similar tables, then checking this box will automatically create future tables that are the same as the one we have just created.
In addition to being able to specify properties for the whole table, we can also specify properties for individual cells. To do this, we right-click in the cell we would like to edit and select Cell Properties... from the shortcut menu.
Many of the options for the cells are the same as those that we saw for the whole table. The additional options are:
- Horizontal alignment allows us to position our content on the left, center, or right of the cell. It also gives us the opportunity to justify our text, which can look smart, if the columns are fairly wide. If our columns are not wide, then selecting the Justify option can make the text look silly, because with only a few words per line, there will be large gaps between words.
- Vertical alignment is useful when we have very little content in one column but a lot of content in the column beside it (causing the rows to be fairly tall). By default, the user's browser will display the content of these cells in the middle of the cell (i.e. neither at the top nor at the bottom). My own preference in these situations is that the content is displayed at the top of the cell, so I would set the Vertical alignment to Top. It is also possible to align the content to the bottom of the cell or to the baseline by setting the Vertical alignment to Bottom or Baseline. The Baseline command has the same effect as the Bottom one, if the same sized fonts are being used, because it lines up the text using an imaginary line that the text rests on. It becomes useful when the fonts in the neighboring cells are of different sizes.
- Rows spanned allows us to merge our cell with the cell (or cells, if we select a number greater than two) above. When using this feature, you will notice that other content shifts to the right of the table, poking out the end in an extra column. This is because we still have the same number of cells in our table, but one of them now spans two rows. Once we have used the Rows spanned feature, we should usually delete the additional cells that have been moved to the right of our table. We can remove row spanning by returning the number of Rows spanned to 1. We can make life easy for ourselves by selecting the cells that we would like to merge in Design view and selecting Modify | Merge cells from the context menu.
- Columns spanned operates the same as Rows Spanned, but merges cells horizontally rather than vertically.
- Header cell can be checked to give our cells the special th designation. This means that our cells will be recognized as header information and will be rendered appropriately. This feature is usually applied to the first row of a table, as in the example we will see in a few moments.
- No wrap allows us to override the default, which automatically wraps the text in our cell. When using the No wrap feature, it is recommended that we add line breaks ourselves, so that the column does not become ridiculously wide.
We are also able to specify the width or the height of a cell in the Cell Properties dialog. This avoids the cell automatically resizing, depending on the content that is added to it. Notice that when we do this, it will set the width of the whole column and the height of the whole row, rather than just the width and height of our cell. The width of cells in a column and the height of cells in a row cannot differ.
If we would like to change the properties of all the cells in a row in one go, we hover our cursor over the left-hand border of the row we would like to edit until the cursor changes to a right-hand arrow and then left-click. This will highlight the entire row. Now, when we right-click and select Cell Properties... from the shortcut menu, any changes we specify will apply to the entire row.
Let's use this technique to make the headings in the first row of our table stand out. We are going to create header cells:
- Hover the cursor over the left-hand border of the first row in our table.
- Left-click so that the row is highlighted.
- Right-click on the highlighted area and select Cell Properties... from the shortcut menu.
- Click in the Header cell checkbox so that it becomes checked.
- Click OK.
You will notice that when we did this, the contents of the first row became bold and were centered. This is the default style for header cells.
If we wished to edit all the cells in a column, we would use the same procedure, but instead of clicking to the left of the row, we would click on the top of the column we would like to change.
We can add or delete rows or columns at any time by right-clicking on a cell in the table and selecting either Insert or Delete from the shortcut menu.
Tables are not only useful for displaying tabular data. They are also used on the majority of websites to give the page some structure. By using invisible tables content, creators (that's us) can divide their page up into distinct areas.
One of the most common ways in which this is done is to have a main cell for the central content of the page with other smaller cells above and/or beside it for navigation buttons.
Usually, developers would create these tables themselves, but SharePoint Designer has made this easier for us by providing us with a selection of layout tables to choose from.
To view the layout tables that are available to us, go to Task Panes | Layout Tables. This adds the Layout Tables task pane to our designer. The most useful feature of this task pane is at the bottom, where it lists pre-defined table layouts, which we can use to structure our page.
Let's create a new page by going to File | New | ASPX, so we can experiment with these layout tables. Clicking on the image of the layout table immediately adds that table layout to our new page. To remove the layout table, click on the No Layout image.
Of the layout tables, the one I find to be the most useful is the one they call Corner, Header, Left, and Body, which is the third layout table shown in the task pane. This is a traditional page layout that allows us to have a logo in the top-left of the page, a banner, or navigation at the top of the page, and more navigation down the left of the page. If we also wanted to have some advertising space on our page, Header, Left, Top Right, and Body might be a useful one to select.
Besides using Layout Tables to structure our page, we can also add layout cells to our page by clicking Insert Layout Cell.... This adds a table of one column and one row (i.e. just one cell) to our page. We may wonder why someone would want such a small table. The idea is that it gives us greater control over the positioning and formatting of the contents of that cell.
One final point to note is that if you have a page size set (e.g. 760x420), then you may see a small dotted line running from left to right some way down the page. This is "The Fold", which is an imaginary line showing the bottom of the page in the user's browser. To see anything below this line, the users will need to scroll down the page. Generally speaking, we would like to have the most important information on our page above this line, so the user can see it at a glance.
It is worth pointing out that there are many markup purists who consider it an unforgivable sin to use tables for anything other than displaying tabular data. They argue that using tables to structure our pages makes them less accessible, and that we should use style elements such as div and span instead. In particular, the purists would see the use of layout cells as a shocking crime against web standards.
I won't comment on where I sit in this debate, but would like to warn that if you decide to use only styles to lay out your page, there will be times when you find it difficult to build and maintain more complex pages.
Whatever your preference, you will find that SharePoint Designer is one of the most standard-compliant development tools on the market. It does not force us to use Layout Tables instead of CSS Layouts (note that the Layout Tables task pane is not displayed by default, while the Manage Styles task pane is). SharePoint Designer also makes CSS Layouts (which is notoriously difficult to do in a way that works in all browsers) easier by providing us with Visual Aids to make it easier to see the page elements. We can switch these aids on by selecting View | Visual Aids from the menu. We are also provided with a CSS Layouts option as soon as we go to create a new page in the File | New dialog.