Click here to Skip to main content
Click here to Skip to main content

Web Authoring and Designing with SharePoint Designer 2007

, 2 Jul 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
Designing websites using SharePoint designer as a replacement for the FrontPage designer.

Introduction

The foremost objective of this article is to introduce SharePoint Designer (Beta 2) to readers to have a look at the great features and tools, new layouts, intuitive environment, and design aspects of SharePoint Designer 2007. Precisely, you could find details on how much you can do with this latest product, from the designer’s perspective, almost with no code.

Overview

SharePoint Designer 2007, a clear replacement for FrontPage, is a richie-rich designer tool for people who create and customize web sites and workflows built with SharePoint products and technologies. It is a perfect blend for designer-server collaboration with Microsoft Windows SharePoint Services and Microsoft Office SharePoint Server 2007.

Users can design workflows and applications that enable web authors and designers to build conditional views and forms with validation besides the capability to read, write, and present data from a variety of data sources – such as XML files, SQL databases, and Web Services. It also enables them to produce customized views and reports, build Web Part pages, and connect Web Parts to create sophisticated business applications.

Adding more power to SharePoint Designer 2007 is ASP.NET combined with CSS and XHTML tags that permits you to create and customize SharePoint sites and applications.

Creating and Publishing Sites

With the current Beta edition of Office SharePoint Designer 2007, you can create web pages or websites locally on any folder and publish it to the local or remote server. There are a lot of templates available for you to create event-based, personal, organizational, and personal websites.

Sample screenshot

Figure 1: Website Templates Dialog

You can create new ASP.NET Master Pages that provide a foundation layout for one or more pages. The layout information in a master page will be common to all the pages, and adding elements or changing the layout is done only in the master page, not in all the pages. These master pages play a great role in building your own multi-page site swiftly, consistently, and with considerably less effort than it would take to create pages one by one.

Office SharePoint Designer 2007 also provides support for Cascading Style Sheets (CSS) to design attractive layouts and catchy formatting.

You can publish the site to an existing Internet Information Server (IIS) or any other web server running in your system using the Publish Site command in the File menu. The publishing site should support FrontPage Server Extensions or SharePoint Services, WebDAV (Distributed Authoring and Versioning), FTP, or File System.

Your site can also be exported as a web package for deployment in a different location. A web package file is a compressed form of all the files in a site along with all the required dependencies.

For professional enterprise web designers, it is recommended to design and create the UI layouts of web pages using SharePoint Designer 2007, and add server-side coding and processes using Visual Studio 2005.

Sample screenshot

Figure 2: Exporting a site as Web Package

Designer Tools

The designer can view the page in three modes; Design, Code, and Split. The split mode enables you to view both the design layout and the HTML code for a page at the same time. The contents of a page can be selected easily by the user with the Quick Tag Selector that appears on the top of the page. You can insert HTML tags,

Figure 3: A page view in Split mode

Task Panes

SharePoint Designer 2007 has a list of task panes to perform design-time operations on a page. Folder List task panes populate with all the files in a site as soon as you create or open a web site. The Navigation pane helps you to do the site settings including the home page. Properties windows are provided separately for tags and CSS styles. The Apply Styles and Manage Styles task panes let you dynamically create new styles and edit existing styles. A new style window appears as shown in figure 4.

Sample screenshot

Figure 4: Creating a New Style

The Behaviors task pane lets you define actions against events on a tag basis. This option is more helpful when you want to add dynamic behaviors like displaying a popup message, running a script, jumping to an URL, or swapping images etc. Using the Layers pane, you can add as many layers on top of the content, make them visible or invisible, and set their properties. Layers may contain any number of tags and controls, and can be placed anywhere on a page.

Sample screenshot

Figure 5: Adding a Behavior for an event

The most important task pane is the Toolbox. Toolbox in SharePoint Designer 2007 is loaded with a bunch of controls that are categorized broadly into HTML controls, ASP.NET controls, and SharePoint controls.

HTML controls are sub-categorized into simple tags for static display and Form Controls for user input. There is not much change in this set of controls as compared to the FrontPage Designer.

ASP.NET controls provided by the SharePoint Designer are just similar to what developers have in the toolbox of Visual Studio .NET. These controls are classified into Standard, Data bound, Navigation, Validation, Login, and WebParts. Detailed discussions on ASP.NET controls are not the scope of the article, as they are all server controls. They run at server side, do some processing, and must need a SharePoint Server Site to do some work-around. If you have FrontPage extensions installed on your IIS, you could view the .aspx page but not the code running in this beta.

SharePoint controls are available in four different categories, namely, Dataview controls, SharePoint Server controls, Page fields, and Counter fields. The first two sets of controls require Windows SharePoint Services 3.0 or later running in your website. The other two sets of controls require Microsoft SharePoint Publishing layout.

Interactive Buttons

Interactive buttons are really developer friendly buttons, and you can find as much as 300 types of buttons to use in your web page. They offer glossy buttons with braided, embossed, glowing, and glass effects to add more attraction to the user interface. The following figure shows a sample of a few interactive buttons.

Sample screenshot

Figure 6: Variety of Interactive Buttons

Web Components

Another feature that has been borrowed from FrontPage Designer is the capability of adding web components in your page. These web components are widely varied in their functional aspects, and are easily pluggable with no code and frequently used in any web site. To list a few: Hit Counter, Photo Gallery, Included Contents like Page Banner, Table of Contents, and Top 10 List (of the pages frequently visited in your site).

Connecting to a data source and displaying data

In the Data Source Library task pane, you can create new database connections to local and remote XML files and ASP.NET databases. With ASP.NET connections, you can connect to most of the databases like MS-Access, SQL Server, Oracle, or any ODBC data source.

Here is a step-by-step procedure to connect to a SQL Server database; retrieving rows from a student’s roll table and displaying it in a GridView control (an ASP.NET data aware control) are explained here.

  1. In the Data Source Library pane, click on the New ASP.NET Connection… link.
  2. Sample screenshot

    Figure 7: Data Source Library task pane
  3. Select the data source and provider.
  4. Sample screenshot

    Figure 8: Selecting a data source and data provider
  5. Provide the server name and credentials, and select the database you want to connect to.
  6. Sample screenshot

    Figure 9: Database Connection dialog
  7. Place a GridView control on the page and create a new data source.
  8. Sample screenshot

    Figure 10: Assigning a data source to a Gridview
  9. There is a sequence of dialogs that lets you select the database connection and tables you want to query. You can build a SQL query in this step.
  10. You get the output as follows, when you run the page on the browser:
  11. Sample screenshot

    Figure 11: Output GridView showing rows from a table

Site Reports

As you can see from figure 12, site reporting options are exceptional in SharePoint Designer 2007. You can get almost all the information about the site like frequency of user visits, shared contents like links to dynamic web templates or CSS, a list of old, new, or problematic files in the site etc.

Sample screenshot

Figure 12: Various site reporting options

The site summary report tells you the complete list of files, hyperlinks, components, and templates that constitute the whole site.

Sample screenshot

Figure 13: Report showing the site summary

Lastly, the Contributor settings would give you and your team of designers a complete control of how SharePoint Designer 2007 is used to modify a site. Site administrators and IT managers can control and manage user roles defined in your SharePoint site, and control access to specific actions such as modifications in your master pages and CSS. It helps you to ensure that your site is properly managed and audited for browser compatibility and Web accessibility. However, this option is available only for administrators and sites running SharePoint Server.

Conclusion

Web designers can use SharePoint Designer 2007 straight out-of-the-box to create web sites quickly, and the updates are instantly available for the visitors of the site. It is a collaboration tool for the entire workgroup to maintain and share their documents on a SharePoint server. Designing elegant, professional-looking websites with less effort is not a distant future.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Balamurali Balaji
Founder BB Systems CIT-GPNP
India India
No Biography provided

Comments and Discussions

 
QuestionHow to create a page that have a code server in sharepoint 2007 Pinmemberlephong18-Jul-07 0:17 
GeneralQuick but Sure Pinmemberanasalama13-Feb-07 4:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141022.2 | Last Updated 3 Jul 2006
Article Copyright 2006 by Balamurali Balaji
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid