1. CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman

2. Creating a Web Site from scratch Design color scheme, logo, buttons or navigation style. Create layout in CSS Create pages and add content

3. Questions to ask a Web Design Client Do you have a logo? (for color scheme) Do you have a preference in colors, design, layout? Do you already have a website? What do you like or not like about it? What information do you want customers to see? What information do you need to update frequently?

4. Logo Creation Graphic Designers use Adobe Illustrator or Photoshop. Usually saved as an image: gif or png (do not use jpg – lossy compression for text). Online tools for non-designers: – – http://www.cooltext.com/ (text only)http://www.cooltext.com/ – –http://www.logogenerator.com/ (some images included, click on Logo Generator tab)http://www.logogenerator.com/ –http://www.flamingtext.com/ http://www.flamingtext.com/

5. Choose Navigation Style Top or Side Navigation. Types of links: –Text links, see http://www.elms.edu http://www.elms.edu –Image Map with hot spots, http://localnorthampton.com http://localnorthampton.com –Buttons (images), see http://GreenfieldMassage http://GreenfieldMassage –CSS3 Buttons, see http://apple.com http://apple.com –Menus, see http://elms.readyhosting.com http://elms.readyhosting.com

6. Image Rollovers Create 2 button images where one is the image when the mouse is rolled over it (can use http://www.cooltext.com ) http://www.cooltext.com Insert/Image Objects/Rollover Image and find 2 images and type in link.

7. CSS Buttons or Text Links Very popular right now. We’ll learn how to do this in the next weeks. Advantage: Easy to change text. No extra images. Drawback: different browsers do the CSS3 code differently so lots of CSS code variants.

8. CSS and Divs for Layout CSS is now the preferred method for styling the Layout of a web site. The tag is used to divide a web page into areas with different styles Where the top banner/logo goes Where the top banner/logo goes Navigation Links Navigation Links TEXT: CONTENT AREA TEXT: CONTENT AREA</div> bottom of page bottom of page

9. Insert CSS Divs in Dreamweaver From the Insert menu, choose Layout Object/Div Tag. Click on the New CSS Rule button at the bottom or type in an id like header and design the style later in the CSS panel. This inserts Content for id "header” Goes Here

10. New CSS Rule Hit the New CSS Rule button on last slide or the + button at the bottom of the CSS panel on the top right. –ID: used once, use for divs –Class: can be used many times. –Tag: for html tags like –Tag: for html tags like –Compound: like –Compound: like Choose New Style sheet first time, add to style sheet after that.

11. Edit CSS Div Rules Double click on a rule like header in the CSS panel on the top right or hit the pencil icon at the bottom of the panel. Type: for font, text color Background: background color or image Box: for width/height, margins, padding!

12. Background Image Add a new CSS rule (+ at bottom of CSS panel) for the HTML Tag body. Choose Background Tab. Repeat or No-repeat, Fixed in place or Scroll with content. (file size should be small!)

13. Fixed Background Image with Floating Content in CSS See http://www.elms.edu and http://www.dreamweaverresources.com/tutorials/background- transparent/index.html http://www.elms.edu http://www.dreamweaverresources.com/tutorials/background- transparent/index.html http://www.elms.edu http://www.dreamweaverresources.com/tutorials/background- transparent/index.html Put in a fixed background image in a CSS Body rule. Add a container div with 80-90% width and auto adjusting left/right margins to center it. To make container transparent to see the image underneath use background: transparent or opacity property (0 to 1 so.8 is usually good). For IE, To make container transparent to see the image underneath use background: transparent or opacity property (0 to 1 so.8 is usually good). For IE, filter:alpha(opacity=80);

14. Creating Large Web Sites (> 5 pages) Content Management Systems (CMS) Copy and paste in header/layout sections in each page or copy whole page with File/Save As. Dreamweaver Templates Iframes: set up 1 layout page, put content in separate pages in iframes in middle. PHP/ASP server-side includes: separate out header, footer, etc. into separate pages.

15. CMS: Content Management Systems Advantages: easy to maintain site Drawbacks: need a web server and CMS software installed (Google Sites, Drupal, WordPress, Weebly, etc.). Not as much control over design. Sometimes cost. Dreamweaver has its own CMS and web hosting service called Business Catalyst with a monthly hosting charge and lots of extensions like Shopping Carts, Forms, etc.

16. Drawbacks of Cut and Paste If you have to make a change to the logo or links, you have to change each page! Having separate CSS file attached helps some for color and layout changes.

17. Dreamweaver Templates Create a web page with the elements common to your whole website (header, footer, banner, layout, nav, etc.) File/New Template or File/Save As Template. Saves as a.dwt file, can only be opened in Dreamweaver. Make editable regions with Insert/Template Objects/Editable Region. Save. Create new blank pages from Template (or apply template to existing pages, Modify/Template/Apply Template).

18. Drawbacks to Dreamweaver Templates Advantage: changes to template.dwt file will affect all pages that use that template. Drawbacks: Creates a.dwt file that can only be opened in Dreamweaver! Dreamweaver needed for easy maintenance of site! Clients may not have Dreamweaver. If not, they will have to wade through a lot of HTML to get to the text to change.

19. IFrames http://elms.readyhosting.com http://elms.readyhosting.com Create a web page with the elements common to your whole website (header, footer, banner, layout, nav, etc.) http://elms.readyhosting.comhttp://elms.readyhosting.com In the content area, Insert/HTML/Frames/IFrame to put in an iframe. In the code, type in a name, src file, width, height, etc. In your nav links, in the Target: property of each link, type in name of iframe, e.g. iframe1).

20. Iframe Drawbacks Advantages: separates content from design/layout of web site. Client can easily change text files for content areas without touching the web site layout. But usually only used for small boxes like embedding a map page (Google Maps), Facebook box, scrolling current news, etc. Drawbacks: Search engines will probably not find and tag the embedded text files. Internal files not shown in URL. Separate scroll bar.

21. PHP server side includes Separate the header, footer, nav sections into separate.php files. Include them into new.php pages with server php code (Insert/PHP/include): See http://elms.readyhosting.com/php/site_demo / http://elms.readyhosting.com/php/site_demo / http://elms.readyhosting.com/php/site_demo /

22. PHP Drawbacks Advantage: can separate content from layout elements. Disadvantages: You need a web server! Dreamweaver does a good job of showing separate pieces, but can’t see them in browser until you upload to a web server.

23. Big Web Site Recommendations Use a CMS if you can, so your client can easily maintain the pages. If not, use Dreamweaver Templates. If you need web programming anyway (like databases, form processing, etc.), use PHP.

24. Tutorials for templates, iframes, and php includes http://www.siteground.com/tutorials/dream weaver/dreamweaver_templates.htm http://www.siteground.com/tutorials/dream weaver/dreamweaver_templates.htm http://layersmagazine.com/using-iframes- in-adobe-dreamweaver.html http://layersmagazine.com/using-iframes- in-adobe-dreamweaver.html http://www.1stwebdesigner.com/css/how- to-create-php-website-template/http://www.1stwebdesigner.com/css/how- to-create-php-website-template/, http://www.w3schools.com/php/php_includ es.asp http://www.w3schools.com/php/php_includ es.asp http://www.1stwebdesigner.com/css/how- to-create-php-website-template/ http://www.w3schools.com/php/php_includ es.asp