Design of Dreamweaver CC discovers mess up layout

I use Dreamweaver CC class, the same file-lesson book 2, open index.html, even in your MAC, design view looks messed up, but using live view, it seems very good.

-Why, I guess it's from the book, so it should not be a cause of error code problem.

Any suggestions? Help, please.

Screen Shot 2015-10-22 at 7.21.24 PM.pngScreen Shot 2015-10-22 at 7.21.36 PM.png

Short answer:  Fashion Design is not and has never been 100% reliable.  Do not trust mode Design!

Use the Live View and preview in browser to test your work.

Long answer: Design view has been developed more than a decade before and never updated to support modern HTML5, JavaScript, and CSS properties.  At best, it's a representation close but rarely accurate of what we might see in older browsers.  Despite the fact that you think DW is not WYSIWYG.  I hope that will be improved in 2016!

Nancy O.

Tags: Dreamweaver

Similar Questions

  • New web design - learn Dreamweaver first?

    I welcome the Dreamweaver community.

    After 30 years in print design, I finally made a decision to learn a little something about web design. With this goal in mind, when I updgraded to CS6, I bought "CS6 Design and Web Premium" package. The package includes Dreamweaver, Fireworks and Flash Pro. But I'm a bit confused where to start.

    I always buy the Adobe "Classroom in a book" series to learn the basics or new aspects of Adobe products. All three applications have equivalents of the IPC and I think I'll but the first IPC Dreamweaver, Fireworks and Flash Pro?

    So that demand, it's the right direction? I noticed on some forums of discussion that some use Fireworks more than Dreamweaver: I want to just make sure I'm on the right track.

    Any suggestion would be appreciated.

    Clinton

    Welcome to the community of DW, Clinton!

    30 years - which is an experience that you have up your sleeve!

    Web Design, fine, it works this way. It is in 2 parts - to start:

    • Design / layout / layout / wired / UI (two see it differently) - but the end goal is the same - to create the "design", in itself, that your site will look like
    • Development / slicing / Compositing / CSSing / PSD - CSS (again, different references) - make the "design", you did in an application such as Photoshop or Fireworks to be "web-friendly" - in other words, making .html and .css files that are the "basics" for a Web site

    Most web developers (including me) use Photoshop to create cuts of design (PSD files) we send back a million times the customer to get their approval. Then "decide" elements such as backgrounds, boxes, etc... Then open Dreamweaver, write the tag ""-which is the 'what' you want to display on your website (content, tables, boxes, widgets, snippets, etc...). Then, 'style' using 'CSS' Web site - for the match at the "PSD" that the customer had approved.

    That's it: I don't know if I could have put it more!

    CSS - Cascading Style sheet - is a piece of code that tells browsers how your website should be displayed. Height, spacing, margins, width, color, type of display, etc... With the birth of CSS - 3, things are even easier. A few key elements that can make the CSS-3 are lets say, Gradients, rounded edges, etc... (for which, you had to use a real .png or .jpg image in CSS - 2). Now, CSS - 3 can give you the same exact effect with no use of an image.

    HTML - now that HTML5 quickly supplanted the old web standards, you have decided to start your 'web journey' at the right time, I would say. HTML5 has infinite possibilities of creation 'sensitive' Webdesign - reactive, which means Monotype, multi-devices - for desktop computers, Tablet & mobile phones.

    With all that said, that Dreamweaver CS6 has some great tools for HTML5 standards like 'fluid Grid Layout"- with which you create 1 design, code 3 different documents CSS and BAM - your website will be optimized for all devices 3.

    Fireworks - certainly usable for web design. CS6 Fireworks has also some great tools such as 'Generator of CSS' gives you the CSS code for an item of the chosen design - in other words, the design in Fireworks, go over it, fireworks will generate the CSS code for you.

    jQuery - you should watch this - a few great 'plugins' that you can use in your website design / development. Now that 'Flash' is a kind of death (modern Pocket PCs do not support Flash), jQuery is your friend. Best part is completely open source.

    The next step - dynamic Web sites - as its name suggests, you can get in the construction of more "interactive" sites - such as a shopping cart, etc... then once you get a good shot of some basic CSS HTML &. And if you decide to use jQuery, you will get also a script - what is essential to build interactive websites as you progress.

    You can take a look at this video on Youtube. I know that there not too many views. But I personally think it's a good place to start with Fireworks - http://www.youtube.com/watch?v=NrJmyYfNu1M

    This maybe go a little above your head right now - since you are a beginner to the top. But, feel free to ask questions as and when you have one, and we will be happy to help you! The world needs more of web designers / developers after all!

    All the best.

    -ST

  • mode Design displays only not in the fluid layout

    I can't turn on my design view, shows only mode live view

    CC2014.1 and later n have a design mode while using fluid grids. This has been discussed here at some length, in multiple threads. If you want to recover the Design mode, you can add the X below in the grid of your fluid .css file...

    /*

    Properties Grid Dreamweaver fluid

    ----------------------------------

    DW-num-CLO-mobile: X 4;

    DW-num-CLO-Tablet: 8;

    DW-num-OCOL-Office: 12;

    DW-gutter-percentage: 25;

    =====================================

    First close all other files. Make the change, and then save and restart DW.

  • Blogspot post messing with layout

    I built a simple CF/CSS based site for a client where I consume their blogspot blog. I'm running a strange issue where if they make things simple formatting, such as bold items in the blog, it messes up the layout of the web site. I have never seen it before. If someone out there has run in this weirdness?

    ~ Clay

    Check the content from the blog feed.  Are cut you?

    You make the output of the first part of some tags (like for example)

    span, div, sharp, etc.) ?

  • Help! Modes of Split and design in Dreamweaver CS5 is disabled.

    The first time I started Dreamweaver CS5 I didn't like the default code / design view my files appeared in. If I choose a setting, preferably where appear files in one pane mode code. Unfortunately, I don't remember where this parameter. I don't know if this is the culprit, but I somehow lost the ability to switch from Split, design, Code Live, Live View and inspect on any web file (.html, .htm, .asp, etc.). Could someone help me understand how to activate these modes?

    dreamweaver-disabled-bar.jpg

    dreamweaver-disabled-drop-down.jpg

    Edit > Preferences > File Types / editors

    The "Open in code view" field is mislabelled and travels many people upward.

    It should say "open only in code view.

    Remove .html, .htm, .asp, etc..  in the list

  • This site has been designed in Dreamweaver?  How do you do that?

    Hello

    I came across a cool site today.  I'm a bit new to DW and have no idea how much of this has been done.

    http://cinematicafterglow.com/index2.php

    Any ideas how they do the buttons gradually move to the left or right and then slowly return to their original color?

    A friend told me that it was designed in a program called Drupal.  Any thoughts on Drupal?

    Thank you!

    Gary

    This site was made in Adobe Flash, not Dreamweaver. Flash gives you a lot of freedom to design, but it has many drawbacks too - such as accessibility and Search Engine Optimization questions (to name a few).

  • SPLIT CODE/DESIGN VIEW Dreamweaver?

    Hello.

    I use Dreamweaver CS3. I have 22 '' dual monitors and I want to be able to see the design mode and mode code of a page at a time vertically not horizontally. Now when the impact of the SPLIT Windows are superimposed. Is there a way to make next to each other or share or something?

    I also tried to launch two instances of Dreamweaver, but that no longer works. It really sucks because I want to be able to see my complete drawing while I edit the code/css.

    Thank you

    Ok thank you.

    I guess I'll have to work with what I got, thanks.

  • Page previews very well since Dreamweaver but is messed up in browse

    When I saw my Dreamweaver page, it opens and she seems very well (in Firefox), but when I upload to the server, it looks all messed up (in firefox). Can anyone help. You can see the page to
    http://www.joshuataylordesign.com/joshr/JoshRosenthal.html

    Thank you very much. I must be missing something, but I don't know even where to start

    The game, January 3, 2008 04:50:59 + 0000 (UTC), "joshuataylordesign".
    wrote:

    > http://www.joshuataylordesign.com/joshr/JoshRosenthal.html
    >
    > thank you very much. I must be missing something, but I don't even know where the
    > start

    Maybe download the linked external style sheet that should be here:
    http://www.joshuataylordesign.com/joshr/blackmanor.CSS

    Gary

  • problem with the publication in firefox and View Designer in dreamweaver

    Copied the html code of the previous site in dreamweaver to edit... pharmacodependance1; nothing on the screen with the display mode of the designer.

    Problem2: after, finally finished site, edition had problems with a part of the site in firefox. Although IE without problems on the screen. Why? and how can I solve this problem? P.S. I have now not much on writing html, say; Beginner for beginners

    site: http://fixmijdatff.nl/
    problems in firefox http://fixmijdatff.nl/index.html/Gallerij.html

    I hope someone can help me. Thanks for your time!
    Greetings from Holland,

    Ferdi

    > website: http://fixmijdatff.nl/

    You have no defined doctype and 84 validation errors. Set a doctype and then validate your page again and fix the validation errors

    > problems in firefox. http://fixmijdatff.nl/index.html/Gallerij.html

    Page not found.

  • Design in Dreamweaver

    Is it possible to draw lines in Dreamweaver? At the moment I am adding a copy of Θcran and text in Dreamweaver then having to add arrows and lines by using FrontPage. It's really faffy lines do not look right and the arrows appear above or below what they were when I drew the on FrontPage!

    It would be great if someone could give me some advice.

    Thank you very much
    Chantelle

    > Thanks for the reply. What this means drawing arrows not working?

    Yes.

    > I inserted a copy of Θcran and I am keen to point to specific areas
    > the image by using the arrows.

    You need to add the arrows in an image editor or screen capture software
    like SnagIt.

    Then insert the picture (complete with the arrows) in the page using DW.

    --
    Concerning

    John Waller

  • How can I stop audio autostart in website designed by Dreamweaver CC 2015?

    I have three audio files on a single page that auto start at the same time on the opening page even if the setting is autostart = false. How can I stop audio autostart?

    Use the HTML5 tag

  • Design of Dreamweaver error

    Video https://www.YouTube.com/watch?v=nRIsPc3HNpo describe my grief.

    Someone at - it the same problem?

    There was a problem like that caused by setting the css background color: transparent.

    What is your problem?

    Adobe has a bug logged for this one...

    http://forums.Adobe.com/message/5523265#5523265

    You can add your votes here: https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

  • Reduce the size of the screen of my reactive design layout (was: Dreamweaver CC)

    I created a responsive design with Dreamweaver Cs6 and now I use CC min 480 screen size is a way to make the smaller screen size?

    Try to set it to 480px size display max .   That will cover all devices from 0 to 480px wide.

    A screen min size is all devices 480px wide or greater.  Make sense?

    Nancy O.

  • Dreamweaver. Is it possible to have AP div tags in a fluid Grid Layout Div?

    I am putting together a site with a very basic page layout; some titles at the top, each placed in an AP Div, with images below.  But I would use the fluid Grid Layout Div so that the positioning of the change of flags AP div on mobile devices.

    I can't figure out how to do so that the AP div inside my fluid Grid Layout Divs tags

    Thank you

    1. forget the AP Div they are of very little use and can only be deployed in a sensitive site with care (and knowledge).

    2 forget the fluid grid layouts, they are not sufficiently stable.

    That being said, take a look at create a responsive Web design in Dreamweaver | Adobe Dreamweaver tutorials CC and Bootstrap 3 tutorial

  • Lights of fireworks or Dreamweaver to start the design process?

    Please tell us which is the best application use to start the design process a site, from the point of view of a print designer code-illiterate - I assumed it would be Dreamweaver but read somewhere recently that I should start in Fireworks (which I always thought was more for the creation of graphical web content optimized).

    As a print designer, I use InDesign CS4 (with Photoshop and Illustrator) and would like the tool more logical and intuitive to use to start the work of designing a site with advice.

    Once the design is approved I will have someone who knows what they're doing with HTML, CSS and PHP etc to check everywhere and make the delicate bits.

    Any help in pointing me in the right direction would be appreciated.

    Thank you.

    PS - my apologies if this is wrong forum label, but I posted this question yesterday on the Web Design Forum, but then thought that this may be a more appropriate forum to publish.

    If you are a designer to create a new design, Fireworks is a great place to start. (I can't imagine trying to design in Dreamweaver, frankly). If you are familiar with Photoshop and Illustrator, you might start with one of these applications, too, but Fireworks has been built to work.

    However, Fireworks is not a coding tool. Like Photoshop, it has the ability to export HTML, but the feature is designed to create models, not live sites. After you have your site designed in Fireworks, you or someone else can use Dreamweaver for (re) - produce the design in the code.

    You can use Fireworks to statements your vertical grids, placing graphics header and navigation, place-holding text value (remember that HTML text can be resized by our users, places for blocks of text must therefore be able to resize). And Yes, once you have your design, use Fireworks to slice that design and export the graphics optimized for your encoder to use.

Maybe you are looking for

  • IPhone 4 ios 7 can not get on the family sharing for itunes

    Hi, my son got a new second hand phone. try to get him on the family sharing so he can listen to the music, but whenever he's trying to do a song, his view as a purchase. his name is included, but it has version 7. We have updated the phone on itunes

  • How to display a message source when transmitting it?

    I see how to view the source code of a message in my Inbox. If I send one of these messages, I wish I could view the source code of the message and change it before sending it. Is it possible to see and change the source message before sending?

  • When I delete a tab, the next time I open Firefox, it's back! I removed from Bookmards - how can I get rid of it permanently?

    I have two tabs that I want to delete. I went to view all bookmarks, selected on the list, press and hold command, click on organize and deleted. I left Firefox. When I opened again, the tabs that I had deleted in my favorites were still there. If I

  • How can I save my Notes on my Mac?

    Hello. I wanted to disconnect from iCloud, but I got a message saying "If you stop using iCloud for Notes, notes stored in iCloud will be deleted from this Mac". So, before you do anything else, I would save my Notes on my Mac. Is it possible to do?

  • u verse and fax

    HP Officejet 6500 Windows7 After installation of the AT & T U-Verse phone service I have this problem: the "Auto answer" function to receive faxes no longer works. I can receive faxes by manually by pressing 'Accept' the number of rings is equal to 3