1. | www.catraining.co.uk | Tel: 020 7920 9500 | info@catrainingltd.co.uk | Computer Training & Personal Development Microsoft Office SharePoint Designer 2007 Intermediate

2. In this section you will learn how to: Use the My Places toolbar Perform basic tasks using My Computer in SharePoint Designer Understand different file formats Manage Web pages Import/export a file or site Import a Web package Create a Dynamic Web Template Use and modify a Dynamic Web Template SECTION 1: Advanced File Tasks

3. Lesson 1.1: Using My Computer An important part of using any application is the ability to find, organize, and save your work in the most efficient way possible. SharePoint Designer gives you this functionality; you can perform basic file and folder tasks without closing or minimizing the program.

4. Lesson 1.1: Using My Computer Opening My Computer Use the File menu to open recent files

5. Lesson 1.1: Using My Computer Using the My Places Toolbar (XP) Gives quick access to other parts of your computer

6. Lesson 1.1: Using My Computer Using the Navigation Pane (7/Vista) Gives quick access to other parts of your computer

7. Lesson 1.1: Using My Computer Navigating with My Computer (XP) Use My Places, My Computer, and navigation buttons

8. Lesson 1.1: Using My Computer Navigating with My Computer (7/Vista) Use Nav. Pane, My Computer, and navigation buttons

9. Lesson 1.1: Using My Computer Performing Basic Tasks Delete files/folders, create folder

10. Lesson 1.1: Using My Computer Changing Views (XP) Choose how to display icons in My Computer folder

11. Lesson 1.1: Using My Computer Changing Views (7/Vista) Choose how to display icons in My Computer folder

12. Lesson 1.2: Saving Your Files Nearly every time you are use SharePoint Designer, the end result will be some kind of file, or collection of files. In this lesson you will learn some key concepts related to file management and saving your web pages and Web sites. You will learn about file properties, file formats, and the differences between saving Web pages and Web sites.

13. Lesson 1.2: Saving Your Files File Formats (XP) Select correct format in Save As dialog

14. Lesson 1.2: Saving Your Files File Formats (7/Vista) Select correct format in Save As dialog

15. Lesson 1.2: Saving Your Files Using File Properties Extra details about author, content, etc.

16. Lesson 1.2: Saving Your Files Managing Web Pages Single file: Save/Save As Many files: Save All (must be named first)

17. Lesson 1.2: Saving Your Files Managing Web Sites Ensure proper name and location, program saves most changes by itself

18. Lesson 1.3: Importing and Exporting SharePoint Designer’s import and export features can be used in a number of ways. You can import/export a single page or entire Web site via different protocols. Import and export of files and sites is very useful if many people are working on the same project.

19. Lesson 1.3: Importing and Exporting Importing a Site File  Import  Import Site Wizard

20. Lesson 1.3: Importing and Exporting Importing a File File  Import  File, choose folder and file to import

21. Lesson 1.3: Importing and Exporting Exporting a File (XP) File  Export  File, choose file

22. Lesson 1.3: Importing and Exporting Exporting a File (7/Vista) File  Export  File, choose file

23. Lesson 1.3: Importing and Exporting Importing a Web Package (XP) File  Import  Personal Web Package Import a ‘site in a box’

24. Lesson 1.3: Importing and Exporting Importing a Web Package (7/Vista) File  Import  Personal Web Package Import a ‘site in a box’

25. Lesson 1.3: Importing and Exporting Exporting a Web Package Share a complete Web site with others File  Export  Personal Web Package

26. Lesson 1.4: Dynamic Web Templates A dynamic web template is an HTML based Web page that can contain formatting, images, and other page layout information, as well as special regions that can be edited. This page can serve as a kind of master template that specifies the layout of other web pages that it is attached to.

27. Lesson 1.4: Dynamic Web Templates Create a Dynamic Web Template File  New  Page, then choose Dynamic Web Template

28. Lesson 1.4: Dynamic Web Templates Using a (New) Template Construct editable areas of the template

29. Lesson 1.4: Dynamic Web Templates Applying Template to Web Page Format  Dynamic Web Template  Attach Dynamic Web Template

30. Lesson 1.4: Dynamic Web Templates Applying Template to Web Site Template scheme is applied to all pages

31. Lesson 1.4: Dynamic Web Templates Modifying a Template Open template file, modify, save. Open page/site that uses template, Update

32. Lesson 1.4: Dynamic Web Templates Detach Page from Template Format  Dynamic Web Template  Detach

33. In this section you will learn how to: Understand what HTML is and its anatomy Use Code view Interpret Code view’s color scheme Optimize HTML Use font attributes Add images with HTML Display tag properties View attributes of a tag Use the Code view toolbar Use predefined HTML code SECTION 2: An HTML Primer

34. Lesson 2.1: HTML and Code View The Design Editor makes creating a Web page almost as easy as authoring a document in a word processor. Knowing a little HTML will also give you more insight into the details of how a Web page is structured, and how this structure defines how the page will look in a typical browser.

35. Lesson 2.1: HTML and Code View What is HTML? Hyper Text Mark-up Language Part of larger Standard Generalized Mark-up Language (SGML) ‘Language’ that browser understands – tags symbolize font and layout characteristics

36. Lesson 2.1: HTML and Code View Anatomy of HTML Content attributes

37. Lesson 2.1: HTML and Code View Understanding the Code View Cut/copy/paste, goto line #, find/replace, automatic code fill

38. Lesson 2.1: HTML and Code View The Colors of Code View

39. Lesson 2.1: HTML and Code View Optimizing Your HTML Design view sometimes adds unnecessary code, right-click  Optimize HTML…

40. Lesson 2.2: Introduction to HTML A comprehensive study of the HTML elements (tags, layout options, and attributes) available to you could take up a manual of its own. However, the following discussion of some simple tags and how to use them should be enough for you to start getting a feel for how HTML works.

41. Lesson 2.2: Introduction to HTML Browsers and HTML Does not display exactly as shown!

42. Lesson 2.2: Introduction to HTML Basic HTML Tags (…all page content…) text displayed in title bar paragraph tag line break hyperlink

43. Lesson 2.2: Introduction to HTML Font Tag Attributes

44. Lesson 2.2: Introduction to HTML Alignment Attributes

45. Lesson 2.2: Introduction to HTML Adding Images

46. Lesson 2.3: Tag Properties Window As you already know by now, there a quite a few different HTML tags that you can use in your Web pages. The more you use HTML, the more familiar you will become with these tags. Eventually you will get to know which HTML tags and attributes you will implement the most often. SharePoint Designer helps you keep the tag properties straight.

47. Lesson 2.3: Tag Properties Window Showing and Hiding Tag Prop. Task Panes  Tag Properties

48. Lesson 2.3: Tag Properties Window Using Tag Properties Buttons Left to right: Categorize list (picture), list by alpha, currently used tags, properties

49. Lesson 2.3: Tag Properties Window Viewing Attributes Click tag in code, view in properties pane

50. Lesson 2.3: Tag Properties Window Working with Attributes Enter a tag, select attributes from list

51. Lesson 2.4: Pre-Defined Tags SharePoint Designer has a menu of HTML tags that you can choose to insert into your code at any time. These tags are also available in the toolbox task pane. In addition to this, SharePoint Designer allows you to create your own predefined tags using code snippets. After you define these tags, you can insert them into your HTML code at any time.

52. Lesson 2.4: Pre-Defined Tags Using the HTML Menu Provides quick access to common tags

53. Lesson 2.4: Pre-Defined Tags Using the Code View Toolbar Toolbars  Code View. Common and useful commands when working with code

54. Lesson 2.4: Pre-Defined Tags Creating Pre-Defined Tags If you use a particular tag & attributes often, save it for later use

55. In this section you will learn how to: Insert a picture file and add ClipArt Insert other files/multimedia Resize and resample an image Use AutoThumbnail Use the Pictures toolbar Modify the contrast and brightness of an image Crop and recolor an image Add image borders Flip and rotate images Arrange images SECTION 3: Beyond Text

56. Lesson 3.1: Add Pictures, ClipArt Most of the Web pages you visit will contain more than just text. Graphic elements are also an important part of Web design. You may want to include digital photos to illustrate your Web pages, or you might include a special company logo or emblem on the pages of a work related site.

57. Lesson 3.1: Add Pictures, ClipArt Insert a Picture File Insert  Picture  From File, choose image

58. Lesson 3.1: Add Pictures, ClipArt Adding ClipArt Task Panes  ClipArt, search for image and click to insert

59. Lesson 3.1: Add Pictures, ClipArt Image from Scanner/Camera Insert  Picture  From Scanner or Camera, choose image

60. Lesson 3.1: Add Pictures, ClipArt Inserting a File Use hyperlink to file, or Insert  File. Some text documents can be directly inserted

61. Lesson 3.1: Add Pictures, ClipArt Embedding Photo Galleries Insert  Web Component, choose Gallery

62. Lesson 3.1: Add Pictures, ClipArt Embedding Movie Clips Insert  Web Component  Adv. Control

63. Lesson 3.2: Editing Images You have learned how to add pictures and other graphic elements. Now it is time to learn how to edit these images so they fit your Web page or Web site layout just the way you want. In this lesson, we’ll learn how to select and resize an image; and how to cut, copy, and paste images. We will also cover image re-sampling and the auto thumbnail feature.

64. Lesson 3.2: Editing Images Selecting an Image In Design view, simply click image

65. Lesson 3.2: Editing Images Resizing an Image Click picture  click and drag ‘handles’

66. Lesson 3.2: Editing Images Re-Sampling an Image If distorted image, can help to smooth

67. Lesson 3.2: Editing Images Using Auto Thumbnail Click picture, click Auto Thumbnail, makes link to full-size image

68. Lesson 3.2: Editing Images Use Cut, Copy, Paste Right-click image  cut, copy, paste

69. Lesson 3.3: Formatting Images In this lesson, you will learn about formatting images with the features available on the Pictures toolbar. These features include contrast and brightness controls, cropping tools, color effects, and more.

70. Lesson 3.3: Formatting Images Using the Pictures Toolbar Right-click empty space in taskbar  Pictures

71. Lesson 3.3: Formatting Images Modifying Brightness/Contrast Select picture, use command in taskbar

72. Lesson 3.3: Formatting Images Cropping a Photo Select image, click crop tool, click and drag cropping area

73. Lesson 3.3: Formatting Images Re-Coloring a Photo Transparency, grayscale, washout, etc.

74. Lesson 3.3: Formatting Images Changing Picture Properties Click pull-down tab beside image tag

75. Lesson 3.4: Do More with Images You will now learn how to perform a few more image edits so you can get your Web site layout and images just the way you want them. In this lesson, you’ll learn about adding borders to an image, creating a beveled edge on a picture, flipping and rotating images, and how to arrange pictures on your page.

76. Lesson 3.4: Do More with Images Adding Borders Right-click image  Picture Properties, adjust border thickness

77. Lesson 3.4: Do More with Images Add a Beveled Edge Click image, click command in toolbar

78. Lesson 3.4: Do More with Images Flip and Rotate Images Click image, click command

79. Lesson 3.4: Do More with Images Arranging Images Click pull-down arrow on img tab, click relative, click and drag image

80. In this section you will learn how to: Link to another location in the same page Link to an outside location, document, file, or e-mail address Modify hyperlink properties Remove a hyperlink Add a screen tip Highlight and edit a hotspot Create a bookmark Publish a Web site Set publishing options Publish using FTP Publish to a SharePoint Services site SECTION 4: Hyperlinks and Hotspots

81. Lesson 4.1: Creating Hyperlinks In this lesson you will learn how to create hyperlinks to external Web pages, external files, and to e-mail addresses. In addition, you will learn how to create hyperlinks to locations within the same document, that is, to locations in the very same Web page that contains the hyperlinks.

82. Lesson 4.1: Creating Hyperlinks What is a Hyperlink? Region, word, phrase, or image that is clickable and leads somewhere else

83. Lesson 4.1: Creating Hyperlinks Linking Inside a Document Insert a target tag, then use # for the link At the top… later in the document…

84. Lesson 4.1: Creating Hyperlinks Linking to an External Web Site ”> Link Name Or Insert  Hyperlink, type address

85. Lesson 4.1: Creating Hyperlinks Linking to a New Page Insert  Hyperlink, Create New Document

86. Lesson 4.1: Creating Hyperlinks Linking to an E-mail Address mailto:joe@somewhere.com

87. Lesson 4.2: Modifying Hyperlinks Now that you know how to create hyperlinks, it is time to learn how to modify them. Fortunately, SharePoint Designer makes the task of editing existing hyperlinks quite easy. In this lesson you will learn how to edit a hyperlink, remove a hyperlink, add a screen tip, and set a target window.

88. Lesson 4.2: Modifying Hyperlinks Editing Hyperlinks Right-click link  Hyperlink Properties

89. Lesson 4.2: Modifying Hyperlinks Removing a Hyperlink Remove in properties. Link text will stay

90. Lesson 4.2: Modifying Hyperlinks Adding a Screen Tip Hovering text above link

91. Lesson 4.2: Modifying Hyperlinks Setting a Target Window Have link open in new window, same window, same frame, etc.

92. Lesson 4.3: Creating Hotspots Now that you know how to create and edit any number of text based hyperlinks, it is time to move on to using images as hyperlinks. In this lesson you will learn how to turn an image into a hyperlink. You will also learn how to create hotspots in an image, so the same image can link to several different pages.

93. Lesson 4.3: Creating Hotspots Using an Image as a Hyperlink Right-click image  Hyperlink

94. Lesson 4.3: Creating Hotspots What is a Hot Spot? A region of a Web page designated as ‘clickable’ Can be part of background image, part of text body, part of another image Sometimes more streamlined and professional, saves graphical work

95. Lesson 4.3: Creating Hotspots Adding a Hot Spot Click image, select hotspot ‘shape’, click and drag area for hotspot

96. Lesson 4.3: Creating Hotspots Highlighting Hotspots Remove background image to see hotspot areas

97. Lesson 4.3: Creating Hotspots Editing Hotspots Right-click hotspot  Picture Hotspot Properties

98. Lesson 4.3: Creating Hotspots Removing Hotspots Click hotspot to select it, press Delete

99. Lesson 4.4: More About Links In this lesson, we will return to the idea of creating a link to a place in the same document. In Lesson 4.1, the HTML tags for creating a bookmark and for creating a link to the bookmark were discussed. Keeping this background in mind, you will now learn how to create and use a bookmark using point and click methods in SharePoint Designer’s design view.

100. Lesson 4.4: Creating Hotspots Creating a Bookmark (Design view) Highlight text, right-click  Bookmark, give bookmark a name

101. Lesson 4.4: Creating Hotspots Use Bookmark in Hyperlink/Hotspot Highlight text, right-click  Hyperlink, click Bookmark button

102. Lesson 4.4: Creating Hotspots Clearing a Bookmark Click bookmarked item, Insert  Bookmark, click Clear

103. Lesson 4.4: Creating Hotspots Navigating to a Bookmark Use this feature to check bookmarks are working

104. Lesson 4.5: Publishing your Site Publishing your site is the process of transferring the files and folders in your Web site from your local system to a remote server. Once your site is published to a Web server, it will be available to millions of potential visitors via the Internet (or, at the least, to your coworkers on your office network).

105. Lesson 4.5: Publishing your Site System Requirements Thoroughly test your site first! Connection to host server Server that supports your embedded technology (ASP.net, media codecs, etc) Username and password to server to upload securely

106. Lesson 4.5: Publishing your Site Publishing Options File  Publish Site

107. Lesson 4.5: Publishing your Site Exclude a File from Publishing Right-click file in Folder list  Properties

108. Lesson 4.5: Publishing your Site Publishing your Site File  Publish Site, specify transfer options