Skip navigation
egasac
Currently Being Moderated

Dreamweaver with School Pupils

Nov 4, 2013 2:08 PM

Tags: #dreamweaver #novice #cs6

Hi.  Really looking for ideas on where to go with this.

I am teaching high school pupils and looking at web design.  In the first instance, pupils should be getting familiar with the  dreamweaver (CS6) UI and creating basic web sites looking at defining site, adding images, text, pages and linking pages together.

At this stage CSS should not be considered (although we will look at the very, very basics - change a text colour, say).

 

The dilemma is in how to layout pages.  Do I start (and in fact, I do, but should I?) with AP divs placed on page and content added to these AP divs which can then be moved approximately to required position?

 

Further up the school we will look at laying out divs and styling with CSS but this is not the wntry point for out 11 and 12 year olds with varying levels of ability.

 

So where would you start, and how would you develop understanding and technique for the absolute novice?

 
Replies
  • Currently Being Moderated
    Nov 4, 2013 2:24 PM   in reply to egasac

    Please stay away from APDivs (which have been removed from DWCC). Position:absolute definitely has its uses, but generally speaking, a primary lay out is not one of them.

     

    The use of CSS margins, padding and floats is the correct way to lay out a page in all but the absolute rarest situations.

     

    My vote would be to teach both html basics and css basics at the same time since they are used together in virtually every professionaly made website online.

     

    If you can get a 12 year old to grasp hand coding a basic html page with all of the necessary elements, css will be a breeze to them.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 3:57 PM   in reply to egasac

    If you've got 11 and 12 years olds who are smart enough to already be in high school, then teaching them the correct path to standards-based web design and layout shouldn't be a problem. Right?

     

    Dreamweaver CC has a real-time visual CSS editor, which makes visual layout much easier. CS6 does not. CS6 (the Creative Cloud version at least) does have Fluid Grid Layout, but I can't recommend it because I've never used it.

     

    Starting students out in CS6 (which is no longer being actively developed) does not seem like a good idea, unless you're going to train them to hand code HTML & CSS first. Familiarity with code is mandatory early on, but if you want to begin laying out HTML faster, without being locked into a system like Fluid Grid Layout, then Dreamweaver CC gives you an edge with CSS Designer.

     

    This might be helpful: https://helpx.adobe.com/creative-cloud/learn/start/dreamweaver.html

    And here: http://techlive.adobe.com/archives/

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2013 1:22 AM   in reply to egasac

    egasac wrote:

     

    In Scotland you don't have to be smart to be in high school - you just need to be 11 or 12!

     

    My mistake High School for me was grades 9 through 12 in America, where students were a little older.

     

    I still have CS6 installed, mainly because it's better equipped for working with Business Catalyst. Before CSS Designer, I used an outside CSS editor called Stylizer. I find that it's better at solving complex layout issues, but then it's also been around longer.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2013 2:44 AM   in reply to egasac

    egasac wrote:

     

    Using APDivs (with the disclaimer provided that there are better ways to layout content, gives me an in, that will be allow all pupils to create a simple site, regardless of design deficiencies.

    Or is there another way that is not APDivs, and, not yet, CSS styled divs......

     

    I would suggest that you build a simple site/layout using AP <divs> if that's all you think your pupils can manage at this stage. BUT you must emphasis that this IS a basic way to build a page and has some restrictions.

     

    A very simple layout WILL work using AP <divs> so long as you use a column approach. i.e., if you want a 2 column design then all elements MUST be insterted in the 2 columns, similarly if you want a three column design everything must be inserted in the 3 columns. You can have a header and a menu then the 2 or 3 columns following them.

     

    Using AP <divs>, although I don't and would'nt myself, may not be as bad now as it once was because most modern browsers (I think) zoom the whole design/layout and not just the text, unless you specify it to do so.

     

    The past problems with using AP <divs> centered around being anchored to where you position them and therfore would not move/expand to accommodate any enlargement of text via the browser.

     

    It's not a method I would personally teach if I'm truthful BUT a simple construction can be made using AP <divs>. Unfortunealy it gets the pupils used to bad habits which can be hard to break if they want to then eventaully produce something a little more complex.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2013 3:48 AM   in reply to egasac

    Hi,

     

    I would suggest to get this book:

     

    http://www.amazon.com/Dreamweaver-CS6-Missing-Manual-Manuals/dp/144931 6174

     

    Comes with entree level lessons and working examples (building a simple webpage and website) to high level (dynamic websites)  lessons and examples etc. etc..

     

    You only have to download the working files from a link published in the book.

     

    It's easy to create your own lessons out of it.

     

    Written in simple clear English and with a lot of humor.

     

    There is also Adobe "Class room in a book" , but from my own experience it's not well written

    and most of the time made very complicated to explain simple things!

     

    Good luck!

     

    David

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2013 6:34 AM   in reply to Web Magi

    Magi, I respectfully disagree.

     

    egasac is teaching high school students. I am going to hazard a guess here that he doesn't have that kind of a budget to go out and purchase Dreamewaver CC for a year.

     

    Basic web design is all about making boxes, egasac. Teach them to do this:

     

    body with or without a background color. Sets overall text color. Make it black. (color:#000;)

     

    Container div (not AP, just a regular div), give it a different (like white) background color

     

    Set a width that is about average screen size. Height will be created by inside content.

     

    Make a header div that fits inside the contianer. Give it a height.

    Make a nav div that fits inside the header and allows space (margin-top) that puts it on the bottom of the header.

     

    Make a content area that goes under the header. Make a footer under that within the Container div.

     

    All of this can be easily taught and, if you use HTML5 elements, it's really easy to understand. There is, essentially ONE div you have to create.

     

    Here's the HTML:

     

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>your page title here</title>

    <link href="path/stylesheet.css" rel="stylesheet" type="text/css">

    </head>

    <body>

    <div id="container">

    <header>

    <nav>

    </nav>

    </header>

    <section>

    <article>

    </article>

    </section>

    <footer>

    </footer>

    </div><!-- this closes your container div -->

    </body>

    </html>

     

    There, done.

     

    This is all the kind of stuff any high school student can do in their sleep.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2013 12:28 PM   in reply to egasac

    Here in the US, high school is for 15 - 18 year olds.

    11-12 year olds attend elementary & middle school.

     

    I would teach basic HTML5  along with CSS. 

    http://www.w3schools.com/html/html5_intro.asp

    http://www.w3schools.com/css/css_intro.asp


    No APDivs.  Use one of the starter pages in DW CS6.

    1. Go to File > New > Blank page > HTML. 
    2. Choose a layout from the 3rd panel. 
    3. Hit Create.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points