In the classroom we all used Dreamweaver on the Mac, there are only a few minor differences between the mac and PC version. The basic one is that on a Mac the control key and a mouse click is the right mouse button on the PC…
Building a Website, the tutorial, using positioning rules to place content on a web page, and building menus.
Layout Review
The basic thing to remember here is that the "left" side and "top" of a web page are fixed, the (zero, zero) co-ordinates are at the top and left corner of ANY web page. So when you position any element it is always from the "top;" and/or from the "left:"
Building a Web Page Tutorial begins with the "Building a Banner Tutorial" inserting -images & backgrounds into the <header> (banner) of your web page.
This tutorial uses html5 , the first 7 pages deal with just the <header> (the banner)
Building a web Page -- The Banner Tutorials
Please note: You can always start with an existing pre-formatted layout, This will jump start your web page building. There are several in your Master website folder!
Homework, use the following layout to build a banner in Dreamweaver. You can download and use Dreamweaver for free, for 30 days…. give it a try!
- Use this layout generator--- CSS Layout Generator it can make equal height columns regardless of content… This is an example…URL is http://uofgts.com/BasicWD/layout/index.html It is also in your week 3 folder!
- Add YOUR content for the JUST the header (banner)
Making Menus
Making menus is one of the hardest thing to do… it's quite time consuming!
You will find many easy ways to get you going, "jumpstart" your web page.
- Make Your Own Menus!
- Menus come in 2 parts. Part 1 is an HTML list that goes between <body> and </body>. Part 2 is the styling the CSS that goes between <style> and </style>.
- You may use the The Menu Tutorials (There are cut and paste examples)
- In class we used Ian Lloyd's The List-o-matic menu generator List-o-matic
- Don't like List-o-matic Try this generator Pure CSS Generator it's free, they sell downloadable software, but for our purposes it is not necessary to buy… just use the online generator!
- Make menus for Home, Contact, About and Products and or the purposes of your web site.
- Insert the menus on your web page (see the web page tutorials page 8)
- Once you have inserted your menus you can Now duplicate your index.html page , and rename them: about.html, contact.html and products.html, etc…
- Congratulations, you now have the beginnings of a web site!
For those of you that want to continue further …You can use Wizards and Widgets to embellish your web site!
Web Tools, Wizards and Widgets
On-Line and desktop References for html and CSS
Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the Sitepoint on-line references for CSS and HTML. Check out Code Burner!
Graphically Challenged?
The Cool Text web site will help you design a logo. The Cool Text Wizard
Gota question? 'Holler
No comments:
Post a Comment