Skip to main content
K
Karl_Starke
Participant
December 23, 2017
Answered

DREAMWEAVER QUESTIONS

  • December 23, 2017
  • 1 reply
  • 667 views

Hello: I have put up three websites, and I am starting another one. I have not done any markup coding in about four years, so I am rusty.

Way back then, I used the HOTMETAL 5 HTML coding program, which worked well.

I have Adobe CS3, including AI CS3, so I decided to try DreamWeaver. I create .JPG files in AI, and I use those as the backdrops for web pages.

So I did a VERY BASIC code page for my index.html, with a .jpg face. This is what happened when I tried to display it, in DreamWeaver:

As you can see, the program DOES NOT DISPLAY the .jpg file......WHY?....WHY?.....WHY?

I also select areas of the .jpg file to make them clickable. HOW DO I DO THIS in Dreamweaver? It's obviously impossible, if the ,jpg file

will not even display.

This is VERY frustrating, as I can not even get off of the ground here....PLEASE HELP!

THANK YOU VERY MUCH!!!

Carl Starke

    This topic has been closed for replies.
    Correct answer Nancy OShea

    1) Defining the local site folder is a critical 1st step in creating projects.  Site > New Site > example, C:\MyTestSite.

    <I create .JPG files in AI, and I use those as the backdrops for web pages.>

    2) Images must be optimized for the web beforehand and saved in an sRGB color mode.  CMYK color is for print only.  In legacy Photoshop, use Save For Web and a quality setting that yields a smaller file size than the original.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 23, 2017

    Hot Metal Pro.  Oh gosh, that's a blast from my distant past .   I beta tested Hot Metal Pro back in the 90's.

    A lot has changed in web standards since then.   And  CS3 is no spring chicken either.  It's 10+ year old legacy software built when everybody used the same or similar screen sizes.  That's not how the web works anymore.   More people use mobile and tablet devices now.  So modern web pages must perform well on ALL display sizes.  That's called Responsive Web Design

    If you can work with code, you could get up to speed on everything you need to know in a couple of weeks.  If you can't work with code, it will take much longer to learn HTML5, CSS and CSS Media Queries.

    Below is a quick page made with a CSS background image, a container div with text and a foreground image.

    The code I used follows.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>HTML5 Starter Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    body {

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

        font-size: 3vw;

        background: #CCC url(https://placeimg.com/500/500/nature) no-repeat center center;

        background-size: cover;

    }

    .container {

        width: 80%;

        margin: 0 auto;

        padding: 2%;

        background: rgba(255,255,255,0.7)

    }

    img {

        max-width: 100%;

        vertical-align: baseline;

        display: block

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>My Awesome Website</h1>

    <h2>Some pithy slogan</h2>

    <img src="https://placeimg.com/400/300/nature" alt="placeholder">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quibusdam ratione eum ducimus delectus officiis placeat, sint facere quos velit tempora excepturi, facilis quidem dolorum nemo voluptatem consequatur aperiam vitae.</p>

    </div>

    </body>

    </html>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    K
    Karl_StarkeAuthor
    Participant
    December 24, 2017

    Nancy: Thank you for your response. Any ideas on the two questions I put up in my original post? I know what you mean. i just got another book on HTML, to get me up to speed. I am not a professional coder. I also did some work in BASICA....WAY BACK WHEN. You are correct.....Back then everybody had 4x3 monitor screens. Now, I have a 27" monitor. It's not 4x3, either. I figure you will never go wrong. if you start from the center of the screen.....

    Thanks again,

    Carl S,

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 24, 2017
    1. Your image cannot be found by Dreamweaver, most likely because you have not created a site definition
    2. To link the image, click the image, make sure img is higlighted and place your link in the input area

    In case you are interested, here is the code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    div.container {
    max-width: 800px;
    margin: auto; /* centers the container */
    }
    img {
    display: block;
    width: 100%;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <img src="http://lorempixel.com/400/200" alt="">
    </div>
    </body>
    </html>

    As a side note, have a look at the style rules where I have centered the container. Also see what I have done to make the image fit the container. This is not the only way to center an image. Have a look at CSS Layout - Horizontal & Vertical Align

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices