Understanding Series

By Colin Ramsden, May 2006.

With the announced demise of Microsoft (MS) FrontPage (FP), the only available replacement tool in the MS stable was Visual Web Developer (VWD). Whilst evaluating the free 2005 Enterprise Edition, it became apparent that there were many differences in behaviour between FP and VWD which would cause concern for a web developer coming to VWD from FP. This topic is a listing of problems and difficulties encountered by an experienced FP user.

• Problem navigating in Design view with Table at top of page
• Problems with the VWD Design view HTML generated code
• Problem with HTML line-spacing layout
• Problem with updating remote web (FP website) Error 404 returned for file that is there!
• Problem with CSS editor commenting out style rule properties
• Problem in Design view with unexpected linebreaks in text within table cells
• Problem with highlighting selected tag in both split pane views
• Questions—both unresolved and answered

Update

As of July 2006, Microsoft's Expression Web Designer (EWD) 'Community Technology Preview' version 1 was announced as a free trial tool, available to the general internet public for download, testing and review. Read my synopsis at Expression Web Designer.

See Also

The Future Of FrontPage | Working with Visual Web Developer

 

---

Problem navigating in Design view with Table at top of page

Problem:

Here's some curious behaviour. I happen to have an HTML table positioned at the top of my page, (because that's the way MS did it on their MSDN site), and now that I'm working in VWD in Design view, when I move the cursor to the top of the page (by using the up-arrow keys, or by the page-up key) VWD selects the table at the top of the page.

Now here's where the unexpected behaviour occurs. Any further pressing of the arrow keys (down or to the right) causes the whole Table element to be physically moved in that direction. It appears to be a very minute reposition, maybe a quarter of a pixel or so, but a noticeable move just the same. Now, I'm not surprised that the Table can be moved using the arrow keys, but I am surprised that the Table was selected at all. Any other Tables on the page aren't able to be selected in this manner.

Description:

I expected that I could scroll up the page using the up-arrow key to move the cursor up the page, and conversely, that by using the down-arrow key, I expected that the cursor would move down the page. Mostly it does, like whenever it passes across a Table located anywhere other than at the top of the page, it just scrolls right across them without making a selection of the Table. However, when the cursor reaches the top of the page, it selects the Table located there, and changes its (the cursor's) behaviour to move the Table about, instead of moving the cursor off of the Table.

Worse still, VWD sets the top and left style properties of the Table tag, which are non-compliant with HTML 4.1!

<table class="Header" style="top: 0px; left: 0px;">

Solution:

No solution is available. You must remain aware of this behaviour in VWD and manually apply the workaround.
The workaround is to use the mouse to reposition the cursor away from the table at the top of the page.

 

---

Problems with the VWD Design view HTML generated code

Problem:

It appears that the HTML code generated by VWD when writing and editing a document in Design view is highly susceptable to being corrupted, especially if you cut and paste, or drag and drop the various elements of your page around.

Description:

For example, after I added a table by dragging it onto a page in Design view, then added text to it by dragging some in from outside the table, and subsequently swapped to Source view, I found the HTML was currupted. In this example, I observed that the <table> tag set was completely missing, along with some table rows, cells and their data. Curiously, some table cells were present and remained without their parent tablerow and table tagsets.

When I swapped back to Design view, the table wasn't displayed at all. Sure enough, the content which was missing from the Source view had been erased. Not only that, but an image I had previously inserted into a completely different section of the document was also erased.

I had been selecting and dragging text around in Design view, which may also be the cause of, or contribute to, the problem of currupting the HTML beyond automatic repair. Perhaps it performed some sort of rollback, which deleted earlier editing I had made before the table was added? Behaviour to remain alert about.

This problem degenerated into a non-responsive cursor, and was resolved by closing and restarting VWD. That work was lost.

Solution:

No solution is available. You must remain aware of this behaviour in VWD and manually apply the workaround.
I have subsequently observed that the white stone (breadcrumb) trail on the status bar is a more reliable method for selecting page elements including their containing tagset. Click within the area on the page which you want to edit, then click the appropriate white stone for the tagset you're interested in, and then perform your desired action upon the selected area, like dragging, cutting, copying, pasting, or deleting.

However, this has proven to be inconsistent and unreliable, because the whole tag set isn't always selected, especially when moving list items of table elements. Some opening tags don't move with their closing tags when selected in this manner.

The only reliable and consistent workaround method has been to swap to Source view, manually select the complete tag set there, then drag-and drop, or cut, copy and paste as desired, and as expected.

 

---

Problem with HTML line-spacing layout

Problem:

When in Source view, I observed that the paragraph tags (<P> </P>) didn't position themselves as expected, for in some cases the closing tags were on the same line as the text, whereas in others I observed that they were on the next separate line following the text.

Description:

Upon investigation, it turns out that the layout of the HTML Source view including line-breaks, indents, closing tags, and attributes, are set in the VWD Text Editor settings, located at Tools | Options | Text Editor | HTML | Format | Tag Specific Options, and require a fuller explanation. See topic [to be defined].

It was subsequently observed that VWD does not apply the line-spacing rules selected in the layout Tag Specific Options properties, unless there is an actual space between the last character and the tag when layout formatting occurs in Source view (Ctrl+K, Ctrl+D).

This causes a problem with continuing paragraph styles to the following paragraph when enter is typed in Design view, as the style is not duplicated unless the paragraph is split. If enter is pressed whilst the cursor is at the end of the paragraph, the default behaviour is to create a plain paragraph <p> tag.

Solution:

No solution is available. You must remain aware of this behaviour in VWD and manually apply the workaround.
The workaround is to add an ending space to the paragraph, and moving the cursor one character left (to before the additional space character) before pressing 'Enter'. This causes VWD to break the paragraph and apply the style of the first paragraph to the second. However, it leaves a non-breaking space at the end of the previous paragraph, which causes the closing tag to remain on the same line as the HTML, instead of line-wrapping it as selected.

Interestingly enough, this behaviour is not apparent with pre-formatted (<PRE>) tag elements or list items (<LI>). These duplicate carrying applied styles with them as expected.

Test paragraph break here.

 

---

Problem with updating remote web (FP website) Error 404 returned for file that is there!

Problem:

Case sensitivity for filenames on remote sites does not work for file renaming in VWD.

Description:

Should you happen to have a web page named using a particular case (say lower case for example), and you later rename that file by altering the case of one or more of its letters, but don't change the name to something else, VWD does not identify the differences and will not rename the destination file on the remote site (web server).

Even if you directly select the destination file and overwrite it using the VWD 'Copy Web' window functionality, VWD does not rename the file to the proper case, although it does update the contents of the file properly.

Subsequently, should your site be hosted by a case sensitive server OS like Unix, then the page with the altered case won't be found (as the case doesn't exactly match) and will return an 'Error 404 – File not found' message to the requesting browser.

Solution:

No solution is available. You must remain aware of this behaviour in VWD and manually apply the workaround.
The workaround is to delete the wrongly named file on the server, then add the properly named file to the server in its place.

    

---

Problem with CSS editor commenting out style rule properties

Problem:

Existing CSS style rule properties commented out unexpectantly.

Description:

As there is no apparent way to view CSS styles for an attached stylesheet to an HTML page, I had to open and view the style rule names in VWD. At some later stage after deleting some unrelates styles and saving, it became apparent that some style rule properties had been commented out. As I did not do so, I can only deduce that VWD was "helping" and did it for me.

Interestingly, these properties were commented out with a multiline comment "/* ... */" and not a start of line comment "//".

Upon examination, it was observed that each commented-out line had a red squiggly underline beneath the property name, indicating that the property was not compliant with the selected markup standard. The current HTML validation standard active at that time was HTML 4.01, however, the error message stated it as a CSS error.

The rule properties were:

"filter: progid:DXImageTransform.Microsoft.Alpha(opacity='10');"
"behavior: url(#default#time2);"

The associated error statements were:

"Error 1 'filter' is not a known CSS property name." 
"Error 2 'behavior' is not a known CSS property name."

Solution:

The cause of this behaviour is unknown at this time and requires further investigation and observation. Equally, no solution is available yet. You must remain aware of this behaviour in VWD and manually apply the workaround.
The workaround is to manually remove the comment marks from the stylesheet file and resave it. 

It has subsequently been noticed that the Style Builder dialog (raised by clicking the ellipses at the right end of the Style property in the Properties window) has properties for both 'Filter' and 'Behaviour' on the Other page under 'Visual effects':

  

This will require some further investigation as to its effects and behaviour. 

 

   

---

Problem in Design view with unexpected linebreaks in text within table cells

Problem:

In Design view, within a table cell, it was noticed that some pasted text displayed a line break where none existed in the HTML source view.

Description:

There was an unexpected linebreak behaviour within a paragraph of text where no linebreak should be. Deleting the spacing between the visible text characters made no difference, as the linebreak returned after entering a spacebar character in the same place. There was plenty of space left on the preceding line for the following words, there was no long word like a URL following the break which could not be broken, and an inspection of the HTML in source view provided no direct explanation for the apparent spacing.

Upon examination of the text, it was observed that it contained a series of grammatical errors following the break. For example, the text was a series list in brackets with commas after the spaces instead of before them.

"(grey ,black ,green ,blue ,red)"

This was curious given that at the stage of discovering this behaviour, no spelling or grammar checker has been found for the HTML text editor. 

Solution:

Correcting the grammar, corrected the behaviour. Check for poor grammar in the text following unexpected linebreaks in table cells and elsewhere.

 

---

Problem with highlighting selected tag in both split pane views

Problem:

When viewing a currently selected tag in Source view of the HTML editor, both the opening and closing tags are highlighted (bolded) whenever the cursor is positioned within either tag itself, however, when the HTML editor is displaying two panes (using the split pane feature), only one pane shows the hilighted tag set.

Description:

In an attempt to locate the missing tag for an HTML compliance error "Cannot switch views: This tag has no matching start tag" on a page, it was abserved that the split pane view does not display the highlighted tag in both pane views at the same time.

In fact further examination revealed that tag highlighting wasn't possible at all in the top pane, and also that the tag status bar (along the bottom—next to the view selection buttons) did not update when the cursor navigated around within the top pane, nor did the Properties window, the intellisense, or the auto-complete functionality.

Solution:

There is no apparent solution or workaround to this problem found yet.

 

---

Problem with ProblemBehaviourGoesHere

Problem:

SummaryOfProblemGoesHere

Description:

DescriptionOfProblemTextGoesHere

Solution:

SolutionGoesHere

 

---

Questions both unresolved and answered (in order of observation)

How do I apply a particular predefined style rule from a linked CSS file to an HTML element (tag) of a document in VWD?

In the Properties window, type or paste the style rule name into the class property. There doesn't appear to be a drop down style list like that provided in FP. Alternatively, in Source view, manually insert the class rule to the tag.

What is the 'IME' in the right-click menu on the Properties window?

Unanswered

How do I make VWD carry the style of the current element through to the next element created automatically when I press the 'Enter' key whilst writing in a document?

The default behaviour is to create a plain paragraph <p> tag. A workaround is to add an ending space to the paragraph, and moving the cursor one character left (to before the additional space character) before pressing 'Enter'. This causes VWD to break the paragraph and apply the style of the first paragraph to the second.

How do I resize an image proportionally whilst in Design view?

The VWD help states: "You can also use the Height and Width properties to scale the image. When using values different from the physical size of the image, the image is resized accordingly. However, this method for scaling the image is not recommended because it takes longer for the page to display it. Instead, physically resize the image to the size you need."

How do you alter the default table definition when dragging the table tool icon to an open document in Design view? The default is currently a 3x3 matrix.

That isn't possible using the toolbar table tool, however, it is possible to detail the properties of an inserted table in Design view by using the menu Layout | Insert Table item.

How do you alter a TD tag to a TH tag in Design view?

I couldn't find a way to convert from one tag type to another in Design view. It needs to be retyped in Source view.

How do you insert an image from the Windows Clipboard (paste) directly onto an open document in Design view?

Unanswered

How do you assign a task to a topic?

Unanswered

What are the keyboard shortcuts for closing a topic?

Unanswered

How do you display non-printing characters like spaces, tabs, linebreaks, in Design view?

Only linebreaks (<BR />), paragraph tags (<P></P>), span (<span></span>) and division (<DIV></DIV>) tags are represented by selecting View | Details from the menu. It's keyboard shortcut is Ctrl+Shift+Q.

How do you display 'View details' for headings, tables and lists in Design view?

Unanswered

How do you control or change the HTML source formatting for linebreaks and indenting per tag?

Select Tools | Options | Text Editor | HTML | Format | Tag Specific Options. Note that this appears to be inconsistently applied. Should the closing tag be immediately adjacent to the last character in the tag, it does not linewrap. I have had to manually add an ending space character in Source view before activating the Source formatter (Ctrl+K, Ctrl+D). Adding an extra space to the end of a paragraph in Design view inserts a non-breaking-space into the HTML and does not cause the linebreaks to occur as expected.

How do you prevent the source formatter (Ctrl+K, Ctrl+D) from inserting a linebreak in a PRE tag?

Unanswered

How do you retain the column width settings for the copy Web function between sessions?

Unanswered

How can you visually determine if the 'Insert' key has been pressed in the VWD HTML editor?

Unanswered

How do you get VWD to spellcheck HTML topic in Design view?

No built-in spelling or grammar checking is available in VS 2005 except as an add-in, however, the VWD Express Edition does not permit add-ins, so the answer is a definite no. This question was asked on the ASP.NET user list http://forums.asp.net/thread/1167620.aspx and the answer provided pointed to a Web Editor Developer's blog http://blogs.msdn.com/mikhailarkhipov/archive/2006/04/17/577471.aspx. This describes an add-in which uses the spell-checker for Word 2003, and its minimum requirements are VS 2005 full version and Office 2003 Word.

How do you paste a hyperlink without having an inline style applied to it?

When pasting a hyperlink in Design view, VWD automatically applies an inline style wrapping the link in a <span></span> tag set and formatting the link as underlined in green. How can this behaviour be stopped, so that it does not overrule my predefined stylesheet formatting rules?  

Question

Why does my named entity 'endash' "&ndash;" display in VWD as "â‚“" consisting of three characters: U+00E2 Latin small a with circumflex (Alt+0226); the Euro symbol; and U+201C left double quote mark (Alt+0147); as per the following example?

Technical Writer â‚“ Tips, Tricks, and Procedures â‚“ Lotech Solutions

Curiously enough, it displays OK in 'Source view', but not in 'Design view'?

Technical Writer – Tips, Tricks, and Procedures – Lotech Solutions

Question

Answer

 

---

See Also

Lotech Solutions' Tips, Tricks, and Procedures | Working with Visual Web Developer

 

---

email webmaster

Who am I? > find out more

Copyright Lotech Solutions. All rights reserved.

Summary:
"A listing of problems and difficulties encountered using Microsoft (MS) Visual Web Developer (VWD) Enterprise Edition by an experienced FrontPage (FP) web developer evaluating VWD after the announced demise of FP."
Keywords:
"Lotech Solutions, Colin Ramsden, technical writer, technical writing, tech writing, technical writing tools, tech writer tools, writing tool comparisons, Visual Web Developer, VWD, problems with Visual Web Developer, problems with VWD, questions about Visual Web Developer, questions about VWD, Enterprise Edition, evaluating VWD, testing VWD"