SDCCD - Intro to Web Design – Miami Style – LJSnay
Miami Style Web Site Lesson
Preparation: Copy the Miami Style_stu Root
folder to your desktop
Launch Photoshop
Create a new Photoshop Document
800px wide, 600px high (72 resolution)
Save as: Miami Style.psd in root folder
Launch Adobe Bridge
In bridge open the pictures folder: Select and
open the Miami header.jpg. Drag the header
image onto the Miami style document.
Miami Style with Miami header
In Bridge open: seafloor blue.jpg.
Drag the seafloor blue to cover the lower
portion of Miami Style
Insert Guides
Drag a guide from the horizontal ruler down to
200px and another to 550px
Drag a vertical guide to 250px and another
to600px
Miami Style with header and seafloor blue
(As Shown)
Miami Style.psd with 2 horizontal
and 2 vertical guide lines
1
SDCCD - Intro to Web Design – Miami Style – LJSnay
Slice the Header
Using Slice Tool make a selection of the
header.
Name the Slice
Click on the Slice Options tag in the
upper right corner of the slice
Enter the slice name as header, OK
Slice the Remaining Segments
Note: that W=800 and H=200.
The Slice is perfect
Slice Footer region and name footer
Slice Sidebar region and name sidebar
Slice Main region and name main
Slice Rightbar region and name rightbar
Save As Miami Style.psd
Save in Desktop root folder Miami Style
Save For Web
Select header slice, set slice properties to jpg and medium
Select sidebar slice, set slice properties to jpg and medium
Select main slice, set slice properties to jpg and medium
Select rightbar slice, set slice properties to jpg and medium
Select footer slice, set slice properties to jpg and medium
Save….. Ensure that this is being saved to the root folder.
With option: User Slices Only
A folder now appears in the Miami Style Folder named Images.
In the images folder are the sliced optimized images.
2
SDCCD - Intro to Web Design – Miami Style – LJSnay
Launch Dreamweaver
Set to classic view, enable rulers, and set units to pixels.
Make visible the CSS Panel and the Files Panel
Define Website
New website, Title as: Miami Style, Set Miami Style_stu/ Images as your root
folder
Create new HTML page
Set page title as: Miami Style Home Page, save page as: index.html
Create page Layout
Insert Div tag
After the Start of the body tag,
ID wrapper, New CSS Rule
New CSS Rule
Selector Type: ID,
Selector name #wrapper
Rule Definition: New Style Sheet
Name the New Style Sheet:
miami.css
index page with div tags
Create Additional Div Tags
Insert Div Tag, After the Start of tag wrapper, ID = header… inside miami.css
Insert Div Tag, After Tag header, ID = sidebar … inside miami.css
Insert Div Tag, After Tag sidebar, ID = main … inside miami.css
Insert Div Tag, After Tag main, ID = rightbar … inside miami.css
Insert Div Tag, After Tag rightbar ID = footer … inside miami.css
3
SDCCD - Intro to Web Design – Miami Style – LJSnay
Create CSS Rules
New CSS Rule, Class, header_img, miami.css, Background Image: header.jpg
New CSS Rule, Class, sidebar_img, miami.css, Background Image: sidebar.jpg
New CSS Rule, Class, main_img, miami.css, Background Image: main.jpg
New CSS Rule, Class, right_img, miami.css, Background Image: rightbar.jpg
New CSS Rule, Class, footer_img, miami.css, Background Image: footer.jpg
New CSS Rule, Class, border-red, category border solid medium, red #F00
Page Properties, Appearance CSS, Verdana 20 bold White #FFF
Set Properties of Div Tags
Wrapper Properties:
margin
0 auto
width
800 px
text-align center
Header Properties:
height
200 px
width
800 px
Sidebar Properties:
height:
350 px
width:
200 px
float:
left
Main Properties:
height:
350 px
width:
400 px
float:
left
index page
Rightbar Properties:
height:
350 px
width:
200 px
float:
right
Footer Properties:
height:
50
px
Width
800 px
clear:
both
4
SDCCD - Intro to Web Design – Miami Style – LJSnay
Insert CSS Rules
In header, add Class: header_img, delete placeholder text
In sidebar add Class: sidebar_img, delete placeholder text
In main add Class: main_img, delete placeholder text
In rightbar add Class rightbar_img, delete placeholder text
In footer add Class footer_img, delete placeholder text,
Delete wrapper placeholder text
Add Rollover Buttons for Navigation in Sidebar
Click to select inside of sidebar (No room for extra paragraph breaks in sidebar)
Insert Image Object: Rollover image
Original Image: Home
Rollover Image: Page
Go to URL: index.html
Insert Image Object: Rollover image
Original Image: NIGHT
Rollover Image: LIFE
Go to URL: nightlife.html
Insert Image Object: Rollover image
Original Image: SOCIAL
Rollover Image: PEOPLE
Go to URL: social.html
Insert Image Object: Rollover image
Original Image: DINING
Rollover Image: FOOD
Go to URL: dining.html
Insert Image Object: Rollover image
Original Image: DANCE
Rollover Image: STYLE
Go to URL: dance.html
Insert Image Object: Rollover image
Original Image: SPORTS
Rollover Image: NIGHT
Go to URL: sports.html
sidebar with rollover buttons
5
SDCCD - Intro to Web Design – Miami Style – LJSnay
Insert main contents
In the main Div tag insert index-main.jpg
Add border-red class rule to image.
Insert Rightbar Contents
Insert rightbar contents
Insert bluefish.png image (Located in the
pictures folder)
Insert diver.png image
Using Page Properties, insert background
image: background-index.
Insert footer caption “Miami Style brings
you the latest trends fashions and most
exciting people
Save as index.html
index.html
Create the nightlife page
Save index.html as nightlife.html, replace
main image with nightlife image, apply
border-red CSS rule to image. Using Page
Properties, insert background image:
background-nightlife. In footer replace text
with: It's an exciting time for the Miami
dining scene. From farm-to-table restaurants,
trailblazing local chefs and authentic Latin
American cuisine
Save as nightlife.html
nightlife.html
Create Social Page
Save nightlife as sports.html, replace main
image with sports image, apply border-red
CSS rule to image. Using Page Properties,
insert background image: background-social.
In footer replace text to Meeting people in
Miami fun and easy.
Save as sports.html
social.html
6
SDCCD - Intro to Web Design – Miami Style – LJSnay
Create the dining page
Save sports.html as dining.html, replace main
image with dining image, apply border-red
CSS rule to image. Using Page Properties,
insert background image: background-dining.
In footer replace text to “It's an exciting time
for the Miami dining scene. From farm-totable restaurants, trailblazing local chefs and
authentic Latin American cuisine”.
Save as: dining.html
dining.html
Create the dance page
Save dining.html as dance.html, replace main
image with dance night image, apply borderred CSS rule to image. Using Page Properties,
insert background image: background-dance.
In footer replace text to: If you've come to
Miami to party, you've come to the right
place
Save as: dance.html
dance.html
Create sports page
Save dance.html as sports.html, replace main
image with sports image, apply border-red
CSS rule to image. Using Page Properties,
insert background image: background-sports.
In footer replace text to: Get the latest
Miami sports news, scores, photos, and full
coverage of the Dolphins, Marlins,
Hurricanes, Heat and more.
Save as sports.html
7