CIT 256 CIT 256 Organizing Large Websites:Organizing Large Websites:

Divs, DW TemplatesDivs, DW Templates

Dr. Beryl HoffmanDr. Beryl Hoffman

Creating a Web Site from scratchCreating a Web Site from scratch

Design color scheme, logo, buttons or Design color scheme, logo, buttons or navigation style.navigation style.

Create layout in CSSCreate layout in CSS

Create pages and add contentCreate pages and add content

Questions to ask a Questions to ask a Web Design ClientWeb Design Client

Do you have a logo? (for color scheme)Do you have a logo? (for color scheme)

Do you have a preference in colors, design, Do you have a preference in colors, design, layout?layout?

Do you already have a website? What do Do you already have a website? What do you like or not like about it?you like or not like about it?

What information do you want customers to What information do you want customers to see?see?

What information do you need to update What information do you need to update frequently?frequently?

Logo CreationLogo Creation

Graphic Designers use Adobe Illustrator or Graphic Designers use Adobe Illustrator or Photoshop. Photoshop.

Usually saved as an image: gif or png (do Usually saved as an image: gif or png (do not use jpg – lossy compression for text). not use jpg – lossy compression for text).

Online tools for non-designers:Online tools for non-designers:–  http://www.cooltext.com/ (text only)– http://www.logogenerator.com/ (some images

included, click on Logo Generator tab)– http://www.flamingtext.com/

Choose Navigation StyleChoose Navigation Style

Top or Side Navigation.Top or Side Navigation.

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

Image RolloversImage Rollovers

Create 2 button images where one is the Create 2 button images where one is the image when the mouse is rolled over it image when the mouse is rolled over it (can use (can use http://www.cooltext.com ) )

Insert/Image Objects/Rollover Image and Insert/Image Objects/Rollover Image and find 2 images and type in link.find 2 images and type in link.

CSS Buttons or Text LinksCSS Buttons or Text Links

Very popular right now. We’ll learn how to Very popular right now. We’ll learn how to do this in the next weeks.do this in the next weeks.

Advantage: Easy to change text. No extra Advantage: Easy to change text. No extra images. images.

Drawback: different browsers do the CSS3 Drawback: different browsers do the CSS3 code differently so lots of CSS code code differently so lots of CSS code variants.variants.

CSS and Divs for LayoutCSS and Divs for LayoutCSS is now the preferred method for styling CSS is now the preferred method for styling the Layout of a web site.the Layout of a web site.

The <div> tag is used to divide a web page The <div> tag is used to divide a web page into areas with different stylesinto areas with different styles

<<div id=“header”> Where the top banner/logo goes </div>div id=“header”> Where the top banner/logo goes </div>

<div id=“navbar”> Navigation Links </div><div id=“navbar”> Navigation Links </div>

<div id=“content”><div id=“content”>

TEXT: CONTENT AREATEXT: CONTENT AREA

</div></div>

<div id=“footer”> bottom of page </div><div id=“footer”> bottom of page </div>

Insert CSS Divs in Insert CSS Divs in DreamweaverDreamweaver

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

<div id="header">

Content for id "header”

Goes Here</div>

New CSS RuleNew CSS RuleHit the New CSS Rule button on Hit the New CSS Rule button on last slide or the + button at the last slide or the + button at the bottom of the CSS panel on the bottom of the CSS panel on the top right.top right.– ID: used once, use for divsID: used once, use for divs– Class: can be used many times.Class: can be used many times.– Tag: for html tags like <body>Tag: for html tags like <body>– Compound: like <ul> <li><a>Compound: like <ul> <li><a>

Choose New Style sheet first Choose New Style sheet first time, add to style sheet after time, add to style sheet after that.that.

Edit CSS Div RulesEdit CSS Div Rules

Double click on a rule like Double click on a rule like header in the CSS panel on the header in the CSS panel on the top right or hit the pencil icon at top right or hit the pencil icon at the bottom of the panel.the bottom of the panel.

Type: for font, text colorType: for font, text color

Background: background color Background: background color or imageor image

Box: for width/height, margins, Box: for width/height, margins, padding!padding!

Background ImageBackground Image

Add a new CSS rule (+ at bottom of CSS panel) Add a new CSS rule (+ at bottom of CSS panel) for the HTML Tag for the HTML Tag bodybody..

Choose Background Tab.Choose Background Tab.

Repeat or Repeat or

No-repeat,No-repeat,

Fixed in place orFixed in place or

Scroll with content.Scroll with content.

(file size should be(file size should be

small!)small!)

Fixed Background Image with Fixed Background Image with Floating Content in CSS Floating Content in CSS

See See http://www.elms.edu and and http://www.dreamweaverresources.com/tutorials/background-transparent/index.html

Put in a fixed background image in a CSS Body Put in a fixed background image in a CSS Body rule.rule.

Add a container div with 80-90% width and auto Add a container div with 80-90% width and auto adjusting left/right margins to center it.adjusting left/right margins to center it.

To make container transparent to see the To make container transparent to see the image underneath use background: transparent image underneath use background: transparent or opacity property (0 to 1 so .8 is usually or opacity property (0 to 1 so .8 is usually good). For IE, good). For IE, filter:alpha(opacity=80);

Creating Large Web Sites Creating Large Web Sites (> 5 pages)(> 5 pages)

Content Management Systems (CMS)Content Management Systems (CMS)

Copy and pasteCopy and paste in header/layout sections in in header/layout sections in each page or copy whole page with File/Save each page or copy whole page with File/Save As. As.

Dreamweaver TemplatesDreamweaver Templates

IframesIframes: set up 1 layout page, put content in : set up 1 layout page, put content in separate pages in iframes in middle. separate pages in iframes in middle.

PHP/ASP server-side includesPHP/ASP server-side includes: separate out : separate out header, footer, etc. into separate pages.header, footer, etc. into separate pages.

CMS: Content Management CMS: Content Management SystemsSystems

Advantages: easy to maintain siteAdvantages: easy to maintain site

Drawbacks: need a web server and CMS Drawbacks: need a web server and CMS software installed (Google Sites, Drupal, software installed (Google Sites, Drupal, WordPress, Weebly, etc.). Not as much WordPress, Weebly, etc.). Not as much control over design. Sometimes cost.control over design. Sometimes cost.

Dreamweaver has its own CMS and web Dreamweaver has its own CMS and web hosting service called hosting service called Business CatalystBusiness Catalyst with a monthly hosting charge and lots of with a monthly hosting charge and lots of extensions like Shopping Carts, Forms, etc.extensions like Shopping Carts, Forms, etc.

Drawbacks of Cut and PasteDrawbacks of Cut and Paste

If you have to make a change to the logo If you have to make a change to the logo or links, you have to change each page!or links, you have to change each page!

Having separate CSS file attached helps Having separate CSS file attached helps some for color and layout changes.some for color and layout changes.

Dreamweaver TemplatesDreamweaver TemplatesCreate 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).

Drawbacks to Dreamweaver Drawbacks to Dreamweaver TemplatesTemplates

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.

IFramesIFramesCreate a web page with the elements common to your whole website (header, footer, banner, layout, nav, etc.) http://elms.readyhosting.com http://elms.readyhosting.com

In the content area, In the content area, Insert/HTML/Frames/IFrameInsert/HTML/Frames/IFrame to put to put in an iframe. In the code, type in a name, src file, in an iframe. In the code, type in a name, src file, width, height, etc.width, height, etc.

<iframe name=“iframe1” src="home.html“ width=“100%” height=“100%” scrolling= "auto" frameborder="0" allowTransparency="true”></iframe>

In your nav links, in the Target: property of each link, type in name of iframe, e.g. iframe1).

Iframe DrawbacksIframe DrawbacksAdvantages: separates content from Advantages: separates content from design/layout of web site. Client can easily design/layout of web site. Client can easily change text files for content areas without change text files for content areas without touching the web site layout. touching the web site layout.

But usually only used for small boxes like But usually only used for small boxes like embedding a map page (Google Maps), embedding a map page (Google Maps), Facebook box, scrolling current news, etc.Facebook box, scrolling current news, etc.

Drawbacks: Search engines will probably not Drawbacks: Search engines will probably not find and tag the embedded text files. Internal find and tag the embedded text files. Internal files not shown in URL. Separate scroll bar. files not shown in URL. Separate scroll bar.

PHP server side includesPHP server side includes

Separate the header, footer, nav sections into Separate the header, footer, nav sections into separate .php files.separate .php files.

Include them into new .php pages with server Include them into new .php pages with server php code (Insert/PHP/include):php code (Insert/PHP/include):

<?php include("header.php"); ?><?php include("header.php"); ?>

<?php include(“nav.php"); ?><?php include(“nav.php"); ?>

<?php include(“footer.php"); ?><?php include(“footer.php"); ?>

See See http://elms.readyhosting.com/php/site_demo/http://elms.readyhosting.com/php/site_demo/

PHP DrawbacksPHP Drawbacks

Advantage: can separate content from Advantage: can separate content from layout elements.layout elements.

Disadvantages: You need a web server! Disadvantages: You need a web server! Dreamweaver does a good job of showing Dreamweaver does a good job of showing separate pieces, but can’t see them in separate pieces, but can’t see them in browser until you upload to a web server. browser until you upload to a web server.

Big Web Site Big Web Site RecommendationsRecommendations

Use a CMS if you can, so your client can Use a CMS if you can, so your client can easily maintain the pages.easily maintain the pages.

If not, use Dreamweaver Templates.If not, use Dreamweaver Templates.

If you need web programming anyway If you need web programming anyway (like databases, form processing, etc.), (like databases, form processing, etc.), use PHP.use PHP.

Tutorials for templates, iframes, Tutorials for templates, iframes, and php includesand php includes

http://www.siteground.com/tutorials/http://www.siteground.com/tutorials/dreamweaver/dreamweaver_templates.htmdreamweaver/dreamweaver_templates.htm

http://layersmagazine.com/using-iframes-in-http://layersmagazine.com/using-iframes-in-adobe-dreamweaver.htmladobe-dreamweaver.html

http://www.1stwebdesigner.com/css/how-to-http://www.1stwebdesigner.com/css/how-to-create-php-website-template/, create-php-website-template/, http://www.w3schools.com/php/php_includeshttp://www.w3schools.com/php/php_includes.asp.asp