hello again...
Purchased the app for 1 month, to try out. I am attempting to design a site for my local area of NA [from scratch...now in Muse...one that had previously been designed in Macromedia DW 2004...whereby all the child divs were of 'absolute' positioning; & resided inside a parent div set to margin: 0 auto...so everything was centered on the page (over a background image)]...but absolute positioning is horrible for responsive code construction; & I want our new site to be up to protocol for browser resize & smaller devices.
So...given the conspicuous lack of templates in Muse...I worked up a rough sample of what the site looks like...(it's very simple, so this should be easy, right?):
My questions are:
1) I heard/read somewhere that there is a SKETCH functionality in Muse...if this is true...can I use it to sketch out the above; & then build the site from there?
2) Can I simply just use the Rectangle Frame tool for the parent div & the Rectangle Tool for the child divs?
2) If not one of those two...how would I go about designing this simple site in Muse on my own...???...keeping in mind that all that you see above is always centered on the page (w/ a background image behind it)...& the page has to be responsive, whereby all you see is distributed/flows correctly for browser resize & smaller devices.
3) Please don't send me to such-and-such tutorial or such-and-such code learning online seminar...I just want to do this on my own, so as to learn the basics of Muse along the way...(& if it turns out I'm too stupid for this task...if someone could put together a starter code page, where I could then place my own blocks/images/text...I would be happy to pay you, in kind...I just need to get this done; & my local area is waiting).
thanx,
mark4man
(p.s., that top block is not a header or paragraph or anything, it's just a rectangular space filled w/ the color gray)
1 Correct answer
If it matters, Adobe has announced the Muse EOL which means there is little future for this product beyond today. Tech support will extend to March 2020 but Muse will not be updated. So it is what it is.
Adobe Muse EOL announcement - Alternatives to Adobe Muse?
If you're serious about creating websites, I highly recommend using native web technologies or at least find another drag & drop app you can use to reach your goals while your commit to learning HTML, CSS and JavaScript coding.
...
8
Replies
markf26988182 wrote
Nancy OShea...
Thanx!.
Yes...I am (interested)
mark4man
OK, this is a responsive layout I whipped up in Dreamweaver using Bootstrap 4. I had to take a few design liberties to keep it responsive in all devices. View source in your browser to see the code.
NOTE: The navbar sticks to top in all browsers except IE11 :-((
Design responsive websites using Bootstrap in Dreamweaver
Building Responsive Design in Dreamweaver CC, with Paul Trani - YouTube
When you go down the perdition path of absolutely positioning a logo as you have in your mock-up, it creates problems for users & designers alike.
1) Positioning removes your element from the normal document flow such that it has no relationship with other content on the page. This is fine for rare situations like modal windows but it's not a good practice in primary or responsive layouts where the layout is changing to the user's device width.
2) Because the navbar sticks to the top, an oversized logo is going to get in the way. Most designers put a small logo inside the Navbar-Brand which is what it was intended for. See screenshots.
I invite you to look at other responsive websites to see how they deal with logos on all devices. In most cases, keeping it simple is the best course of action.
Incidentally, a 1200px GIF is way too large. You need to resize and optimize for the web first in Photoshop. For photos, JPGs give better image quality than GIFs. For vector graphic logos, export to SVG.
For all other questions, look at CSS margins and padding.
Also review the Bootstrap 12-box grid system.
AdChoices