Define New Site

Defining a new site is the first step to creating a website in Dreamweaver CS3.

1. Create a folder in which you will store all your project files. Create an 'images' folder within and transfer all the sliced images to this folder.
2. Open Dreamweaver
3. Define a new site [Site > New Site > 'Advanced' tab]
4. Fill in your Site Name in the box provided for 'Site Name'.
5. Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project folder you had created.
6. You should be able to see the 'images' folder in your Files panel [Site > Files].

Read More

Create a Dreamweaver Template

If most of the pages in your web site have the same look and feel it is advisable to create a Dreamweaver template.
The advantages of creating a dreamweaver template include:

• All pages will look consistent
• When you want to make changes that effect the layout of the entire site you can simply make the changes to the template and update all the pages automatically

The dreamweaver template file has a .dwt extension and will get saved in a folder entitled "Templates". To create a dreamweaver template follow these steps:

1. File > New
2. Page Type > HTML template
3. Layout - select from one of the pre-built layout options and customize it or select <none> and create your own from scratch

Read More

Page Layouts

You can use Dreamweaver to create the general page layout (within the template) using either tables or css. The advantages and disadvantages of both these approaches are give below:

Table Layouts: Advantages

• Easy to design
• Works well on older browsers

Table Layouts:Disadvantages

• Loads only once all the elements within the table have loaded - usually slower than css layouts
• Changes to the tables will need to be made on each page and all the pages will need to uploaded to the server again

CSS Layouts: Advantages

• Loads fast - the css file just needs to be loaded once
• Can easily change the layout of the entire site by tweaking the .css file as the design elements are separated from the content

CSS Layouts: Disadvantages

• More challenging to design
• May not work on some of the older browsers

Creating the Page Layout using Tables

Using the "tables approach" your layout will be structured within tables and cells.
Analyze your layout (created in Adobe Fireworks or Photoshop) to figure out how many tables with how many rows and columns you would need to recreate it in Dreamweaver.
Now start creating your tables. You can use pixels or percentages to define the width and height. If you have more that 1 column make sure the widths of all the columns add up to the width of the table. [Insert > Table]
The Properties Inspector is extremely useful for editing the properties of any element in your page. To edit the properties of a table simply select the table and open the Properties Inspector. [Window > Properties]
Try and create separate tables as much as possible. This is because a table will load only once all the elements within it have loaded.
Explore creating the layout you designed using tables. You can give background colors, create tables within tables, specify the alignment of the content within the cell etc. So go ahead and try it out. You will apply this concept later in Project 1: Table-based Dreamweaver CS3 layout. 

Creating the Page Layout using DIV Tags and CSS

Using the CSS approach you will be creating the layout webpage using div tags to separate different types of content on the page and positioning these div tags in CSS.
You will need to create a css style sheet and attach it to the template.
For every div that you create in the template you will need to create a corresponding style in the css file. You can specify position the location of the div in the page, background colors, borders and other properties in the style. You will apply this concept later when you do Project 2: CSS/ DIV based tableless layout.
An easy way to create a css, div based layout is to use one of the pre-built Dreamweaver layouts. [File New > Blank Page > HTML > Select layout best suited to your needs]

Prebuilt CSS layout options within Dreamweaver 
You can also get pre-built page layouts and cusomize them.

Read More

Create CSS Stylesheet

CSS Styles help in consistency and maintenance. It is a good idea to centralize the text styles as much as possible in order to maintain consistency and easy updating.
In the case of layouts designed with div tags (instead of tables) or use of one of the prebuilt layouts that come with Dreamweaver CS 3 you would have already created the css stylesheet and assigned positional properties to the div tags. Various CSS website templates are also available which you can customize for a professional looking site.
Some of the styles you can centralize in an external css stylesheet include:

• H1 tag redefined
• H2 tag redefined
• p tag redefined
• a tag redefined (specifies the look of link)
• menu styles
• footer text styles

To create an external stylesheet follow these steps:

1. File > New
2. Page Type > CSS
3. Save the file in the website folder. You can name it 'styles' or any appropriate title. It will get saved as a .css file.

Once you have created the css file you will need to attach it to the dreamweaver template file. You can do this from the CSS Styles panel [Window > CSS Styles]. Click the  icon (attach style sheet), select the css file and click OK.

You can create new css rules by clicking on the "New CSS Rule" icon.

In the dialog box that appears,
If you want to create a custom style which can be applied to any tag:

1. Select the selector type "class"
2. Name it with a "." at the beginning like .heading
3. Define in: styles.css (or the name of your css file)

If you want to redefine the look of an existing html tag::

1. Select the selector type "Tag"
2. Select the Tag from the drop down menu e.g. "h1"
3. Define in: styles.css (or the name of your css file)

In the dialog box that appears, specify the properties of the style and click ok.

Read More

Insert Text & Images

Once your template layout (with tables or div tags) and css stylesheet is created, you can insert any images (e.g. logo), common menu items, text (e.g. copyright info) etc. that form part of the general look and feel of the site into the template.
Inserting Text
You can type in text just as you would in any text editing software. You can apply styles to it from the Properties panel.

You can also format it with the existing html tags (which you would have redefined in the css file).

Inserting Images
You can insert images [Insert > Image]. You can also position them :

1. Click on the image.
2. Open the Properties Inspector. Select the required alignment from the 'align' drop down menu. You could also set the alignment of the cell/ div tag in which the image will be placed.

Common Menu Items
Menu items could be simple text with a style applied to it or javascript code etc.
Site Search
If you plan to have a site search on all the pages you can paste in the search code where required. Various free services are available for site search.
Website Traffic Analytics 
It is a good idea to build in any website traffic analyzing code too so that you can easily track traffic to the website later.

Read More

Server Side Includes/ Libraries

Server Side Includes (SSI) and Libraries in Dreamweaver help you to centralize areas of your site that are common to many pages. This helps you to easily make site-wide changes to these common areas and thus helps in maintenance and consistency. When you design a website it is better to design it for easy maintenance. As you add pages your menus will change to incorporate that. You might want to change the mast, footer etc.

Server Side Includes

The advantage with server side includes (SSI) is that when you make a change to an include you don't have to update all the pages that access it. The changes will automatically get reflected in them. You will not have to upload all the pages that use the include every time you make a change, just the include itself.
Note: All the html page you create and apply this template to must have the extension .shtml or .shtm.
It is useful to create include files for:

• header
• footer
• menus
• sub menus

To create an include:

1. Copy the part of the page that you would like to make into an include.
2. Create a new html page [File > New > Blank Page > HTML > none]
3. Go into the HTML code [View > Code] and delete all the default code that Dreamweaver puts in.
4. Go back to design view [View > Design ] and paste the code that you had copied previously.
5. Make sure all links in the include file are relative to site root.
   
6. Finally save this file in an 'Includes' folder.

To insert an include into the template:

1. Click where you would like to insert the include
2. Insert > Server Side Include.

Dreamweaver Library Items

If you do not wish to create files with the shtml extension or your server does not support it you can use Dreamweaver Library items for common areas that might be different in different sections e.g. sub menus. However changes to library items will update the files in which they exist and these files will need to be uploaded again.
To create a library item:

1. Copy the portion of the template you wish to convert to a library item
2. File > New > Blank Page > Library Item
3. Paste
4. Save with appropriate name

Once created, you will need to insert the library item into the template (or later on into a web page). To do so:

1. Window > Assets
2. Click the library icon in the Assets Panel
3. Select the appropriate library name
4. Click the 'Insert' button at the bottom of the panel

Read More

Specify Template Editable Regions

Dreamweaver templates allow you to specify editable regions. These will be the areas of the template where you will insert content that will differ from page to page. To do this:

1. Put the cursor in the region that you wish to make editable
2. Insert > Template Objects > Editable Region
3. Give the editable region a name e.g. content.
4. The editable region will appear on the template with a colored outline and the specified name.

If you have a library item (e.g. submenu) or banner etc. which will appear in most of the pages but will change in some you can keep the library item in the template, select it and create an editable region around it. So in a new page created with this template the library item will appear by default, however it can be replaced with another one where necessary.

Read More

Create HTML Pages, Insert Content & Forms

Now it is time to use Dreamweaver to create the HTML pages and insert content and forms if any.
Once you have your template, css stylesheet and server site includes/ library items ready, you can begin creating the actual pages of your site as per your site plan.
Keep in mind that if you are using server side includes you will need to create .shtml or .shtm pages.

Create HTML/ SHTML Pages in Dreamweaver

To create the HTML/ SHTML pages:

1. File > New > Page from Template > Project Name > Template Name > Create]
2. Name and save the file into the project folder. Name the homepage index.shtml if using SSI and if your remote hosting server is a UNIX server. If it is a NT server most likely the homepage will need to be named 'default.shtml'. If you are not using SSI, leave the file extensions as .htm.
3. Change the HTML page title to something more appropriate [ Modify > Page Properties >Title/ Encoding > Title]
4. Put in appropriate meta data for the page i.e. keywords and description of the page
   • Insert > HTML > Head Tags > Keywords
   • Insert > HTML > Head Tags > Description
5. Type or paste the Heading and content of the page into the appropriate edible region. Apply the styled formatting (e.g. H1 tag or custom style) from the Properties Panel
6. Insert any images/ flash assets etc. into the editable region and and align them
   • Insert > Image
   • Insert > Media > Flash
7. Replace any library items/ SSI e.g. sub menus
8. Similarly create all the other HTML/ SHTML pages you need.

Forms in Dreamweaver

Some pages might require form elements such as the "contact us" form:
Insert > Form > select the form element of choice. A form must be within a form tag so select "Form" first, then insert the other form fields like Text field etc. within the form tag that appears.

To make a form work you will need a php, asp or cgi script. You can also make use of free services available.

Read More

Link Pages

Once you have created all the pages of your site it is time to link them up using Dreamweaver. You may link them from the menus and from appropriate textual or image content on other pages.
To create a link:

1. Select the text/ image you want to link from
2. Click on the yellow folder icon next to the 'Link' field on the 'Properties' panel.
3. In the dialog box that opens, browse for the web page you want to link to and select it.
4. If you are linking to a page from a Server Side Include, ensure that the link is relative to site.
   
5. Click OK and your link is ready.

If you have added links into the Dreamweaver Template or Library item, Dreamweaver will ask you if you want to update all the pages. Do so.

Read More

Test & Upload to Hosting Server

Once the site is complete in Dreamweaver you are ready to upload/ FTP the files to your server and go live. Before that however, you should preview the site in various browsers (at least FireFox and Internet Explorer) to make sure it is working all right.

Preview in Browser

1. File > Preview in Browser > select the browser of choice
2. View each page
3. Click on all the links

Note: If you use Site Relative paths (as you must in server side includes), the "Preview in Browser" feature will not work. You will need to test on a web server locally or upload to your remote hosting server and test.
Other tools that Dreamweaver provides :

• Site > Check Links Sitewide
• Text > Check Spelling

Going Live

After you have developed and tested your site it is ready to go live. You will need to sign up with a hosting server. I recommend Hostgator which I use to host this site.
Once you sign up with a hosting server you they will provide you with your server details:

1. IP address or www.yoursitename.com
2. username
3. password

You can use Dreamweaver or any FTP software e.g. Filezilla to upload your files to the remote hosting server.

File Upload/ FTP in Dreamweaver

To enter your hosting details into Dreamweaver:

1. Fill in these details in the Remote Info Panel of the Site Definition [Files Panel > Last in the site name drop down - Manage Sites > Select the Site > Click Edit > In the Advanced Tab > Click the category "Remote Info"
2. Access = FTP (from drop down menu)
3. FTP host = enter your site url e.g. www.yoursitename.com
4. Enter your login and password
5. Click "Test" to check the connection

To upload your files into the remote hosting Server:

1. Click the "Expand to show local and remote sites" icon  in the Files Panel
   
2. In the expanded files panel click the 'connects to remote host' icon.
3. Once you connect you should see the remote folder and files on the left window.
4. To upload your files click the 'Put Files' Arrow icon in the site manager.
5. After uploading all the files test the site online using your site url e.g. www.yoursitename.com.

Your site is live now! Congratulations!

Read More

Dreamweaver Shortcut Keys

File
New...	Ctrl+N
Open...	Ctrl+O
Open in Frame...	Ctrl+Shift+O
Close	Ctrl+W
Close All	Ctrl+Shift+W
Save	Ctrl+S
Save As...	Ctrl+Shift+S
Print Code...	Ctrl+P
Check Page
Check Links	Shift+F8
Validate Markup	Shift+F6
Edit
Undo	Ctrl+Z,Alt+BkSp
Redo	Ctrl+Y,Ctrl+Shift+Z
Cut	Ctrl+X,Shift+Del
Copy	Ctrl+C,Ctrl+Ins
Paste Special...	Ctrl+Shift+V
Select All	Ctrl+A
Select Parent Tag	Ctrl+[
Select Child	Ctrl+]
Find and Replace...	Ctrl+F
Find Selection	Shift+F3
Find Next	F3
Go to Line	Ctrl+G
Show Code Hints	Ctrl+Space
Indent Code	Ctrl+Shift+>
Outdent Code	Ctrl+Shift+<
Balance Braces	Ctrl+'
Code Collapse
Collapse Selection	Ctrl+Shift+C
Collapse Outside Selection	Ctrl+Alt+C
Expand Selection	Ctrl+Shift+E
Collapse Full Tag	Ctrl+Shift+J
Collapse Outside Full Tag	Ctrl+Alt+J
Expand All	Ctrl+Alt+E
Preferences...	Ctrl+U
View
Zoom In	Ctrl+=
Zoom Out	Ctrl+-
Fit Selection	Ctrl+Alt+0
Fit All	Ctrl+Shift+0
Fit Width	Ctrl+Shift+Alt+0
Switch Views	Ctrl+`
Refresh Design View	F5
Server Debug	Ctrl+Shift+G
Live Data	Ctrl+Shift+R
Head Content	Ctrl+Shift+H
Rulers
Show	Ctrl+Alt+R
Grid
Show Grid	Ctrl+Alt+G
Snap To Grid	Ctrl+Alt+Shift+G
Guides
Show Guides	Ctrl+;
Lock Guides	Ctrl+Alt+;
Snap To Guides	Ctrl+Shift+;
Guides Snap To Elements	Ctrl+Shift+/
Plugins
Play	Ctrl+Alt+P
Stop	Ctrl+Alt+X
Play All	Ctrl+Alt+Shift+P
Stop All	Ctrl+Alt+Shift+X
Show Panels	F4
Insert
Tag...	Ctrl+E
Image	Ctrl+Alt+I
Media
Flash	Ctrl+Alt+F
Shockwave	Ctrl+Alt+D
Named Anchor	Ctrl+Alt+A
Special Characters
Line Break	Shift+Return
Non-Breaking Space	Ctrl+Shift+Space
Modify
Page Properties...	Ctrl+J
CSS Styles	Shift+F11
Quick Tag Editor...	Ctrl+T
Make Link...	Ctrl+L
Remove Link	Ctrl+Shift+L
Table
Table	Ctrl+Alt+T
Select Table	Ctrl+A
Merge Cells	Ctrl+Alt+M
Split Cell...	Ctrl+Alt+S
Insert Row	Ctrl+M
Insert Column	Ctrl+Shift+A
Delete Row	Ctrl+Shift+M
Delete Column	Ctrl+Shift+-
Increase Column Span	Ctrl+Shift+]
Decrease Column Span	Ctrl+Shift+[
Arrange
Align Left	Ctrl+Shift+1
Align Right	Ctrl+Shift+3
Align Top	Ctrl+Shift+4
Align Bottom	Ctrl+Shift+6
Make Same Width	Ctrl+Shift+7
Make Same Height	Ctrl+Shift+9
Timeline
Add Object to Timeline	Ctrl+Alt+Shift+T
Text
Indent	Ctrl+Alt+]
Outdent	Ctrl+Alt+[
Paragraph Format
None	Ctrl+0
Paragraph	Ctrl+Shift+P
Heading 1	Ctrl+1
Heading 2	Ctrl+2
Heading 3	Ctrl+3
Heading 4	Ctrl+4
Heading 5	Ctrl+5
Heading 6	Ctrl+6
Align
Left	Ctrl+Alt+Shift+L
Center	Ctrl+Alt+Shift+C
Right	Ctrl+Alt+Shift+R
Justify	Ctrl+Alt+Shift+J
Style
Bold	Ctrl+B
Italic	Ctrl+I
Check Spelling	Shift+F7
Commands
Start Recording	Ctrl+Shift+X
Site
Get	Ctrl+Shift+D
Check Out	Ctrl+Alt+Shift+D
Put	Ctrl+Shift+U
Check In	Ctrl+Alt+Shift+U
Check Links Sitewide	Ctrl+F8
Window
Insert	Ctrl+F2
Properties	Ctrl+F3
CSS Styles	Shift+F11
Layers	F2
Behaviors	Shift+F4
Databases	Ctrl+Shift+F10
Bindings	Ctrl+F10
Server Behaviors	Ctrl+F9
Components	Ctrl+F7
Files	F8
Assets	F11
Snippets	Shift+F9
Tag Inspector	F9
Results	F7
Reference	Shift+F1
History	Shift+F10
Frames	Shift+F2
Code Inspector	F10
Timelines	Alt+F9
Show Panels	F4
Help
Using Dreamweaver	F1
Using ColdFusion	Ctrl+F1
Reference	Shift+F1

Site panel

File
New File	Ctrl+Shift+N
New Folder	Ctrl+Alt+Shift+N
Rename	F2
Delete	Del
Check Links	Shift+F8
Edit
Cut	Ctrl+X
Copy	Ctrl+C
Paste	Ctrl+V
Duplicate	Ctrl+D
Select All	Ctrl+A
View
Refresh	F5
Show/Hide Link	Ctrl+Shift+Y
View as Root	Ctrl+Shift+R
Show Page Titles	Ctrl+Shift+T
Site Map	Alt+F8
Site
Get	Ctrl+Shift+D
Check Out	Ctrl+Alt+Shift+D
Put	Ctrl+Shift+U
Check In	Ctrl+Alt+Shift+U
Check Links Sitewide	Ctrl+F8
Link to New File...	Ctrl+Shift+N
Link to Existing File...	Ctrl+Shift+K
Change Link...	Ctrl+L
Remove Link	Ctrl+Shift+L

Code editing

Select Parent Tag	Ctrl+[
Balance Braces	Ctrl+'
Select All	Ctrl+A
Bold	Ctrl+B
Italic	Ctrl+I
Copy	Ctrl+C,Ctrl+Ins
Find and Replace	Ctrl+F
Find Selection	Shift+F3
Find Next	F3
Paste	Ctrl+V,Shift+Ins
Paste Special	Ctrl+Shift+V
Cut	Ctrl+X,Shift+Del
Redo	Ctrl+Y
Undo	Ctrl+Z
Switch To Document	Ctrl+`
Print Code	Ctrl+P
Surround with #	Ctrl+Shift+3
Delete word left	Ctrl+BkSp
Delete word right	Ctrl+Del
Select line up	Shift+Up
Select line down	Shift+Down
Character select left	Shift+Left
Character select right	Shift+Right
Select to page up	Shift+PgUp
Select to page down	Shift+PgDn
Move word left	Ctrl+Left
Move word right	Ctrl+Right
Select word left	Ctrl+Shift+Left
Select word right	Ctrl+Shift+Right
Move to start of line	Home
Move to end of line	End
Select to start of line	Shift+Home
Select to end of line	Shift+End
Move to top of file	Ctrl+Home
Move to end of file	Ctrl+End
Select to start of file	Ctrl+Shift+Home
Select to end of file	Ctrl+Shift+End
Copy2	Ctrl+Ins
Paste2	Shift+Ins
Cut2	Shift+Del
Snippets	Shift+F9

Document editing

Quit Application	Alt+F4
Go to Next Word	Ctrl+Right
Go to Previous Word	Ctrl+Left
Go to Previous Paragraph	Ctrl+Up
Go to Next Paragraph	Ctrl+Down
Select Until Next Word	Ctrl+Shift+Right
Select From Previous Word	Ctrl+Shift+Left
Select From Previous Paragraph	Ctrl+Shift+Up
Select Until Next Paragraph	Ctrl+Shift+Down
Close Window	Ctrl+F4
Edit Tag	Shift+F5
New In Same Window	Ctrl+Shift+N
Preview in Primary Browser	F12
Preview in Secondary Browser	Ctrl+F12,Shift+F12
Preview in Secondary Browser	Shift+F12
Exit Paragraph	Ctrl+Return
Live Data Mode	Ctrl+R
Print Code	Ctrl+P
Next Document	Ctrl+Tab
Previous Document	Ctrl+Shift+Tab

Site window

Close Window	Ctrl+F4
Quit Application	Alt+F4
Open	Return
Preview in Primary Browser	F12
Preview in Secondary Browser	Shift+F12
Cancel FTP	Esc

Read More