homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
Forum Library, Charter, Moderator: open

WYSIWYG and Text Code Editors Forum

This 46 message thread spans 2 pages: 46 ( [1] 2 > >     
FrontPage Tips
Working in WYSIWYG Mode

 6:09 pm on Jan 14, 2006 (gmt 0)

Inline Elements - Adding Style using the
<span></span> Element

Want to be able to add <span class=""></span> elements without hand coding? Do this...

When working with FrontPage and CSS, you have to be very specific with your stylesheets. If you want inline elements to appear in your formatting menu (as inline elements), you need to precede your classes with [b]span[/b]. For example, let's say you want to make a word blue. You would need something like this in your stylesheet...


Once you append the [b]span[/b] to the class, that will now appear in FP's styling menu with an a (with underscore) symbol to the left of it. This means that it is an inline element. Block level elements have a to the left of them which means they are block level.

If your style sheets have generic classes that start with a dot (.), they will appear in the menu without the a or symbols and will be treated as if they were block level elements.

FP's styling menu is sorted in a specific way. All of your predefined block level elements will appear at the top of the list. Then your generic classes will appear (in alphabetical order). And then your specific block and inline classes will appear at the bottom, in alphabetical order.



 6:12 pm on Jan 14, 2006 (gmt 0)

Thank you for a neat little tip that I can put to use right now.


 6:19 pm on Jan 14, 2006 (gmt 0)

Thank you for a neat little tip that I can put to use right now.

Oh, I'm going to have quite a few of them over the course of this topic. I'd like to see what other secrets users of FrontPage have uncovered. I need to know if I've figured everything out. ;)

Many of my tips will deal with FPs default styling menu and how to work in WYSIWYG mode to produce Strict code while working with external CSS. We're going to trim your formatting toolbar down to just a few things...

  • The Style Menu
  • B - Bold <b></b>
  • I - Italic <i></i>
  • OL - Ordered List <ol></ol>
  • UL - Unordered List <ul></ul>
  • Increase Indent - Nesting Lists
  • Decrease Indent - Un-Nesting Lists
  • Font Color Menu

Note: We are not going to physically use anything from the Font Color Menu. I'm going to show you how to work around that.

The Increase Indent and Decrease Indent buttons are instrumental when nesting lists. There are some neat tricks there that few know about. ;)

And no, we will not be using <blockquote> for those of you who are familiar with the Increase/Decrease Indent options. When you use this feature on lists, the <blockquote></blockquote> elements are not generated. Instead, your lists are nested properly relative to the number of times you've nested an element.


 4:43 pm on Jan 15, 2006 (gmt 0)

The FrontPage Style Menu

Let me familiarize you with the FP Style Menu so you know what we are discussing here. By default, FP prepopulates the Style Menu with your basic HTML elements. Here is an example of what that menu looks like (it is ordered alphabetically)...

  • Address
  • Bulleted List (Unordered)
  • a Default Character Style
  • Defined Term

  • Definition

  • Directory List
  • Formatted
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Menu List
  • Normal
  • Numbered List (Ordered)

Anything you select from the default Style Menu choices is controlled through your assigned styles for those elements. For example, if you had this in your style sheet...


Selecting Heading 1 from the Style Menu will automatically apply those styles to your <h1> elements. Remember, we are using either external or embedded CSS so there is no additional markup inserted into the <h1> or around the Heading itself. You apply the default style and you will get this for output...

<h1>Heading 1</h1>

Normal and a Default Character Sytle are there to remove styling applied to an element.

Here's the lean version of the Style Menu without all the examples I added above...

  • Address
  • Bulleted List
  • a Default Character Style
  • Defined Term
  • Definition
  • Directory List
  • Formatted
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Menu List
  • Normal
  • Numbered List

More to come...


 6:32 pm on Jan 16, 2006 (gmt 0)

Block Level Elements and Inline Elements

Over the past 10 years of using FrontPage, I've been onsite with clients training their internal staff how to use Office programs in general with FrontPage being one of them. Many are using FrontPage to manage their Intranets. Some have upgraded to SharePoint Services.

When watching users interact with their programs, especially during creation/editing of documents, I see things that can be done more efficiently or I know of a shortcut to do it quicker. One of those is styling content.

When working in FrontPage's WYSIWYG mode (or most document creation programs), you are dealing with two distinct elements for styling. You have block level elements and you have a inline elements. For those who are following along and are not familiar with the terms block level elements or inline level elements, please refer to the W3 and The global structure of an HTML document, 7.5.3 Block-level and inline elements [w3.org].

In the Style Menu for FrontPage, you will see block level elements preceded with and inline elements (specific) preceded with a.

= Block Level Elements
a = Inline Elements

One of the most prolific styling actions that I've seen most users do in an editing environment is to highlight an entire line, or block of text to give it style. There are certain styles (inline) that require you to highlight entire lines or blocks of text. Examples of those would be <b>, <strong>, <i>, <em>, etc.

Styling of block level elements (<h>, <p>, etc.) do not require this. All you need to do is position your cursor anywhere within the block level element you wish to style and then select it from your Style Menu.

For example, you want to turn what you just typed in WYSIWYG mode into an <h> tag. Click anywhere within the line you just typed, select <h1> from the Style Menu. That will take that line and automatically wrap it in <h1></h1>. It will also apply whatever styling you've done with that <h1> in your external or embedded style sheet.

So, for all of you who continue to highlight in the above manner, take a shortcut and just click and apply the block level style. It's a second or two saved and it makes working in WYSIWYG a little more efficient.


 6:42 pm on Jan 16, 2006 (gmt 0)

Ctrl + Shift + * - The Show All Command

Something I should have mentioned in the very beginning.

Open FrontPage right now. In your Standard toolbar at the top, you have a symbol. Click that or just press Ctrl + Shift + * to Show All. I work in Show All mode 99% of the time. Without it, I'm lost as to what is what on the page. With Show All selected, you now see all of your block level elements (). You can also see <br> which is represented as a left arrow. In addition to that, you now have dotted guidelines for separation of containing elements such as <div>s or <table>s.

When you press the Enter Key in FrontPage, you are creating a new block level element (). For example, if you were typing within a <p> element and pressed Enter, you are going to create a new <p> element. It would look like this in html view...

<p>This is your first paragraph.</p>
<p>This is your second paragraph created by the [b]Enter[/b] command.</p>

In traditional document layout, this is referred to as a Hard Return.

If you were typing within an <li> element and pressed enter, you are going to create a new <li> element.

<li>List Item 1</li>
<li>List Item 2</li>

If you were typing within a <p> element and pressed Shift + Enter, you will create a <br> or line break within your <p> element (shows as a left arrow in FrontPage and most other document editing programs).

<p>This is your paragraph.<br>
Here is the second line created by the [b]Shift + Enter[/b] command.</p>

In traditional document layout, this is referred to as a Soft Return.

If you were typing within an <li> element and pressed Shift + Enter, you will create a <br> within your <li>. It would look like this in html view...

<li>List Item<br>
Here is the second line created by the [b]Shift + Enter[/b] command.</li>

Now, to take the above one step further, you can press Ctrl + / which is the Reveal Tags command. This will show you all of your beginning and ending tags. I'll get into this feature a little bit later in the topic. But for now, keep the Show All selected for this series of tips.


 10:37 pm on Jan 16, 2006 (gmt 0)

Ctrl + / - The Reveal Tags Command

Now, to take the above one step further, you can press Ctrl + / which is the Reveal Tags command. This will show you all of your beginning and ending tags. I'll get into this feature a little bit later in the topic.

Okay, go ahead and press Ctrl + / to switch to Reveal Tags mode. Now, hover your cursor over any of the opening or closing tags that you see. You'll notice a screen tip appear. If that element that you hovered over had a class or id assigned to it, you would see that in the screen tip. For example, if you had a class on your <h2> for centering, it might look like this in the screen tip that appears on hover for that element...

<h2 class="tac">

This is great for remaining in WYSIWYG mode, especially for those that are still learning.

There are more major advantages to using the Reveal Tags mode and I'll bring you up to snuff on those as we progress forward.

Once we are done with this particular topic, you should be able to seamlessly integrate your external style sheet(s) into FP's WYSIWYG environment.


 12:00 am on Jan 17, 2006 (gmt 0)

I'm going to summarize the above. When working in FP's WYSIWYG mode, there are various things you want to see while developing pages. To do that, you'll want to get comfortable in using these keyboard shortcuts. Actually, the first one, Show All you should have on at all times, or at least 99% of the time.

Ctrl + Shift + * - Show All
Ctrl + / - Reveal Tags

The second one, Reveal Tags, will come into play when you want a visual of your semantic html markup. It is also a key feature when you are performing cut and paste routines. When Reveal Tags is selected, you can now click on the starting or ending tag for each element to grab the whole tag and not just parts of it. This has been a major flaw in most WYSIWYG programs. If you were just cutting and pasting without the Reveal Tags command on, there is a chance that you are going to leave behind tags, especially form tags that are outside the element you are copying. I've seen it happen time and time again.

Remember, these two keyboard shortcuts will help you to work with FrontPage in WYSIWYG mode more efficiently.

Another major advantage to using the Reveal Tags command is that you can select the tag, then switch to HTML view and the HTML will be selected for you. No hunting for the starting or ending tag, FP will select and highlight it for you. :)


 6:15 pm on Jan 17, 2006 (gmt 0)

Ctrl + Q - The Quick Tag Editor

Another major advantage to using the Reveal Tags command is that you can select the tag, then switch to HTML view and the HTML will be selected for you. No hunting for the starting or ending tag, FP will select and highlight it for you.

Are you ready for this one? Okay, switch to Reveal Tags mode Ctrl + /. Now, select any one of the tags (click on the opening or closing tag to select all). Press Ctrl + Q. This brings up the Quick Tag Editor and allows you to modify the tag without switching to HTML view. You can now add whatever classes and/or IDs directly through the Quick Tag Editor. For example, you need to add multiple classes to one of your elements. Go through this process...

  1. Ctrl + / to Reveal Tags.
  2. Select the tag to be edited.
  3. Ctrl + Q to edit tag via the Quick Tag Editor.
  4. Add additional attribute and/or value information.

This is what WYSIWYG is all about. ;)


 5:08 am on Jan 18, 2006 (gmt 0)

Very neat! Thank you!


 5:05 pm on Jan 18, 2006 (gmt 0)

Broken Tags - Soft Returns <br> - Hard Returns </p> (or other ending block level elements)

Use the Reveal Tags option (Ctrl + /) while designing in normal view and you'll be able to eliminate a lot of your broken tags, improperly nested tags, wrapped tags, ending tags that are missing, etc.

You should also work with your Show All selected (Ctrl + Shift + *) as this works in conjunction with the Reveal Tags option (Ctrl + /) and will show you where your Soft Returns <br> and Hard Returns </block> are located.

You'll want to make sure that all ending tags are properly positioned, especially those </td> and </p> tags. If those two tags are hanging by themselves (see another topic on setting up FrontPage Page Options [webmasterworld.com] to prevent tags from wrapping), you will see unusual spacing issues between cells <td> and paragraph <p> text.

<td>Incorrect Example
<td>Content here...

<td>Correct Example
<td>Content here...</td>

<p>Incorrect Example
<p>Content here...

<p>Correct Example
<p>Content here...</p>

There is an art and science to using FrontPage correctly and these are just some of the tips I've learned since I first started using the program back in 1996! Here's another one you'll catch when revealing tags...

Properly nested <font> Tags (see note below)

Anytime you specify a color for a font you need the <font color="#******"> tag (unless you are using CSS and the FrontPage Style Menu as opposed to the Formatting Menu). When using colors for headline text we tend to <b> that copy.

There is a specific sequence in FrontPage to properly nest the font tags. You can see the differences by revealing html tags Ctrl + /.

Here is the correct way...

First select your copy to be bolded. Then you can either use the bold command from your toolbar or Ctrl + B. Select your font color and that's it. Notice how your tag looks like this...

<font><b>Content here.</b></font>

Here is the incorrect way...

First select your font color. Then bold your copy and that's it. Wrong! You end up with a tag that now looks like this...

<b><font>Content here.</font></b>

The above tag is not nested correctly. The <b> needs to be after the <font> and the </b> needs to be before the </font>.

lol! I'm sure those of you who read those last few lines are thinking, "<font> tags, what is he talking about? Those were deprecated back in the 90s."

Yes they were. This is one thing about FrontPage that I've not been able to figure out yet, how to get the default Font Color menu to work with CSS. If a user selects a line of copy to be colorized, and then uses the Font Color from the Formatting Toolbar, that line gets wrapped in a <font color="******"></font> tag, yuck! If I were shipping that program today, those menu choices would no longer be available. Anything that produces a <font> tag should be turned off by default. Many users cannot distinguish the difference between the Formatting Toolbar and the Style Menu. So, they tend to use the one with the least resistance which in this case is the Formatting Toolbar which does produce <font>!

But, we can't forget here, this is the nature of WYSIWYG. It is not designed by default to work with CSS. It is designed by default to work with legacy tagging methods. If there is one thing I don't like, it is anything that produces that darn <font> tag! ;)

Hey, anyone else out there getting anything out of this? :)


 5:17 pm on Jan 18, 2006 (gmt 0)

Hey, anyone else out there getting anything out of this? :)

Still with ya', though I'm basically waiting until you get to your <ol> and <ul> stuff. For some reason I always struggle with those danged things no matter which way I code.


 6:11 pm on Jan 18, 2006 (gmt 0)

Still with ya', though I'm basically waiting until you get to your <ol> and <ul> stuff.

Ah, my favorite, working with lists in FrontPage, what a breeze!

In your FrontPage Formatting Menu there are four buttons grouped together; Numbering, Bullets, Increase Indent, Decrease Indent. This is the power behind creating properly nested semantic lists. But, you have to understand how lists work first before beginning down this trek. I'll assume you've (not you inparticular) have read and fully understand the concept of lists. If not, you can read more here...

W3C - 10 Lists [w3.org]

Hopefully you are using FrontPage 2003 at this point and have access to the Split View option. If not, you'll have to switch between Normal and HTML view in previous versions.

For testing, just create a new page with no styling. You first need to become familiar with how the lists features work in FrontPage.

Insert your cursor at the beginning of the document. Click the first button for Numbering. That will automatically create the Ordered List elements...


Just type Testing 1 into the first list item for this session.

Now add another list item and label it Testing 2, and another labeling it Testing 3.

So now you've got this...

<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>

Let's say that Testing 2 is a sub-category of Testing 1 and we want to nest that list under the Testing 1 element. Highlight the Testing 2 line and then press the Increase Indent button twice in your Formatting Toolbar. You should now end up with this...

<li>Testing 1<ol>
<li>Testing 2</li>
<li>Testing 3</li>

If you have FrontPage 2003 and are viewing via the Split option, you can see exactly what takes place each time you press that Increase Indent button. If you watched the above sequence, when you first pressed the Increase Indent button an opening <p> tag appeared. As soon as you pressed that Increase Indent button a second time, it was replaced with an opening <ol> tag.

The above should be enough to get you started on nesting lists. Try the test first, if you don't get the hang of it after a few trys, let me know and I'll expand the nesting from above. Just remember, to nest lists within lists, you need to use that Increase Indent button TWICE to generate the correct code. If you find the program inserting the blockquote element, then something isn't right somewhere. ;)

To remove the nesting, you use the Decrease Indent button and go through the exact opposite process. Remember, each time you nest within a nest, the buttons need to be clicked twice to go through the proper de-nesting sequence.


 6:45 pm on Jan 18, 2006 (gmt 0)

Addendum to the above...

You can also (in addition to using the Decrease Indent button) de-nest your lists while in WYSIWYG view by inserting your cursor at the last list item and pressing the Enter key multiple times. Be sure that you are at the end of your list. If not, you'll end up creating additional list items (or at least one) before FP begins de-nesting. You'll know when to stop pressing the Enter key as your cursor will walk its way back through the de-nesting process and you'll see it happen visually. It's actually pretty cool! :)


 7:13 pm on Jan 18, 2006 (gmt 0)

Taking Lists one step further and using Definition Lists.

Unfortunately there is not a WYSIWYG button for the <dl> list element. This is accessible through the FrontPage Style Menu only.

You can use the same test sequence above, but this time start your list by selecting the Defined Term from your FP Style Menu. Doing so will insert the following elements...


Now, we're missing one additional element for the above list. To bring that into the picture, we first need to have a Defined Term (the <dt> element). For this session we'll use Testing 1, 2 and 3 again.

As soon as you enter Testing 1 (in WYSIWYG mode) and press Enter, FrontPage automatically creates the next list element in sequence which in this case is the <dd> element or the Definition. So now, after pressing Enter, you have this...

<dt>Testing 1</dt>
<dd>This is the definition of the defined term above (Testing 1).</dd>

Press Enter after that </dd> element and you'll get a new <dt> element automatically. FrontPage is assuming that you are breezing through your entries and using your Enter key as you should while in WYSIWYG mode. So now, after entering your Testing 1 and definition, you enter your Testing 2 and definition and end up with this...

<dt>Testing 1</dt>
<dd>This is the definition of the defined term above (Testing 1).</dd>
<dt>Testing 2</dt>
<dd>This is the definition of the defined term above (Testing 2)</dd>

It's all about Tending Your Nests.


 7:26 pm on Jan 18, 2006 (gmt 0)


Arrrggghhh! Don't you just hate those tags? Where do they come from? Why are they there? Well, here's a little secret...

The Increase Indent button will do different things depending on what type of element you are working within. In the case of lists, the next logical element sequence occurs when you press the Increase Indent button.

Please note, that you cannot test this with empty elements. You need to put at least one character in each element so that when you press the Enter key in WYSIWYG mode FrontPage generates the next element correctly. If you try to enter multiple <li>s for example that are empty, FP won't let you do it via WYSIWYG mode and you'll end up Entering your way out of the list element and into a default <p> element.

If you press that Increase Indent button (once) on a <p> element, you are going to end up with this...


Press the Increase Indent button twice and you end up with this...


FrontPage is nesting your original <p> element within a <blockquote> to achieve a visual indented look. This is incorrect usage of the <blockquote> element and I don't use it. I assign indents to elements through CSS using margin and padding properties.

You see, this is where understanding the program comes into play. If users knew all this stuff, we wouldn't have so many negative comments about the program being thrown about.

In the end, it all comes down to what works in the browser. If the user can WYSIWYG their way through a website and produce something that looks visually appealing and works in most browsers, that is all that counts.

But, for the rest of us Advanced users, we won't settle for anything less than perfection. :)


 7:46 pm on Jan 18, 2006 (gmt 0)

Customizing Your Formatting Toolbar

I should have probably put this at the beginning as it is one of the first things you should probably do so that you have a clean environment to work in.

Go to your Formatting Toolbar options (hover over the down arrow in the last menu item, click it and then select Add or Remove Buttons and then select Formatting. Within the Formatting menu are these items. Deselect the ones that I do not have asterisks next to, you don't need them if you are working with CSS. If you do use them, expect to see deprecated markup such as <font> tags and such.

FrontPage 2003 Formatting Menu

  • * Style
    Produces the FP Style Menu (your friend)
  • Font
    Produces <font face="*****"></font> (deprecated)
  • Font Size
    Produces <font face="*****" size="4"></font> (deprecated)
  • * Bold
    Produces <b></b>
  • * Italic
    Produces <i></i>
  • Underline
    Produces <u></u> (deprecated)
  • Align Left
    Produces align="left" attribute (deprecated)
  • Center
    Produces align="center" attribute (deprecated)
  • Align Right
    Produces align="right" attribute (deprecated)
  • Justify
    Produces align="justify" attribute (deprecated)
  • Increase Font Size
    Produces <font size="*"></font> (deprecated)
  • Decrease Font Size
    Produces <font size="*"></font> (deprecated)
  • * Numbering
    Produces <ol><li></li></ol>
  • * Bullets
    Produces <ul><li><li></ul>
  • * Decrease Indent
    Depends on the element being decreased
  • * Increase Indent
    Depends on the element being increased
  • Borders
    Don't use (applies inline styles)
  • Highlight
    Don't use (applies inline styles)
  • * Font Color
    Produces <font color="******"></font>
    Use it strictly for a color pallette and sampling of colors. Great little tool.

Note: I have Font Color visible for color sampling purposes. I do not use its WYSIWYG function as it adds the <font color="******"></font> tags.


 8:07 pm on Jan 18, 2006 (gmt 0)

I'll try to post something more sensible than "Great Posts" after I've had a chance to do some digesting.

In the meanwhile: Great Posts!


 8:24 pm on Jan 18, 2006 (gmt 0)

Setting Up Generic Styles

When working in WYSIWYG mode and using CSS, it is suggested that you come up with a global naming system for your classes and ids. I have a template style sheet that I use for most sites I develop and it contains some basics such as these...

@charset "utf-8";
body, html{margin:0;padding:0;color:#******;background:#******;}

When I name my generic classes (anything beginning with just a . (dot), I try to use the first letter of each value. For example, my text-align:center is classed as .tac which makes it easy to remember (for me anyway).

The generic classes can be applied to both inline and block level elements. But, be careful, generic classes are treated as block level elements in WYSIWYG mode. If you need specific inline elements to appear in your Style Menu, you must precede them with span.

Let me expand on the img{border:none;} style.

FrontPage by default assigns a border="0" on all images that you drag and drop through the WYSIWYG interface. I've yet to figure out how to stop the program from producing this deprecated markup but this is one that is beyond my scope of knowledge and goes into the roots of the programming of FrontPage. So, to compensate for this, I know to remove that attribute anytime I drag and drop an image. If I click the image in WYSIWYG mode and then switch to Code view, FP will put my cursor right on that <img> tag so that I can edit it quickly. Or, if I have Ctrl + / (Reveal Tags) selected in WYSIWYG mode, I can click the image and press Ctrl + Q to bring up the Quick Tag Editor and edit from there. FrontPage offers a variety of ways to perform the same thing. So, there is a working environment for almost everyone to enjoy.

Adding img{border:none;} to your style sheet allows you to strip away all those deprecated attributes from your images. Saves quite a bit of bytes if you have lots of images. Just do a find and replace for <img border="0" and replace with <img


 1:08 pm on Jan 19, 2006 (gmt 0)

When webmaster newbies ask me which development program to use, i always tell them to run a mile from Frontpage but I admit I havent really used it since frontpage express and that wrote really awful code. Does this thread imply that Frontpage is now a more useful tool and something that I should recommend that people use?


 1:11 pm on Jan 19, 2006 (gmt 0)

Thanks for the tips,
Have been using FP since 98
Still learning


 1:28 pm on Jan 19, 2006 (gmt 0)

dillonstars, I have been using FP since its inception.

I was told in the beginning of my web design to find a program and stick with it.

I picked FP for no other reason than it was a wysiwyg editor.

I have several sites that dominate in rankings.

A friends sites have made him a $$$$$$$.

All with FP

IMHO the Advise "Find a program and stick with it" is still solid.

FP It is not perfect.

But it sure worked for us :)


 1:40 pm on Jan 19, 2006 (gmt 0)

By the way.
Thanks P1R for the tips thru the years.

Some of us are more readers than posters.

In part to your tips We live a fuller and happier life today than when we started the journey.

And the Journey continues! with FP


 2:33 pm on Jan 19, 2006 (gmt 0)

I always tell them to run a mile from Frontpage but I admit I havent really used it since frontpage express and that wrote really awful code.

Nah, it wasn't the program, it was the user. It was the user who didn't know any better and used the WYSIWYG interface without knowing what it was doing when they clicked on a button to style something or insert something into the page, etc. The program will still do that today because it is designed to be a true WYSIWYG program that is based on legacy coding standards.

Does this thread imply that Frontpage is now a more useful tool and something that I should recommend that people use?

Actually, FP has always been a useful tool. I always recommend it those who are accustomed to a Windows/Office environment as it looks and functions just like Word on steroids.

Users of Microsoft Office products will appreciate the familiar interface and seamless integration of FrontPage with other Office products.

Some of us are more readers than posters.

Oh, we know you are lurking out there! Thank you for your support and participation. :)


 3:04 pm on Jan 19, 2006 (gmt 0)

Remove Formatting - Ctrl + Shift + Z

Did someone just drop an old website in your lap and ask you to clean it up for them? Happens all the time. With FrontPage, you can easily clean up most of the mess. There are some things that will have to be done manually.

If you take a page that was built using <font> tags and other deprecated markup, open it in FrontPage, go to WYSIWYG mode, Ctrl + A to Select All and then Ctrl + Shift + Z to Remove Formatting, FP will clean most of the stuff back there.

What it won't clean are any inline styles, classes, ids, etc. It will only attack those tags that are used for formatting. It will strip all <font> tags including <b> and <i> along with colors, sizes, etc. Anything that resides in a <font> tag is going to be stripped from the page.

Go ahead and give it a test. Take a page built using a WYSIWYG editor like FrontPage, open it up in WYSIWYG mode. For this test, press Ctrl + / to Reveal Tags so you can watch the process of removing formatting. You're probably going to see a ton of starting and ending tags in Reveal Tags mode and that is great for this test.

Now, while in WYSIWYG mode, press Ctrl + Shift + Z to Remove Formatting. You can also get to this command by going to the Format Menu > Remove Formatting. Watch what happens with all those tags you saw in Reveal Tags mode. If that page relied heavily on WYSIWYG styling, much of it will be gone now.

Whatever FP cannot remove through the Remove Formatting command will now need to be removed manually while in HTML/Code view. If you were removing the formatting from a Word document, you are only one step of the way there. Once you view HTML, you're going to see a mess of other stuff that FP cannot remove because Word produces inline styles that the Remove Formatting command does not touch. You either have to manually remove it all, or start a Find and Replace routine.

My suggestion is that you take that Word document, drop it into Notepad which will strip absolutely everything and leave you with raw text. You then paste that raw text in your document and start formatting it from top to bottom, line by line, paragraph by paragraph, list by list, etc. It is actually a lot easier to do it this way as you'll know for sure that the page is clean and only contains the markup and style you are using for design.

P.S. Be careful when pasting other documents into FP pages. In many instances, the <head></head> section of your page is going to get appended with additional styles. If it was a Word document, watch out, you could have 10, 20, 30+ lines of embedded styles that just ended up in your <head></head> after you pasted it. That is why I recommend the Notepad route for adding supplied content.


 3:17 pm on Jan 19, 2006 (gmt 0)

Customizing Your Toolbars

Let's take our Toolbars and Customize them a little further so we can make working in WYSIWYG a little easier.

Right click a Toolbar at the top. Select Customize from the menu. Go to Options. Select these items...

Customize > Options

* Always show full menus

* List font names in their font
* Show ScreenTips on toolbars
* Show shortcut keys in ScreenTips

Always show full menus

I always show full menus. I don't want to have to click a down arrow to see what else is there.

List font names in their font

I always list font names in their font. That way I can see what they look like. Although I don't use the <font> styling feature and that is what this is for. I use it strictly for the visual.

Show ScreenTips on toolbars

Yup! You want to be able to hover over a button and see what it does.

Show shortcut keys in ScreenTips

Absolutely! The keyboard is your friend. I promote the use of using keyboard shortcuts whenever possible both on the PC and Mac. It minimizes the use of the mouse and makes you a more proficient WYSIWYG user. You'll notice that I've provided keyboard shortcuts to all the stuff we are discussing and this is the way I work. You may want to consider working like this too as I've found it to be the most efficient for a WYSIWYG environment.

Go through all the menus you have in FrontPage. You're going to find keyboard shortcuts listed next to those items that have a keyboard equivalent. For example...

Ctrl + B = Bold <b></b>
Ctrl + I = Italic <i></i>
Ctrl + M = Increase Indent (working with lists)
Ctrl + Shift + M = Decrease Indent (working with lists)

The list goes on and on. So much so, that I have an entire page on "FrontPage Keyboard Shortcuts" floating out there. ;)

Your productivity in WYSIWYG mode will increase when you become friends with your keyboard! ;)

P.S. There are so many keyboard shortcuts that it may be overwhelming. What I suggest is that you take the actions that you perform most frequently from menus and start using the keyboard shortcut instead. After a week or so, you'll find that you've memorized them and you don't need to use the mouse for those anymore. :)


 4:32 pm on Jan 19, 2006 (gmt 0)

p1r, this is fantastic. I disdain Frontpage with a passion, but I have ex-clients that use it with an equal & almost religious fervour. You could write the manual. Start looking for publishing deals now :)


 5:07 pm on Jan 19, 2006 (gmt 0)

Very useful thread. Thanks for clarifying my issues with it. I'll stick with dreamweaver as it is the one I know and have always used, but wont dismiss FP so readily now when people tell me they use it :)


 5:47 pm on Jan 19, 2006 (gmt 0)

Any idea how to make it so when copying text from a website, dropping it in to html in FP, it doesn't try to add the style also? Right now, I copy from our website to notepad to strip the style, then drop in html. I'm sure it's a setting, I just have never been able to find it.


 5:50 pm on Jan 19, 2006 (gmt 0)

Ctrl + Click a Hyperlink

A really cool shortcut that I use every day is Ctrl + Click on internal hyperlinks in my document.

Many times I'll be working on a page and have hyperlinks pointing to another page in the web. I may need to add something relative to the page I'm working on to the other page that is linked to within my document.

I could do one of two things...

  1. Locate the page in my folder structure and double click it to open, or...
  2. Ctrl + Click the hyperlink on the page I'm working on (in WYSIWYG mode) to open that page in my FP Editor.

You can also use this feature on external hyperlinks but, be careful. That external hyperlinked page is going to open up in your FP Editor (if the external source has not blocked the FP bot). I may use this feature when I want to see the html source of that page without using a View Source command from the browser. That page will open up in my WYSIWYG editor and allow me to see its structure and layout styles.

This 46 message thread spans 2 pages: 46 ( [1] 2 > >
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved