Member Avatar for littlemt

Hi,

I have a web page created in Dreamweaver CS4. I have an image header that I have made work through CSS.

The header looks great in the browser and in live view.

Can't see it at all in Dreamweaver design view.

I want to make a hot spot, but can't when I can't see it.

I'm sure there is a super easy solution...sorry, but I have been trying to figure it out for days.

Here is the code if that helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="/favicon.ico">
<title>Sweet Little Pig Design - Full Service Web and Print Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="../main.css" rel="stylesheet" type="text/css" />
<div id="header">
<div id="in_header"><img src="images/clear_head.png" border=0 />
</div>

</div>
</head>

<body>

<div id="container">
<div id="in_container">

<div id="nav">
<ul id="navbar">
	<li> <a href="print.html"> Print </a></li>
    <li> <a href="web.html"> Web </a></li>
    <li> <a href="photo.html"> Photography </a></li>
    <li><a href="stuff.html"> Other stuff </a> </li></ul>
</div>
<div id="flash_content">Here is where I put the slide show</div></div>
<div id="footer"><b>Sweet Little Pig Designs<br />
p: (206) 227-3380 <br />
<a href="mailto:info@mywebsite.com">info@mywebsite.com</a></b>

</div>
</div>



</body>
</html>

Thanks for reading.

Littlemt

Edited by peter_budo because: Keep It Clear - Do wrap your programming code blocks within [code] ... [/code] tags
  • 6 Contributors
  • 10 Replies
  • 980 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by smrprojects

Dani AI

Generated

Short version: the header div was placed inside the HTML <head>, so it never appears as page content in Dreamweaver’s Design view. The <head> is for metadata (title, links to stylesheets, meta tags); visible page elements must live inside the <body>. Moving your header markup into the body (as showed) is the correct, standards-compliant fix. (developer.mozilla.org)

To add a clickable hotspot, use Dreamweaver’s image‑map workflow while in Design view. Select the image, open the Properties inspector (expand the full properties), give the map a name, then use the rectangle/circle/polygon hotspot tools to draw areas and assign links, targets and alt text. Dreamweaver inserts client‑side image maps in the HTML and the image‑map tools only work in Design view. ()

If elements still look missing in Design view, toggle how DW applies CSS: View > Design View Options > Style Rendering > Display Styles. Design view is an older, limited renderer and may not show advanced CSS or media‑query results; use Live view or Preview in a browser for an accurate check, and validate your HTML (unclosed or misplaced tags will break what Design view shows). Thanks to and for pointing toward view settings. (community.adobe.com)

Quick checklist: 1) move header into <body>; 2) open Design view and use the Properties inspector to create an image map; 3) toggle Display Styles or use Live view / browser preview for final verification.

Recommended Answers

All 10 Replies

Member Avatar for Kraai

Hi, I think there is a setting in Dreamweaver you must set to view external images in design view, something like: VIEW | Display External Files?

Hope this helps!

Member Avatar for littlemt

Hi Kraai,

Thanks so much for your help. I tried your suggestion of selecting/deselecting of the "display external file" option. It didn't work. Nothing seemed to happen.

Any other suggestions anyone?

Littlemt

Member Avatar for chrisbrandon

I may be off base on this. I am still new to DW and css, but this is what I see.

The head area is used by the browser. Your "header" needs to appear within the body tags. Something like this...

...
</style>
</head>

<body>
<div id="container">
  <div id="header"><!-- beginheader name="header"--><img src="../assets/free.jpg" width="960" height="147" alt="free_in_brampton_banner" /><!-- "endheader name="header--></div>
  <div id="menu_sidebar"><ul>
...

This is a small snippit of code, I hope it is easy to understand.
I am not sure if this is the correct method, (I invite a more experienced coder to comment),but it does work for me.

Edited by peter_budo because: Keep It Clear - Do wrap your programming code blocks within [code] ... [/code] tags
commented: good spotting +3
Member Avatar for littlemt

AH HA!! Thanks so much chrisbrandon. That fixed the problem.

Thanks so much!

Littlemt

Member Avatar for chrisbrandon

Thank you for letting me know. As stated, I am still learning. We newbies need to help each other. I find helping others solve problems helps me perfect the craft.

Member Avatar for littlemt

I agree chirsbrandon! Thanks again for your help. I was stuck on that for days :)

Member Avatar for Rosa2303

i also agree with litt

Member Avatar for smrprojects

In Dreamweaver Go to View, Style Rendering and select Display Styles, then you can see preview of your page in design view

Member Avatar for edith135

I also agree with you ....chrisbrandon...... you take a good sugg.

Member Avatar for smrprojects

Ya Chris is right header div needs to be out of head and between body..:), sorry didn't check the html code earlier, so posted different solution earlier..

In Dreamweaver Go to View, Style Rendering and select Display Styles, then you can see preview of your page in design view

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.