I am planning my website and I've read that AP DIvs are not the way to go. My thought was to make two separate sites - one for mobile, one for tablet/desktop. I have tried the fluid grid layout with limited success because I want to have completely different elements, navigation bar and positioning for each format. I was thinking I would use a centering and resizing container of AP Divs for the tablet/desktop and the fluid grid for the mobile - will this work?
APDivs are Absolutely Positioned Divs. This means that they always appear a specified distance from the top/left, top/right, bottom/left or bottom/right of a browser window (or a relatively positioned parent element). This makes them an absolutely horrendous (pun intended) choice for primary layout, especially if you are new to designing websites.
What you should be concentrating on is controlling your site's style and layout with CSS using floats, margins and padding and then using "Media Queries" to reposition/restyle everything for handhelds vs tablets vs desktops.
Media queries essentially load separate styles into the html elements of a page based on the device or viewport size.
Fluid Grids in DW use them, but have a few quirks that can be hard to work with at first. When you make a fluid grid page, the same html file is used for all of your various viewer sizes, the css styling of those elements is all that changes. So you have one site that simply changes based on the viewer's device.
If you run into trouble using the fluid grid, post back, there are a few resident experts that would be happy to help you.
As for having "completely different elements" that is pretty simple to work around using display:none and display:block in the css. if you want something to show up on a desktop but not the handheld, you add display:none in the handheld's css for that element Then add one of the other display settings, like display:block, in the css for the tablet and desktop version.
Actually, you don't need to make two websites any more.
Here's the problem I have found on dual sites: The Mobile version always lacks something and the desktop version, which may be just fine on a tablet, tends to not come up if the server is thinking that it has to route a tablet to a mobile site.
You need to look into what is a coming trend: A responsive design.
Responsive websites will change their characteristics, depending on what you are looking at them on. They look at the size of the browser window and accomodate themselves to that.
There are a bunch of examples here: http://mediaqueri.es/
I have been trying to style the site with css. With the fluid grid I can't seem to put an image in the background of an entire section and have it resize to proportion (it gets cut off). Plus I want there to be dropdowns on the tablet/desktop version (styled with css) located in a particular spot of the image (not move when resized - basically have everything resize proportionately to fit the screen). For the mobile I want to use a different header image and no dropdowns, but things can restack like in your samples. The samples you provide all show the fluid grid with basically the same elements in the same order just stacked/sized differently. The look is 'boxy' and typical of what everyone else is doing.
Responsive Web Design requires some compromises. Things you could do previously inside fixed width layouts often have no place in RWD. These include but are not limited to image maps, absolute and fixed positioning.
RWD often frustrates web designers because they must learn to think outside the box and adapt to new methods.
You need to think about what's most important to the site.
Everything else is incidental.
I understand, Nancy, that navigation and usability is vital to web design. But I am trying to design a site that showcases creativity - that is what I am selling. The typical layout of logo, navigation bar, photo strip and content (in that order and basically the most common Wordpress layout) will not suffice for this website. That is why I think that a fixed position tablet/desktop site that redirects to a mobile site would, in this case, be best.
I have used the fluid grid layout to design a website for an orthodontist and it worked fine. And now the new features in CC are much more user-friendly, but I am still frustrated with the inability to position items over images.
I do not recommend building 2 sites. One site is sufficient for all devices.
See CSS Flexbox