TeachUcomp, Inc.

P: 877-925-8080

  • HOME
  • VIDEO COURSES
    • All-Access Subscriptions
    • Business Licensing
    • Course List
      • Adobe
        • Acrobat
        • Lightroom Classic
        • Photoshop
        • Photoshop Elements
      • Crystal Reports
      • Employment Skills
        • Interview Skills
        • Resume Skills
      • For Lawyers
        • Excel for Lawyers
        • Outlook for Lawyers
        • QuickBooks for Lawyers
        • Word for Lawyers
      • HTML
      • JavaScript
      • Microsoft Office
        • Access
        • Excel
        • Microsoft Office Suite
        • OneNote
        • Outlook
        • Outlook on the Web
        • PowerPoint
        • Publisher
        • Word
      • Microsoft Project
      • Microsoft Teams
      • QuickBooks Online
      • QuickBooks Pro
      • Sage
        • Peachtree
        • Sage 50
      • SQL
      • Windows
    • Video Course Options
  • SUBSCRIPTIONS
  • MANUALS
    • Adobe
      • Acrobat
      • Lightroom Classic
      • Photoshop
      • Photoshop Elements
    • Crystal Reports
    • For Lawyers
      • Excel for Lawyers
      • Outlook for Lawyers
      • QuickBooks for Lawyers
      • Word for Lawyers
    • HTML
    • JavaScript
    • Microsoft Office
      • Access
      • Excel
      • OneNote
      • Outlook
      • Outlook on the Web
      • PowerPoint
      • Publisher
      • Word
    • Microsoft Project
    • Microsoft Teams
    • QuickBooks Online
    • QuickBooks Pro
    • Sage
      • Peachtree
      • Sage 50
    • SQL
    • Windows
  • REFERENCE CARDS
    • Adobe
      • Acrobat DC
      • Lightroom Classic CC 2018
      • Photoshop 2021
      • Photoshop 2020
      • Photoshop CC 2018
      • Photoshop Elements 2022
      • Photoshop Elements 2021
      • Photoshop Elements 2020
      • Photoshop Elements 2019
      • Photoshop Elements 2018
      • Photoshop Elements 15
    • Google
      • Google Classroom for Teachers
      • Google Docs
      • Google Drive
      • Google Forms
      • Google Sheets
      • Google Slides
    • Microsoft Office
      • Microsoft Office 365
        • Access for Office 365
        • Excel for Office 365
        • Microsoft Office 365
        • Outlook for Office 365
        • PowerPoint for Office 365
        • Publisher for Office 365
        • Word for Office 365
      • Microsoft Office 2021
        • Access 2021
        • Excel 2021
        • Microsoft Office 2021
        • Outlook 2021
        • PowerPoint 2021
        • Publisher 2021
        • Word 2021
      • Microsoft Office 2019
        • Access 2019
        • Excel 2019
        • Microsoft Office 2019
        • Outlook 2019
        • PowerPoint 2019
        • Publisher 2019
        • Word 2019
      • Microsoft Office 2016
        • Access 2016
        • Excel 2016
        • Microsoft Office 2016
        • OneNote 2016
        • Outlook 2016
        • PowerPoint 2016
        • Publisher 2016
        • Word 2016
      • Microsoft Office 2013
        • Excel 2013
        • Microsoft Office 2013
        • OneNote 2013
        • Outlook 2013
        • PowerPoint 2013
        • Word 2013
      • Microsoft Office for iPad
        • Microsoft Office for iPad
    • Microsoft Teams
      • Microsoft Teams
    • QuickBooks Online
      • QuickBooks Online
    • QuickBooks Pro
      • QuickBooks Pro 2022
      • QuickBooks Pro 2021
      • QuickBooks Pro 2020
      • QuickBooks Pro 2019
      • QuickBooks Pro 2018
      • QuickBooks Pro 2017
      • QuickBooks Pro 2016
      • QuickBooks Pro 2015
      • QuickBooks Pro 2014
    • Sage
      • Sage 50 2019
      • Sage 50 2018
    • SQL
      • SQL
    • Windows
      • Windows 11
      • Windows 10
  • STICKERS
    • Chrome OS
      • Chrome OS for Chromebooks
    • Mac OS
      • Mac OS Monterey-Mojave
    • Microsoft Office
      • Excel and Word 2021-2016 and 365
    • QuickBooks Desktop
      • QuickBooks Desktop 2022-2015
    • Windows
      • Windows 11 and 10
  • SUPPORT
    • Company
      • About Us
      • Blog
      • Contact Us
      • Our History
      • Our Philosophy
        • Customer Service
        • Mission
      • Policies
      • Testimonials
    • Contact Us
    • FAQ
    • Help
    • Lost Password
    • Register a Product
  • LOGIN
    • Manage My Account
    • Member Login
    • My Courses
  • CART
Shop Now

Dreamweaver Training: Working With Images

by Keeley Byrnes / Friday, June 06 2014 / Published in Dreamweaver, Latest

 

 

 

 

 

 

 

 

Using Images in a Web Page

Whatever type of website you are planning, images will undoubtedly play a big role in helping to get your ideas across.

It is important to remember that Dreamweaver isn’t an image editing program. This means that you will have to prepare some of your images beforehand, using another program like Adobe Photoshop, so that they can be inserted into your web pages.  Making sure that your images are of the correct file type and size will help to ensure that your website functions correctly, that you stay within bandwidth requirements, and that your images look as good as possible.

It’s a very good idea to sit down with pen and paper beforehand, and make a list of all of the images that your website will need.  As you start to consider banners, buttons, and other visual elements, you may realize that you will need to prepare more images than you originally thought.  You can save yourself a lot of frustration by carefully planning and preparing your images. That way, when it comes time to build your site, you won’t have to stop again and again to create the image files that you will need. Planning your images beforehand also allows you to size them exactly to your needs, which helps to give your finished website a professional, polished look.

 

 

Image File Types

Although there are several different image file types that you can upload to your web pages, the two most common are GIF and jpeg images.  GIF images were developed by CompuServe, and GIF stands for Graphics Interchange Format.  GIF images contain a compression algorithm that reduces the size of a GIF file.  GIF files, however, do not contain any dpi information for printers, and they can only display 256 colors.  GIF images are best used for non-photo-based graphics, buttons, and rollover images.

Jpeg images are much better suited for displaying photos, as they can display millions of colors. Jpeg files tend to be somewhat larger than GIF files, but the size versus quality ratio is adjustable when you save a jpeg using image editing software like Adobe Photoshop.  This means that, if you are trying to stay within a certain file size, you can save the image as a jpeg and adjust the quality of the image to suit your needs. Jpeg images also contain dpi information for printers.

One thing to keep in mind, especially if you use image-editing software a lot, is that “TIFF” files will not be displayed on most browsers. It is best to avoid the “TIFF” file format when designing your web page.

 

Commonly Used Web Images

In addition to the images that you plan to insert into your web pages as featured content, there are several other common images that you may have to prepare in order to build a functioning website with Dreamweaver.  Here are a few of them:

Web Banners: Although web banners are usually associated with advertising, many people like to develop a banner design that appears on every page of a website.  This technique of putting the same banner on every page gives website continuity, and the banner can also be used as a “Home Page” button.

Background Images: When designing your web pages, you have the option of having a solid-colored background, or you can use a background image.  Certain image-editing software, such as Adobe Photoshop, can help you create seamless background images that will repeat endlessly.

Button Images: Buttons are small images that viewers use to navigate the different pages of your web site.  They are often used in conjunction with rollover images to create “rollover effects.” There are a variety of free buttons available for download on the Internet, or you can use image editing software to create your own.

Rollover Images: Rollover images are the images that appear when your viewer moves the mouse above an image that has a rollover effect.  In this case, you can see that when I hover the mouse over the different page buttons in Dreamweaver’s “Live View,” the mouse arrow changes into a pointing hand and the image of the button changes color.  When designing rollover images, it is a good idea to keep them similar to the image that they replace.

Thumbnail Images: If you plan to include an image gallery in your website, you’ll need to prepare thumbnail images.  Thumbnail images are the smaller images that a user clicks on to see a bigger version of the same image.  Although it is possible to resize images within Dreamweaver, it is very easy to lose your original image by doing this.  It is a much better idea to prepare your thumbnails as separate image files that you size and save using image-editing software before starting to build your website in Dreamweaver.

 

Inserting Images Into a Web Page

As you’ve heard several times now, Dreamweaver often gives you many different options for accomplishing the same task.  This is also true when it comes to inserting images into a web page.  For the next few lessons, we’re going to focus on using the “Insert” panel and the “Properties Inspector” panel to accomplish most of what we need to do with images.

Let’s insert an image into a web page.  Start with a new, blank page. Dreamweaver will insert the photo wherever you place the blinking cursor. In this case, the photo is the first element of the page, so you don’t have to position the cursor.

Click on “Image” in the “Insert” panel. This will open up the “Select Image Source” dialog box.  Use the downward-pointing arrow found to the right of the “Look In” text field and locate the image you want. Click on the image to highlight it, and then click “OK.” Depending on Dreamweaver’s preferences, a pop-up box may alert you about document-relevant paths.  If you see this box, click “OK.”

The next thing you will see is the “Image Tag Accessibility Attributes” dialog box.  You will see an “Alternate Text” text field. You don’t have to put any information in here, but it’s a good idea to use a few words to describe your photo.  This description will be displayed if your image cannot be displayed by a web browser. The description is also read aloud when visually-impaired people use special software to “read” web pages. I’m going to just type “small carved turtle” here, and click “OK.” The dialog box will close, and the image is now on the web page.

Tagged under: class, course, dreamweaver, help, how-to, html, images, manual, programming, training, tutorial, web, web design, website

About Keeley Byrnes

Keeley is our Director of Marketing and has been with TeachUcomp since 2010. Keeley manages all aspects of our Marketing Department, acts as liaison for our reseller and affiliate partners and also authors courses in software and taxation.

What you can read next

Use a Top 10 AutoFilter in Excel - Instructions: A picture of the “Top 10 AutoFilter” dialog box in Excel.
Use a Top 10 AutoFilter in Excel – Instructions
Reordering, Editing, Hiding, and Deleting Teams - Instructions: A picture of a user unhiding a hidden team in Microsoft Teams.
Reordering, Editing, Hiding, and Deleting Teams – Instructions
Create Columns in Word - Instructions and Video Lesson: A picture of a user adding columns to a Word document by using the “Columns” dialog box.
Create Columns in Word – Instructions and Video Lesson

 

Recent Posts

  • A picture showing how to use comments in HTML code.

    Comments in HTML – Instructions

    Overview of How to Add Comments in HTML        ...
  • A picture showing how to use the Pre tag in HTML.

    Pre Tag in HTML – Instructions

    Overview of How to Use the Pre Tag in HTML     ...
  • A picture showing the Start Personalization settings that let you customize the Start menu in Windows 11.

    How to Customize the Start Menu in Windows 11 – Instructions

    Overview of How to Customize the Start Menu in ...

Categories

Archives

  • GET SOCIAL

© 2001-2022 Copyright TeachUcomp, Inc. All rights reserved.

TOP
Sale! $49 All-Access 0 Days 8 Hours 26 Minutes 8 Seconds      $199 $49 Entire Library!
See Deal