| | Tel: | | Computer Training & Personal Development Microsoft Office SharePoint Designer 2007 Intermediate

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

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.

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

Lesson 2.2: Introduction to HTML Font Tag Attributes

Lesson 2.2: Introduction to HTML Alignment Attributes

Lesson 2.2: Introduction to HTML Adding Images

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.

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

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

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

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

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.

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

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

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

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

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.

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

In this section you will learn how to: Link to another location in the same page Link to an outside location, document, file, or 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

Lesson 4.1: Creating Hyperlinks In this lesson you will learn how to create hyperlinks to external Web pages, external files, and to 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.

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

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…

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

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

Lesson 4.1: Creating Hyperlinks Linking to an Address

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.

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

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

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

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

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.

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

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

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

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

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

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

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.

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

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

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

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

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).

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

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

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

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