Post on 01-Oct-2020
transcript
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.
4 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
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.
© NetLearn Ventures, Inc. All Rights Reserved 5 | P a g e
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.
6 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
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
© NetLearn Ventures, Inc. All Rights Reserved 7 | P a g e
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.
8 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
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.
© NetLearn Ventures, Inc. All Rights Reserved 9 | P a g e
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.
10 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
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.
© NetLearn Ventures, Inc. All Rights Reserved 11 | P a g e
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.
12 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
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.
© NetLearn Ventures, Inc. All Rights Reserved 13 | P a g e
- The Insert Table dialog box opens displaying options for customizing the table size and layout
14 | 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.
© NetLearn Ventures, Inc. All Rights Reserved 15 | P a g e
- 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.
16 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
- 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.
© NetLearn Ventures, Inc. All Rights Reserved 17 | P a g e
ADDING OTHER WEB COMPONENTS 1. Adding Marquee
- Select Insert> Web Component
- This opens the Insert Web Component dialog box.
18 | 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
© NetLearn Ventures, Inc. All Rights Reserved 19 | P a g e
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
20 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
- Click on the Font tab to customize the font for your button
© NetLearn Ventures, Inc. All Rights Reserved 21 | 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.
22 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
- Click File menu, choose Publish Site. This will launch the Remote Web Site
Properties window.
© NetLearn Ventures, Inc. All Rights Reserved 23 | 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.
24 | P a g e © NetLearn Ventures, Inc. All Rights Reserved
- 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