Creating a Responsive Image Slider in Dreamweaver

Hello,
In Dreamweaver, when we select fluid grid layout, how do we create a responsive slider, if we make use of properties in CSS designer panel. I can design static website, but having difficulty when it comes to Responsive one.
Any advise would be appreciated.
Thanks

You have answered my reply as being correct and rightly so.
But Preran's example using Bootstrap is probably the better way to go and, as Nancy suggests, Bootstrap is much more than a RWD framework, it is an all encompassing site building framework that can be customised as required.
I can go on for a long time regarding the virtues of Bootstrap, suffice to say that if an Adobe staff member sees fit to start dabbling around with Bootstrap rather than using Adobe's own FGL, lights must start flashing in the development world.
My advice (especially to Os): Start using the Bootstrap source files (Less and JS) and use the Prepros app until DW comes with its own compiler. For a leg up see here Bootstrap 3 Less Workflow Tutorial | Experience Design at Hello Erik
Enough said for now.

Similar Messages

Can we add any image slider in Dreamweaver

Hi,
Myself sandeep kumar, I am owner of two blogs Tech Blog and another one is a Health Blog. Can we add Image slider using Dreamweaver? If yes then how?

Both of these websites are WordPress websites and you can add sliders using any of the WordPress slider plugins. You don't need Dreamweaver to do that.
Simply do a Google Search for "wordpress slider plugins" and you will see dozens.
Now, you can build and add to WordPress themes using Dreamweaver. Here's a tutorial that was written for Dreamweaver CS5 but the basic tenants of it apply: http://www.creativepro.com/article/build-wordpress-sites-dreamweaver-cs5-part-1
And here's an article from a hosting perspective:
http://www.hosting.com/support/wordpress/use-dreamweaver-to-manage-a-wordpress-site

How can I make a image slider using Dreamweaver? Is there any image slider widget I could use?

I was browsing through the web when I saw a website which had a really cool image slider. I don't have any idea of how to develop anything similar, but I was wondering if maybe dreamweaver had any widget that has already been developed by someone else that is open source for everyone else to use. Is there anything any?

Ken is referring to a "roll your own" slider that works great. There are lots of those.
None of those are built in to Dreamweaver. None of those will give you a panel within Dreamweaver with which you can build them.
Project Seven does sell widgets that are Dreamweaver extensions.
Adobe is offering another one for free (and you get additional function if you buy it).
Extend Studio offers Power Slider (with a free trial).
And there is Nivo Slider.
These are extensions that plug in and extend what Dreamweaver can do.

Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC - Preview | Adobe TV

Learn how to use Dreamweaver's Fluid Grid layout to create a responsive web design that adapts to different screen sizes. Taken from Train Simple's Dreamweaver Training
http://adobe.ly/138qCjm

The visual aid icons (eye, arrow, trash can etc.) do not appear for me (all visual aid options have been turned on in 'view').
Also under my insert menu there is no 'structure' setting.

Simple way to use the Photo Gallery Module and flexslider to create an editable image slider?

I want to offer an image slider that my clients can easily update themselves through the Admin. Ive researched it alot and I know it can be done using web apps but does my cliently seriously need to pay over $400 a year for the webcommerce option just to have an updatable image slider?? I find that unrealistic. Does anyone know how to set this up using the photo gallery module and "flexslider" so clients on the business marketing plan can have access to a simple and clean editable image slider?
Any BC experts that can help would be greatly appreicated!
Thankyou

Not an expert, but I think what you're looking for is a slider that can get its list of photos from an XML file. The Photo Gallery module can produce an XML file.

What are the different options for creating a basic image slideshow in Dreamweaver 5?

Hi, I have created slideshows in Bridge, and they all work fine. They aren't exactly what I had in mind, but this was the only solution I could find that I could understand. My knowledge of web design is minimal at the most. I have attached the slideshows to my html website using IFrames, but it doesn't load properly in Safari.
I included the code at the bottom of this post.
The code dealing with the slideshow and IFrame in question are towards the bottom of the document, I marked them in bold. All the styles with regards to the <div> locations and such are on a separate stylesheet, I'm not sure if you would need that to help out.
I'm wondering if someone could clue me in as to what I can do with this code to make this slideshow work properly in safari. I checked in Chrome and it loads properly. Unsure about other browsers, I do not have access currently.
I am also wondering if there is another way I can create a slideshow using CSS5. This slide show is fine, but I was also looking to include text--image names and descriptions--without having to edit each image in Photoshop to include the text.
Thank you for your time, any help would be appreciated.
<!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 name="creator/artist" content="Ryan Olsen" /><meta name="keywords" content="Ryan Olsen, artist, paint, draw, dark fantasy, landscape, seascape, Paire, Connecicut, New York" /><meta name="description" content="The collection of art by Ryan Olsen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ryan Olsen's Studio</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="ryanolsenstudios.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/gallerytabroll.jpg','images/transformativeroll.jpg','ima ges/landscapesroll.jpg','../ryanolsenstudios/illustrationstab.jpg','images/illustrationrol l.jpg','images/bioroll.jpg','images/petportraitroll.jpg','images/sparklessroll.jpg')">
<div id="pagetop">
<div id="header">
<img src="images/name.jpg" width="1057" height="87" alt="name" />
</div>
<div id="banner">
<img src="images/banner.jpg" width="1158" height="155" alt="banner" /> </</div>
</div>
<div id="navigationalmenu">
<div id="gallerytab">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery tab','','images/gallerytabroll.jpg',1)"><img src="images/gallerytab.jpg" alt="gallery" name="gallery tab" width="252" height="72" border="0" class="MenuBarItemSubmenu" id="gallery tab" /></a>
    <ul>
      <li><a href="transformative.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('transformative','','images/transformativeroll.jpg',1)"><img src="images/transformative.jpg" alt="transformative" name="transformative" width="174" height="53" border="0" id="transformative" /></a>
      <li><a href="landscapes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('landscapes','','images/landscapesroll.jpg',1)"><img src="images/landscapes.jpg" name="landscapes" width="174" height="53" border="0" id="landscapes" /></a></li>
      <li><a href="illustrations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustrations','','images/illustrationroll.jpg',1)"><img src="images/illustrations.jpg" name="illustrations" width="174" height="53" border="0" id="illustrations" /></a>
</li>
<li>
<a href="petportraits.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pet portrait','','images/petportraitroll.jpg',1)"><img src="images/petportrait.jpg" alt="pet portraits" name="pet portrait" width="174" height="53" border="0" id="pet portrait" /></a></li>
<li>
<a href="sparkless.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sparkless','','images/sparklessroll.jpg',1)"><img src="images/sparkless.jpg" alt="sparkless" name="sparkless" width="174" height="53" border="0" id="sparkless" /></a>
</li>
    </ul>
</li>
</ul>
</div>
<div id="showstab">
<a href="shows.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('showstab','','images/showsroll.jpg',0)"><img src="images/shows.jpg" alt="shows" name="showstab" width="252" height="72" border="0" id="showstab2" /></a>
</div>
<div id="hometab">
<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hometab','','images/hometabroll.jpg',0)"><img src="images/hometab.jpg" alt="home" name="hometab" width="252" height="72" border="0" id="hometab2" /></a>
</div>
<div id="biotab">
<a href="bio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/bioroll.jpg',1)"><img src="images/bio.jpg" alt="bio" name="bio" width="252" height="72" border="0" id="bio" /></a>
</div>
</div>
<div id="warpage">
<a href="https://www.facebook.com/WARSPIT" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Welcome to WAR">Welcome to WAR</a><br/><a href="https://www.facebook.com/WARSPIT" target="_TOP" title="Welcome to WAR"><img src="https://badge.facebook.com/badge/515768845136977.2357.1022321304.png" style="border: 0px;" /></a><br/><a href="https://www.facebook.com/advertising" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote Your Page Too</a>
</div>
<div id="ryanpage">
<a href="https://www.facebook.com/ryanolsenstudios" title="Ryan Olsen Studios" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Ryan Olsen Studios</a><br /><a href="https://www.facebook.com/ryanolsenstudios" title="Ryan Olsen Studios" target="_TOP"><img class="img" src="https://badge.facebook.com/badge/572127626212351.1710.552992230.png" style="border: 0px;" alt="" /></a><br /><a href="https://www.facebook.com/advertising" title="Make your own badge!" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" target="_TOP">Promote Your Page Too</a>
</div>
<div id="ryaninstagram">
<a href="http://instagram.com/ryanolsenstudios" target="_new"><img src="images/instagram-glyph.jpg" width="112" height="144" alt="instagram" /></a>
</div>
<div id="gallery">
<iframe src="Transformative/index.html" width="1003" height="834" frameborder="0" name="gallery">
</iframe>
</div>
</div>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Have a look here Jquery slideshow tutorial for beginners | WEBTUTS

Can't get image slider to work

Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.

I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
background-color: #979797;
color: #fff;
margin: 0em;
padding: 0em;}
.page {
max-width: 640px;
margin: 0px auto 30px auto;}
.panel {
background-color: #fff;
color: #666;
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
overflow: auto;}
button {
border: none;}
/********** LOGO **********/
h1 {
text-align: center;
width: 200px;
height: 20px;
margin: 40px auto 40px auto;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}
h2, h3 {
font-weight: normal;
margin: 0em;}
h2 {
color: #666;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 230%;
line-height: 1em;
padding: 20px 0px 0px 20px;}
h3 {
font-size: 90%;
letter-spacing: 0.2em;}
p {
font-family: 'Quattrocento Sans', sans-serif;
line-height: 1.4em;}
a {
    text-decoration: none;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
/***************** No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
display: block;
border: 3px solid #fff;
text-align: center;
background-color: #fff;
color: #db5391;
padding: 10px;}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}
.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}
.slide:first-child {
    display: block;}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints" />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series" />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea" />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>
    </section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;
    function move(newIndex) {
        var animateLeft, slideLeft;
        advance();
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        buttonArray[currentIndex].removeClass('active');
        buttonArray[newIndex].addClass('active');
        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';
        } else {
            slideLeft = '-100%';
            animateLeft = '100%';
        $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
        $group.animate({ left: animateLeft }, function () {
            $slides.eq(currentIndex).css({ display: 'none' });
            $slides.eq(newIndex).css({ left: 0 });
            $group.css({ left: 0 });
            currentIndex = newIndex;
    function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (currentIndex < $slides.length - 1) {
                move(currentIndex + 1);
            } else {
                move(0);
        }, 4000);
    $.each($slides, function (index) {
        var $button = $('<button type="button" class="slide-btn">•</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        $button.on('click', function () {
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

IPhone image slider

I trying to create an iPhone image slider where the user will be able to swipe the image left or right.
Can some please show how it can be done in Edge Animate plus the coding?
Thanks

I trying to create an iPhone image slider where the user will be able to swipe the image left or right.
Can some please show how it can be done in Edge Animate plus the coding?
Thanks

How to create an image marquee for Dreamweaver

Hello,
I would like to know the best image tool to use for a Dreamweaver homepage site to create a simple three images marquee? Should I use Photoshop, Flash or fireworks? Which application is the simplist way to do this? I am a beginner using Dreamweaver 5.5. Take a look at this site to see what I am trying to do. http://www.eventcouturempls.com/home

The one you linked to uses Flash, but you can easily create one without Flash. Google image slider and you will get plenty. A couple I have used and liked are nivoslider and WOW slider. They both run off jQuery.
To put the slider on a homepage, you will use a combination of Photoshop/Fireworks (for the images) and Dreamweaver to code the slider into your page.

How to create an images album in dreamweaver?

Hi all, I would like to create a little image album for show architectural projects in a portfolio on line.
For the moment I just did a very very simple site, and I'm not expert.
I've found some guides but is always request fireworks in addition, and I've not it.
So, is possible do the vizualization of an album just in dreamweaver?
Thank you all.
Pietro

I enjoyed looking at your site.
I think you might also take a look at implementing a Lightbox gallery. This takes a little setting up and uses Javascript and there are lots of variations. I've used one called thickbox on this site.
Most of the lightbox clones are well documented and easy to implement. You would need to build a gallery page of thumbnail images and have a folder of the larger images and after that, the lightbox clone does the rest. I think that you could easily build a thumbnail gallery yourself that would keep to your minimalist theme of the site.
Martin

New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
I'm missing something basic and after two days it still escapes me.
Please somebody, tell me what I'm missing.
Frustrated

FluidGrid Layouts are not easy to learn. You need a good grasp of fundamental RWD concepts including CSS Media Queries. Keep your layout simple and be patient. The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Best advice for beginners:
Build Mobile Layout first. Everything else is based on this primary layout. Then build Tablet layout and finally Desktop. Don't worry about content. Just build the layout & save often during development.
DO NOT TAMPER with the boilerplate.css or FGLayout.css code. Even experts can break the layout in a hurry. Use a separate external style sheet for content and typography styles.
If you're using CS6 ver 12.0, you cannot nest divs inside other divs. Everything must be inside the .gridContainer like this:
<body>
    <div class="gridContainer">
          <div> </div>
          <div> </div>
          <div> </div>
    </div>
</body>
If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
Nancy O.

Dreamweaver CS6- jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
<p>
    <img src="Leather web page/DSC_0531_4925.JPG"/>
    <img src="Leather web page/DSC_0035_edited-1.JPG"/>
    <img src="Leather web page/DSC_1593_edited-1.jpg"/>
    <img src="Leather web page/DSC_1595_edited-1.jpg"/>
    <img src="Leather web page/DSC_1821.jpg"/>
    </div>
Any help would be greatly appreciated.

1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
    allowWrap:        true,
    autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
    delay:            0,
    easing:           null,
    fx:              'fade',
    hideNonActive:    true,
    loop:             0,
    manualFx:         undefined,
    manualSpeed:      undefined,
    manualTrump:      true,
    maxZ:             100,
    pauseOnHover:     false,
    reverse:          false,
    slideActiveClass: 'cycle-slide-active',
    slideClass:       'cycle-slide',
    slideCss:         { position: 'absolute', top: 0, left: 0 },
    slides:          '> img',
    speed:            500,
    startingSlide:    0,
    sync:             true,
    timeout:          4000,
    updateView:       0
// automatically find and run slideshows
$(document).ready(function() {
    $( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
    width: 1000px;
    margin: auto;

Part 04 - Creating and Importing Images | Classroom: Basic Site Layout and Navigation in Dreamweaver | Adobe TV

Learn how to create and prepare images to incorporate into your website design. Save them in web friendly JPG or PNG formats while maintaining a good balance between quality and small file size. Import them into Dreamweaver and make some initial adjustments to layout and alignment.
http://adobe.ly/zL64GN

This third lesson needs to be updated. The "ALIGN" buttons in Properties are now missing in CS6 because it's obsolete in HTML now...

What are considered 'best practices' for creating a responsive design, specifically mobile vs. desktop viewing?

I've stumbled upon a lot of work arounds but I'm trying to decide which is the best way to go.
I'm creating an image intensive, portfolio style, single page website with text & button based 'calls to action.'
It features a full width image slider, so resolution is important on desktops, and loading speed important on mobile.
The built in 'responsive scaling' feature is nice but it has a few major issues.
- different screen sizes and aspect ratios can make some elements considerably too large or too small, especially text.
- one version of a file is used for all applications and viewing conditions so I need to compromise quality on desktop and speed on mobile rather than optimize for both.
- it looks like **** in Safari, for some reason.
The Edge Commons work around would seem to add to the loading issue while also creating the frustration of seeing the percentage based elements rearranging themselves.
I'd thought of trying to use media queries to load different animations, but I'm not sure this is doable.

As for absolute cropping, I agree with your stance. Until the layout is fixed, preserving your ability to easily manipulate photo size and positioning is key.
Some clever image management methods have been described in the discussion forums, and one that appealed most to me was the use of duplicate linked image folders. Having a high-res (CMYK) folder and a low-res (RGB) folder to switch between for different output enables you to use both to your advantage. Use the low-res images for layout, for internal proofing, and for EPUB/online PDF/HTML output. Then it's simply a quick switch to the high-res image folder for print purposes. You can easily prepare the alternate collection of images with a Photoshop batch convert script or with the Photoshop Image Processor. Save your presets!

How can you create a screen width slide show?

I have created screen width images that resize depending on the screen resolution using the fill option.
However, when I use any of the slide show widgets and size them to the edge of the site, it doesn't fill the screen width on the live mode. It always leaves a margin.
What can I do?

Widgets do not support full width or responsive. I hope they do support it in the near future though.

Creating a Responsive Image Slider in Dreamweaver

Similar Messages

Maybe you are looking for