Support for web authors
Getting started with SharePoint Designer 2007
This is not intended to be a comprehensive guide to using SharePoint
Designer, but rather a brief guide on how to do the basics. While FrontPage and
SharePoint Designer are very similar there are a few minor differences, hence
these updated instructions for those just getting started with SharePoint
Designer.
SharePoint Designer vs FrontPage
Screenshot of FrontPage 2002 in 'Folder view'
Screenshot of Microsoft Office SharePoint Designer 2007
The most notable difference between the two on first glance is that
SharePoint Designer no longer has 'Page View' and 'Folder View' - the two are
combined in one screen.
SharePoint Designer can be customised to look nearly identical to FrontPage
simply by closing the 'Toolbox', 'CSS Properties' and 'Manage Styles', all of
which you will, in all likelihood, not use, so please don't panic!
How to... using SharePoint Designer 2007
How to...
If there's anything else you think should be covered here, please e-mail
Web and Learning Technology.
How to open a website
Do ONE of the following:
Option 1.Open SharePoint Designer. File > Open Site > and type in
the address of the site you wish to edit, e.g.
http://www.essex.ac.uk/dces/,
and enter your username and password if prompted (don't forget to type your
username in the format campus\username - replacing 'username' with your own
username);
Option 2. Open SharePoint Designer. File > Open Site > click on an
existing shortcut and enter your username and password if prompted (don't forget
to type your username in the format campus\username - replacing 'username' with
your own username).
How to configure Internet Explorer so that SharePoint
Designer is your default HTML editor.
Click Tools > Internet Options then select the Programs tab. Using the top
drop-down list for HTML editor, select 'Microsoft Office SharePoint Designer'.
How to edit an existing web page
Do ONE of the following:
Option 1. Open the web site (as above), and double click on the web
page name to open it for editing;
If you are using Internet Explorer 7:
Option 2. Navigate to the page you wish to edit in Internet Explorer
and click Page > Edit with Microsoft Office SharePoint Designer. Enter your
username and password, if prompted, (don't forget to type your username in the
format campus\username - replacing 'username' with your own username).
or if you are using Internet Explorer 6:
Option 2. Navigate to the page you wish to edit in Internet Explorer
and click on the 'Edit with Microsoft Office SharePoint Designer' icon (usually
appears next to the 'Print' icon). Enter your username and password, if
prompted, (don't forget to type your username in the format campus\username -
replacing 'username' with your own username).
Note:
Before
editing make sure that you have formatting marks turned on, otherwise it is
possible that some of the 'behind-the-scenes' scripts could get accidentally
deleted (these appear as little grey symbols in your web page in design view,
see image, left). To turn on formatting marks using SharePoint Designer click
View > Formatting Marks > Show. You can actually customise this view. To do
this, click View > Formatting Marks. Beneath the Show option are the formatting
marks which you can show or hide. Those highlighted in orange are the ones
which will show. Clicking on one which is highlighted in orange will hide them;
conversely, clicking on one that isn't highlighted in orange will show them.
This is what these scripts look like in the HTML code: <!--#include
virtual="/websitename/includes/scriptname.txt"-->
How to create a new web page
- Click File > New.
- Under the Page tab select HTML and then click OK. A new page will be
created.
- Once you have added some content to your page, click the Save button and
you will be prompted to select where your new page will reside in your site.
How to create a new web page if you have a site with
templates
- Locate the 'templates' folder. This can be done either using the Folder
List in the top right corner, or by clicking on the Web Site tab at the top
and navigating to it this way.
- Copy and paste a template file into the folder where you want to store
your new web page.
- Rename your newly pasted template file to an appropriate filename (no
spaces, no capital letters, no "%!£&*" symbols) - remember to retain the
file extension (e.g. .aspx, .asp, .htm, etc) otherwise your page will end up
missing sections.
- Double click on your new file to open it in 'Design View' for editing.
How to put an image on your page
- Using your cursor, select where on the page you would like your image to
reside.
- Click Insert > Picture > From File.
- Ensure that you only select image files that are under 'Current Site'
otherwise other users will not be able to see them.
How to create a hyperlink
- To create a hyperlink, highlight the text that you would like to use as
your link.
- Right click on the text and select 'Hyperlink', which is the bottom of
the menu.
- You can either type (or copy and paste) the address into the address
bar, or select a page from within your site.
- Click OK.
How to switch between Design, Split and Code views
At
the bottom of the centre window you will find three buttons which enable you to
switch between the three different views (see image, left). Design view is the
default view you should be using. You may need to use Code view occasionally if
the HTML needs to be modified. Split view will show you code in the top half of
the window and the design view in the bottom half.
How to make a new web page from an existing MS Word
document
- Create a new web page, (as detailed above).
- Position the cursor where you want the Word document to start.
- Click on Insert > File.
- The insert file dialogue box will appear. Use the 'files of type'
drop-down, and change it to read 'All files' (it is at the top of the list,
above .HTML files).
- Next use the folders in the dialogue box to browse to the file location
of the Word document which you wish to use (usually on your M:Drive,
C:Drive, or other network drive).
- Select the Word file, so that it is highlighted.
- Click on 'Open'.
- The file should then import itself into your web page.
Usually it does a reasonable job of replicating the formatting of the
original Word document (keeping spacing, tables, bold, headings etc). However,
you will need to take a few moments to check the document over and to re-apply
any lost formatting and spacing. (It is often useful to have a printed hard copy
of your Word version to hand whilst you do this).
Note: If the Word document you want to use contains numbered
bullet points or complicated table layouts, it is advisable to save the Word
document as .RTF format (Rich Text Format file) instead of a .DOC file, and then
to use the .RTF file for step 5 onwards, above.
How to paste small amounts of text into a web page
First, open the Word document from which you wish to copy and paste.
Select and copy the text you require.
Open an existing web page in SharePoint Designer, or create a new web page
(as above), and then right-click your cursor in the web page at the point where
you want to paste the text. Select 'Paste' from the pop-up menu. The text will
be added.
Next,
before you do any further editing on the page, you must next locate the small
paste icon which appears at the end of the pasted text (see image, left), click
on its drop-down arrow, and select 'Keep Text Only'. Then select 'Normal
paragraphs without line breaks' (bottom option) and click OK.
This will lose all of the formatting of the text, (which is why this is only
a suitable technique for small amounts of text). You will need to manually
re-apply any formatting afterwards (bold, italics, heading styles etc).
However, the good thing about this technique is that it removes tons of nasty,
hidden, behind-the-scenes HTML code that would have been brought into your web
page if you had just pasted directly from Word without using the 'Keep Text
Only' option. Such code often corrupts the text layouts and font styles of your
web site, and is very difficult to get rid of at a later date.
Remember: DO NOT PASTE DIRECTLY FROM WORD - it is evil...no matter
how tempted you are, be strong!