Objective
To practice CSS site building skills in Dreamweaver
by converting this
text-only HTML web site into this CSS web site.
Discussion
Dreamweaver templates have very powerful automation tools for managing hundreds of pages. In this exercise, we will build a responsive master page from scratch and then convert it into a Dreamweaver template.
To make our website responsive, we'll use Matt Imlin's "One Percent CSS Grid." This framework is one of the easier to understand systems out there.
Important: When using Dreamweaver's templates, you MUST have a separate site definition for every site. There must be a separate TEMPLATE folder in the root directory of every site where templates are being used.
Procedure
Overview: Prep pixel elements in Photoshop (optional), add pixel elements to existing text-only HTML files, add CSS styles. Make a template page. Apply template to content. Test, publish to server. Note: replace bold with personalized info.
Prepping for the exercise
- download starter files (move files to proper location)
- download responsive framework files;
merge with "dove" folder
- examine files
- open "dove.psd" in Photoshop (optional)
- save as "dove-front.psd" and "dove-inside.psd"
- slice elements needed for both pages
- create a seamless tile (see tutorial)
Laying out the master page
- launch dreamweaver
- define a new site (site > new site): name=dove,
local root folder=class/html/exercises/dove_html
- copy contents of "framework" folder into root folder
- open "grid.html"; save as "master.html"
- select 4th row <div.onerow>; copy
- delete <div.onepcssgrid-1000>
- paste (note <div.col4> is now <div.col41>; edit as follows)
- change the following DIVs:
• <div.col41> to <div.col2>
• <div.col41> to <div.col3>
• <div.col4 last> to <div.col7 last>
- wrap DIVs around the following content:
• inside <div.col2>: <div#menu>
• inside <div.col3>: <div#pix>
• inside <div.col7 last>: <div#content>
- copy content from "calendar.html" into above DIVs
- make menu items <ul>
- insert > image "logo.png" into <div#menu>; link to "index.html"
- select <body>; arrow left
- insert > image "bg-calendar.gif"; class=right
- select <img.right>
- insert > layout objects > div tag: ID=bg (wraparound)
- select <div#bg>
- insert > layout objects > div tag: ID=top (wraparound)
Styling the master page
- insert > image "tracing_images/colors.gif" (for reference)
- window > css: edit "font.css"
• body: Georgia, 1/1.4em
• h1:
1.8/1em, italic, green
• h2: Arial Black, 1em, blue; box: padding-top/bottom=0
• a: brown
• a:hover: blue, text-decoration=none
- delete "colors.gif"
- window > css: new css style (+), define in "font.css":
• #menu ul li: list-style-type=none
• #menu ul: box: padding-left=0
• #menu a: Arial Black, .75em
- window > css: edit "layout.css"
• body: bg="tile.gif", repeat-y
• .container: min-width=1000px (disable all other properties)
- window > css: new css style (+), define in "layout.css":
• #menu: box: width=178px; block: text-align=center
• #menu img: margin-bottom=25px
• #pix: position: relative, height=500px
• #content: box: margin-top=150px, width=70%, max-width=600px
• #top: position: absolute, z-index=-1, width=100%; min-width=1000px
• #bg: bg="line-tile.gif", repeat-x; box: height=378px, margin-left=250px
- file > preview in browser (opt+F12)
Laying out photos
- insert > image "calendar1.jpg" into <div#pix>; ID=pix1
- window > css: new css style (+), define in this document only:
• #pix1: position=absolute, z-index=1, left=??, top=??
- repeat with other calendar images, adjust position & z-index
- file > preview in browser (opt+F12)
Finishing the HTML file
- change title to "Mourning Dove Farms"
- add alt tags
- commands > clean up HTML
- file > check page...
Defining CSS "hit" states
- window > css: new css style (+), define in this document only
• .calendar: color=blue
- apply .calendar to <a> for "Calendar of Events"
- add other unique classes to each menu item (code view)
Making a style sheet for small screens
- view > window size > tablet
- window > css: new css style (+), define in "layout_small.css"
• #pix, #top: block: display=none
• #menu: bg: bg-img="tile.gif"; width=100%, margin-top=-40px
• #menu img: display=inline; box: margin-bottom=15px
• #menu ul li: box: padding-right=20px; display=inline
• #menu ul: box: padding-left=20px
• #content: box: width=90%, margin-left/right=auto, margin-top=30px
- edit <body>: bg: image=spacer.gif
- view > window size > full width
- file > preview in browser (opt+F12)
Making a print style
- view > style rendering > print
- window > css: new css style (+), define in "print.css"
• #top: block: display=none
- delete all other styles in "print.css"
- view > style rendering > screen
- file > preview in browser (opt+F12); file > print preview
Making a Dreamweaver template
- file > save as template: "master.dwt"
- insert > template objects > editable regions:
• content (don't include <div> tag)
• bg (just <img.right>)
- move #pix styles into editable region in <head>
Applying template to pages
- open "plants.html"
- modify > template > apply template to page
- swap out images, adjust position, z-index
- rename .calendar to .plants (in <style>)
- repeat with other pages
(contact has same images as calendar)
- site > check links
sitewide
Fine-tuning the Map page
- select all map text (cmd+A)
- insert > layout objects > div tag (ID=map)
- window > css: new css style (+), define in this document only
• #map: box: width=350px, margin-left=-180px; position=absolute
- window > css: new css style (+), define in "layout_small.css"
• #map: box: width=100%, margin-left=0px
- file > preview in browser (opt+F12); file > print preview
Making the home page
- open "index.html"
- modify > template > apply template to page
- modify > templates > detach from template
- delete <div.col3>
- rename <div.col7 last> as <div.col10 last> (code view)
- replace "bg-calendar.gif" with "home-top.jpg" (double-click)
- rename <div#bg> as <div#bg-home>
- rename <div#content> as <div#content-home>
- window > css: new css style (+), define in "layout.css"
• #bg-home: box: height=???, margin-left=178px;
bg-image="home=top.jpg"
• #content-home: box: width=50%, margin-left/right=auto, margin-top=200px
• rename .calendar as .none
- delete "home-top.jpg"
- view > window size > tablet
- rename <div#top> as <div#top-home>
- window > css: new css style (+), define in "layout_small.css"
• #top-home: position: relative, z-index=1; box: margin-bottom=-20px;
min-width=0
• #bg-home: bg-image="../images/home-top.jpg"; box: margin-left=-2px
• #content-home: box: width=90%, margin-top=0
- view > window size > full width
- file > preview in browser (opt+F12); file > print preview
Grading
- publish site (see separate lesson)
- test site responsiveness at mattkersley.com/responsive
- make a link from your process page to this assignment
