Printing & Design Teacher needs direction with Dreamweaver CC ASAP

[howardn37065722]

Hi,

My email address at work is howard [email address removed by Mod]  I am a "older" Printing teacher that has been converting my vocational program over from a traditional printing program (1988) to all digital printing (2006) to basic video production, animation & web design (2011).  I have had to learn on the way.  My first experience with Dreamweaver was MX  and I became a fan of AP Divs assigning my students to properly format images, save to the correct folder as well as make the home page link to 5 additional pages and external pages.  I always told the kids this is BASIC web design, telling my students that they could go further on their own.

I should have made this post last year, learning that AP Divs were be diminished.  But, I was able to find a work around and because I was in the middle of learning 3D printing I took the work around; converting traditional divs to AP Divs "through the backdoor".  This year I was prepared to do the same when I discovered my converted AP Divs were sometimes "linked" together (when I tried to click and move one all or some of them . . . selected and moved), and sometimes they selected and moved separately.  This did NOT happen last year and I have NO IDEA why.  While trying to find a solution I ran across enough post to convince me . . . I need to move beyond AP Divs.  I was won over by the argument that AP does NOT work on computer screens and tablet/phone screens.

So I am search of direction and help.  My goal is to develop a basic website with a home page and 4-5 workable links.  I know how to put in the background, we know how to "save for the web" in PS.  My big obstacle is how to insert images where I want them.  Keep in mind, up until know I have worked with AP Divs and that method allows for moving and overlapping very easily.

I am not asking for an email with step by step instructions (although that would be AMAZING).  I am asking for direction, video links, whatever I can access to restart my website assignment without AP Divs (wiping my teary eyes).  I am afraid that I will be in terrible trouble if I have to learn piecemeal with out direction.  This is for a High School in Ohio, my students are Juniors & Seniors and I hope someone will help me out with this.  My class is operating Yosemite on iMacs

Howard Norris

[BenPleysier]

Howard,

Welcome aboard. The world of web development has never appreciated using AP Divs for a basic layout, even when they were easy to use in earlier versions of Dreamweaver. The usage stems from the era that graphical designers were used to static layouts, the complete opposite to web design where we have to consider all kinds of client applications ranging from small screen mobiles to huge TV screens. To add to the complexity, we have to cope with different display modes right up to 4K and beyond.

To cut a long story short, our designs have to be fluid. Where a single column is used on small portrait screens, they may extend to multiple columns for larger screens. Images on small screen may be a lot smaller that those on larger screens. On top of that, we need to note that mobile users may not need the same info as desktop users; mobile users are usually on the run and need the info quickly, where the home user sits down and studies.

You did not say which version of Dreamweaver you are using, Assuming that it is the latest version, have a look at this tutorial by David Powers on How to make a website in Dreamweaver part 1, site setup | Adobe Dreamweaver CC tutorials. This should be a good start.

[melissapiccone]

I am teaching a free class, live online on Wednesday, Feb. 15 at Creativelive.com. It's free while you watch it. I'll be teaching how to create a simple responsive page from scratch and moving up to using a pre-made Bootstrap template in Dreamweaver. Sign up for it - it's from 9-4 PST - it will be worth your time:

Create Websites with Dreamweaver with Melissa Piccone

[pziecina]

A method that has gained much support over the last couple of years is called flexbox.

Even though Dw does not have much support for flexbox 'out of the box', it can safely be used in all browsers and devices now -

https://www.adobe.com/devnet/archive/html5/articles/working-with-flexbox-the-new-spec.html

Ignore the section about browser and device support. The one thing you may have to learn that is not fully covered in the article, is the use of the vendor prefixing. That said, if your classes are using IE11 or any modern browser/devices, then the only vendor prefix you require is the one shown in the articles code.

[Nancy OShea]

Responsive web design is what you should be learning and teaching your class.   Click & drag is not how you do that.  Ideally, you should create a grid and have a clear idea of where each element should go before you begin building the code.   I do this with pen & paper or build a rough composite in Photoshop as my road map.

Unfortunately, there are no shortcuts.  Understanding HTML5 structure and CSS for layout is fundamental to web design.

• HTML5 Introduction
• CSS Tutorial

Nancy