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
1 Correct answer
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.
4
Replies
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: 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,
- Your image cannot be found by Dreamweaver, most likely because you have not created a site definition
- 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
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.
AdChoices