Highlighted

DREAMWEAVER QUESTIONS

Community Beginner ,
Dec 23, 2017

Copy link to clipboard

Copied

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:

DREAMWEAVERPROBLEM.jpg

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

CC-localsite.jpg

<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.

PShop-4up.jpg

Views

189

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

DREAMWEAVER QUESTIONS

Community Beginner ,
Dec 23, 2017

Copy link to clipboard

Copied

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:

DREAMWEAVERPROBLEM.jpg

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

CC-localsite.jpg

<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.

PShop-4up.jpg

Views

190

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 1
Community Beginner ,
Dec 23, 2017

Copy link to clipboard

Copied

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,

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

  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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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

CC-localsite.jpg

<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.

PShop-4up.jpg

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 24, 2017 0