Setting the Page Editor Options in Microsoft Expression Web 3 (Part II – Code Formatting)

Posted by: Minal Agarwal , on 2/16/2010, in Category Expression Web
Views: 48042
Abstract: With Page Editor Options you can specify settings for various Microsoft Expression Web features. In this article we will explore some more tabs of the Page Editor Options dialog box.
Setting the Page Editor Options in Microsoft Expression Web 3 (Part II – Code Formatting)
 
In my earlier article; Setting the Page Editor Options in Microsoft Expression Web 3 (Part I), we explored the General, Auto Thumbnail and Default Fonts tab in the Page Editor Options. Now we will look at Code Formatting tab.
With Page Editor Options you can specify settings for various Microsoft Expression Web features. The Code Formatting tab has options which let you customize the appearance of the code in code view.
To launch the Page Editor Options dialog box, go to Tools > Page Editor Options… and choose the Code Formatting tab.



code_format_tab
The Code Formatting options would help you customize the way your code should appear in the Code view. We’ll take a look at these options:
1.    Base on current page: Select this button to set the code formatting options according to those set in the current page.
 
2.    Tag names are lowercase: enter the tags in lowercase.
 
3.    Attribute names are lowercase: enter the attributes in lowercase.
 
4.    Attribute names are alphabetized: enter the HTML attributes in alphabetical order.
 
5.    Allow line breaks within tags: add line breaks within the tags. Else each tag is entered on the same line.
 
6.    Tab size: set the number of character spaces to indent when you press the TAB key in Code view.
 
7.    Indent: sets the size (in numbers) and unit (in Spaces/Tabs) for the left margin in case of nested code.
 
8.    Right margin: set the right margin for code view.
 
9.    Insert tabs as spaces: format tabs as spaces.
Tags section allows you to set options for specific tags. Select a tag from the list and set the following options:
1.    Line Breaks:
 
a.    Before start – sets the number of line breaks between the start tag and the contents of its preceding tag. A value of 1 or greater would display the start tag on a new line.
 
b.    After start – sets the number of line breaks between the content of the tag and the end tag. A zero value would display the end tag on the same line as the content.
 
c.    Before end – sets the number of line breaks between the start tag and the contents inside the tag. A value of 1 or greater would display the start tag on a new line and value of 0 will display the content inline with the start tag.
 
d.    After end – sets the number of line breaks between the end tag and the contents followed by the tag. A zero value would display the end tag on the same line as the content.
 
2.    Each of these options would be enabled/disabled depending upon the tag.
 
a.    Omit start tag – skips the start tag where start tag is not required. Option is disabled for all the elements that require a start tag.
 
b.    Omit end tag – skips the end tag where end tag is not required. Option is disabled for all the elements that require an end tag.
 
c.    Indent contents – indents tags in nested elements.
CSS section allows you to set CSS options for specific tags. To set these options choose a component from the list and choose the formatting options:
a.    Lines before – sets the line breaks before the component. For example; opening brace ‘{‘.
 
b.    Lines after – sets the line breaks after the component.
 
c.    Spaces after – sets spaces after the component.
 
d.    Indent properties on new lines – indents CSS properties written by Expression Web.
 
e.    Use shorthand properties – tells Expression Web to use shorthand properties instead of longhand (individual properties) while generating styles. For example, use background property in place of background-color, background-image and such other values of background.
Conclusion
The Code Formatting options we saw above will help you optimize your code view. You need to play with them to get used to what each of them actually does. In my next article we will learn some more Page Editor options. But I hope this article was helpful and that you enjoyed reading it.
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel