In 2007, Adobe released the Creative Suite 3 software. There were six different packages within the creative suite depending on your design and development needs-Design Standard, Design Premium, Web Standard, Web Premium, Production Premium, and Master Collection. The design packages were geared towards web designers and graphic designers. The web packages were made for web developers to provide all the tools needed to develop websites. The production package was geared towards audio and video professionals. This guide will help you learn web design using Adobe’s Creative Suite 3 software package.

1. Use Adobe Illustrator CS3 for your drawing needs. Designers use Illustrators for its ability to create vector graphics. Illustrator is mainly drawing software for graphic and web designers. Some of the features available that aren’t in previous versions include the Eraser tool, an enhanced Live Paint tool, and new document profiles for web, video and mobile devices.
2. Step 2

   Use Adobe Photoshop CS3 for photo editing and creation. Some developers use Photoshop as the end-all for images on a website whereas others use it for its original purpose-modifying photos. Designers often present developers with design templates and layer comps (alternate states of a template) using Photoshop. Developers slice the template into smaller graphics in order to recreate the design template as a website template.

3. Step 3

   Use Adobe Dreamweaver CS3 to code your web pages. There are three ways to code web pages in Dreamweaver-the code view, the design view, or the split view. The code view is for those who know HTML code and can code web pages from scratch. The design view is for those who need the WYSIWYG (what-you-see-is-what-you-get) editor and create the web page from a design point of view without seeing what code is involved. The split view allows a developer to code a page and see what it looks like in real-time. Dreamweaver also gives you the capability to transfer your files from your computer to a remote web server.

4. Step 4

   Use Adobe Flash CS3 to create animations for your web site. Flash is used to create media players, streamlined animations, and interactive tools for users. Flash sometimes depends on the ActionScript scripting language in order to create most of the interactivity within Flash applications.

5. Step 5

   Use Adobe Acrobat 9 Professional for safe and secure documents on the web. Placing Microsoft Word or Excel documents online for a user to download creates the risk that the document can be edited on the user’s end. To protect your document from user editing, create PDF files for web use in Acrobat. Acrobat provides a utility both in its software and as plugins for other programs for converting most files into PDF format.

New features in Adobe Dreamweaver CS3 make it easy to manage style rules and move them from one stylesheet to another. The following steps will show you how.

1. The simplest move is within a single stylesheet. Here, CS3 will now allow you to drag and drop style rules to reorder them, thereby changing the relationship of one rule to another in the cascade. In the CSS Styles window, highlight a style rule and drag it to the new position.
2. Step 2

   
   

   With more than one stylesheet attached to a document, you can move styles around with drag and drop.

   If you have two stylesheets visible in the CSS Styles Panel, you can select one or more of the styles from one style sheet and drag and drop them into another stylesheet.

3. Step 3

   If you drag a style from one style sheet to another where you already have the same selector, Dreamweaver alerts you to the potential problem. Say you drag an h1 selector from one stylesheet to another where there is already a rule for h1, Dreamweaver puts up a dialog that lets you compare the source CSS rule to the destination CSS rule. You can decide which style or which properties to keep.

4. Step 4

   
   

   Select Move CSS from this menu.

   You can also move CSS rules from a stylesheet you have available in the CSS panel to a completely different stylesheet. Select one or all of the rules and right-click (ctrl-click) to see the contextual menu. Select Move CSS Rules from that menu.

5. Step 5

   
   

   Add your moved rules to the stylesheet of your choice.

   Now you can specify an existing external stylesheet or create a completely new stylesheet that will contain the rules you are moving.

Hyperlinks, or just links, are the most essential part of any Web site. They allow users to navigate between pages on a site or to visit external sites without typing in a URL. Placing links on a page is one of the most fundamental tasks any Web designer can master. Learn how to create hyperlinks in Adobe Dreamweaver CS3.

1. Start Dreamweaver. Open the Web page on which the links will be placed.
2. Step 2

   Use the cursor to highlight the text that will serve as a link.

3. Step 3

   Go to the Properties Inspector at the bottom of the screen. Click on the folder icon by the “Link” blank and select the page or file to which the link will connect and click “OK.”

4. Step 4

   Save the file.

Just about everyone has a website these days–and so can you. With the number of simple software programs out on the market, even a non-technical person can create an online presence. One of the simplest “What you see is what you get” (WYSIWYG) software programs in use today is Adobe’s Dreamweaver CS3. Formerly a Macromedia product, Dreamweaver is an excellent solution for creating both simple and complex web pages. In a few short steps, you can have your own web page ready to be seen on the World Wide Web.

1. Create a folder on your desktop. Name the folder with your project name. Within this folder, create an “Images” folder.
2. Step 2

   Open Dreamweaver CS3. From the top horizontal menu, choose File — New (Control + N) to create a new page. Select Blank Page and HTML as the page type, for a simple web page. Click “Create.”

3. Step 3

   Save this file. Choose File — Save As (Control + Shift + S) and name your document. Make sure you save it within your project folder. If what you are creating is your main page on the website, name it “index.html.” This way, when your audience visits your website, this is the first page where they will land. Click “Save” after you have named your page appropriately. Do not use capital letters or spaces in your titles.

4. Step 4

   Title your web page. In the Title box toward the top of the interface that says “Untitled Document,” click in the box and rename it. This title will show up in the browser’s title bar. Don’t skip this step; otherwise your viewers will see “Untitled Document” as the site loads — not a great way to make a professional first impression.

5. Step 5

   Select any images you wish to use and place them in your project’s “Images” folder. Make sure the images are appropriately sized. For example, do not use the standard size image you get when you download your pictures off of your digital camera. These can be thousands of pixels wide. For a point of reference, an average web page is typically anywhere from 601 to 850 pixels wide, according to webdesignpractices.com. The average desktop resolution that Web developers design for is 800-by-600 pixels. However, as monitor size has increased so has the resolution. Design your web page for 800-by-600. You will need to take into account the scroll bar and browser menus, which take some of the 800-by-600 space. Make the width of the web page 750 pixels wide to avoid any need to scroll right and left on your web page. Resize any images that exceed this width. If you want smaller images once you start building the page, you can resize them to fit at a later time.

6. Step 6

   Gather any written content and links that you wish to publish on your web page. Make sure to run it through a spell check in a word processing program, such as Microsoft Word, to eliminate any unprofessional spelling errors. Check that all links are accurate and click through to the correct website.

7. Step 7

   Choose a background color. From the top menu, choose “Modify” — “Page Properties.” Click on the color box next to “Background Color” and choose from the color palette. If you have an image you’d prefer for the background, you can insert it by clicking “Browse” next to the “Background Image” field. Store this image in your “Images” folder and check to see that it does not look bad when it’s “tiled” as a background of your Web page. Stick to simple textures and patterns if you choose to have an image as opposed to a color for a background. Simplicity is one key of good web design. Once you have decided on your background image/color, choose “OK.” Your background should now reflect your choice.

8. Step 8

   Insert a table. Tables hold your web content in place (images, text, links, etc.). You can adjust for the number of columns and rows. To start, choose a simple 3-by-3 table. Click in the main window (colored area) and select “Insert” — “Table.” Type in “3″ in both the “Rows” and “Columns” fields and set the table width to 750 pixels. Type 0 for “Border Thickness,” 5 for “Cell Padding” (space within the cells) and 0 for “Cell Spacing” (space between each cell) as a starting point. Click “OK.”

9. Step 9

   Insert a main banner/header image. Create an image that will go at the top of your web page, much like the typical banner-style images prevalent in cyberspace. Because there is a five pixel cell padding, take this into account and make the image no wider than 740 pixels wide (five pixels on each side). You will need to insert this image in the top row of the table, but since you want it to span the entire width of the three columns, you will need to merge the three cells in the top row. To do this, click in the top right cell and drag your mouse so it highlights the top three cells in the row. Once they are highlighted, right click and choose “Merge Cells” or click the “Merge Cells” button at the bottom of the interface, under the “Properties” menu (which looks a lot like a word processing editor). You will note that the three cells merge into one long cell. Click inside this cell and select “Insert” — “Image,” where you will choose your banner image from your “Images” folder. Click “OK” and your image will appear.

10. Step 10

    Insert text. Copy your text from your word processing program and paste it into the cell of your choosing. Much like in any typical word processing editor, you can highlight the text and choose your font style, size, color, boldness, justification, etc. Copy portions of your text and break it into chunks of text that go in each column for easier readability.

11. Step 11

    Change the table background color so your text is easier to read. If you have chosen a dark background color, it might be hard to read your text on top of it. To make the text-filled cells white (or a lighter color) click in that cell and click on the “BG” color box at the bottom under the “Properties” editor. Select white or another color from the color palette. Do this with any other cell that needs changing. To select multiple cells, click in the top right cell of the bunch and drag to the left cell and down, which will select multiple cells across multiple rows.

12. Step 12

    Insert links. For any link, you can type in text that will link directly to another web page. For example, if you want to link to your friend Jim’s page, you can type in the text “Visit Jim’s Web Page” instead of the lengthy URL. Highlight the text you wish to link and click in the “Link” field in the “Properties” editor. Copy and paste or type in the full URL in this field including http://. Select “_blank” from the “Target” field so that when users click on the link, the web page opens in a new window instead of in the same window of your web page. That way visitors don’t accidentally leave your web page and forget to come back.

13. Step 13

    Insert any other images you want on the site. Follow the same steps you did to insert your banner image. Create a smaller image that’s appropriate and won’t dominate the web page. For example, if you have an image that you’d like your viewers to click on to enlarge, create two images, one large and one small. Make your large image around 750 pixels wide and make your smaller image around 200-225 pixels wide. Insert the smaller image into a table cell and name the image in the Alternate Text prompt (so if your image doesn’t load, the words will show up instead). Treat this image as a link by clicking on it and choosing the yellow folder next to “Link” in the “Properties” editor. Find your larger image. Select “_blank” from the “Target” field so your image will open up in a new window. You can choose a border if you prefer. For no border, type 0 in the field. You can play with the numbers to select the border size you prefer.

14. Step 14

    Save your work and upload to your web host. Keep all of your images in the correct folder and be sure to create an images folder on your server as well. Everything should show up on your web page just as you created it.

As one WebmasterWorld.com reader puts it on a forum, “You would not actually use Dreamweaver to create a database.” Rather, Dreamweaver lets you create the front-end web page that interfaces between the user and the database. There are many types of databases ranging from simple text files that use comma separated variables (CSV) to relational databases, including MySQL. Once you have set up your database and written server-side scripts to access the database, the steps for creating your HTML interface in Dreamweaver are straightforward.

Preparing Database

1. Step 1

   Determine which set of applications (called an application stack) are appropriate. Common stacks use LAMP (Linux, Apache, MySQL and PHP/Perl), or Microsoft’s Internet Information Server and associated .Net tools.

2. Step 2

   Install your chosen database on your server. Most SQL servers include an installation program for this purpose.

3. Step 3

   Prepare a script to query your database.

4. Step 4

   Add code to display the results of the query.

5. Step 5

   Test your scripts before proceeding.

Simple Database Search

6. Step 1

   Create a blank web page in Dreamweaver.

7. Step 2

   Click on the “Forms” tab and insert a new HTML form element.

8. Step 3

   Click on the “Tag Inspector” tab and set the “action” attribute to point to your database script on the server. For example, http://myserver.com/my_search_script.php.

9. Step 4

   Insert a new text field. Click on the “Tag Inspector” tab and set the “id” attribute to “query” and the “label” attribute to “search.”

10. Step 5

    Insert a new button below the text field, and using the Tag Inspector set the “type” attribute to “submit. Test your new database search form.

If you do a lot of business over the Internet or simply want a customized display for your correspondence, you can create HyperText Markup Language (HTML) letterheads to accomplish this. These letterheads can contain all the traditional information, such as your name and/or business title, and can be used in conjunction with your email application. Use the Adobe Dreamweaver CS3 program to easily build your own HTML letterhead and design it as you prefer.

1. Choose “New” from the Dreamweaver CS3 File menu and then select “Blank Page,” “HTML” and “<none>” from the New Document dialog box.
2. Step 2

   Select the “Table” option under the Insert drop-down menu and enter at least two rows in the “Table” dialog window so that you have a space to enter your footer information (Step 6) in your letterhead page. The table contains the source of your content in the HTML letterhead.

3. Step 3

   Enter your title and preferred contact information, such as an email address, by typing this directly in one of the table cells in the design window. Continue by highlighting the text so that you can style these entries by clicking buttons, such as “Italic” and “Align Left,” in the “Properties” inspector. Further, apply links to any text, as applicable, by highlighting the entry, clicking the “Hyperlink” or “Email Link” button on the “Insert” inspector and then type in the prompted data in the text fields of the dialog box.

4. Step 4

   Position your cursor in the preferred position in the design window and select the “Image” option under the File drop-down menu to insert a logo. These graphics are typically found near the letterhead’s title (Step 3) on the top, left or right.

5. Step 5

   Select the table cells in the design window and apply a background color by clicking the “Background Color” (Bg) button in the “Properties” inspector. Make sure that this shade does not affect the readability of any future text in the letterhead.

6. Step 6

   Place your cursor in the second row and enter any footer information, such as a website address, for your letterhead page. Apply any appropriate hyperlinks by repeating the last portion of Step 3.

7. Step 7

   Save your file and place this document on your web host in the same folder that you keep your other website files in. For most email applications, you use the “Insert” option to add your HTML letterhead to your message, but in Mac OS X mail, navigate to your letterhead on your web host and click the “Command” and “I” buttons at the same time.

Named anchors are great way to link within a page. This helps eliminate scrolling through information you may not be interested in, and makes it easy for viewers to find what they are looking for. Here’s how to creat named anchors in Adobe Deamweaver.

Creating Named Anchors

1. Step 1

   
   

   Open a new document in Adobe Dreamweaver. Click “File” and “New Blank Document.”

2. Step 2

   
   

   Create text that you want on the page.

3. Step 3

   
   

   Turn on “Invisible Elements.” Click “View ,” then “Visual Aids” and “Invisible Elements.” This allows you to see where the named anchor is placed, but the named anchor will not be visible on your Web page in a browser.

4. Step 4

   
   

   Click where you want the named anchor to be. In our example it is next to the word “Contacts” at the bottom of the image.

5. Step 5

   
   

   Click on the “Common Tab” and select the named anchor button. The button is the third from the left. It looks like an anchor. When it is clicked, the “Named Anchor” box appears.

6. Step 6

   
   

   Name your anchor in the box and click “OK. “You’ve created a named anchor. The named anchor icon will appear on your screen.

7. Step 7

   
   

   Repeat for all the locations you want named anchors.

Linking to Your Named Anchor

8. Step 1

   
   

   Open the properties bar. Click “Windows,” then “Properties Bar.”

9. Step 2

   
   

   Highlight “Contacts” at the top. You can do this by double-clicking on the word.

10. Step 3

    
    

    Type in the name of the named anchor in the link section of the properties bar. All named anchor links start with a pound sign (“#”) . Our link will be called “#contacts.” Press “Enter” on your keyboard.

11. Step 4

    
    

    Deselect the word “contacts.” It will now be blue and underlined to represent it is a link.

12. Step 5

    Repeat for all named anchors on your page.

13. Step 6

    
    

    Save your page and preview in a browser.

14. Step 7

    Click on the “Contacts” link. You must be able to scroll down the page to see contacts, or it will seem that the link is not working. If “Contacts” is out of sight, clicking the link will bring the “Contacts” anchor to the top of the page.

By using hypertext markup language (HTML), you can create electronic letterheads (stationery) so that it contains your title as well as any preferred identifying information. This method of Internet correspondence presents a personalized message along with hyperlinks that take the recipient to the designated location. With Adobe’s Dreamweaver CS3 application, you can quickly create your own HTML letterhead even if you are not familiar with this language.

1. Launch your Adobe Dreamweaver CS3 application and create a new page by choosing “Blank Page” and “HTML” from the “New Document” dialog box that automatically appears. Further, if you plan to use your letterhead in email, choose “<none>” in the “Layout” column because Cascading Style Sheets (CSS) page formatting does not work well in this instance.
2. Step 2

   Click the “Table” option from the “Insert” menu and type in the specifications, such as number of rows and columns, in the “Table” dialog that appears. This table holds the content of your HTML letterhead.

3. Step 3

   Type your name and/or organization name directly inside one of the table cells in the design view. Select this text and then click the formatting buttons, such as “Bold” or “Text Color,” in the “Properties” inspector to style this presentation as you wish.

4. Step 4

   Insert a logo, if preferred, by placing your cursor in the desired area in the design window and then click the “Image” option under the “File” menu. If needed, you can position this graphic by clicking an option in the “Align” menu in the “Properties” inspector.

5. Step 5

   Type in your contact data, such as a phone number or URL address, by repeating Step 3. Additionally, link any appropriate text by selecting it, clicking the “Email Link” and/or “Hyperlink” button in the “Insert” inspector and then enter the required information in the dialog box text fields.

6. Step 6

   Apply a background by selecting the table cells in the design window and click the “Background Color” (Bg) button in the “Properties” inspector.

7. Step 7

   Click the “Preview/Debug in browser” button at the top of the workspace to view your current design. When finished, click the “Save” option under the “File” menu.

The unfortunate aspect of computers is that they get old and eventually need to be replaced. Perhaps there is a new version out or it just doesn’t work anymore, but there always comes a time where it is no longer needed. It is the same with software. The software may no longer be needed or a newer version is available. For some, Adobe Dreamweaver may be a program that needs to be removed. Created for website designing, Adobe consistently creates newer versions of the software. No matter what the reason is, this is how to remove Adobe Dreamweaver.

1. Click the “Start” button on the desktop.
2. Step 2

   Select “Control Panel.”

3. Step 3

   Open the “Add or Remove Programs” folder.

4. Step 4

   Scroll down until you find “Adobe Dreamweaver.” The list is in alphabetical order, so it should be toward the top.

5. Step 5

   Select “Adobe Dreamweaver” and click “Remove.”

6. Step 6

   Click “Yes” when asked if you’re sure you want to remove the program. Adobe Dreamweaver will now begin to uninstall.

7. Step 7

   Click “Finish” when a pop-up window states the program as been removed.

Dreamweaver CS3 is part of Adobe’s Creative Suite 3. While Adobe has since issued Creative Suite 4, Dreamweaver CS3 is still widely used, and the changes in CS4 are minor enough that there is no reason to rush out and upgrade if you have CS3. This article will show the steps needed to build a Web site in Dreamweaver CS3.

Define the Site

1. Step 1

   Assemble the elements for the site into one folder. This should include text, graphics, video and anything else that will appear on your planned site.

2. Step 2

   Start Dreamweaver. From the start page that appears click “Dreamweaver Site” from the list under the “Create New” options.

3. Step 3

   Name the site. The name entered is for use in Dreamweaver only, and will not show up elsewhere. If the site has a URL, enter it in the blank provided.

4. Step 4

   Select whether or not the site will use a server technology. If you don’t know what this means, choose “No.”

5. Step 5

   Choose to edit the site locally. Then select the root folder. This is extremely important. The root folder is the site where all Web pages and elements on those pages must be stored. The simplest way to do this is to select the folder where the elements are already stored, but it is possible to designate another folder as the root folder and to move elements into it as needed.

6. Step 6

   Choose “None” when asked how you connect to the remote server. This option can be changed once the site is complete.

7. Step 7

   Choose “Done.” The site is defined.

Creating Pages for the Site

8. Step 1

   Start Dreamweaver. From the start menu that appears, choose “HTML” from the “Create New” options list.

9. Step 2

   Click “File” and then “Save As.”

10. Step 3

    Save the new HTML document as “index.html.” Save it to the root folder defined earlier. This document is the home page for the new site. It must be named “index.html” This step, like defining the root folder, is extremely important.

11. Step 4

    Create other HTML pages as needed. Save them to the root folder. Do not capitalize any letters in the names, and, if the name is more than one word use the underscore “_” mark instead of a space between the two words.

12. Step 5

    Place the elements on the Web pages.

13. Step 6

    Link the pages together with hyperlinks. To create a hyperlink, highlight the text that will serve as the link. Then, in the Properties Inspector, choose the Browse for Folder option next to the Link blank. From the menu, choose to which page the link will connect. To link to pages outside the site, type the URL in the link blank.

14. Step 7

    Preview the site in Web browsers. Choose the Preview option and make sure the site looks as it was designed to look. It is necessary to preview the site in multiple browsers, as they do not all render a site in the same way. Internet Explorer and Firefox are the most common browsers, so the site will need to be previewed in at least those two. Also check the links to make sure they work.

15. Step 8

    Save the site.