Transcript Web Page Development I

Web Page Development I
Heather Rasmussen
[email protected]
(801) 581-6414
Getting Started
•
•
•
•
•
Components
Package
Aesthetics
Research
Project
Understanding the Components
•
•
•
•
•
Folders
Images
Art
Links
Files
Building the Package
• On the desktop
– Yourunid_Plants
• (example: 00145761_Plants)
– “art”
– “documents”
– “images”
Building the Package
• Place your created web art (the .ai and
.jpg or .gif files on your desktop) into the
“art” folder.
• Place the “art”, “documents”, and
“images” folders into your unid_Plants
folder.
• This is the beginning of the package.
Thinking Aesthetics
•
•
•
•
High quality images
Background
Header
Layout
– Pieces of a puzzle
Performing Research
• Web Pages v. Research Papers
– Citations (at least four links to external
sites)
– Images
– Maps
– Text
• Use multiple types of resources - including
images you create.
Today’s Project
• Developing a Cascading Style Sheet
– .css
• These can be developed in two ways
– Internally (within the .html page code)
– Externally (as an independent document)
• We will be developing an external .css
that will be used for your site.
Cascading Style Sheet
• Open Dreamweaver CS5
• Select from the File menu “New”
• Under Page Layout, select “CSS”
– The Layout should be blank.
• Save your new .css file.
– Name the file plants.css
– Save to your unid_Plants folder.
Cascading Style Sheet
• The file should be opened using the
“Code” option toward the top of your
screen.
• Beginning on line 4, we will enter the
formatting preferences for our web
pages.
•We want all of our web
pages to have a similar
look and feel.
•Let’s start by declaring
what we want to be
different from the default.
•links
•body
•headers
•font
•table
Cascading Style Sheet
• About .css
a = links or anchors
body = the entire background of the web page
h1, h2, h3 = headers of different sizes
font = all text, when requested
table = the visual body of the web page
Cascading Style Sheets
a {color:#60; text-decoration:none}
body {background-image:url(art/plant_bg.jpg)}
h1 {color:#900}
h2 {color:#900}
h3 {color:#900}
font {font-family:”Comic Sans MS”, cursive}
table {background-color:#FFF}
Cascading Style Sheets
• Save your plants.css file
– You will not see the effects of the style
sheet until you create your .html files and
link these two documents together.
From here…
• You are free to use the rest of the time to
work on your projects.
– Research
– Designing background imagery and headers
• Next Week
– Linking your plants.css to your .html files.
– Designing and developing your web pages.
– Continuing to work on your projects as needed.