SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Department of Fish and Game Website Lesson
Create a new Photoshop Document:
800 px wide, 1000 px high (72 resolution)
save as: fish and game.psd in desktop folder:
FishAndGame.
View: Enable Rulers, Units=px
Using Move tool, drag out guides:
Place header guide at H200
Place sidebar guide at V200
Place rightbar guide at: V600
Place footer guide at H850
Create Layers:
Create header layer. Create a new layer, rename the layer as header. Open the
header jpg image from the pictures folder. Drag the image to the header area.
Create Footer layer. Create a new layer, rename as footer. Using the bridge open
the footer image. Drag the footer image to the footer area.
Create new layer rename as: sidebar
Create Sidebar Gradient:
1. Sample color of footer’s darker
blue region, toggle color palette
2. Sample blue region of sky in the
header
Shift -Drag a gradient from top of
sidebar to bottom of sidebar
Colors of the bottom of the sidebar
should blend into the footer.
Create new layer rename as: main
Create Main Content:
Select background layer
fill w/ medium gray color #777777
1
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Create new layer rename as: rightbar
With Sampled Colors from the earlier gradient - Shift - Drag a gradient from
top of rightbar to bottom of rightbar Colors of the bottom of the rightbar should
blend into the footer.
Slice it
Make slice selections using Slice Tool
Make adjustments to slices using Slice Select
Tool
Using the Slice Tool, slice the header,
Select blue options tab, to name slice as
header
Slice the sidebar, name as: sidebar
Slice the main, name as: main
Slice the rightbar, name as: rightbar
Slice the main, name as: main
Slice the footer, name as: footer
Slice Options Tab
Save this Document as FishandGame.psd
in the FishandGame Folder on your
desktop
Save for Web and Devices
Select each slice and set optimization
to file type jpg with high quality
Slice Option for header, sliced named as header
Save with option USER SLICES ONLY in desktop folder: FishandGame
2
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
In Dreamweaver
With FishandGame folder on desktop
Define website: Site, New Site, FishandGame.
Set Root Folder as FishandGame/images (on desktop)
New Html Page,
Ensure Files Panel and CSS Panels are visible
Set View to Classic, Enable rulers, units=px
Title: Fish and Game Home Page,
Save as index.html
Insert Div Tags
Insert After Start of Body Tag
ID: Wrapper
New CSS Rule
Selector type ID
Selector Name #wrapper
New Style Sheet
Save new style sheet as fishNgame.css
Insert Div Tag After the Start of the wrapper,
ID = header, inside fish_Game.css Ok All
Insert Div Tag After tag header,
ID = sidebar, inside fishNgame.css Ok All
Insert Div Tag After tag navbar,
ID = main, inside fishNgame.css Ok All
Insert Div Tag After tag main,
ID = rightbar, inside fishNgame.css Ok All
Insert Div Tag After tag rightbar,
ID = footer, inside fishNgame.css Ok All
3
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Set Div Tag Properties
wrapper properties:
width 800px,
margin: 0 auto
text-align: center
header properties:
background-image:
header.jpg,
height 200px
sidebar properties:
height:600px
width: 200px
background-image: sidebar.jpg,
float: left
main properties:
height 600px
width 400px
background-image: main.jpg,
float: left
rightbar properties:
height: 600px
width: 200px
background-image: rightbar.jpg,
float: right
index.html (so far)
footer properties:
height: 150px
background-image: footer.jpg
clear: both
4
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Insert Buttons in Sidebar
Select before the placeholder text
Enter and Insert Image / Rollover Image
Original Image: browse for:
home_dn.jpg
Rollover Image home_up.jpg
When Click go to URL: index.html, OK
Enter a paragraph break after the
HOME button then…,
Repeat with education buttons and
link to education.html
Insert Rollover Image Window
Insert Enforcement buttons,
and link to enforcement.html
Insert Licensing buttons
and link to licenses.html
Insert Poachers buttons and
link to poachers.html
Insert Publications buttons and
link to publications.html
Insert Recreation buttons and link
to recreation.html
Page Properties Appearance CSS: Verdana 16 Bold #FFF (white)
index.html (so far)
Appearance HTML Background image: page_bg.jpg
Create Additional CSS Rules
1. Create CSS Class Rule in fishNgame.css, named blue_text, Verdana 18 bold #0FF
(Aqua blue)
2. Create CSS Class Rule in fishNgame.css, named border_red, Inset Medium #F00
(red)
5
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Move all CSS rules to fishNgame.css
Insert Link Titles In rightbar
In the rightbar before the placeholder text
type the following in all caps, each separated
by paragraph break:
WATERCRAFT (not currently linked)
WATER SKIING (not currently linked)
WATER SPORTS (not currently linked)
WATER TOWING (not currently linked)
Delete placeholder text
Apply CSS Class Rule: blue_text
index page
Create a Template with Editable Regions
Select main Placeholder Text, Insert Template Objects, Create Editable
Region, Edit Region,1 OK
Select main Placeholder Text, Insert Template Objects, Create Editable
Region, Edit Region2, OK
Select main Placeholder Text, Insert Template Objects, Create Editable
Region, Edit Region3, OK
Save as Template named fishNgame
Close template.
6
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Create the index page
File, New, Page from Template
In edit region1 insert: index_picture.jpg
Apply border_red rule
Add Caption Below Image: Billy pulls out a
big fish while his Grampa cheers him on.
Apply CSS Class Rule blue_text to caption
Footer Text: The duty of youth is to
challenge corruption. -Kurt Cobain
(Apply blue-text rule)
Save as index.html
index.html
Create the education page
File, New, Page from Template
Save as education.html
Add education.jpg image
w/border_red applied,
Add Caption Below Image: Children watch
closely while hunter Dan tells a story.
Apply CSS Class Rule blue_text to caption
Footer text: Live as if you were to die
tomorrow. Learn as if you were to live
forever.” ― Mahatma Gandhi
Apply CSS Class Rule: blue_text
Save as education.html
education.html
7
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Create the enforcement page
File, New, Page from Template
Save as enforcement.html
Insert main image: enforcement image
Apply border_red,
Add Caption Below Image: Officers catch
a poacher out in the field.
Apply CSS Class Rule blue_text to caption
Footer text: Change is the law of life. And
those who look only to the past or present are
certain to miss the future.
John F. Kennedy Apply CSS Class Rule
blue_text. Save All.
enforcement.html
Create the licenses page
File, New, Page from Template
Save as licensing.html
Replace main image w/ licensing image
Apply border_red.
Add Caption Below Image: We have a Wide
Variety of Decorative License Plate Designs
Apply CSS Class Rule blue_text to caption
Footer text: “I have not failed. I’ve just found
10,000 ways that won’t work.” Thomas A.
Edison (Apply CSS Class Rule blue_text)
Save as licensing.html
licenses.html
8
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Create the poachers page
File, New, Page from Template
Save as poachers.html
Add poachers image,
Apply border_red,
Caption: Wildlife officers capture
youths suspected of poaching
Apply CSS Class Rule blue_text to caption
Footer text: “The search for a scapegoat is
the easiest of all hunting expeditions.” ―
Dwight D. Eisenhower
Apply CSS Class Rule blue_text)
Save as poachers.html
poachers.html
Create the publications page
File, New, Page from Template
Save as publications.html
Add publications image.
Apply border_red
Caption: Receive Your Once a Month Copy of
Top Wildlife Magazine
Apply CSS Class Rule: blue_text to caption
Footer text: Contact fishNgame.com
Link fishNgame game to hyperlink:
https://www.wildlife.ca.gov/
Save as publications.html
publications.html
9
4/14/2015 LJSnay
SDCCD - Intro to web Design - Fish and Game - SP15 - LSnay
Create Recreation page
File, New, Page from Template
Save as recreation.html
Add recreation image, apply border_red,
Caption: Kids looks onward as water boils
for soup while hotdogs sizzle on the fire.
Apply CSS Class Rule blue_text to caption
Footer text: “Summer afternoon—summer
afternoon; to me those have always been
the two most beautiful words in the English
language.” ― Henry James
Apply CSS Class Rule blue_text.
Save All. Test in browser.
recreation.html
10
4/14/2015 LJSnay