Adobe Dreamweaver

An HTML editor is a software program which helps web designers write source code for websites. There are many different editors on the market. There are free editors available for people who create webpages as a hobby. The best HTML editors can cost $400 or more. For professional webmasters, this price is very low, since a quality HTML editor will make the coding process dramatically faster and more effective.

Types

1. There are two types of HTML editors: text and “What You See Is What You Get” (WYSIWYG). You can use any text editor such as Notepad to edit HTML pages. WYSIWYG editors such as Adobe Dreamweaver and NetObjects Fusion automatically code the page while you work in an interface which is similar to a word processor.

Features

2. There are many text-based HTML editors which color code and indent the tags, attributes and text of the web page as you build it. This organization can help webmasters who prefer working in text mode to keep track of the HTML code as they edit. Some WYSIWYG editors also have a text editing mode which allows you to have more control over the finished web page or site. The more powerful editors support Javascript, Cascading Style Sheets (CSS) and Extensible Markup Language (XML).

Function

3. WYSIWYG HTML editors generate code, not images. If you’re planning to include a lot of graphic design in your website, you will need to create the images in a separate program. Many editors have ways to make this easier. For example, Adobe Dreamweaver integrates with Adobe graphics programs such as Photoshop and Fireworks. Many editors also contain code libraries which can help you to create pages without a lot of hand coding. Also, some editors can check the web browser compatibility of your pages.

Benefits

4. WYSIWYG HTML editors offer convenience and speed. Also, you can see a preview of your work either while you’re working or after you’ve completed an edit. Most editors have tools which can help you to quickly create links, add images, fonts and colors. Complex tags such as tables, table rows and table data are inserted automatically. The better HTML editors automatically correct code that is improperly written or out of date.

Considerations

5. By using a WYSIWYG editor, you may give up a considerable amount of control over the way your page is coded. Also, using a powerful HTML editor is no excuse for not knowing how to code a web page. You should take a course in HTML or visit a website with quality tutorials, such as the World Wide Web Consortium website. Many inexpensive and free editors insert errors in the code of web pages. If you make your living from designing web sites for others or plan to do so in the near future, invest in the best software available.

An image map is a digital graphic on a Web page that contains areas (hotspots) that your visitors click to be taken to another location on the Internet. The benefit of this method is that you bypass the need to create separate image files because the image map links everything together. For example, a photo of the United States would be the image map, while individual states are the linked hotspots. Using Adobe’s Dreamweaver application, create your own image map with the hotspots that you need.

1. Launch your Adobe Dreamweaver application and create a new page.
2. Step 2

   Select the “Image” option under the “Insert” menu and choose a digital image from your computer using the dialog window that appears. Follow the prompts to enter the optional “Alternate text” and “Long description” and click the “OK” button when done.

3. Step 3

   Click on a hotspot tool, such as the “Rectangular Hotspot Tool,” in the “Properties” inspector and then click and drag the shape over your image to create the hotspot. Be sure to create the shape over the portion of your photo that you want visitors to click.

4. Step 4

   Enter the URL address in the “HREF” text field of the “Properties” inspector to assign it to the hotspot. Then type a description of your image map in the “Alt” text field to provide an explanation for visitors who use screen readers.

5. Step 5

   Repeat Steps 3 and 4 to create any additional hotspots required.

6. Step 6

   Save your file and then select “Preview in Browser” under the “File” menu to test your image map.

If you need to replace an old or unused tag in an HTML document, or simply change unneeded line breaks into paragraphs, you can do it quickly and easily with Dreamweaver 3.

1. Start the Dreamweaver program and open the page to be edited.
2. Step 2

   From the Edit menu, choose Replace. The Replace dialog box will pop up.

3. Step 3

   Choose the replacement option you want from the menu. Find in Current Document replaces all instances of your search term in the current (open) document; Current Site replaces all instances in the entire site; and Folder replaces all instances in a selected folder.

4. Step 4

   Select what will be replaced from the Find What menu. Replace Text replaces only the text on the page (ignoring the HTML); HTML Source searches for a specific string of text and commands from the source code; Advanced Text searches both text and HTML, or either one; and Tag allows you to designate specific tags to be replaced.

5. Step 5

   Select Replace to replace each instance separately; choose Replace All to replace all instances at once.

6. Step 6

   Save the page when finished.

Once you learn Dreamweaver, you can make your own web page for your business, reach your online audience, promote your business through a domain name and put it on your business cards.

1. First, make a root folder. Do this by creating a folder within your hard drive and not in the software program Dreamweaver. This folder will be where you keep all of your sources and information.
2. Step 2

   Create four separate folders within this folders. Give them folder names such as images, other, pages and flash. You will have information within each of these folders.

3. Step 3

   Go into your Dreamweaver software and click on the section HTML. Save it within your root folder and name is home page. This is the formatting you will use for your home page.

4. Step 4

   Go into Dreamweaver and start adding tables. These tables will help you add buttons and images to your webpage. Click on “Insert” and start building tables. You will have to play with the program a bit before you know how to use everything.

5. Step 5

   Start adding pictures and Flash text if you want. Do this by clicking insert in Dreamweaver and adding an image. Once you click on “image,” you will then browse for the photo you want and insert.

6. Step 6

   Change the colors of your pages and background pages by going to modify in Dreamweaver. You will be off to the right start now with Dreamweaver; always remember to save your work to your root file.

A banner allows you to advertise your product, service and brand, or it can just be used to call attention to an important message on the Internet. If you own a business with a website or just need an eye-catching addition to your personal webpage, a banner is an ideal solution because you can include the text and any pictures needed to reach your objectives. Using Adobe Dreamweaver, you can create your own banner to display on your website.

1. Launch Adobe Dreamweaver. Create a new page by selecting “Blank Page,” “HTML” and “<none>” in the dialog box. Click “Create” to continue.
2. Step 2

   Select “Tables” under the “Insert” menu in the design window.

3. Step 3

   Enter a “1″ in the “Rows” and “Columns” text fields. Enter values for other table choices like the “width” and “border thickness” as desired. Click “OK” when done to generate the table, which displays in the design window.

4. Step 4

   Click “Image” from the “Insert” menu to add a picture to your banner. Position this image by clicking on it and choosing an option, such as “Top,” from the “Align” menu on the “Properties” inspector. Click “Optimize” in the “Edit” section to enhance the quality of your graphic for the Internet.

5. Step 5

   Type your banner text directly in the table. Format the text using the menus and buttons, such as “Size” and “Bold,” in the “Properties” inspector.

6. Step 6

   Click “Bg color” in the “Properties” inspector to add a background color to your banner. If you chose to add a border to your banner, click “Brdr color” to add color to the border outline.

7. Step 7

   Click the “Design” tab on the workspace to preview your banner design, then select “Save As” from the “File” drop-down menu.

Having a resume posted online is powerful tool when searching for a new position. Many Internet career sites now offer the option of displaying your Web resume on your profile. This a convenience for a prospective employer, who gets instant access to your data. Adobe’s Dreamweaver application–a HyperText Markup Language (HTML) editor–enables you to create your own resume Web page quickly, without the need for coding knowledge or experience.

1. Launch your Dreamweaver application and select “New” under the “File” drop-down menu to open the “New Document” dialog window.
2. Step 2

   Click the “HTML” option under the “Page Type” column and select a one-column choice, such as “1 column fixed, centered,” from the “Layout” area. This type of template works well for resume creation and is formatted with Cascading Style Sheets (CSS) for ideal presentation on the Web. Click the “Create” button when ready.

3. Step 3

   Click and drag your mouse over the “Main Content” heading and type in your name. Press the “Return” or “Enter” button on your keyboard and enter your contact information, including your address and phone number. Additionally, type and highlight your email address, click the “Email Link” button on the “Insert” menu and follow the prompts to enter your email address so readers may conveniently email you from this link.

4. Step 4

   Choose the “Heading 3″ option from the “Format” drop-down menu on the “Properties” inspector and enter a heading such as “Profile.” Press the “Return” or “Enter” button and type in the introductory text of your resume.

5. Step 5

   Repeat Step 4 to create additional sections like “Experience” and “Education” and enter the relevant content.

6. Step 6

   Use the menus on the “Properties” inspector to choose the desired styling of each section including alignment, typeface and font size.

7. Step 7

   Save your file and click the “Preview in Browser” option under the “File” menu to view your resume page in a Web browser.

Rollover images are a great way to add creativity to a static web page. In most cases, when designing your web page, you are left to the mercies of writing JavaScript code in order to create a functional rollover image. Thanks to Dreamweaver, inserting rollover images into your web page becomes a simple task that even the most novice web designer can achieve.

1. From the menu, select “Insert” > “Image Objects” > “Rollover Images.”
2. Step 2

   Provide a name for your rollover image in the “Image Name” section.

3. Step 3

   From the “Original Image” field, select an image that will serve as the picture viewers see before rolling their mouse over.

4. Step 4

   From the “Rollover Image” field, select the image that will serve as the picture shown once a viewer’s mouse is rolled over.

5. Step 5

   Insert text into the “Alternate Text” field which will appear when a viewer’s mouse rolls over the image. This field is optional and is not required in order to create a rollover image.

6. Step 6

   If the image is a part of the navigation menu, use the browse box to select the web page where the image leads to. You also have the ability to type in specific URL addresses into this field.

7. Step 7

   Select “Ok” to finalize the creation of your rollover image.

If you use the JavaScript scripting language to perform actions like controlling your navigation menu or online form, you can end up with a lot of code in your document that slows the page load time. Instead of this code, you can use a link in your script. This will limit your code lines but allow you to still enjoy the functionality of JavaScript in your page elements. Using Adobe’s Dreamweaver application, you can quickly call up your JavaScript file by creating a hyperlink.

1. Launch your Adobe Dreamweaver application and create a new page or open an existing one.
2. Step 2

   Place your cursor in the code view where you want to call up the JavaScript file.

3. Step 3

   Click the “HTML” option from the “Insert” drop-down menu and then go to “Script Objects” and select “Script.”

4. Step 4

   Choose an option like “text/x-javascript” in the “Type” drop-down menu and then click the folder to select the JavaScript file. This action automatically generates the hyperlink in your page code. Click the “OK” button when done.

5. Step 5

   Click “Save” or “Save As” under the “File” menu to save your document.

Not all websites are meant to be public, and even an open, publicly accessible web page can still have a “members only” section. The process of creating a password-protected section of your website can seem daunting, but Dreamweaver 8, the web design application, offers a series of functions that make the process a bit easier. Although Adobe has released several new versions of Dreamweaver since Dreamweaver 8, the program is still perfectly capable of creating a login page. While it is still best left to people comfortable using the program, creating a personalized login page is not nearly as difficult as it may seem at first.

Designing Login Form

1. Step 1

   Launch Dreamweaver 8.

2. Step 2

   Create a new file, or open an existing project.

3. Step 3

   Open the “Insert” menu and click “Form” to place a form in your document.

4. Step 4

   Open the “Insert” menu, select “Form” and select “Text Field.” Create two text fields in the form you just created: one for the user name, and one for the password.

5. Step 5

   Open the “Insert” menu, select “Form,” and select “Button” to add a submit button to your login form. Label the submit button with something like “Submit,” “Log in” or “Click here to continue.”

6. Step 6

   Add text labels next to the user name and password fields, to make the login process more user-friendly.

Creating Login Mechanism

7. Step 1

   Create a database of valid login information using a database program, such as Microsoft Access. The database should consist of a table containing two columns: valid user names and valid passwords.

8. Step 2

   Open the Server Behaviors panel. If the panel is not present, open it by going to the “Windows” menu and clicking “Server Behaviors.”

9. Step 3

   Click the “+” button, open the “User Authentication” sub menu and select “Log-in User.” This will open the “Log-in User” window.

10. Step 4

    Select the login form that you created earlier.

11. Step 5

    Select the page that you would like the user to be redirected to if logging in successfully, as well as the page that you would like the user to be redirected to if the person fails to enter a valid user name and password.

12. Step 6

    Select the database containing user information. Specify which columns contain valid user names and passwords.

Adobe CS3 version of Dreamweaver is a highly used HyperText Markup Language (HTML) text editor that allows you to create Web pages for the Internet. Whether you are a beginner or an experienced Web designer, you may choose this program because of the extensive page-building tools that allow you to construct a professional-looking website on your own. If you have your own copy of CS3, you can create your own Web pages even if you do not have HTML knowledge.

1. Launch your Adobe Dreamweaver CS3 application and select “New” under the “File” menu.
2. Step 2

   Choose the type of page you want to create using the dialog box that automatically appears. If you want a blank HTML page that does not have a set layout, select “Blank Page” on the left, “HTML” in the “Page Type” column and “<none>” in the “Layout” column. Otherwise, select a page template from the “Layout” column by clicking on each option, such as “1 column elastic, centered,” and viewing the visual preview with description on the right. Each style comes with a set number of columns and behaviors, such as the page stretches when a viewer expands a Web browser, so that you can just focus on adding your own content. Click the “Create” button when ready.

3. Step 3

   Add your work to your Web page. If you chose a blank HTML page, begin typing in the blank design view page, and, with a template, double click the placeholder text to enter your own. Next, style the text by selecting “Properties” from the “Window” drop-down menu. Click and drag your mouse over the content and click the buttons on the “Properties” toolbar to choose enhancements like font, size and color.

4. Step 4

   Insert your digital images (if preferred) by placing your cursor in the design window where you want your photos to appear and selecting the “Image” option under the “Insert” menu. Select a file from the dialog box and click “Choose” when done. Further, you can edit the size of this inserted photo by selecting it, clicking a spot on the bottom right corner or the side and dragging your mouse to make it smaller or larger.

5. Step 5

   Preview your Web page by selecting the “Preview in Browser” option under the “File” menu and then choose a browser option, such as Safari or Firefox, to view this on. If you are happy with the results, name and save your Web page file by clicking the “Save As” option under the “File” menu and then click the “Save” button when finished.

6. Step 6

   Place your finished Web page on your Web host server in the same file or directory that you use to store your other website files to publish your Web page to the Internet.