Designing a Web Page Using MS SharePoint Designer Reference Manual

Designing a Web Page Using MS SharePoint Designer 2007 Reference Manual

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. 2 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. NetLearn Ventures, Inc. All Rights Reserved 3 P a g e

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. 4 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. NetLearn Ventures, Inc. All Rights Reserved 5 P a g e

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 dropdown 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 6 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. NetLearn Ventures, Inc. All Rights Reserved 7 P a g e

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. 8 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. NetLearn Ventures, Inc. All Rights Reserved 9 P a g e

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. 10 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. NetLearn Ventures, Inc. All Rights Reserved 11 P a g e

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. 12 P a g e NetLearn Ventures, Inc. All Rights Reserved

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. 14 P a g e NetLearn Ventures, Inc. All Rights Reserved

- 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. NetLearn Ventures, Inc. All Rights Reserved 15 P a g e

- 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. 16 P a g e NetLearn Ventures, Inc. All Rights Reserved

- 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 18 P a g e NetLearn Ventures, Inc. All Rights Reserved

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 NetLearn Ventures, Inc. All Rights Reserved 19 P a g e

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. NetLearn Ventures, Inc. All Rights Reserved 21 P a g e

- 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. NetLearn Ventures, Inc. All Rights Reserved 23 P a g e

- 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 24 P a g e NetLearn Ventures, Inc. All Rights Reserved