DREAMWEAVER CS4 LAYOUT (DESIGNED IN PHOTOSHOP)..

Hi everyone,
Just wondering if anyone can help me with this... checkout this website of mine (Im a guitar teacher) http://www.jlgtuition.com
(jpeg exported from photoshop used as background design) click here advice on how to lay this out again (site needs updated flash links dont work on android tablets/phones etc...) If I were to go for the same layout and design would it be best to slice it in photoshop and uss CSS for the layout (using divs) OR maybe as I had tried without much success use divs in CSS and draw (as in the old way) layers and place text that way... Problem there was in iexplore it jumps to the left compared to firefox where text was staying static...it needs to expand with the various browers. Also was looking rough on iphones as well which I presume were using Safari...?
What do yo think is the best solution..Im not great with CSS and prefer (if I can) to use Design option in DW to layout the pages in DW... Any help much appreciated...
Cheers James

There's a lot of really bad information on YouTube. You get what you pay for.
You're right about tables. That's the old school way of doing things. Responsive Web Design is all based on CSS Media Queries -- different layouts for different screen widths (mobile, tablet & desktops).
Start learning CSS and it's relationship to HTML. Coding skills are essential. Bookmark these sites.
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
Creating your first web site in DW CC-
http://www.adobe.com/devnet/dreamweaver/articles/CS6/first_website_pt1.html
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Nancy O.

Similar Messages

Dreamweaver cs4 layout issues

Hi
I am using Dreamweaver CS4. When i am designing my web page, I get a totally different look when I am in design view and when I switch to live view. Can you tell me why is this???

It's because Design view is only a rough approximation and shouldn't be used as a final word for how the page will look in the browser. Live view is an actual browser (WebKit = Safari), and should render the page as it would look, in Safari at least.
If you are seeing a big difference between the two, however, then it's likely you have some underlying coding issues. Does your page validate here?
http://validator.w3.org

Dreamweaver CS4 Layout

Why, when I lay things out in Dreamweaver, everything looks bunched up, but it looks normal when tested in Internet Explorer?
Here's how my Dreamweaver screen looks...
Here's how my Internet Explorer test screen looks...
Is there a DreamWeaver setting that I'm missing? I'd like to be able to edit everything and view it the same way in Internet Explorer.
Help!
Thanks,
Jared

Hi Murray... I know the rules and I apologize for not posting the code...
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body id="siteBackground">
<img src="images/header.png" width="1000" height="164" id="header" />

<img src="images/dogcare.png" alt="Dog Care" width="246" height="70" id="dogcare">
 
 
<img src="images/catcare.png" alt="Cat Care" width="243" height="70" id="catcare">
 
 
<img src="images/everybody_else.png" width="243" height="82" id="everybodyelse">
 
 
 
 
 
 
 
 
 
 
 
 
<img src="images/footer.png" width="1000" height="170" id="footer" />
</body>
</html>
Style Sheet
#dogcare {
 margin-right: 153px;
 float: right;
#catcare {
 margin-right: 153px;
 float: right;
#everybodyelse {
 margin-right: 153px;
 float: right;
#siteBackground {
 background-color: #352E28;
#footer {
 margin-bottom: -30px;
#header {
 margin-top: -18px;
Again, for reference, here is the DreamWeaver layout...
...and here's how it looks when tested in Internet Explorer...
Thanks, Murray!
-Jared

CS4 Premium Design to CS5 Standard?

Hi,
I currently have CS4 premium design package I got for my school classes.
Now they have updated to CS5.
The only problem is I know I have to update the suite because it's under a student license.
However, I want to update it to CS5 standard rather than CS5 premium design. Is it still possible to keep CS4 dreamweaver?
If I uninstall CS4 premium and install CS5 Standard can I reinstall Dreamweaver CS4?
Also, I'm not sure if my computer will work with it I know I have enough RAM but here are my computer specs:
Windows Vista Home Premium (Service pack 2)
Processor: Intel(R) core (TM)2 cpu T7600 @2.33 GHz 2.33GHz
Memory RAM: 4GB
System type: 32-bit
Graphics card:
NVIDIA GeForce GO 7950 GTX
core clock: 575MHz
Memory clock: 600MHz (1200 MHz data rate)
Memory interface: 256-bit
Dedicated Video memory: 512 MB
Total available graphics: 1919MB
I requested the CS5 Design Standard under student licensing and I still have a few days to send them my proof, I just need to make sure I can still use my Dreamweaver CS4 along with the Photoshop and Illustrator CS5 or if I have to get the premium upgrade instead and if my computer can handle the programs.
Thank you,
Amanda

Thank you!
=)

How Do I Import A Photoshop CS4 Template into Dreamweaver CS4

Ok. Here's the deal, my friend and I spent alot of time working in Photoshop to come up with a nice template. He's even done all the coding to animate the buttons for standard, hover over, and click and all that. It's really cool, the buttons slide back and "lock" into place dependent upon which page you're on. However, I want to take all of that information and plug it into my website without loosing the button functionality. Unfortunately, every time I try to put the photoshop web template into Dreamweaver, it always converts it into an image. So, how do I add my complete photoshop web template and all it's functionality into Dreamweaver?

I'm afraid Photoshop is a graphics program ill suited for generating good HTML and CSS code. Use Photoshop to create your images only. Use DW to build your HTML, CSS and menus.
Have a look at this tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
Part 1 --
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Part 2 --
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Design View Issue Dreamweaver CS4 - Taking forever to load design view

I am having an issue where my site takes literally almost a full day to load in design view. Once it is loaded everything works seemlessly but once I close down Dreamweaver and reopen it, I have to wait another day to get to design view of my site. All files open just fine in code view.
I have deleted the Dreamweaver CS4 cache folder, completely formatted my drive and reinstalled creative suite. I have also validated my code on W3c and everything checks out fine.
The majority of my site is based off of a template, but even when I remove all the template references in the html files from Notepad I am still having the same issue. My site renders fine and quickly however on Explorer, Firefox, Chrome, and Safari.
When loading any other site off the web into Dreamweaver I do not run into the problem so there must be something wrong with how my site is set up. Either the Template file is no good or somewhere else I am falling short. Can someone, please, please, please ( I am begging) help me figure out what is going on here.
My index file is located at - http://www.thebluedot.net/index.html and the template file is located at - http://www.thebluedot.net/Templates/index.dwt
I have searched high and low and even made a post on this same topic about a month ago but never came up with a resolution to my issue. I had given up on finding a solution to this problem for some time, but I really need to figure out where I am going wrong here!
Additional Details -
I am running - Windows Vista Ultimate on a Core 2 Processor with 12 GB of Ram & Solid State Hard Drive. Everything on my system runs super smoothly except loading my site in Dreamweaver CS4 design view.
I really appreciate any help you can provide.

I have used CS2 Adobe GoLive to create and manage a website (pro-prosperity.com). Now, I have CS4 Dreamweaver. I got a new site set up on Dreamweaver using the site management facility. I then have the contents of website available locally on Dreamweaver. I can edit files. But the main home page, index.html, is not displaying on design view mode for editing, although it displays everything on live view mode. I have struggled for days and am not getting any difference in attributes of index.html and another .html that is displaying fine on design view and is editable.
I am really lost and am begging for any help. Can you, for example, copy the home page from pro-prosperity.com and display on design view and edit it? Please tell me what is in this file that is troublesome. Thanks.
The first thing you should do is to make sure that this feature is turned on (it's off by default):
View > Code View Options > Highlight Invalid Html
It's not perfect, but it will notify you of some problems. In Code View, there are many problems highlighted. Some of them don't make sense, but are triggered because of a problem with a parent tag.
Be sure to make a backup copy of your file before doing the next step. Close your page. Go to Preferences > Code Rewriting, and turn on "Fix invalidly nested and unclosed tags", "Remove extra closing tags", and "Warn when fixing or removing tags". Click OK, then re-open your page. The messages in the dialog to tell you what was changed. This allowed me to see your page in Design View (I am using CS5).
Note: I suggested that you reset your preferences to turn off those 3 settings as they can cause problems with some markup.
In the long term, I suggest that you avoid nesting tables wherever possible.
Hope this helps,
Randy

Unable to Uninstall Photoshop CS4 and Dreamweaver CS4

it's been a couple of days since i tried out Photoshop CS4 and Dreamweaver CS4 to see how they compare to the CS3 versions, it worked fine and all till suddenly it stopped working, so i been trying to uninstall/reinstall to get it working under the free trial limit i still have left (27 days as of this writing) it still will not work.
Sometimes i would install Photoshop/Dreamweaver and say an error occurred and some components were unable to install and would be unable to load the file even after doing what the instructions say...
Same goes for when i try to uninstall both Photoshop/Dreamweaver, i would try to uninstall and would still remain in my program files...
I am completely stumped on what to do, i can't even re-install photoshop/dreamweaver cs3 as well due to this...
I am running on Vista 32bit SP1 Pack on HP Pavilion, i want to completely get rid of CS4 versions and go back to my reliable CS3 again, any help please would be greatly appreciated.
Kantori

John... if you read what I said you would of caught that i did do it:
"did what was suggested, worked like a charm for the CS3 and Dreamweaver CS4 but although it did work on Photoshop CS4. it did something i was dumbfounded to see, it did something odd in which it took out the Uninstall/Change tab option for removing programs (I was viewing it to see if it uninstalled completely) also it brought out a bunch of programs that weren't in that section before and was unable to uninstall/remove them.
So i had to do a system restore point to go back and try again. After doing it two more times (ya two!) still doesn't work, i am 7 hours into trying to resolve this... sigh. "
At that time i said i had done it 2 times, 3 in total, i am on try #6 all with the same results with the exact after effects once i restart my PC.
Here's what it does to tell what goes on:
1) after installing microsoft's cleaner then opening up the cs4 cleaner under admin, it does its thing, it asks me if i wish to remove Flash Player 10 after choosing remove Photoshop CS4, now here i done both remove Flash Player and not remove it with the same results, losing the uninstall/change option on the control panel, which frustrates me.
2) After seeing that i try to install Photoshop CS4 again, once its done, i open it up, try to go to the trial option where as i stated previously says there's an error and can't open the trial page which would open up Photoshop completely but since it can't i cannot go beyond that window.
3) So ya... i try ONCE again to do it all over after restarting and SAMETHING! no uninstall/change option appearing and unable to open up Photoshop CS4 in which i resort to doing a system restore again and trying once more.
NOW, one would think that after the first 3 times it should be working properly, i mean I thought it would after removing both Photoshop CS3 and Dreamweaver CS4 it's bound to do the same for Photoshop CS4, but it doesn't completely create a "FREASH" install. It's like it still remembers what messed up functions it still had and what's up with it removing the uninstall/change option? that just bogles my mind.
i tried many things, re-downloading the trial from adobe, etc i never would of thought just one program could cost me so much wasted time just to get it working and it's a free trial nonetheless so excuse me John Joslin if your remark kind of bugs me, I need some assistance/advice on trying to correct this problem, not a
"It should have done!
Run it a few times. "
comment that's already common knowledge for me in what I have already been doing long before your post.

Dreamweaver CS4 and Photoshop elements 10

Can i intergrate Photoshop elements to work with Dreamweaver cs4, Photoshop shows up on the editor button in Dreamweaver but when i try to use it it tells me it cannot find the file, even thought i no the file is there, Is there some setting i am missing here ?
Tony.

I don't have Photoshop Elements to test with, but you should be able to associate it with image types in Dreamweaver.
Open the Preferences panel from the Edit menu (Windows) or the Dreamweaver menu (Mac), and select File Types/Editors in the column on the left.
Select an image type in the Extensions field, and then select the program you want to use as the editor in the Editors field. I doubt if Photoshop Elements will be listed, but you can add it by clicking the plus button above Editors. Navigate to the Photoshop Elements application file, and select it. Then click the Make Primary button.
You need to do this for each type of image you want to edit in Photoshop Elements.
Click OK when done.

Issues editing Layouts using Dreamweaver CS4 (ShopOnline)

Hi Everyone,
I am having Issues editing Layouts using Dreamweaver CS4 (ShopOnline). May be someone has encounter this problem. When I open the large_product.html in dreamweaver (after installing the extension for BC) the file opens, but when I go to the property inspector, I can not modify any of the css rules currently defined and no css is linked to this file. I looked at all the available css's and I could not find any with the defined rules in this page.
I need help. Thanks.

It must be a module template layout that is being used. If you're on the latest interface it's under
Site Manager > Module Templates > Online Shop Layouts > Individual Product (small or large)
and if you're on the older interface it's
Ecommerce > Products > Advanced Layout customization (under the “related” box at the bottom right)

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

Extension Manager CS4 not installing extensions in Dreamweaver CS4

Just installed CS4 Design Premium. Now i want to install some
extensions to Dreamweaver.
When I click on the extension to install it I get a message
from the Extension Manager saying:
"This extension can not be installed, it products requires
Dreamweaver 6 or greater. To install this extension, please try to
install Dreamweaver CS4 or use Extension Manager CS3 which works
with Adobe CS3 and earlier products."
I have even tried to install it by opening the Extension
Manager from Dreamweaver via the
Commands menu, with the same results.
- I have version 2.0.274 of Adobe Extension Manager CS4.
- I do not see the Dreamweaver icon in Extension Manager's
product list*
- I tried to reinstall Dreamweaver
(which also reinstalled Extension Manager)
- Easy to forget; I am on a Mac
- The extensions should be okay, as they install quite nice
in Dreamweaver CS3
I tried to look for a
plist to edit, but as I do not really know what to look for
this action failed.
*in the same order i find the icons of Flash CS4, Fireworks
CS4, Photoshop CS4, Indesign CS4, Illustrator CS4 and Bridge CS4 in
the products list.

What extensions are you trying to install?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Digital_Me" <[email protected]> wrote in
message
news:ge4vjd$6f3$[email protected]..
> Just installed CS4 Design Premium. Now i want to install
some extensions
> to
> Dreamweaver.
>
> When I click on the extension to install it I get a
message from the
> Extension
> Manager saying:
"This extension can not be installed, it products
> requires
> Dreamweaver 6 or greater. To install this extension,
please try to install
> Dreamweaver CS4 or use Extension Manager CS3 which works
with Adobe CS3
> and
> earlier products."
>
> I have even tried to install it by opening the Extension
Manager from
> Dreamweaver via the
Commands menu, with the same results.
>
> - I have version 2.0.274 of Adobe Extension Manager CS4.
> - I do not see the Dreamweaver icon in Extension
Manager's product list*
> - I tried to reinstall Dreamweaver
(which also reinstalled Extension
> Manager)
> - Easy to forget; I am on a Mac
> - The extensions should be okay, as they install quite
nice in Dreamweaver
> CS3
>
> I tried to look for a
plist to edit, but as I do not really know
> what
> to look for this action failed.
>
> *in the same order i find the icons of Flash CS4,
Fireworks CS4,
> Photoshop
> CS4, Indesign CS4, Illustrator CS4 and Bridge CS4 in the
products list.
>
>

In Dreamweaver CS4, can't get sidebar background to expand to 100%

I'm using the standard Dreamweaver-CS4-generated template for a fixed-width 2-column page (i.e., left menu column and main column) with a header and footer. This is the "2 column fixed, right sidebar, header and footer."
I'd like to have an overall body background (x,y repeated - that seems easy to do) and a left menu column repeated (x,y repeated ). Alas, the comments that are generated with the template imply that you just can't do that. I've tried all sorts of height=100% conbinations, but they don't seem to work.
Any ideas?

Unlike table columns, CSS columns don't communicate with each other. The height of a division is determined by how much content is inside it. And that value may be longer or shorter than adjacent columns.
TO CREATE EQUAL HEIGHT CSS COLUMNS:
Option 1. Start with an Equal Height CSS Layout
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Option 2. Faux Columns (repeating background image). The easiest method.
http://forums.adobe.com/message/2653416#2653416
Option 3. JavaScript -- may not work in all layouts.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Problem with Dreamweaver CS4 workspace

Hi
I have just installed the Adobe CS4 Design Premium software on my Macbook Pro (OS X) and I have a problem or two with the Dreamweaver CS4 workspac:
1) When I have no file open, no matter which workspace I choose from the drop down list, I have a "see-through" area where files are generally displayed (see attached screen shot). This means I can see my desktop picture, or any other open files, in the background. This is very desturbing! If I click in that open space it also takes me out of Dreamweaver.
How can I get just a basic grey background in my workspace, instead of the silly see-though??
2) I have no close, minimize or maximize icons at the top left as I have in Photoshop or Lightroom!?!! Why is this and how can I get it there?
Thank you very much in advance for anyone who can help!
Villiers Steyn

I have the same problem - just installed Dreamweaver yesterday on mac. Will be interested to see if anyone has a solution for this!

Dreamweaver CS4 SPRY Menu Problems in IE

I am trying to have a drop-down menu on my site using the SPRY option in Dreamweaver CS4. In all browsers it looks exactly like it should. Unofrtunately in IE it pops out to the side instead of down. Anyone know a fix around this. The site is http://mtltechnologies.com/
Here is the SPRY CSS.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    cursor: default;
    width: auto;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 154px;
    float: left;
    height: 25px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 154px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 5px;
    color: #FFF;
    text-decoration: none;
    background-image: url(../images/button_bg.jpg);
    text-align: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/button_bg_down.jpg);
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(../images/button_bg.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(../images/button_bg_down.jpg);
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(../images/button_bg_down.jpg);
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Anyone know a fix?
Thanks,

The code is too long. Let's do it this way, did you change anything on the default css of the SPRY menu?
just my thought, why don't you remove it from the table? That might be the cause. Try to think of an alternative way like using divs and css.

Problems controlling divs with dreamweaver cs4

Hi all, so I have been hard coding my website and have had great success with the layout and everything. I am having trouble with dreamweaver cs4, does anyone know if cs4 is compatible with html5? My silicone cupcake liners website looks great but a nice transition to dreamweaver would save a lot of work.

DWCS4 won't be able to correctly read the html5 semantic tags like <nav><aside> or <header> while in Live View. The built in version of the quasi-webkit browser is just too old.
Design View will work for the most part, but does get confused by certain things within HTML5 specific tags, so that will look even more broken than normal.
It also will not automatically generate any HTML5 specific code, there are no HTML5 menu options and there is no update to make it do that.
The program itself is no longer supported by Adobe, being the 5th version removed from "current"...
DWCC
DWCS6 Cloud
DWCS6 Disk
DWCS5.5
DWCS5
DWCS4

DREAMWEAVER CS4 LAYOUT (DESIGNED IN PHOTOSHOP)..

Similar Messages

Maybe you are looking for