Chapter 6. Exploring the Design and Code Editing Features

IN THIS CHAPTER

Working in the Design view

Working in the Code view

Using the Find and Replace features

Working with the Quick Tag Selector

From your exposure to the SharePoint Designer interface in the previous chapters, you should be comfortable with the Design and Code views. However, some features of these views can help you further enhance your designing capabilities with SharePoint Designer.

In this chapter, I discuss the designing aids and tools that SharePoint Designer provides for ease of designing Web pages and placing content in the Design view. I show you how you can use the Quick Tag Selector to quickly locate and highlight components and sections on Web pages. I also discuss special tools, such as Format Painter, Paste Special, etc., that provide ways to replicate formatting across Web pages.

Also, I take you through features, such as IntelliSense and code checking, offered by the Code view in SharePoint Designer that give developers a reference that they can use while writing code for Web pages in the Code view. Later in this chapter, I talk about Find and Replace and how you can use this awesome tool to quickly find and replace content, HTML tags, and code across an entire Web site.

SharePoint Designer offers Web site developers a number of tools that provide the ability to easily reuse content without having to re-create all the formatting associated with it. You can import content from other applications, such as Microsoft Word, and still retain the formatting applied to the content. This special copy and paste feature allows you to develop content by using the program of your choice and still maintain the formatting to a large extent. Along with this, you also have an option to repeat the formatting applied to one section of the content to another section. These features provide the flexibility, speed, and simplicity needed when designing Web content with other applications.

I begin by taking you through an exercise that helps you understand how you can use SharePoint Designer features to move content with formatting from one page to another or from a document to a Web page:

  1. Using an advanced text editor, such as Microsoft Word, open or create a document with text that has some formatting applied to it.

  2. Press Ctrl+C or choose Edit Copy to select and copy the contents of the document so that they're placed in the Clipboard. Choose Task Panes Clipboard to show the Clipboard task pane and view current and previous contents of the Clipboard.

  3. In SharePoint Designer, open the Web page where you want to move the copied content.

  4. Place the cursor at the location on the Web page where you want to paste the content and then press Ctrl+V or choose Edit Paste to paste the copied content. The content is placed on the Web page, and the formatting applied in the original document is retained. Also, the small Paste Options menu appears beside the content that you just pasted.

  5. Click the Paste Options menu to show these menu options, which appear as radio buttons:

    • Keep Source Formatting: Retains the formatting applied to the content being pasted

    • Remove Formatting: Removes the formatting applied to the content being pasted

    • Keep HTML Only: Only formatting applied as HTML is kept. Other formatting, such as styles, isn't retained.

    • Keep Text Only: Opens the Paste Text dialog box (also accessible by choosing Edit Paste Text), where you can specify whether the paragraph, line breaks, and rows should be retained

If you don't want to use the Paste Options menu and want to hide it, you can do so by deselecting the Show Paste Options Buttons check box (in the Cut and Paste Options section) in the General tab of the Page Editor Options dialog box.

While the Paste Options menu allows you to specify whether you want to keep the formatting applied to the text, there might be cases where you just want to keep the formatting but not the text or content. To replicate formatting applied at one location to another in the same Web page or across different Web pages, you can use the Format Painter. The Format Painter is available as a button in the Standard toolbar, which can be enabled by choosing View Toolbars.

To use the Format Painter to replicate the formatting used on text in one location and apply it to text in another location, follow these steps:

  1. Open the source Web page that contains the content with formatting you want to replicate and then open the destination Web page where you want to apply the formatting.

  2. In the Design view of the source Web page, place the cursor at the location where you want to copy the formatting from.

  3. Click the Format Painter button in the Standard toolbar. The mouse pointer changes to a paintbrush. SharePoint Designer has now copied the formatting that was applied to the text at the location where the cursor was placed.

  4. Click the destination Web page in SharePoint Designer by using the tabbed interface. The mouse pointer is still shown as a paintbrush.

  5. Using the mouse, highlight the content where you want to apply the formatting you copied in step 3. The formatting that SharePoint Designer copied is applied to the content in the destination Web page.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.82.221