Designing a Web Page Using MS SharePoint Designer 2007maximonians.weebly.com/uploads/5/8/0/5/5805064/... · Designing a Web Page Using MS SharePoint Designer 2007 Reference Manual

Designing a Web Page Using

MS SharePoint Designer 2007

Reference Manual

2 | P a g e © NetLearn Ventures, Inc. All Rights Reserved

SHAREPOINT DESIGNER 2007 BASICS 1. Opening SharePoint Designer 2007 application

- Click start>All Programs>Microsoft Office>Microsoft Office SharePoint Designer 2007

2. Getting to know SharePoint Designer 2007 workspace

CREATING WEB PAGES 1. Creating and adding a new page

- A new blank page appears upon when SharePoint Designer 2007 application is launched.

- From the main menu, choose File >New.

© NetLearn Ventures, Inc. All Rights Reserved 3 | P a g e

Notice that the task pane (located at the right side of the screen) changes to indicate the options for a new page.

2. Saving a page

- From the main menu, choose File > Save or press Ctrl + S key combination. - If the file being saved is new, the Save as dialog box opens. - Type a file name for the page and ensure the Save in location is correct. - By default, this file will be saved in the My Web Sites folder of the My

Documents folder. - If you prefer to save your file in a different location, locate the folder first in

the save-in box. - If the file has been saved previously, it is updated in its current locations with

the same file name.


3. Opening an existing page

- From the main menu, choose File > Open or press Ctrl + O key combination. This launches the Open File dialog box.

- Locate and select the desired file, and click Open.


BASIC PAGE FORMATTING 1. Adding text

- In adding text to a blank page, type and format the text similar to how it is done with MS word

- Use the formatting toolbar to format the desired alignment, style and color of the text

- In adding text to a page template, click on the desired section of the template - type and format the text similar to how it is done with MS word

2. Editing text

- Select the text to be edited and use the tools from the Formatting toolbar to make the changes.

3. Creating bulleted lists

- Place the cursor where you want to begin the list. - From the main menu, choose Format > Bullets and Numbering. - The Bullets and Numbering dialog box opens, displaying the following tabs:

Picture Bullets –choose the bullet style associated with your page’s theme, or specify a different bullet in the Specify Picture box. You can also specify whether the list is collapsible when viewed in a browser. Numbers – select the numbering style preferred:

- Click OK. - When you have finished typing the first item, press Enter and continue with

the second item.


4. Working with Colors - To select customize the colors for the page,

choose File > Properties - The Page Properties dialog box opens. - Customized the colors of the background, the

text, and the hyperlink by choosing a color from the color palette.

- Click Ok when all the colors have been assigned. Note: If there is a theme on your webpage, the drop-down lists will not be available. Hyperlinks - refers to links not yet visited Visited hyperlink – refers to links visited by the user Active hyperlink – refers to selected state of the link


WORKING WITH IMAGES 1. Adding an image from file

- To add an image to a page, choose Insert > Picture > From File.

- The Picture sub-menu opens.

- In the Look in section, select the folder where the images to be inserted is located

- Select the image and press insert.


2. Adding an image from Clip Art

- To add an image to a page, choose Insert > Picture > Clip Art.

- The Clip Art pane opens on the right side of the screen

- Enter a keyword in the Search for box to search for the desired clip art of a specific subject matter.

- Modify your search using the Search in drop-down lists.


INSERTING HYPERLINKS 1. Inserting a hyperlink

- Choose Insert > Hyperlink or press the Ctrl + K key combination to open the Insert Hyperlink dialog box

- Choose Existing File or Web Page in the Link to bar - Type the text you want to be displayed on the page as the hyperlink in the

Text to display box - Specify the destination for the link in the Look in area

2. Changing and editing a hyperlink - Select the link and choose Insert > Hyperlink to open the Edit Hyperlink dialog

box. - Modify the hyperlink by changing the address of the link, the text to display,

or location. - Click OK.

3. Removing hyperlinks - Select the hyperlink to be removed and choose Insert > Hyperlink. - In the Edit Hyperlink dialog box, click Remove Link, and click OK.


4. Creating e-mail links

- To direct the users to a specific e-mail address, choose Insert > Hyperlink or press the Ctrl + K key combination to open the Insert Hyperlink dialog box.

- Select E-mail Address in the Link to bar - Specify the e-mail address for the link in the E-mail address field - The subject of the e-mail can also be specified in the Subject field. - Click OK.


5. Changing, editing or removing e-mail links - Change, edit or remove e-mail links similar to procedure in editing and

removing hyperlinks 6. Linking Images

- To link an entire image, select the image and click Hyperlink from the Insert menu or press the Ctrl + K key combination.

- In the Insert Hyperlink dialog box, create the hyperlink or e-mail link. 7. Image mapping or linking part an image

- After inserting the image, right-click on the image and select Show Pictures Toolbar or from the View menu select Toolbars > Picture. The Pictures tool bar appears

- Select any of the Hotspot buttons (Rectangular, Circular or Polygonal) in the picture toolbar

- Use the Hotspot tool to select an area within the image where the link will be inserted.

- The Insert Hyperlink dialog box opens automatically after you outline the hotspot area.

- Create the hyperlink or e-mail link: 8. Adding bookmarks (Named Anchor)

- To add a bookmark to a page, select the text or place the cursor in the desired location

- Choose Insert > Bookmark or press the Ctrl + G key combination. The Bookmark dialog box opens

- Assign a name for the bookmark and click OK.


Note: For selected text, it appears with a dashed underline while bookmark marker appears If created in a on a blank area of the page.

- Select the text to be linked. Follow the same procedure in creating hyperlinks. - Click the Place in This Document, and select preferred bookmark from the - list displayed in the dialog box: - Removing bookmarks - To remove a bookmark, select it and choose Delete from the Edit menu - OR choose Bookmark from the Insert menu. In the Bookmark dialog box, - Click Clear

WORKING WITH TABLES 1. Inserting Tables

- Choose Table > Insert > Table or by click the Insert Table button on the toolbar.


- The Insert Table dialog box opens displaying options for customizing the table size and layout


2. Editing Tables

- Click and drag the column or row lines to resize or reconfigure the table

- To add columns or rows to a table, place the cursor in the table and from the

Table menu, choose Insert > Rows or Columns. The Insert Rows or Columns dialog box opens

- Specify whether Rows or Columns are to be added, and the Number.


- Choose the Location for the new rows or columns. - Click OK.

3. Splitting a cell

- Place the cursor in the cell you want to divide, or select multiple cells if you want to split more than one cell.


- From the Table menu, choose Modify > Split Cells to open the Split Cells dialog box

- Select the type of split and the number of divisions. - Click OK.

4. Merging cells

- Select the cells you want to merge. - From the Table menu, choose Modify > Merge Cells.


ADDING OTHER WEB COMPONENTS 1. Adding Marquee

- Select Insert> Web Component

- This opens the Insert Web Component dialog box.


- Select Dynamic Effects from the component type and Marquee from the

Choose an effect section - Then select Finish - This opens the Marquee Properties dialog box - Type the text for the marquee and click ok.

2. Editing a marquee

- Double click on the marquee

- This will open the Marquee Properties dialog box


3. Adding hover buttons

- Choose Insert>Interactive Button - This opens the Interactive Buttons dialog box - Customized the button as desired by choosing a button style - Type the label for the button - Type the link for the button


- Click on the Font tab to customize the font for your button


PUBLISHING THE WEBSITE - Make sure that the computer you’re using is

connected to the Internet. - Make sure that the website you want to upload is

in the “My Web Sites Folder” under the My Documents folder. If it is located in a different directory, copy the files and paste it in the “My Web Site Folder.”

- Open the SharePoint Designer Application. Start > All Programs> Microsoft Office> Microsoft SharePoint Designer 2007.

- Click the File menu, choose Open Site. This will launch the Open File window

- Locate the main folder containing your web site and click Open.


- Click File menu, choose Publish Site. This will launch the Remote Web Site

Properties window.


- In the Remote web site tab, select FTP. - Supply the domain name of your FTP site or hosting provider under Remote

Web site location, then click OK.

- Supply the username and password provided by your hosting site.


- From the file transfer dialog screen, under Local Web site, click to choose the files you wish to publish.

- Select Local to remote then click Publish Web site