Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more ➡
Download
Standard view
Full view
of .
Add note
Save to My Library
Sync to mobile
Look up keyword
Like this
1Activity
×
0 of .
Results for:
No results containing your search query
P. 1
HTML5-SP12-1

HTML5-SP12-1

Ratings: (0)|Views: 717|Likes:
Published by Serena Carpenter

More info:

categoriesTypes, School Work
Published by: Serena Carpenter on Apr 08, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, DOCX, TXT or read online from Scribd
See More
See less

04/08/2012

pdf

text

original

 
1
HTML5/CSS3 in Dreamweaver CS5Tips
1.
 
Make sure to
save both your .html pages and your .css page
before shutting down. Peopletend to forget to save the .css page.2.
 
If you
cannot type in Design view
, press the
Live View 
button.3.
 
Each time you log onto the computer, you must 
define a new site
to bring in your folder.4.
 
Create page for one browser preferably not IE. Firefox, Netscape, Opera, and Safari are W3Cstandards compliant.
Testing in Firefox works well
with PCs and Macs.
5.
 
Header, footer, and wrap all the same pixel length across (960px).
6.
 
Creating whitespace
left and right padding affect padding within the box size; marginsaffect space outside of the box.
 Add margins to boxes (photos).
7.
 
Make sure you #wrapper and #main-content match your primary color of your Web page8.
 
Type >
Line-height > 150%
= 1.5 spaces between sentences.9.
 
Font size should be around 12-16 pixels.
Troubleshooting
1.
 
Always check to see if you have closing tags such as </div>.2.
 
File > Empty Cache
. (Stores earlier pages) in Safari. In Firefox, Tools > Clear Private Data.3.
 
There should be no spaces in your labels or attributes.4.
 
You may have forgotten an
=
sign or
quotation
marks for your string.5.
 
You placed tags outside the <body></body> tag.6.
 
You added padding, but did not subtract the left and right padding from the width.7.
 
Link to saved .css style sheet if changes do not appear when testing in browser. Link chainlocated by Add New Style Sheet Icon in CSS palette.8.
 
Display > Block. This helps fill up space in big boxes.9.
 
Use figure tags for images, and position them.
Create a new HTML5 page
1.
 
File > New > <none> > HTML5
Creating Two-Column Layout with HTML5 and CSS using Dreamweaver.
You will create an external style sheet in CSS. The <div> tag stands for division and the <span> tagcovers a span. In DW, use the HTML5 tag to create invisible boxes in code view.1.
 
You want to first create giant box to hold all of your content including your <div> tags. Start with angle bracket in the code view of DW. The code hints will appear to help you rememberto tags. Type <div
id=”
Give it any ID name.
An
id
is unique, which means it is used once.2.
 
Next you want to create the header, nav, main-content, article, aside and footer tags
 
2
a.
 
Main-content will hold the nav, aside and article boxes.3.
 
The footer div is located outside of the main-content div.
YOUR PAGE SHOULD LOOK LIKE THIS. Add these tags to code view window:
<body>
<div id=”wrap”>
(
Put cursor next to angle bracket wrap to add external CSS style sheet.
)<header> </header><div id="main-content"><nav> </nav>(
horizontal navigation
)<article></article><aside></aside>(
This is a sidebar.
)</div><footer> </footer></div></body>
To add Styles to the CSS External Sheet 
1.
 
Go to Window > CSS Styles if CSS panel does not appear2.
 
Select “ID (applies to only one HTML element)” for all IDs (e.g., wrap, main
-content)3.
 
Next to the <div id="wrap">(Place cursor next to angle bracket wrap)4.
 
In the CSS panel, select +icon (New CSS Rule).5.
 
In the New CSS Rule window, type and select the following:
 
3
6.
 
Save As > Add file name in URL box> Type adescriptivename.css. Remember that theexternal sheet not only affects your home page, but your entire site. Make sure to save it inyour site folder.
Do this step only one time. Do not create an external style sheet foreach ID or do not save to the document (it will save only to the home page).Boxes# = IDs and HTML5 tags#wrap
1.
 
On the type page, select a font size between 12-14px, text color (black), and line height (150%=1.5 lines)2.
 
Positioning is
relative
.”
 a.
 
All big boxes are relative
header, wrap, main-content, etc. should be
“relative” and
small boxes (e.g., photograph, pullquote) within those big boxes should be
positioned “absolute.” The big boxes move relative to the page, but the small boxes
must stay absolute within the big boxes.3.
 
The boxes reflect the skeleton of your page that holds all of the other boxes together. Type960px wide and select auto height. Also set 
Left and Right Margins to Auto
to center yourpage. Auto right and left 
only 
the wrap div.

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->