Step 7: Dreamweaver CS3 Tutorial – File Upload / FTP

[This is Step 7 of the Dreamweaver CS3 Tutorial]

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!

<< Go back to step 6: Linking pages

Step 6: Dreamweaver CS3 Tutorial – Linking pages

[This is Step 6 of the Dreamweaver CS3 Tutorial]

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.

<< Go back to step 5: Using Server Side Includes

Go to step 7: File upload / FTP >>

Step 5: Dreamweaver CS3 Tutorial – Using Server Side Includes

[This is Step 5 of the Dreamweaver CS3 Tutorial]

Server Side Includes (SSI) 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.

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 pages 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.

<< Go back to step 4: Using CSS

Go to step 6: Linking Pages >>

Step 4: Dreamweaver CS3 Tutorial – Using CSS

[This is Step 4 of the Dreamweaver CS3 Tutorial]

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.

Some of the styles you can centralize in an external css stylesheet include styles for body tag, h1 tag, h2 tag, p tag, a tag (specifies the look of link), menu styles, footer styles, etc.

Create an external stylesheet :

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.

<< Go back to step 3: Edit a webpage

Go to step 5: Using Server Side Includes >>

Step 3: Dreamweaver CS3 Tutorial – Edit a webpage

[This is Step 3 of the Dreamweaver CS3 Tutorial]

Open an existing page

Double click the page in the Files Panel

Different views of your webpage

By default the webpage will open in design view and it will show how the webpage will be displayed online.  But you can also opt to view the html code or both in a split window.

Inserting Text

You can type in text just as you would in any text editing software. You can apply styles (font, font size, bold, text-align, …)  to it from the Properties panel below.

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.

Preview your page in a browser

The Design view gives you a rough idea of what your page will look like on the web, but you must preview the page in a browser to see the definitive end result. Although browsers produce the same results in general, each browser version can display HTML pages somewhat differently. Dreamweaver attempts to produce HTML that looks as similar as possible from one browser to another; sometimes differences can’t be avoided, however. Thus, previewing your work in a browser is the only way for you to see what your site visitors will see after you publish your pages.

1. Open the page you want to preview 
2. Press the F12 key (Windows) or Option+F12 (Macintosh). Your primary browser launches, if it’s not running already, and displays the  page

Note: Dreamweaver automatically detects your primary browser and uses it for previewing your pages. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and select File > Preview in Browser > Edit Browser List. When the Preview in Browser Preferences dialog box appears, add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.

<< Go back to step 2: Create a new webpage

Go to step 4: Using CSS >>

Step 2: Dreamweaver CS3 Tutorial – Create a new webpage

[This is Step 2 of the Dreamweaver CS3 Tutorial]

Create and save a new page

After you have set up a site, you are ready to begin building web pages. You’ll start by creating a new page, and saving it your website folder.

1. In Dreamweaver, select File > New.
2. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, select <none> from the Layout list (these two options should already be selected by default), and click Create.
3. Select File > Save As. In the Save As dialog box, browse to the folder that you defined as the site’s local root folder. Enter index.html in the File Name text box and click Save. The file name now appears in the title bar at the top of the application window, as well as in the tab of your new document.  The fil will now appear in the files panel on the right.
4. In the Document Title text box at the top of your new document, type the title of your webpage .

   

   This is the title of your page (different from the file name). Your site visitors will see this title in the browser window title bar when they view the page in a web browser.

5. Click once on the page to move the insertion point out of the Document Title text box. You’ll see that an asterisk (*) appears next to the file name in the document’s tab. This asterisk indicates that a file has changed and that you need to save the file if you want to keep the changes.
6. Select File > Save to save your page.

<< Go back to step 1: Define a new site

Go to step 3: Edit a webpage >>

Step 1: Dreamweaver CS3 Tutorial – Define New Site

[This is Step 1 of the Dreamweaver CS3 Tutorial]

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

1. In Explorer, create a folder in which you will store all your project files. Create an ‘images’ or ‘assets’ folder within and transfer all the images to this folder. Create a ‘raw’ folder for all the original files.
2. Open Dreamweaver
3. Define a new site Site > New Site > ‘Advanced’ tab and enter settings for

Local info 

• Fill in your Site Name in the box provided for ‘Site Name’.
• Next to the ‘Local Root Folder’ box, use the yellow folder icon to browse for the project folder you had created in step 1.
• Browse for the ‘images’ folder in next to ‘Default Images Folder’.

Remote Info

This is how you tell Dreamweaver to move files from the local site to their ultimate location on the web (once you are ready to move them there). It’s alright to leave this as “None” until you are ready to move files.

• Click in ‘Access’ and choose ‘FTP’.

• Enter the propper settings (provided by your host)     
  • Host is usaually somethin like  ftp.hostname.com (provided by host)
  • Host Directory you will only need if you are hosting several websites in the same account
  • Login is provided by host
  • Password is provided by host

The Files panel in Dreamweaver now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop.

<< Go back to step 0: Introduction to building a website

Go to step 2: Create a new webpage >>

Step 0: Dreamweaver CS3 Tutorial
Introduction to building a website

[This is Step 0 of the Dreamweaver CS3 Tutorial]

1 The big picture

The first thing you need to understand is how your web site fits within the “big picture” of the Internet. Creating a website is only part of the process.

You will also need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer – publish or upload – your pages to your web host’s computer, called a web server, so that the rest of the world can see it. There are numerous web hosts around – you can find a list of cheap web hosts on the internet.

The other people who are on the Internet can then connect to the Web Server to view the site.  You use software called browsers, such as Netscape or Internet Explorer, to connect to and display pages of information supplied by remote servers.

2 What is HTML?

HTML stands for Hypertext Mark-up Language. It consists of text and instructions and is what is actually saved. 

You can see any web page’s HTML by selecting the ‘document source’ (Netscape) / ‘source’ (Internet Explorer) option from the View menu on your browser.

It is no longer essential to know HTML, because of WYSIWYG (What You See Is What You Get) editors (like Frontpage, Dreamweaver, KompoZer), which generate the HTML for you.  As a precaution however a limited understanding of HTML is desirable.

HTML consists of text and <tags> (the instructions) – the actual page stored doesn’t look like the displayed page.

Everything starting from the <body> and finishing with </body> will appear on your web page.  In most cases tags occur in pairs – opening and closing tags – Closing tags always start with a forward slash.  Notice the first tag is <html> and the last </html>.  All web pages must carry these in these positions.

As a page builds up, many more tags will be added. For the most part the pairs of tags enclose ‘contents’ from which the page is built up – items like Paragraphs, Headings, Tables, Images.  The tag names are usually the element names or abbreviations of them. Some examples are <table>, <img> for image, <p> for paragraph, <br> for line break and <div> for different sections of the webpage.

Nothing between the <head> and </head> tags will appear on the screen but may have quite useful functions nonetheless. For instance, between the <title> and </title> there’s the page title.

3 Steps to Setting Up Your Own Web Site

• 3.1  Purchase a Domain Name (if desired)

A “www.somewhere.com” name for your web site is called a domain name.  These are sold by domain registrars and you typically pay for them by the year.  The first step is to check to see if the name that you want is available.  If you don’t purchase a domain name, then you just use the URL given to you by the web server.

• 3.2  Sign Up for a Web Hosting Service:

In order to run your own web site you need a web hosting service or a web server.  You can choose for a payed account or a free account, which will have more limitations. Hosting services and domain names are often provided by the same company.

The important information that you will need to know is the “FTP Settings” of your account — you will have need this to publish.

• 3.3  Create Your Web Site

The next step is to actually build your web site.  It’s best that you start off simple while you are learning. As your knowledge and skills increase you can start to build more sophisticated web sites. 

We recommend the following guidelines when building your web site:

   • Store all of your web pages and images in the same directory

   • make subdirectories to make your site well-organized

   • Only images in the format: .gif, .jpg, and .png are usable on the web

   • Do not use spaces and capital letters in your file names (use underscore _ )

   • Your web pages should have the extension .html

   • Your home page should have the name index.html

• 3.4  Publish (Upload) Your Web Site

Before you (or anyone) can view your web site on the Internet you need to publish (or upload) your pages and images to your web server. You will use the settings from your web hosting service to publish your site to the web server.

• 3.5  Let People Know About Your Site

After you create your web site you will want to tell others about it. The best way to do this is to send the link to friends and colleagues. If you would like to make your site more accessible to other people on the Internet you will have to get it listed in Search Engines like Google. Here are some search engines that you can publish your new site to.

   • Google – http://www.google.com/addurl/

   • The Open Directory Project – http://www.dmoz.org/add.html

   • MSN Search – http://search.msn.com/docs/submit.aspx

   • Yahoo Search – http://submit.search.yahoo.com/free/request

Go to Step 1: Define a new site in Dreamweaver >>

In order to build a website using Dreamweaver follow these steps:

Step 0: Introduction to building a website
Step 1: Define a new site in Dreamweaver
Step 2: Creating a new webpage
Step 3: Edit a webpage
Step 4: Using CSS
Step 5: Using Server Side Includes
Step 6: Linking pages
Step 7: File upload / FTP