Editing Web Design Layout in Visual Web Developer Express 2008

This article is for beginners in website development, focusing either on Microsoft or open source website technologies, who are looking for ways to increase their efficiency in developing or editing websites.

This article basically covers the following major objectives:

1. Installation of Visual Web Developer Express in a Windows working environment.

2. A sample website layout editing case example, illustrating various functions and tools available in Visual Web Developer.

Installation and Configuration of Visual Web Developer

The good thing about Visual Web Developer is that, aside from its use in developing ASP.NET websites, it can also be used to efficiently edit the layout or any website templates of other website technologies like PHP. Of course, you cannot run PHP scripts (unlike in XAMPP), but Visual Web Developer has a lot of tools and features which can be easily be used by a developer, whether working in ASP.NET or PHP.

But first, it requires having your system fully running in a Windows environment. For example, it can be tested to be fully compatible with Microsoft Windows XP Home Edition with Service Pack 3. I have not tested this yet with Windows 7, but I think it would be comparable.

I recommend a full installation of Visual Web Developer Express; it can take very long (downloading + installation), but it's worth the time. This is because a full installation can include MSSQL server and other development tools which you might be using in the near future.

Also, I find this to work fully with a valid Windows installation. ODBC-related and other components are updated in a genuine Windows installation. If you have an invalid Windows installation, then it cannot be guaranteed that Visual Web Developer Express will work the same as with the genuine installation.

Okay, once you have those basic system requirements, go to this URL: http://www.aspfree.com/c/a/ASP.NET/Develop-Your-First-ASPNET-Website-with-Visual-Web-Developer-Express/2/  for the installation steps you must take for Visual Web Developer Express.

After installation, launch Visual Web Developer Express; you should see the Dashboard. It looks like the screen shot below:

The most important section is under "Recent Projects," because that is where you will load your websites that will be edited.

Case Example: Website Design Layout Editing

Say that you are working on a static website (or a website which does not use a CMS like Dotnetnuke, WordPress, Drupal or Joomla). Chances are, then, that if a certain page does not have the same template as most of the pages, you will need to edit the file to make it look the same. Or there might be instances where you need to add features to your web page, like a second sidebar or a footer. 

Let's assume you have the original layout, like the one shown below:

And say you need to add another sidebar to the right (currently there is only one sidebar as shown the screen shot provided above). Aside from adding sidebars, a footer is also needed below the layout. The following are the essential steps to accomplish this straightforward editing:

Step 1: Launch Visual Web Developer Express.

Step 2: Under Recent Projects, click Open and find the folder of the website files to be edited (saved on your Windows computer). If you are working with an FTP server, you need to download those files.

For example, the path to my website files is: E:Website, which means I created a folder in my Windows Drive E named "Website" and I placed the website files to be edited in this folder.

Step 3: Once it is open, Visual Web Developer will default to the "Source" tab (so you can see the entire source code only). There are three editing tabs available; these are Design Tabs, Split Tabs and Source Tabs.

The "Source" tabs will show the entire source code of the default web page to be edited (index.htm, index.aspx, default.aspx, etc). Of course, it would be very inefficient to do direct editing in the Source tab, because you cannot immediately see the results of your changes. This means you still need to save the file, and then view it in the browser (by refreshing the browser) to see if it reflects your desired changes.

The good thing is that Visual Web Developer includes a "Design" tab, and you can edit your website more efficiently in the Design tab than the Split and Source tabs. It is like editing content in MS PowerPoint or MS Word, using the drag-and-drop technique. So to see the Design tab, click "Design."

When you view the Design, you should be able to see the page exactly as it is  shown in the browser. What if things are different from the way the page looks in the browser? There are two possible reasons. 

First, the website files that you have downloaded or placed in your local folder which is currently accessed by Visual Web Developer lack something. For example, if you made an external reference to cascading style sheets and they are not there, of course the styles are lost when you view the page in the Design tab.

Second, you should double check the URLs, because it is much more efficient to use relative URLs than absolute URLs in the development phase of the website. You can read more about relative and absolute URLs. 

Adding the second sidebar

To add a sidebar, we will add another div, which can be taken from the nearest div (containing the content, see screen shot below for reference). All we need to do is go through the following steps.

Step 1. Click the content div until you see the editing cross hair (+ sign), then right click and copy.

Step 2. Paste below the div container. Select all content in the pasted container.

Step 3. Delete the content and then adjust the width of the div container using your mouse; left click and hold.

Step 4: Drag the empty adjusted div container to its intended location (right of the original content container). This is now the second sidebar.

Here is a screen shot of the process:

After dragging the div container, you can now copy and paste the sidebar content from the first to automatically adjust the styles (font size, style and color). Then edit it with the correct link anchor text and URL pointing to the content.

You can also extend the existing P tags to add a description of the sidebar, like "Website pages2." Things like this are a basic web editing exercise and will stay the same whether you are editing simple or complex layouts.

Adding the footer

The following are the simple steps you need to take to add a footer:

Step 1: Position your cursor on the location you will need to insert <p> tags and then add p tags (these can be found on the menu; see screen shot below):

Step 2: Add footer text (copyright text, for example). You can easily customize the font color and styles in the font menu in Visual Web Developer.

Step 3: Save the file. when you view it in the browser you can then see the updated template layouts, all created using Visual Web Developer Express.

The website editing is now complete, and you can view the edited layout, as seen in the screen shot above.

The examples illustrated here are basic. You can practice editing more complex layouts that involve a lot of div, p and HTML tables using your own files in Visual Web Developer Express 2008.