Structuring Your Web site and File Naming Conventions
As with most applications to create a new file you use File > New. However, be aware that Dreamweaver creates lots of different files types so this route may be a little confusing to new users. Another route for creating new files is to use the files panel. New HTML documents and new folders can be created by right-clicking over the folder into which you wish to add them.
When creating your folder structure try to organize the content into sensible chunks such as specific sections of your site. It is also useful to have folders specifically for images and documents that may be downloaded. As these file names and folders will appear in the URL of your web site it is also important that a sensible naming protocol is followed. As a rule of thumb:
- keep file and folders names short and meaningful;
- avoid special characters ($, % ^ & * (, ), “, !, ? etc) as these often have reserved meanings to a web browser;
- if you want to have spaces in your file names ie “my project.htm”l then use an underscore or a dash ie “my-project.html”. (If you don’t white spacing will be replaced with %20 in the URL);
- stick to lowercase. Some web servers are case sensitive.
Warning: Dreamweaver can create files of numerous different types. Unlike some applications that will add the file extension in for you, when you create files in the files panel Dreamweaver will not automatically assume you wish to create a HTML file. Therefore don’t forget to add the .html file extension when you name the file.
Every web site has a homepage, the entry point into the site. It is common practice to use the file name “index.html” for the homepage. This is because many web servers are configured to look for the file “index.html” if no specific file is requested. This allows for shortened URLs to be used. ie “http://www.mysite.co.uk/” can be used instead of “http://www. mysite.co.uk/index.html”.
Tip: Do not worry about whether you save a file with .htm or .html. Both file extensions are perfectly acceptable. However you are probably better to stick to one or the other for consistency. Dreamweaver does by default prefer the fullier .html extension. Use Edit > Preferences and select the New Document category if you want to change this default.
Advanced Tip: Some sites use server technologies such as PHP, ASP, ASPX and Coldfusion. These technologies create pages with different file extensions. So for example on a web server using PHP your homepage may well be index.php.
Text can be typed directly into a Dreamweaver document window but you may want to import text from other applications such as Microsoft Word to save time. You can also copy and paste text from other documents such as plain text files and PDFs.
Text can be coped from other documents such as Word by simply using Edit > Copy and Edit > Paste.
When cutting and pasting from Word you may want to use Edit > Paste Special.
The Paste Special dialog box is used to dictate how the text will be pasted. The options are:
- Text Only lets you paste unformatted text. If the original text is formatted, all formatting, including line breaks and paragraphs, will be removed.
- Text with Structure lets you paste text that retains structure, but does not retain basic formatting. Will paste line breaks, paragraphs and bullet points.
- Text with Structure Plus Basic Formatting lets you paste both structure as above but also simple text formatting such as bold, italic.
- Text with Structure Plus Full Formatting lets you paste text that retains the structure and formatting.
Tip: You can use ‘Paste Preferences’ to set you preferred method of pasting text. This can also be found by selecting Edit > Preferences > Paste Preferences.
Drag and Drop Pasting
The whole content of a ‘txt’ file, Microsoft Word file or Microsoft Excel file can be inserted into a HTML page by dragging the file from the Files panel into the document window.
By doing so the Insert Document dialog box opens.
This is similar to the Paste Special set of options but also allows you to link to the file instead of inserting the contents.
Tip: With both Paste Special and Insert Document use ‘Clean up Word paragraph spacing’ if you selected Text with Structure or Text with Structure Plus Basic Formatting, and want to eliminate extra space between paragraphs when you paste your text.
Documents created in Microsoft Word can be imported directly into Dreamweaver.
Choose File > Import > Word Document and browse to find the Word file you wish to import.
At the bottom of the Import Word Document dialog box there is a formatting option.
This lists the four paste options outlined in the previous examples.
Microsoft Word HTML and the Dreamweaver Clean Up
Microsoft Word can also convert DOC files into HTML. This is done in Microsoft Word by using its ‘Save As Web Page’ option and/or changing the file type to HTML. An alternative way to import these Word HTML files is just open them in Dreamweaver. When you do so it is beneficial to ‘clean up’ the Word HTML as it can include a lot of unnecessary tags.
- Choose Commands > Clean Up Word HTML.
- The Clean Up Word HTML dialog box appears.
- Check that the Clean Up Word HTML box has correctly identified the version of Word used to create the file.
- You may also choose to change the background colour that will be set;