Why is the Template coming out distorted?

Report · May 13, 2017

For some reason Adobe Dreamweaver cc 2017's Template is showing up distorted. I'm choosing the Basic Layout Template and the 400x200 green graphic is stretching. This is before I saved it.

I did a test save and deleted them. This should not have anything to do with the new template from Dreamweaver.

Any suggestions?

In addition, what happens when I choose "Save All" after I open a Dreamweaver Template?

Thanks

Report · May 13, 2017

When you say Template, I assume you mean the starter pages?

If you haven't already, define a local site folder. That's a critical 1st step for working with DW.

Go to Site > New Site...

Go to File > New > Starter Templates. Pick one of the responsive starter pages. Hit Create. Them immediately Save your file as index.html.

After saving, DW creates Assets folders for you in your Local Files Panel. See screenshot.

To preview your work, hit F12 (Real-Time Preview) or right click on the open tab and select Open in Browser.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 13, 2017

zThanks!

Yes, I made sure I had the site selected. However, I did not do that at first.

I saved the template and it's files to my new site. It shows up normally on each browser. However, it shows up distorted on my Mac from within Dreamweaver. Below are the screenshots.

As seen in Dreamweaver

As seen in browsers

Report · May 14, 2017

Please make us privy to the markup and style rules by preferably uploading the site and supplying the URL or by copying and pasting the code here.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 14, 2017

As I stated, the starter page looks normal when I preview it in a browser but it distorted where the large place holder in within my Mac.

<!doctype html>

<html>

<head>

<title>Simple Theme</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1 class="title"> SIMPLE</h1>

</div>

<ul>

<li>ABOUT</li>

<li>PORTFOLIO</li>

<li>SERVICES</li>

<li>CLIENTS</li>

<li>CONTACT</li>

</ul>

</nav>

</header>

<h2 class="noDisplay">Main Content</h2>

<h3>content heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</article>

</section>

<h4>TITLE</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

</div>

<h4>TITLE</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

</div>

<h4>TITLE</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

</div>

<h4>TITLE</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

</div>

<h2 class="column_title">LEFT COLUMN</h2>

</div>

<h2 class="column_title">RIGHT COLUMN</h2>

</div>

</div>

</footer>

</div>

</body>

</html>

mypersonalnamedeleted

Report · May 14, 2017

The code shows that you have not defined and saved your site.

Defining a site and saving your site in Dw is an essential step required by Dw in order for it to work correctly.

Report · May 14, 2017

I created a New Site and saved the files to that site.

How can you tell I did not define the site by looking at the code?

Thanks for your help.

Report · May 14, 2017

Your file links are all pointing to your Dw config folder, and not a defined site.

Creating a new site is not the same as defining a site in Dw. If you look at Nancy's post did you follow the steps shown?

Report · May 14, 2017

The file path shows your site is not defined.

If it were defined, DW would reconcile the file path and point to assets in your local site folder like this:

<img src="images/bkg_06.jpg"

DW's Design View is not a browser. It's mainly for quick editing of content and should not be regarded is a reliable rendering. At best, it's an approximation because it has not been updated since Macromedia days and cannot handle advanced CSS.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 14, 2017

Thanks for the info. I believe I did to correctly this time. However, I still see the page differently from View Live to View Design.

Is it supposed to be that way?

Report · May 14, 2017

AnotherMe wrote
I still see the page differently from View Live to View Design.
Is it supposed to be that way?

YES.

Design View is not WYSIWYG.

Live View is closer to the "real thing" but not perfect.

Preview in Browser is the best way to check your progress.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 14, 2017

I think I found the answer. But the answer brings up another question.

When I select Live the starter page displays the place holder the way it should look.

When I select Design the placeholder stretches and is distorted.

Is this a CSS issue? Can anyone explain why this is happening?

Thanks for your help.

Report · May 14, 2017

Design view uses a very old interpretation of how a sites layout will look, and is not very accurate, it should never be used for modern layouts.

Always use live view, to see how your page looks, or even better an actual browser as live view uses a version of Chrome adapted for in app usage, and is not up to date.

Report · May 16, 2017

The same issue of the template live view and template design view happens on my workstation at work. So it looks like everything is fine...

Why is the Template coming out distorted?

1 Correct answer