HTML5 SP12 1

HTML5/CSS3 in Dreamweaver CS5 Tips 1. Make sure to save both your .html pages and your .
css page before shutting down. People tend 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 W3C standards 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; margins affect 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 page 8. 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 chain located 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> tag covers 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 remember to 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
3.
a. Main-content will hold the nav, aside and article boxes. 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 appear 2. 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. 5. In the CSS panel, select +icon (New CSS Rule). In the New CSS Rule window, type and select the following:
6. Save As > Add file name in URL box> Type adescriptivename.css. Remember that the external sheet not only affects your home page, but your entire site. Make sure to save it in your site folder. Do this step only one time. Do not create an external style sheet for each 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. Type 960px wide and select auto height. Also set Left and Right Margins to Auto to center your page. Auto right and left only the wrap div.
4.
To see what the boxes looks like, select a background color. (Background > Pick color > Apply > Purple (or whatever color) box) a. Go to CSS panel and Select ALL to see your new CSS rule. Press the drop-down arrow as well. To reopen your style, you can double-click the style.
b.
In the head of your page, you should see <link href=resume.css rel=stylesheet type=text/css> to show you that an external sheet exists and it is linked to your index.html page. This is how the .css and .html pages are connected.
header 5. Add style to header (by angle bracket header) > +New CSS Rule a. Type header > Leave on Tag > (Follow this procedure for all of the HTML5 tags) b. Make sure that header style to the tag is saving to the appropriate .css file> Okay
c. d. e.
Box > Same width as #wrap > 960 > height > 120 px (size of header) Positioning > Relative Block > Display > Block (forces space within header to stay open for 960X120) i. Additional exercise if you use text instead of an image in your header: Within the <header> tags, type your name (e.g., Serena Carpenter) within a <h1> tag. H1 tags are useful for SEO. 1. Type > Font size > (e.g., 72)
2. 3.
4.
5.
Margin > Padding and Margin = 0 Style the h1 tag as a class. <h1 class=bodytagtext> </h1> a. New Rule > .bodytagtext > class > Verdana > 14 px > black b. Play with the positioning of your name. Remember your header is 960X120. Positioning > absolute > (e.g., 100 px to the left) Type a tagline after the H1 tags between <p> tags in the header. Create New Rule > Class > .taglineheader a. Type > Font Size > 20px. b. Positioning > Absolute > Practice (80px Top and 250px Left) Tips: a. Use Live View to monitor changes. The most precise view takes place in the browser after you save it. b. A box exists around the type. i. You can drag the box and it will update the CSS.
nav 6. 960px and 20px high and Positioning = relative a. If you want vertical navigation, place the nav after the main-content tag in the code view: i. <aside> <nav> </nav></aside>
#main-content 7. Same width as page (960) and height (auto) a. Add background color for practice 8. Positioning = relative article 9. 500-600 is the best for column width to help reader read across screen. Auto height and float left. Make it 550px. aside 10. Subtract article pixel total from total width. 960-550 =410 > Float right 11. Positioning = relative footer 12. Footer = 950 wide and 20px high > Clear = both > Apply (Clear indicates that everything on top of it stops here). 13. Block > Text align > Center. Add padding as well. 14. Positioning > Relative 15. <footer> Type Copyright (option-G ) 2012. (Updated date when content changes in DW for SEO). Insert > Date > Pick Format > Update automatically on save) Serena Carpenter (create email link) Your CSS should look like this:
Save it and see what your page looks like in a browser. Go to the Globe to Preview.
Text you can change the appearance of the text throughout the entire page through the wrap or adjust text appearance in just one section such as the article. 1. Add text between tags in the article and aside. 2. Double-click a tag such as article in the CSS panel. If you do not see it. Click the drop-down arrow. 3. The CSS Rule Definition box should appear and edit in Type category. You should see the changes applied to your text. Add a border outside of the page to add finished look to page. a. Double-click #wrap. i. Add border: Solid > width 1 pixel > black color and same for all
Add a background color for your entire page to set on. 1. Modify > Page Properties >Background color or Background image (only when tiling) Adjusting padding so text does not rest against edges of boxes. Padding is on the inside of the box. 1. Double-click article in CSS style window 2. Add padding to the left, right, and top (e.g., 10px). 3. However, padding adds pixels to the box pushing sidebar down. You must subtract. Add the article and aside together, which equals 20 pixels. Adjust the size of the box for article tag by subtracting 20 pixels from the width. Every time you add padding to the width, you have to subtract from the overall length (article, aside). Navigation 1. Decide what type of navigation you want: word links, Photoshop buttons, or image maps (hotspots) 2. If you turn your a .jpg into a link, make sure to add a 0 border in the Property Inspector. Otherwise, your picture may default to a blue link border.
Links (for ENTIRE page) a:link links are the first link the visitor sees (blue). a:visited links change color when a person clicks on that link (purple), and a:hover links change color when the person places their mouse over the link. To get rid of the line under the link, change to Never Underline. 1. Modify > Page Properties
Links (different colors for ASIDE and ARTICLE) 1. Add new CSS rule 2. Select Compound from drop-down menu 3. Select the drop-down menu, change the state of a:link
4. 5.
To change the state with a specific box, such nav, type nav before a:link. Select your link color and select none if you do not want your link underlined.
6.
Add New CSS rule
7.
Repeat the same steps for the a:visited and a:hover links, article a:visited
Clear wrap CSS has some drawbacks. One drawback is that when you have two boxes inside one another that are set at auto-height, the bottom of the page can collapse to the size of the small box. To prevent this from happening, add a CSS style to the external style sheet and information to the wrap div. 1. Clear fix ensures that the wrap does not collapse if wrap is auto-height. a. Add this code to external .css sheet. .clearfix:before, clearfix:after{ content:; display:table; } clearfix:after{ clear:both; } clearfix;{ zoom:1; } 2. Add clear fix class to the wrap div on the index.html page a. <div id="wrap" class="clearfix">
Cover and application of Webkits 1. Cover is a CSS property that you add to the external stylesheet that enables the background image to maintain proportions rather than tiling an image (could make the bg image 1024X768, however any sized image will work). a. Technically, one can style any tag on the .html page. In this case, you will style the HTML tag. b. Add HTML code below to the external style sheet. c. Double-click the style in the CSS window > Browse > Add background picture (or write out image path). 2. Webkits are a result of fear of Apple and Google. The paranoia led browsers to develop different kits to handle the CSS. a. Moz(illa) = Netscape
3.
b. Webkit = Firefox c. O kit = Opera It will look like this with the clear fix code: html { background: url(image/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
} Custom font Add a custom font that is not available in the default font list in Type. The only other way to add a custom font is by creating a Photoshop image. However, images increase the download time on the page and are not as SEO friendly. If you want more than one custom font, label each css style @fontface1; @font-face2 1. 2. 3. 4. 5. 6. Download free Mac .ttf font file , not Windows Create font folder > Place .ttf file in font folder inside the site folder Double-click .ttf file to download it > Install font You may have to quit DW to see font > Type > Edit font list > Roll down list > Press arrow button to add Type > Edit font list > Roll down list > Press arrow button to add Add code to external .css sheet (You will see the font on your computer, but other people will not be able see the font in their browsers).
@font-face{ font-family: "The name of your font"; (file name can include spaces) src: url("directory your font is in/font name .ttf") (in font folder and name of file) format('truetype); (a type of font, e.g., true type, bitmap) } Example @font-face{ font-family:Walkway Semibold; src:url(urlwalkway/Walkway Semibold.ttf) format(truetype); font-size:36px; } Classes for HEADLINES, and SUBHEADS Unlike IDs, you can use classes over and over again. All classes start with a period (.) instead of a # and then the name. Span tags style a specific area. You can use either span or div classes. The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>. You typically use span tags for portions of text. Here is an example on how to style Headlines, Subheads, etc.:
1.
Type <span class=mainheadline>(place cursor here to insert image in dw)</span> in Code View or use <h1 class=mainheadline> </h1> instead of a span. Place cursor at the end of opening class. Add CSS Style rule Type .mainheadline or whatever you named it.
2. 3. 4.
5.
Style your heading.
6. 7.
Select class > Okay In the Property Inspector window, in the Class drop-down menu, you can apply that style repeatedly throughout your page, rather than adding a new class rule each time. a. Highlight in Code View the text you would to become style as a .mainheading
b.
Go to the Property Inspector, select the mainheading in dropdown menu.
10
.figure (photos, info boxes, video, pull quotes, etc.) RESIZE, PREPARE, and SAVE YOUR IMAGES FOR WEB & DEVICES IN PHOTOSHOP. MUST KNOW PIXEL WIDTH AND HEIGHT OF PHOTO BEFORE CREATING BOX. 1. 2. <figure class=biophoto>(place cursor here to insert image in dw)</figure> Add New CSS Rule
3. 4.
Class > .biophoto Create a box the exact same size as the picture > float left or right
5.
With pictures, you want to add margins instead of padding. Margins are space outside of the box. Add Margins to push text away from box or picture. If floats on left, add Margin space to the right and bottom. If floats on the right, add Margin space to the left and bottom. You may add to the top if box is in the middle of text.
6. 7.
Add box Border. You usually always want to add a 1px black border as well. Place cursor between figure tags in code view > Insert > Image
.figcaption 1. <figure><figcaption></figcaption><figure> 2. <figcaption class=videocaption1> </figcaption> a. If does not work, increase figure tag height (e.g., 20 px). b. E.g., <figure class="constructionphoto"><img src="red_sign.png" width="377" height="495"><figcaption> This is a caption. </figcaption> </figure>
11
c. d.
i. If you have multiple captions, use <figcaption class= > </figcatpion> instead Position figure and figcaption relative If does not work, position it underneath the figure. It may position itself underneath the figure. If it does not you have to position it.
HTML5 <video> and <audio> With the semantic web, tags are more literal. Firefox and IE feared that Apple would try to control video in Safari. So in HTML5, the .ogg (video.ogg) file was created, but it only works in some browsers. Source is where video file is placed within your folders. 1. Export video from FCP using QuickTime conversion > Select mp4 2. Install a conversion program such as the Firefox extension Firefogg > Convert mp4 to an ogg file a. In Firefogg > Make web video > Select .mp4 > Format (Ogg) > Preset (360p (size of player) > Encode (Can go to Advanced mode and increased audio quality to 8.) 3. Place both video files in a video folder 4. Source is where video file is placed within your folder. 5. Place this code in the Edit View at the location you would like the player placed. Most often you will first create a figure box and place this code between the figure tags. 6. To access it in Firefogg at a later time, Tools > Make Web Video <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> </video>
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" /> </audio>
12
Once you have your index.html page structure set up, save it, duplicate it and change it to the names of your other pages (e.g., about, contact) before adding story content. The key is set up the first page!!! 1. Right-click your index.html file
13

HTML5 SP12 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 SP12 1

Uploaded by

Copyright:

Available Formats

HTML5/CSS3 in Dreamweaver CS5 Tips 1. Make sure to save both your .html pages and your .

Add New CSS rule

Style your heading.

Go to the Property Inspector, select the mainheading in dropdown menu.

You might also like