Building a Website with Photoshop and Dreamweaver (Part 7)

In this tutorial I will show you how to import your Imageready HTML into dreamweaver, where you can have more control over the formatting. This is not intended to be a full fledged tutorial on Dreamweaver, but it will show you what you need to know to get started. At the same time its not limited to Dreamweaver, the principles apply to most WYSIWYG editors. The reason I chose Dreamweaver is because this is the tool that I use and I'm familiar with it.

1. The first thing we need to do is set up the site.

Open Dreamweaver. Site>Define Sites

image 1

2. Click on new. This will be our new site.

image 2

3. Give the site a name and then on the Local Root Folder, This is where your site will reside on your computer, click browse..

image 3

4. Find the folder on your Computer where you exported your Imageready HTML.

Click select.

image 4

5. Your site name will now appear in your selector. Its important to always choose your site before you work on it so that your files will be saved to the correct location.

When your ready click "Done"

image 5

6. In the navigation window you will see a file which is called "your_file.htm" (your_file being the name of your document you created in Imageready)

Double click the file and your page should now be launched in Dreamweaver.

image 6

7. Lets do a little housework: You can safely highlight and delete the tags on the top and bottom of the page.

image 7

8. By default there is a slight page margin, but we will remove it.

We want to make the page sit flush to the left and top.

Here I have an extension called "Zero Page Borders" This does it easily for me.

If you don't have the extension (very probable) Press Ctrl/Cmd+J and enter "0" in each of the margin boxes.

image 8

9. Your page should now sit all snug in the top left corner.

Lets set the background color for the page...

image 9

10. Press Ctrl/Cmd+J again or, modify>page properties or, right click on the background and select page properties.

image 10

11. Click on the background color box and select a color. I chose black.

image 11

12. Here is our page in Dreamweaver. Press F12 to view it in your web browser.

image 12

Next week I will show you how to add text, Produce the linked pages and if i have time how to put it on the web. Other wise i will add a bonus lesson on putting it to the web.


Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > HTMLCSS > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction