Friends

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Sunday, October 2, 2011

FTP/ Upload Files to Hosting Server | Dreamweaver

Now that your site is ready it is time to upload the files to your hosting server and make your site live. You will need to purchase a domain name and web hosting. We use Hostgator to host this site.
To upload your files:
  • Click on the ‘Connect to remote host’ icon at the top of the files panel
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Click the + button to add a new server
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Enter any server name, your FTP address/ hostname, username and password (you will receive these when you purchase hosting).
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Click the ‘Test’ button
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Click the ‘Save’ button
  • In the Files panel click the ‘Expand to show local and remote sites’ icon
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • You will see an expanded File Window:
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Click to connect
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • Dreamweaver will connect to your remote hosting server. You will see your remote hosting server on the left side and your local files on the right side.
  • You may need to navigate to a ‘www’ or ‘public_html’ folder on your remote server.
  • Select all the local files
  • Right click and select ‘Put’
    FTP/ Upload Files to Hosting Server | Dreamweaver
  • You can also use the ‘Put’ icon at the top
  • FTP/ Upload Files to Hosting Server | Dreamweaver
  • A copy of all your website files will be stored on your remote hosting server.
  • Using a browser, browse to your domain name. Your website should appear.
  • Test to see if everything is working file.
  • Configure your form to work using a script that will work on your server technology or a form service provider like those mentioned earlier.

Test Website | Dreamweaver

Now that all our web pages are ready it it time to test the website in Dreamweaver. The best way to test the website is to actually see how it looks in the browser. It is a good practice to check the site in multiple browsers as some things which might work well in some browsers might not work so well in other browsers.
To test in a browser:
  • File > Preview in browser > Firefox/ IExplorer
Some things to test for:
  • Click on the main menu items and see if it links correctly to the appropriate pages
  • Click on the footer menu items to check if each link links to the appropriate pages.
  • Check if the headings are formatted correctly on each page
  • Check if the text fonts are looking right on all the pages
  • Check if the form fields are aligned correctly
  • If you want you can do a spell check [Commands > Check spelling]
  • Web page titles – these will appear in the top bar of the browser and by default will be ‘Untitled Document’. These can be changed by entering the page titles for each page in Dreamweaver in the ‘Title’ field.
    Test Website | Dreamweaver
  • Another thing you will notice is that the text is sticking to the left side of the browser. This does not look professional. To add some space on the left and right side of the content area you can edit the content style with the following details:
    • Reduce the width to 90%
    • Uncheck ‘Same for all’ below Padding
    • Enter 5% for left and right padding
Test Website | Dreamweaver
Save all the files including the style.css file [File > Save All]
Test the site again by previewing all the pages in the browser. If everything is OK, it is time to upload the files and make your site live.

Form Styles | Dreamweaver

We can make the form look more presentable by defining form styles in Dreamweaver. We can give a style to the <label> tag. To do this:
  • Create a style for the label tag
  • Click ‘Box’ and enter:
  • Width : 150 px
  • Float: Left
  • Click OK
  • Form Styles | Dreamweaver
  • The form looks better now:
    Form Styles | Dreamweaver
Let’s push the submit button to align with the form fields. To do this:
  • Create a new CSS style
  • Select Class and name it ‘.btn’
    Form Styles | Dreamweaver
  • Box > Left: 150 px
    Form Styles | Dreamweaver
  • Select the button on the web page and select ‘btn’ from the drop down next to Class in the Properties panel.
    Form Styles | Dreamweaver
  • The button moves to the right and aligns nicely with the other fields:
    Form Styles | Dreamweaver
To program the form to be sent to specific email addresses when filled, you will need to install a php or asp form script and point the form to it in the action field of the Properties panel.
Form Styles | Dreamweaver
The php/ asp script is out of the scope of this tutorial. However there are free service providers that take care of the programming for you as well.

Contact Forms | Dreamweaver

Most websites would need a contact form. Let us now create a contact form in Dreamweaver.
  • Open the contact-us.html page.
  • Click in the area that you want the form to appear
  • Insert > Form > Form
    Contact Forms | Dreamweaver
  • A red dashed box will be visible in your page
    Contact Forms | Dreamweaver
  • All the form elements need to be placed within this red box
  • Insert > Form > Text field
  • Label: Name
  • Style: Attach label tag using ‘for’ attribute
  • Position: Before form item
    Contact Forms | Dreamweaver
  • Click OK
  • The Name text field will appear in the web page
    Contact Forms | Dreamweaver
  • Select the field by clicking on it
    Contact Forms | Dreamweaver
  • Type ‘name’ in the Properties panel under ‘TextField’
    Contact Forms | Dreamweaver
  • In the web page press the Enter button to go to the next line and insert another text filed labeled Email
  • Insert a Text area [Insert> Form > Textarea] labeled Comments
  • Insert a button with no label [Insert > From > Button]
  • The form will now look like this:
    Contact Forms | Dreamweaver

Heading Styles | Dreamweaver

Now that we have specified the text font style it is time to define the heading styles in Dreamweaver. HTML has various heading tags. Let us define the style of some of these specifically:
  • H1 (Heading 1)
  • H2 (Heading 2)
To define the style for the Heading 1 tag:
  • Click the ‘New Style Rule’ icon at the bottom of the CSS styles panel.
  • Selector Type: Tag
  • Selector Name: H1
    Heading Styles | Dreamweaver
  • Click OK
  • In the ‘CSS Rule Definition’ window, specify the font size 18 px
  • Set the color#FFBB2D
    Heading Styles | Dreamweaver
  • Click OK
  • Now select the heading text in your web page and apply the H1 tag by selecting Heading 1 from the Format drop down in the Properties panel.
    Heading Styles | Dreamweaver
  • You will see that the style is applied to the heading text
    Heading Styles | Dreamweaver
  • If you plan to have sub-headings in your webpages you can define the styles for the H2 tag and apply the Heading 2 format to them. Usually the font size would be smaller than the H1 tag font size.

Text Styles in Dreamweaver

We have added the text to out pages but the default font doesn’t really look good.  Let us specify the text styles in Dreamweaver. All the visible content in the web pages will be between the <body> tag in HTML. We can specify the properties of this body tag in our style sheet so that all the text in our web pages display in the Verdana/ Helvetica font and are a size 12px.
To do this:
  • Click on the ‘New CSS Rule’ icon at the bottom of the CSS Styles Panel
  • In the ‘New CSS Rule’ window, under ‘Selector Type’, select ‘Tag’
  • Under ‘Selector Name’, select or type ‘body’Text Styles in Dreamweaver
  • Click OK
  • In the ‘CSS Rule Definition’ window for ‘Font Family’ select ‘Verdana, Geneva, sans-serif’
  • For Font-size, type ’12′ and select ‘px’
    Text Styles in Dreamweaver
  • Click OK
  • The style of the text in the web page will change. It looks better now!
    Text Styles in Dreamweaver

Web Page Content

Now that we have created the pages of our site and linked them together, let us enter the web page content.
  • In the Files panel, double click index.html to open it.
  • Select and delete the word ‘content’
Web Page Content
  • Type in your website’s home page text.
  • See how your web page will look by previewing it in a browser [File > Preview in Browser > select the browser of your choice
Now lets us insert an image and align it right. To do this:
  1. Click before the start of the text
  2. Insert > Image > browse to the ‘image’ folder > select photo.jpg. The image will be inserted into the web page.
    Web Page Content
  3. Now we need to align it right. Click on the image.
  4. In the Properties panel, select ‘right’ from the drop down menu next to ‘Align’.Web Page Content
  5. The image will be aligned right.

Styles for text links in Dreamweaver

Now let us link the footer menu items. Once we link them we will also need to define a style for the linked text otherwise they the links will turn blue. To link the footer menu items:
  • First select ‘Home’ in the footer area
  • Click the folder icon next to the link field in the Properties panel, and select index.html.Styles for text links in Dreamweaver
  • You will notice that the Home link and turns blue
We need to create a style for the linked text in the footer div. To do this:
  • Click on the ‘New Style Rule’ icon at the bottom of the CSS Styles panel.
    Styles for text links in Dreamweaver
  • In the New CSS Rule Window select ‘Compound’ under ‘Selector Type’
  • Enter “#footer a” under Selector Name
    Styles for text links in Dreamweaver
  • Click the OK button
  • Enter the following style details:
    Styles for text links in Dreamweaver
  • You will notice that the Home link looks as it did before it was linked. Link the remaining 3 menu items to the respective html pages.
    Styles for text links in Dreamweaver
  • The footer menu is ready. Save the template and update all pages.

Webpages in Dreamweaver

Now that our template is ready let us make the 4 webpages of our site – home, about us, services and contact us. The homepage file is usually named ‘index’. This is recognized by your hosting server as the home page and is shown when someone types in your domain name into the browser. HTML pages end with the file extension .htm or .html and it is a good practice not to have spaces in the file names, so we will create the following files:
  • index.html
  • about-us.html
  • services.html
  • contact-us.html
  • To create a webpage in Dreamweaver select ‘File’ from the Dreamweaver Menu, then select ‘New’.
  • From the New Document Window, select ‘Page from Template’, then our website’s name under ‘Site’ and finally the template name under Template
Webpages in Dreamweaver
  • Click the ‘Create’ button.
  • Dreamweaver will create an HTML page using the template.
  • Save [File > Save] the file as index.html
  • We have created our first html page. Repeat the process to create the other 3 pages.
  • The ‘Files’ panel will look like this:
    Webpages in Dreamweaver

Editable Regions in Dreamweaver Template

Now that our template layout is more or less complete it is time to define the editable regions within the Dreamweaver template. The editable regions can be different in different web pages. Since the content of different pages will differ, we will create an editable region within the content area.
To create editable regions in a Dreamweaver Template:
  • Select and delete all the text in the content area i.e. delete ‘Content for id “content” Goes Here’
  • Insert > Template Objects > Editable Region
    Editable Regions in Dreamweaver Template
  • In the ‘New Editable Region’ window enter the name of the editable region ‘content.
    Editable Regions in Dreamweaver Template
  • Click the OK button
  • The Editable Region in the Template will look like this:
    Editable Regions in Dreamweaver Template
  • Save All Related Files

Editing Styles in Dreamweaver

Let us now create the footer menu and copyright information. The footer menu will be made of text so we simply need to type in the menu items: ‘Home’, ‘About Us’, ‘Services’ and ‘Contact Us’.
The text is not visible because of the black background. Let us edit the #footer stylesheet and specify the yellow text color.
  • Select the footer style in the CSS styles panel
    Editing Styles in Dreamweaver
  • Right click on the #menu style and then select ‘Edit…’
  • Specify the following style details:
    Editing Styles in Dreamweaver
  • To center the textEditing Styles in Dreamweaver
  • Click the OK button
  • The footer now looks like this:
Editing Styles in Dreamweaver
To add more than one space between the menu items you will need to add a non-breaking space [Insert > HTML > Special Characters > Non-Breaking Space]
Editing Styles in Dreamweaver
  • Insert 2 – 3 non breaking spaces between the menu items
  • The footer menu now looks like this:
    Editing Styles in Dreamweaver
Now let’s add the copyright information below the footer menu:
  • Press the Shift and Enter keys to get on the next line
  • Insert the copyright symbol [Insert > HTML > Special Characters > Copyright]
    Editing Styles in Dreamweaver
  • Type in the text ’2010 Company Name’
  • The footer now looks like this:
    Editing Styles in Dreamweaver
Our webpage now looks like this in Dreamweaver:
Editing Styles in Dreamweaver

#
### ###