Website Organization and DW Templates
Download
Report
Transcript Website Organization and DW Templates
CIT 256
Organizing Large Websites:
Divs, DW Templates
Dr. Beryl Hoffman
Creating a Web Site from scratch
Design color scheme, logo, buttons or
navigation style.
Create layout in CSS
Create pages and add content
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?
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.logogenerator.com/ (some images
included, click on Logo Generator tab)
– http://www.flamingtext.com/
Choose Navigation Style
Top or Side Navigation.
Types of links:
–
–
–
–
–
Text links, see http://www.elms.edu
Image Map with hot spots, http://localnorthampton.com
Buttons (images), see http://GreenfieldMassage
CSS3 Buttons, see http://apple.com
Menus, see http://elms.readyhosting.com
Image Rollovers
Create 2 button images where one is the
image when the mouse is rolled over it
(can use http://www.cooltext.com )
Insert/Image Objects/Rollover Image and
find 2 images and type in link.
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.
CSS and Divs for Layout
CSS is now the preferred method for styling
the Layout of a web site.
The <div> tag is used to divide a web page
into areas with different styles
<div id=“header”> Where the top banner/logo goes </div>
<div id=“navbar”> Navigation Links </div>
<div id=“content”>
TEXT: CONTENT AREA
</div>
<div id=“footer”> bottom of page </div>
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
<div id="header">
Content for id "header”
Goes Here</div>
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 <body>
– Compound: like <ul> <li><a>
Choose New Style sheet first
time, add to style sheet after
that.
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!
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!)
Fixed Background Image with
Floating Content in CSS
See http://www.elms.edu and
http://www.dreamweaverresources.com/tutorials/backgroundtransparent/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, filter:alpha(opacity=80);
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.
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.
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.
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).
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.
IFrames
Create a web page with the elements common
to your whole website (header, footer, banner,
layout, nav, etc.) http://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.
<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 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.
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):
<?php include("header.php"); ?>
<?php include(“nav.php"); ?>
<?php include(“footer.php"); ?>
See
http://elms.readyhosting.com/php/site_demo
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.
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.
Tutorials for templates, iframes,
and php includes
http://www.siteground.com/tutorials/dream
weaver/dreamweaver_templates.htm
http://layersmagazine.com/using-iframesin-adobe-dreamweaver.html
http://www.1stwebdesigner.com/css/howto-create-php-website-template/,
http://www.w3schools.com/php/php_includ
es.asp