Formatting text in web pages in Microsoft Expression Web

Posted by: Minal Agarwal , on 7/22/2007, in Category Expression Web
Views: 43314
Abstract: In the previous article you saw how to create web pages. But your job does not end here. You are required to manipulate text in your development area to structure your web page. In this article I would cover such formatting features right from the basic text formatting tools and proceed to some HTML specific formatting.
Formatting text in web pages in Microsoft Expression Web
 
Adding and formatting text in a web page in Expression Web is similar to creating and formatting a document using any word processing program. But unlike other word processing applications you should not format your text in web pages as you enter it, since according to the new web standards CSS (Cascading Style Sheets) do this functionality.
Entering text in a web page
To enter text in a web page, open the page and click where you want to enter the text. The blinking cursor indicates the insertion point where you can enter the text. As you start typing the text appears in the insertion point.
If you are in the Split view, as you type your text in the design part you can notice the text being automatically inserted the code window, inside the HTML paragraph tags <p> </p> as shown in the following image.
Expression Web Paragraph tag
Selecting text in a web page
All of us already know how to select text, since we perform this function everyday in some kind of application.
Using the mouse:
Simply click and drag the text you want to select. Double click on a word to select it. If you triple-click anywhere in the paragraph, the whole paragraph gets selected. If you want to select a portion of text then move your mouse pointer to extreme left of the page where you find the cursor changed to a slanting mouse pointer, click once to select an entire line. As you hold down the left mouse key and double click the whole paragraph gets selected. You can also hold down the mouse button and drag line by line to select a part of the text.
Using the keyboard:
To select a portion of text, take your cursor at the beginning of the selection and then press Shift + Forward arrow to select a letter at a time, or Shift + ctrl + Forward arrow to select a word at a time or Shift + End to select text till the end of the line. Use Shift + End + Down arrow to select line after line.
Move text in a web page
Select the text you want to move, drag it to the new location and release the mouse key. The other way is to cut the text from a location and paste to the other.
Cut and Copy text in a web page
Select the text you want to cut or copy. From the Edit menu choose Cut or pres ‘Ctrl + X’ to cut the intended text and choose Copy or press ‘Ctrl + C’ to copy the text. This text is then saved onto a clipboard until you paste it somewhere.
Pasting text in a web page
Expression Web provides you with two Paste commands for pasting text in the web pages. First paste command is the one which you use regularly, popularly known as the ‘Ctrl + V’ which enables you to control the style of the text inserted. The other command is specific to Expression Web which is Paste Text… which offers an option of managing the line breaks and white spaces in the inserted text. The Paste Text command doesn’t have a shortcut.

Paste command:

 

In the Design View, click in the page where you want to paste the text that you have cut or copied from any web page or any word processing application. Then follow any of these methods to paste; choose Edit > Paste, or Ctrl + V or right click and choose Paste from the menu. The text to be pasted is picked up from the clipboard and pasted at the insertion point into the destination document. The default Paste option is Keep Source Formatting hence the text maintains the formatting of the source document that is the document from where the text is cut or copied.
Expression Web Paste Formatting menu
If you want to change this formatting, click on the Paste Options button which is displayed in the page as soon as you paste some text. Remove Formatting deletes the source formatting from the text and inserts plain text in the. Keep HTML Only maintains the HTML coding copied from the source. Keep Text Only…inserts plain text and displays the Paste Text dialog box that lets you choose the line breaks and white spaces in the page.
Expression Web Paste Text dialog box

Paste Text:

 

In the Paste Text dialog box you can choose any one of the five choices. Your choice determines how the text is pasted.
Plain text inserts plain text with spaces and replaces any line breaks in source text. One <pre> formatted paragraph uses the preformatted tag to maintain all line breaks of source text. Many <pre> formatted paragraph uses the preformatted tag to maintain all line and paragraph breaks of source text. Normal paragraphs with line breaks convert any line breaks to <br> tag and any paragraph breaks to <p> tag. Normal paragraphs without line breaks don’t put any line breaks.
Insert Line and Paragraph breaks
To add a line break do one of the following:
1.    Place your cursor where you want to insert the line break and press Shift + Enter. The text breaks to a new line.
2.    Put your cursor where you want to break the text and choose Insert > HTML > Break.
     Expression Web Line Break
3.    Click in the page where you want to break the text and from the Toolbox task pane, choose the HTML tags and double click on Break tag to insert the line break.
You can use the same menu to insert other tags like Horizontal Line, Inline Frame, and Layer etc.
To add a paragraph break place your cursor where you want to break the paragraph and hit enter key. The cursor then moves to the next line to start a new paragraph.
To show or hide the paragraph marks click on the Show Formatting marks button in the standard toolbar.
Indenting paragraphs
Paragraph indents are use to arrange your text in such a way that even a glance at the document or in this case the web page makes you determine the importance of the text. Indentation in web pages plays a vital role in outlining their structure.
To indent a paragraph select it and then press tab or use the Increase Indent Position and Decrease Indent Position buttons from the Common or Formatting toolbars.
To indent first line of the paragraph place your cursor anywhere in the paragraph and in the menu bar choose Format > Paragraph. In the Indentation section, set the Indent first line value, by judging the right indent in the Preview section below in the dialog box.
Expression Web Format menu
 Expression Web Paragraph Dialog box
Inserting special HTML characters
HTML uses unique codes to create special characters that you must have used often in word processing applications. To insert a special character into your page you need to insert appropriate code for that character. To do that, go to the Insert menu and choose Symbol. This opens the Symbol dialog box as shown below.
Expression Web Insert menuExpression Web Symbol Dialog box 
Use the Font and Subset drop down lists to search for the character you would like to use in your page. Then click on the character to select it and press Insert. The corresponding HTML code will then be inserted into your code.
Creating Headings in a Web page
Headings help you to organize your data and introduce the substance of your page to the readers just by scanning through your page.
HTML offers six sizes of headings ranging from Heading 1(h1) to Heading 6(h6), h1 being the largest and h6 the smallest.
To mark some text as a heading, select the text and go to the Style drop down menu on the common toolbar. Choose appropriate heading and the heading will be applied to the text.
Expression Web Headings
Creating lists in a web page
There are two types of lists: Numbered and Bulleted.
Numbered List:
Select the lines you want to be numbered and click the Numbering button in the Formatting toolbar or the Common toolbar. This would create a numbered list for you. To keep on adding items to your list press enter and the next number will appear. To end the list hit enter twice to return from the numbered list mode.
Bulleted List:
Select the lines you want to be numbered and click the Bullets button in the Formatting toolbar or the Common toolbar. This would create a numbered list for you. To keep on adding items to your list press enter and the next bullet will appear. To end the list hit enter twice to return from the bulleted list mode.
NOTE: to remove the list formatting, select the list and then click on the Numbering button for numbered list and Bullets button for bulleted list. This will remove the formatting.
Definition List:
Place your cursor where you want your definition to appear. From the Style drop down menu choose Defined Term. Now type your term and press enter. As you press the enter key the cursor moves to the next line and is automatically indented to define the term given in the previous line. Once done press enter and this time the cursor will take the indentation of the term and so on.
Expression Web Definition List
Conclusion
Well I hope this article has given you some understanding about the formatting and designing tools that you can use to shape up your text in your web page. In my future articles I would delve in inserting images and multimedia elements into your pages. So keep visiting this section for updates. I thank you for reading this article.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Amitav Pattanaik on Friday, July 18, 2008 8:05 AM
I want to blink normal text in Microsoft expression web.
Comment posted by sahil on Saturday, May 23, 2009 7:16 AM
it's very good web site in my point of view

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook