photoshop sliced files to dreamweaver responsive site

Report · Jun 17, 2020

I designed a basic desktop site in photoshop cc with navigation buttons at top and logo top center under the nav, sliced it and exported save for web and imported into Dreamweaver. I want to make this site responsive by having Dreamweaver create tablet and phone versions from by desktop one. I have designed php shopping cart sites in the past but I am completely new to dreamweaver. Also in Dreamweaver is it better to have 1 css file shared with all pages or separate css files for each page?

Report · Jun 17, 2020

A website is made up of HTML/CSS/JS and can contain serverside code like PHP. Dreamweaver can help you build such a website. Unlike your description, this is not a Dreamweaver site.

For a website, it is best to reduce the number of requests to the server to a minimum, i.e.one CSS file is always better than a number of files.

Photoshop is not a web development tool and as such should never be used to that end. When PS has been used to create a mock-up of the site, you can use the (unsliced) images, colour schemes and text all placed within relevant HTML elements.

For an idea on how to create a responsive site, have a look at https://www.w3schools.com/bootstrap4/

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2020

We no longer use sliced images and spacer gifs on websites. There's no need for them because we don't use tables for layouts anymore.

My advice is to never use raster images for navigation.

Did she just say never? Yes, I mean never.

Use real HTML code and CSS. Or use SVG images which have lower bandwidth and retain high quality when rescaled to fit smaller devices.

Below is a centered Navbar made with Bootstrap 4 responsive framework. Copy & paste the code into a new, blank document. Save and preview in browsers and mobile devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Centered Navbar with Logo </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<!--BRAND/LOGO here-->
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>

<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Centered nav <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
</li>
</ul>
</div>
</nav>


<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 18, 2020

I can't provide you with any concrete suggestions for exporting from Photoshop into Dreamweaver. Past history suggests the code produced isn't very good (these days it may have improved), plus if I'm reading it correctly you want to use images for your navigation? That's not acceptable in modern web-development. I would revise your workflow, use Photoshop for producing a wireframe of how your web pages will look, then use Dreamweaver to build the visual concept in html, css etc. Resign images to where pictorial images are needed plus logos/icons, which can be exported from Photoshop, everything else should be html/css.

As for is 1 css file better than several, that will attract a number of opinions. I'm of the opinion to use a global.css stylesheet for any generic css that will be appear across all of your pages, or most of them and then use an additional css stylesheet where you need to style a particular page radically differently, certainly you should try and avoid repeating the same css every time it appears in a different page, hence the global.css stylesheet.

Adobe Community

photoshop sliced files to dreamweaver responsive site