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

2. In this section you will learn how to: Create and edit a master page Apply styles to a page Set style options Use the Apply Styles task pane Create and modify a style Rename, copy, and delete a style Attach a style sheet Open a style sheet Use the Cascading Style Sheet (CSS) language Build a CSS Modify a style sheet Link a style sheet SECTION 1: Creating Consistent Sites

3. Lesson 1.1: Master Pages There are a number of factors that contribute to a great Web site. That being said, you can count on almost all great sites having two things in common: quality content and a quality layout. in this section you will learn how to use master pages, styles, and cascading style sheets, so you will be able to create a visually pleasing yet consistent layout across all of the pages in your site.

4. Lesson 1.1: Master Pages About Master Pages Type of ASP.NET document Includes common nav. controls, headings, layout elements, etc. Create consistent pages (like Dynamic Web Templates, but with more options)

5. Lesson 1.1: Master Pages Creating a Master Page File  New  Page, choose Master Page

6. Lesson 1.1: Master Pages Editing Master Pages Format  Master Page  Manage Content Regions

7. Lesson 1.1: Master Pages Set Existing Page as Master Open existing page, File  Save As, master page

8. Lesson 1.1: Master Pages Creating a Content Page File  New  Create from Master Page

9. Lesson 1.1: Master Pages Attach/Detach Master Page Format  Master Page  Attach/Detach

10. Lesson 1.2: Using Text Styles In this lesson, we will go into more detail about using styles in SharePoint Designer. When we use the term “text styles,” we are referring to ways of manipulating font faces, font sizes, font colors, and other elements outside of using simple HTML attributes.

11. Lesson 1.2: Using Text Styles Using the Apply Styles Pane Task Panes  Apply Styles (appears in lower right-hand corner)

12. Lesson 1.2: Using Text Styles Creating a Style Click New Style in task pane, make text changes and apply

13. Lesson 1.2: Using Text Styles Setting Style Options Choose from category list and make changes

14. Lesson 1.2: Using Text Styles Applying a Style to Text Select style from pane, select text, right- click  Apply Style

15. Lesson 1.3: Manage Test Styles Now that you have an idea how to create styles using the Apply Styles task pane, it is time to learn about managing existing styles. In this lesson you will learn how to modify a style, rename a style, copy a style, and delete a style.

16. Lesson 1.3: Manage Test Styles Modifying a Style Click Manage Styles tab, right-click style, click Modify Style

17. Lesson 1.3: Manage Test Styles Renaming a Style Right-click name in Styles pane  Rename

18. Lesson 1.3: Manage Test Styles Copying a Style Right-click name in Style pane  New Style Copy, make changes if necessary

19. Lesson 1.3: Manage Test Styles Deleting a Style Right-click style  Delete, confirm

20. Lesson 1.4: Using Style Sheets In the discussion on creating styles in Lesson 1.2 we saw that a new style has a corresponding style tag in the code for the page. In this lesson, we will learn more about external cascading style sheets and how they can be used to promote consistent style and presentation in a Web site.

21. Lesson 1.4: Using Style Sheets What are CSS? (Cascading Style Sheets) Collection of info in separate file that specifies font, colors, and layout Allows for less complex HTML as you only have to reference another file to apply some format One CSS can be used by many pages

22. Lesson 1.4: Using Style Sheets Attaching a Style Sheet Typically, CSS sheet added to the Web site folder

23. Lesson 1.4: Using Style Sheets Opening a Style Sheet Double-click file name in Folder list

24. Lesson 1.5: Creating a CSS File In the previous lesson, you learned what a CSS style sheet is, and how to apply it to single or multiple web pages in a site. Now it is time to learn how to create, layout, and modify your own style sheets.

25. Lesson 1.5: Creating a CSS File Using the New CSS Command File  New  CSS

26. Lesson 1.5: Creating a CSS File CSS Language Basics Add a page characteristic and then define a style

27. Lesson 1.5: Creating a CSS File Advanced CSS Syntax Compress several statements into one, create style classes, etc.

28. Lesson 1.5: Creating a CSS File Building a Style Sheet Open new CSS, Format  New Style and then define

29. Lesson 1.5: Creating a CSS File Modifying a CSS Document Open style sheet and make changes

30. Lesson 1.5: Creating a CSS File Using the CSS Properties Pane View and modify properties for the current style sheet (lower left of screen)

31. Lesson 1.5: Creating a CSS File Linking a CSS File Reference to external file in HTML header

32. In this section you will learn how to: Insert a new table Delete part of all of a table Merge cells together or split them apart Use AutoFormat Use the Tables toolbar Change cell alignment Change fill color Add captions to a table Use the Layout Tables pane Convert a table to text and vice versa Use AutoFit to Contents Use table and cell properties SECTION 2: Working with Tables

33. Lesson 2.1: Adding Tables We have seen that there are ways to lay out elements in a page using style sheets (for example, with position properties like the box property, the float property, and so on). Another way of laying out content is to use the HTML table element. The table is commonly used to arrange text, images, hyperlinks, and other content on a page.

34. Lesson 2.1: Adding Tables Inserting a Table Table  Insert Table

35. Lesson 2.1: Adding Tables Anatomy of a Table Table Row contains Table Data

36. Lesson 2.1: Adding Tables Drawing a Table Table  Layout Tables Draw table or draw cells in table (red rectangle)

37. Lesson 2.1: Adding Tables Selecting a Table, Row, or Cell Click somewhere in the existing table, then click Table  Select  (option)

38. Lesson 2.1: Adding Tables Inserting/Deleting Table Parts Click in table for insertion point, then Table  Insert  (option)

39. Lesson 2.2: Editing Tables In the previous lesson, we learned how to select table parts, and how to insert and remove them. Now it is time to learn a few more table editing techniques like merging two cells, splitting a cell in two, and more.

40. Lesson 2.2: Editing Tables Merging Cells Highlight cells, Table  Modify  Merge Cells

41. Lesson 2.2: Editing Tables Splitting Cells Highlight cell, Table  Modify  Split Cells, choose options

42. Lesson 2.2: Editing Tables Using AutoFormat Easy way to apply a quick style change to a table

43. Lesson 2.2: Editing Tables Using AutoFit to Contents Table is resized according to data

44. Lesson 2.3: Manually Format a Table In the previous discussion, we talked about auto-formatting and auto-fitting your SharePoint Designer tables. In this lesson, we’ll cover some manual techniques for modifying tables, and we’ll also learn some of the features found on the Tables toolbar.

45. Lesson 2.3: Manually Format a Table Using the Tables Toolbar Quick links to insert columns/rows, merge, spacing, layout, etc

46. Lesson 2.3: Manually Format a Table Changing Cell Alignment Moves position of data in a cell

47. Lesson 2.3: Manually Format a Table Changing Fill Color Background color for cells (be careful with color schemes!)

48. Lesson 2.3: Manually Format a Table Using Table and Cell Properties Right-click table  Properties

49. Lesson 2.4: More Table Options Before we move on from our discussion of tables, there are a few more points to cover. In this lesson, you will learn about adding captions, converting a table to text, and converting text into a table. In addition, we will revisit the Layout Tables Pane.

50. Lesson 2.4: More Table Options Adding Captions Creates a title for the table

51. Lesson 2.4: More Table Options Convert a Table to Text Removes table borders, text remains

52. Lesson 2.4: More Table Options Convert Text to Table Each line is made a row

53. Lesson 2.4: More Table Options Using the Table Layout Pane Task Panes  Layout Tables

54. In this section you will learn how to: Create a site navigation scheme Create a links bar based on the site navigation scheme Create a customized links bar Create a SharePoint quick launch link Rename, modify, or remove a quick launch link Change the appearance of the quick launch bar Use the Data Source Library Add an XML data source Add an ASP.NET data source Create a data view Modify data source properties Apply conditional formatting Filter, sort, and refresh page data SECTION 3: Navigation & Data Sources

55. Lesson 3.1: Link Bars A quality Web site has more than just consistent formatting and a visually pleasing layout. A great Web site also needs solid content and effective navigation tools as well. Navigation and content will be the focus of this next section, starting with the topic of navigation and link bars.

56. Lesson 3.1: Link Bars Create a Site Navigation Scheme Have all pages link to each other or set a defining layout to view pages in order

57. Lesson 3.1: Link Bars Creating Link (Navigation) Bars Select a page (like Home), Insert  Web Component

58. Lesson 3.1: Link Bars Create Custom Link Bar Similar to Wizard walkthrough, but with more options

59. Lesson 3.1: Link Bars Editing the Link Bar Right-click custom bar  Properties, change text, color, links, layout, etc.

60. Lesson 3.2: SharePoint Quick Launch Bars A quick launch bar is a collection of links that will appear on a SharePoint Web site’s home page. Typically, the quick launch bar will look like a menu with options for document libraries, calendars, sites, lists, and other items.

61. Lesson 3.2: SharePoint Quick Launch Bars Create a Quick Launch Link Open SharePoint site in SharePoint Designer, Site  Navigation. Drag page from Folder list

62. Lesson 3.2: SharePoint Quick Launch Bars Renaming a Link Right-click page in Nav. view  Rename

63. Lesson 3.2: SharePoint Quick Launch Bars Removing a Link Right-click page in Nav. view  Delete

64. Lesson 3.2: SharePoint Quick Launch Bars Modifying Quick Launch Links Right-click link in Nav. view  Properties

65. Lesson 3.2: SharePoint Quick Launch Bars Change Quick Launch Appearance Open master page for site, highlight link option, modify in Properties pane

66. Lesson 3.3: Using Data Sources SharePoint Designer has some great features for incorporating data sources into your Web site. Often, in an interactive site, data will be retrieved from a database or XML file to populate a web page with content. In this lesson, we will learn about the Data Source Library, about adding sources to the library, and how to create a data views for our web pages.

67. Lesson 3.3: Using Data Sources The Data Source Library Gateway for all external data for a site Task Panes  Data Source Library

68. Lesson 3.3: Using Data Sources Adding an XML Source File File  New  Page  XML, insert content

69. Lesson 3.3: Using Data Sources Add an ASP.NET Source In Data Source pane, click New ASP.NET

70. Lesson 3.3: Using Data Sources Remove a Data Source Right-click in Data Source pane  Delete

71. Lesson 3.4: More Data Source Commands In the last lesson we learned how data files can be included to help create pages for us. In this lesson, we will discuss how to use a data source to create a data view. We will then learn how to manipulate the view by filtering, sorting, and formatting the data.

72. Lesson 3.4: More Data Source Commands Creating a Data View XML, ASP.NET pages can reveal their data Click & drag from Data Sources to Nav. view

73. Lesson 3.4: More Data Source Commands Using Data Source Properties Right-click entry in Data Source pane  Properties

74. Lesson 3.4: More Data Source Commands Filtering Data After creating data view, you can filter data to your liking (logical operations)

75. Lesson 3.4: More Data Source Commands Sorting Data Sorting based on alphabetical, numerical order

76. Lesson 3.4: More Data Source Commands Applying Conditional Formatting Formats data according to logical conditions

77. Lesson 3.4: More Data Source Commands Refreshing Data If data source changes via other means, refresh your own pages

78. In this section you will learn how to: Open the Web Components Dialogue Choose and modify components Insert and modify ASP.NET components Add some basic programming scripts to ASP.NET components Use ASP.NET data controls Create a Web Part Zone Use interactive buttons Insert an ASP.NET image button Add a basic programming script to an ASP.NET image button SECTION 4: Advanced Components

79. Lesson 4.1: Adding Web Components SharePoint Designer’s array of web components include a Web site search component, a hit counter, photo gallery, table of contents, top ten list, and more. In this lesson, we’ll discuss the Web Components dialogue, how to choose web components, how to modify them, and how to download additional components.

80. Lesson 4.1: Adding Web Components Open Web Components Dialogue Insert  Web Component

81. Lesson 4.1: Adding Web Components Choosing a Web Component Choose category and then sub option

82. Lesson 4.1: Adding Web Components Modifying a Web Component Right-click component  Properties

83. Lesson 4.1: Adding Web Components Downloading Addl. Components Download more content from Microsoft

84. Lesson 4.2: What is ASP.NET? ASP.NET (the most recent version of Microsoft’s active server page technology) is a web development technology that can be used to build interactive Web sites and web applications. ASP.NET pages (active server pages) use server side scripting to create dynamic, interactive web pages.

85. Lesson 4.2: What is ASP.NET? Inserting an ASP.NET Control File  New  ASPX, select control type

86. Lesson 4.2: What is ASP.NET? Types of ASP.NET Controls Standard (buttons, text fields) Data (display retrieved data) Validation (test input) Navigation (organize links) Login (authorization/authentication) Web Parts (modifiable complete pages)

87. Lesson 4.2: What is ASP.NET? Modify ASP.NET Control Prop. Click control on page, Properties pane

88. Lesson 4.2: What is ASP.NET? Programming ASP.NET Controls Controls are only infrastructure; must use addl. code to make them interact(ive)

89. Lesson 4.2: What is ASP.NET? ASP.NET Data Controls Used to display data retrieved from external sources

90. Lesson 4.2: What is ASP.NET? Technical Issues Some server side scripts that use ASP.NET might not work for security reasons Make sure you install the newest.NET framework on your computer before creating new content Check with network admin. for permissions

91. Lesson 4.3: Adding SharePoint Web Zones Now that you are familiar with the basics of web components, and ASP.NET controls, we will turn our attention to SharePoint Web Zones. In this lesson, we will learn what web zones are, and how to create them. We will also learn how to modify the properties of a web zone to help arrange and set up the components contained within it.

92. Lesson 4.3: Adding SharePoint Web Zones What is a Web Zone? Placeholder or container for web parts Contains content for users to view or modify in some way Useful for a basic central data repository, like a blog

93. Lesson 4.3: Adding SharePoint Web Zones Creating a Web Zone Task Panes  Web Parts

94. Lesson 4.3: Adding SharePoint Web Zones Modifying Web Zone Properties Right-click zone  Web Part Zone Properties

95. Lesson 4.3: Adding SharePoint Web Zones Removing a Web Zone Select zone so orange details are highlighted, Delete

96. Lesson 4.4: Interactive Buttons We first introduced the concept of interactive buttons in Lesson 2.3 of the Foundation manual. In this lesson, we will quickly review the traditional interactive button, and then we will explore ASP.NET image button controls and how to use them in your ASPX pages.

97. Lesson 4.4: Interactive Buttons Interactive Buttons Insert  Interactive Button, choose style and link location/action

98. Lesson 4.4: Interactive Buttons ASP.NET Image Buttons Offers more visual features, can activate server-side commands/conditions

99. Lesson 4.4: Interactive Buttons Adding an Image to the Button Under button Properties, click ImageUrl browse button

100. Lesson 4.4: Interactive Buttons Add Script to Image Button Code that determines what actions happen upon click