Why Does My Web Page Look Different After I Publish It with Dreamweaver?

The Columns! What Happened to the Columns?


Why Does My Web Page Look Different After I Publish It with Dreamweaver? What Happened to the Columns?

by Christopher Heng, thesitewizard.com

One of my visitors recently wrote to ask me why her site did not have the two column layout after she published it online using the Dreamweaver web editor. That is to say, she had earlier designed a 2 column web page, but when she uploaded it to her website and checked it with her web browser, the columns seemed to have disappeared. Another variation of this question, asked by another visitor some time ago, is why the images of a web page do not appear in a web page after it has been published, even though those same images can be seen when the page is viewed from within Dreamweaver.

Preamble

This is not a general guide on how to use the Dreamweaver web editor. It's written to answer a specific question asked by someone facing a problem.

If you are looking for a basic tutorial on how to design a website with Dreamweaver, please go to either the Dreamweaver CS6 tutorial, the Dreamweaver CS5.5 tutorial, the Dreamweaver CS5 tutorial, the Dreamweaver CS4 tutorial or the Dreamweaver CS3 tutorial, depending on which version of Dreamweaver you have.

In addition, if you are a complete newcomer to website making, it may be a good idea to read How to Start / Create a Website: The Beginner's A-Z Guide.

Otherwise, if you are someone who is really facing this issue, read on.

Background Information: How a Web Page is Put Together

When you design a web page, the content you write is contained in a part of the web page known as the "HTML code", and it is very often stored in a file that has a name ending in ".html". This "HTML code" only holds the stuff you type, as well as the basic structure of your web page. It doesn't have very much information about the appearance of your web page.

Things pertaining to the visual appearance, such as the layout, number of columns, colours (or "colors" if you use US English), fonts, the size and placement of your text, etc, are handled by something known as the "CSS code". This is sometimes stored in a separate file that has a name ending in ".css".

In addition, if you have inserted photos or images onto your web page, these photos and images are kept in separate files as well. They are not embedded into your HTML file.

A more detailed explanation of this can be found in the article What is HTML, CSS, JavaScript, PHP and Perl? Do I Need to Learn Them to Create a Website? Don't worry. It's also written in layman's language so you don't need to be steep in the jargon of computer geeks to understand it.

In order for your web page to appear the way you designed it to be, all these files must be published to your website. That is, the HTML file (containing the words that you wrote), the CSS file (containing instructions on the visual appearance of your web page), and any images you used (containing the pictures that you inserted into the page) must all be uploaded to your site on the Internet. If any one is missing, then your web page will not appear exactly as you designed it.

In other words, if your web page does not appear the way you designed it in Dreamweaver, it probably means one or more of these files were not uploaded to your website. Chances are that only your HTML file was published. That's why you still see the words you typed but not the visual layout and design, since the information about those things are contained in different files.

Solution

To solve the problem, re-publish your web page by clicking the "Site | Put" menu item again. This time, when Dreamweaver pops up a message asking "Put dependent files?", click "Yes". This will cause Dreamweaver to automatically upload all the necessary files for your web page.

Note: publishing a single web page using "Site | Put" is explained in thesitewizard.com's Dreamweaver tutorials, mentioned earlier. If you are mystified by the term "Site | Put", please check the main tutorials.

Help! I Didn't Get the "Put Dependent Files" Prompt

If, after clicking "Site | Put" to publish your website, you did not receive the "Put dependent files?" prompt, do the following to re-enable it:

  1. Click "Edit | Preferences..." from the menu. That is, click the "Edit" menu, followed by the "Preferences..." item on the menu that appears. (On the Mac, you may have to click "Preferences..." from the "Dreamweaver" menu.)

  2. A dialog box, entitled "Preferences", will appear. Look for the line "Site" in the leftmost column. Click it.

  3. On the right side of the dialog box, look for the checkboxes for "Prompt on get/check out" and "Prompt on put/check in". Make sure that both check boxes are ticked. If not, click the box to put a tick into it.

  4. Click the "OK" button.

After you do this, do a "Site | Put" again. The "Put dependent files?" prompt should now appear, allowing you to answer "Yes" to cause your other files to be published.

Conclusion

Yes, I know. The solution itself is actually very short and simple. But the background information was necessary because I notice that newcomers seem to be either gripped by abject terror when things go wrong or by despair. My hope is that with more knowledge about how things work on your site, you will be in a better position to diagnose and solve problems in future, when they occur.

Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Why Does My Web Page Look Different After I Publish It with Dreamweaver? What Happened to the Columns?





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.