HTML5 and CSS3 in Dreamweaver CS5 - JWarren Consulting

HTML5 and CSS3 in Dreamweaver CS5 HTML5 and CSS3 in Dreamweaver CS5 http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html By David Powers

Dreamweaver

HTML5 and CSS3 in Dreamweaver CS5 – Part 1: Building the web page http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html •

•

•

2

Dreamweaver CS5 now natively supports the new HTML5 structural elements o It also supports many of the CSS3 properties supported by the latest browsers o There is now a Multiscreen Preview  This shows how the same page is rendered in different screen sizes Exploring the HTML5 features in Dreamweaver CS5 o A New Multiscreen toolbar is on the Document toolbar  This launches the Multiscreen Preview panel • Simplifies the creation of page layout for devices with different screen resolutions • Uses CSS media queries Using a preformatted HTML5 layout o There are two new preformatted payouts o File > New  New Document toolbar • Page Type: HTML • Layout: two-‐column HTML5 layout o There are two new layouts • Click Create o After you switch back to another layout  Dreamweaver keeps HTML5 selected in the DocType • HTML5 is backwards compatible • It’s safe to use with new pages • The two-‐column has the sidebar on the right o Easy to switch to the left o Move the sidebar to the left  Tag Selector • CSS Styles panel o Stay in the Current Area o Properties pane  Switch float: left to float: right o Code View  There are a mixture of familiar tags and new ones •
, ,
,
, and
 These new tags give web page a more meaningful structure  Since HTML5 is new • It’s not always clear which is the best element to use for each particular case o
 Can be used to divide a page into sections  Can also be used to divide the
into various sections o
 doesn’t apply to the top section of the page  each
or
can have it’s own header  Scroll to the top of the page

HTML5 and CSS3 in Dreamweaver CS5

•

• The section is heavily commented • Take a second to look at the comments  Bottom of the section • Final style rule on lines 108-‐110 o Tells the browser to display the new elements as blocks o Otherwise they would be displayed inline o Once all browsers support HTML5  This rule can be deleted  For now, we will need it (and for awhile) • Lines 112-‐114 o Adds a tiny JavaScript file  This helps versions of Internet Explorer to apply CSS to HTML5 elements o We use a Google Code content o You can use a local version  Close the File Exploring the Multiscreen Preview panel o Preparing the files for the tutorial  Create a new site • Site > New Site o Site Name: Chapter 1 o Locate Site Folder: Chapter 1 o Click Save  Expand the Citrus Café site • The image folder contains different size versions of the same image o The JavaScript folder contains the html5.js o Inspecting the Citrus Café page in the Multiscreen Preview panel  Open index.html (completed folder)  Click the Multiscreen button • Document toolbar • You can view what the page will look like in a o Mobile phone o Tablet device o Desktop • This menu is interactive o Mouse over each page o The Multiscreen toolbar allows you to follow links on the page  Click on the Media Queries button on the top right of the panel • Media Queries dialog box o phone.css  Max Width: 320px o tablet.css  Width 321-‐768 px o desktop.css  Width: Everything else o Click Cancel  Click Viewport Sizes • This allows you to change the size of the panel viewports

3

Dreamweaver

•

4

• Click Cancel  Live View & Split View • Depending on the width of Live view o The correct style are applied in Code View o Close index.html Creating the HTML structure, Part 1 o Dreamweaver hasn’t incorporated all of the features in the UI o We will have to do some new ways of working to work with HTML5 in Dreamweaver o Laying the foundation  File > New • Page Type: HTML • Layout: • DocType: HTML5 • Click Create  Save As index.html  Code View • The Code is the same as before o Except for the more simple DOCTYPE declarations  You can convert current existing XHTML pages to HTML5 • File > Convert > HTML5  Change the title to Citrus Café  File > New > Blank Page > CSS click create • Save as desktop.css  In the desktop.css file • Add the following code: article, aside, figure, footer, header, nav, section { display: block; }  Close desktop.css  Format > CSS Styles > Attach Style Sheet • Navigate to desktop.css style sheet o Adding the
element 
• represents a group of introductory or navigational aids  Related Files toolbar • Source Code  Type: Citrus Café • Format it as an h1 • Tag Selector:
o Right-‐click the text in design view  Select Wrap Tag  Type: head • Press the down arrow to select header form the code hint menu o Press Enter twice o The
should be wrapped in a
tag • Tag Selector:
o Right-‐click the text in design view

HTML5 and CSS3 in Dreamweaver CS5 Select Wrap Tag Type: hgroup • Press the down arrow to select header form the code hint menu o The
tag should now be wrapped in a header and hgroup tag  Type: Sustainable, organic and nature • Format it as an h2  Tag Selector • Hit the right arrow key once  Press enter  Properties Inspector • Hit the unordered list button  Type the following five items as list items • Home • Menu • Reservations • Gallery • Contact  Add a dummy link of # to each one • Properties Inspector o Link: #  Tag Selector
• Right-‐click and choose Wrap tag o Select nav in the Wrap tag mini-‐panel o Press enter twice  The unordered list is now wrapped in a nav tag  Tag Selector
• Properties panel o ID: logo • Common Area of the Insert panel o Insert Div Tag  Insert Div Tag dialog box • Insert: Wrap Around Selection • ID: container  Wrapping the pages heading and navigation in a
• Identifies them as a logical group • The belong together ins structure an din meaning • o identifies the h1 and h2 as belonging to each other • o identifies the unordered list as a navigation element • The container div o No structural meaning o Holds the page together Creating the HTML structure, Part 2 o The mission statement was difficult to decide what element to use 
o pods  

•

5

Dreamweaver

o o o

6


images 
list of news items 
Adding the main content  Common Area of the Insert panel • Insert Div Tag o Insert Div tag dialog box  Insert: After tag
 ID: maincontent  Click OK  Select the placeholder text • Right-‐click the text o Select Wrap tag  Select article  Click Enter Twice • Replace the text with the first sentence in copy.txt o Better to do in code view  So we don’t delete the
tags  Code View • Type:

Today's specials

Events

News

9/1 Celebrity Guest Chef Night

9/3 New Menu Samplers!

9/4 Chef Citrus Style

9/23 Pork Pork and More Pork

10/1 Celebrity Guest Chef Night

10/3 New Menu Samplers!

10/4 Iron Chef Citrus Style

 Each
has an
heading • The tags are outside of the
tags • Hierarchy of headings in HTML5 is determined by each section


o

• HTML5 allows you to wrap block-‐level elements in an tag  Design View • Click below “Events” heading o Code View  Make sure you are between the
tags • Common Area of the Insert panel o Insert Image  Select Image Source dialog box • events.jpg • Click OK  Image Tag Accessibility Attributes dialog box • Give it some alternate text • Click OK  Design View • Click below “Today’s specials” heading o Code View  Make sure you are between the
tags • Common Area of the Insert panel o Insert Image  Select Image Source dialog box • specials.jpg • Click OK  Image Tag Accessibility Attributes dialog box • Give it some alternate text • Click OK  The numbers in the News section are dates • Should be wrapped in tags o Select 9/1 in the first news item o Right click  Select Wrap Tag • Type ti and select time • Press Enter twice o Open the Tag Inspector  Window > Tag Inspector  Make sure Attributes is selected  Click in the field alongside datetime  The element requires the date and/or time to be specified • By the International Organization for Standardization (ISO) o YYYY-‐MM-‐DD HH:MM:SS  Type: 2010-‐09-‐01 • Repeat for the reaming dates in the news section Adding the
element  In HTML5 not limited to the bottom of the webpage • Each section or article can have its own footer  Tag Selector • Press the right arrow key once

7

Dreamweaver 

Code View • Type Script Objects > Script o Script dialog box  Browser for file • htm5.js • Click OK o IE8 and earlier are the only browsers that need this script o Styling the body and element  CSS Style panel • New CSS rule o New CSS Rule dialog box  Selector Type: Tag  Selector Name: body  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Type  Font-‐family: Trebuchet MS< Arial, Helvetica, sans-‐serif






 Color: #000 o Category: Background  Background-‐color: #66b034 o Category: Box  Margin • Keep Same for all selected • Top: 0  Padding • Keep Same for all selected • Top: 0 o Click OK • New CSS rule o New CSS Rule dialog box  Selector Type: ID  Selector Name: container  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Box  Width: 840px  Margin • Deselect Same for all • Top: 0 • Right: auto • Bottom: 0 • Left: auto o Click OK Tag Selector • New CSS Rule o New CSS Rule dialog box  Selector Type: Compound  Selector Name: #logo • Click Less Specific once  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Background  Background-‐image: logo.jpg  Background-‐repeat: no-‐repeat o Category: Box  Width: 100%  Height: 138px o Click OK Tag Selector • New CSS Rule o New CSS Rule dialog box  Selector type: Compound  Selector Name: #logo hgroup

9

Dreamweaver

•

10

• Click Less Specific once  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Positioning  Position: absolute  Positioning • Top: -‐500px o This will move the hgroup off of the page o They will still be detected by screen readers and search engines o Click OK  File > Save All Styling the menu o Creating the basic menu styles  Backgrounds are displayed through padding  New CSS Rule • New CSS Rule dialog box o Selector Type: Tag o Selector Name: nav o Rule Definition: desktop.css o Click OK • CSS Rule definition dialog box o Category: Box  Padding • Deselect Same for all • Top: 150px o Click OK  New CSS Rule • New CSS Rule dialog box o Selector Type: Tag o Selector Name: maincontent o Rule Definition: desktop.css o Click OK • CSS Rule definition dialog box o Category: Box  Padding • Deselect Same for all • Top: 10px • Right: 0 • Bottom: 10px • Left: 0  Margin • Deselect Same for all • Top: 80px o Click OK  New CSS Rule • New CSS Rule dialog box






o Selector Type: Tag o Selector Name: ul o Rule Definition: desktop.css o Click OK • CSS Rule definition dialog box o Category: Box  Padding: 0  Margin: 0 New CSS Rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: nav ul o Rule Definition: desktop.css o Click OK • CSS Rule definition dialog box o Category: Type  Font-‐weight: bold  Font-‐size; 20px o Category: Box  Margin • Deselect Sam for all • Bottom: 15px o Category: List  List-‐style: none o Click OK New CSS Rule • New CSS Rule dialog box o Selector Type: Compounds o Selector Name: nav ul a o Rule Definition: desktop.css o Click OK • CSS Rule definition dialog box o Category: Type  Text-‐decoration: none  Color: #fff o Category: Display  Text-‐align: center  Display: block o Category: Box  Width: 140px  Padding • 10px  Mrgin • Deselect Same for all o Top: 5px o Right: 0 o Bottom: 5px o Left: 0

11

Dreamweaver Category: Border  Leave all three Same for all checkboxes selected  Style: solid  Size: 1`px  Color: #61837 o Click OK Adding CSS3 flourishes to the menu o Related Files toolbar  Select desktop.css o Position the cursor at the end of the last semicolon in the nav ul a style definition o Press Enter o Type a hyphen  The mini-‐menu appears  We will still need to use browser-‐specific versions since CSS3 properties are still being developed  -‐moz is for Firefox  -‐o is for Opera  -‐webkit is for Safari and Google Chrome  Select moz-‐  Continue typing or select border-‐radius • Press Enter • Set the value to 6px  We will need to add this rule several times for each browser  Opera supports many CSS3 properties without the need for the browser-‐specific prefix  Add these rules: -‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐radius:6px; border-‐radius:6px; o Add the following to the nav ul a style rule: -‐moz-‐box-‐shadow: rgba(0,0,0,0.3) 1px 1px 3px; -‐webkit-‐box-‐shadow: rgba(0,0,0,0.3) 1px 1px 3px; box-‐shadow: rgba(0,0,0,0.3) 1px 1px 3px; o The box-‐shadow rule takes a color and three length values  First Length: horizontal offset  Second Length: Vertical Offset  Third Length: blur radius  Positive values for the first two lengths • Place the shadow other right and bottom  Negative values for the first two lengths • Place the shadow to the left and top o The colors are expressed using the rgba() syntax  First three values represent red, blue, and green • On a scale of 0 to 255  The final represents opacity on a scale of 0 to 1 • Transparent: 0 • Fully opaque: 1 o

•

12

HTML5 and CSS3 in Dreamweaver CS5 o o o

o

o

Add one more property to the nav ul a style rule: text-‐shadow: rgba(0,0,0,0.8) 1px 1px 1px; This was originally part of CSS2  We don’t need a browser-‐specific version for this property Add the following style definitions to desktop.css nav ul a:link, nav ul a:visited { background: rgba(255,255,255,0.2); } nav ul a:hover, nav ul a:active, nav ul a:focus { background: rgba(255,255,255,0.4); }  These two rules add a translucent white background to the menu buttons • When in normal or visited state o The white background has an opacity of 20% • When in hover or active o The opacity increases to 40% o This adds a highlight effect to the buttons Create the final CSS3 flourish nav ul li:hover { margin-‐top:-‐10px; } This moves each menu button up 10 pixels when you hover over i  This movement is abrupt  We can smooth the movement  Amend the nav ul li rule like this: nav ul li { float: left; -‐webkit-‐transition-‐duration:.5s; -‐webkit-‐transition-‐property:margin-‐top; -‐webkit-‐transition-‐timing-‐function:ease-‐in-‐out; -‐o-‐transition-‐duration:.5s; -‐o-‐transition-‐property:margin-‐top; -‐o-‐transition-‐timing-‐function:ease-‐in-‐out; -‐moz-‐transition-‐duration:.5s; -‐moz-‐transition-‐property:margin-‐top; -‐moz-‐transition-‐timing-‐function:ease-‐in-‐out; transition-‐duration:.5s; transition-‐property:margin-‐top; transition-‐timing-‐function:ease-‐in-‐out; }  The three basic properties • Only Webkit and Opera support these properties • Soon to be supported in Firefox 4 • They set the duration at a half a second

13

Dreamweaver

•

14

o Applies to the margin-‐top o Easing the transition at the start and finish • transition-‐duration • transition-‐property • transition-‐function Completing the main styles o Remaining sections are CSS2.1 o Styling the mission statement  In an
element with an ID  CSS Style panel • New CSS rule o New CSS Rule dialog box  Selector Type: ID  Selector Name: vision  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Type  Font-‐family: Palatino Linotype, Book Antiqua, Palatino, serif  Font-‐size: 32px  Font-‐weight: bold o Category: Background  Background-‐image: hero.jpg  Background-‐repeat: no-‐repeat o Click OK  We now need to work out how much padding to put around the text • Deduct it from the width and height of the image o Left: 40px o Right: 370px o Deducting from 819px  409px left for the width o Top: 60px  This leaves 237px for the height • The background will show through the padding around the content  Open the #vision CSS Rule • CSS Rule definition dialog box o Category: Type  Line-‐height: 1.2 o Category: Box  Width: 409px  Height: 237px  Margin • Deselect Same for all • Bottom: 20px  Padding • Deselect Sam for all • Top: 60px • Right: 370px

HTML5 and CSS3 in Dreamweaver CS5 • •

o

Bottom: 0 Left: 40px

o Click OK Styling the pods  We will create the CSS styles before adding them to the markup  CSS Style panel • New CSS rule o New CSS Rule dialog box  Selector Type: Class  Selector Name: pod  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Background  Background-‐color: #fff o Category: Box  Width: 244px  Float: Left  Margin • Deselect Same for all • Right: 13px  Padding: • Leave Same for all Selected • Top: 10px o Click OK  The pods now have a white background with 10px of padding  Tag Selector
(Today’s specials) • Properties Inspector o Class: pod  Tag Selector
(Events) • Properties Inspector o Class: pod  Tag Selector
(News) • Properties Inspector o Class: pod  The first two pods float alongside each other • The News pod is pushed down the page o The images protrude from the first two  New CSS rule • New CSS Rule dialog box o Selector Type: Class o Selector Name: podContent o Rule Definition: desktop.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 244px o Height: 181px

15

Dreamweaver Overflow: hidden Margin  Deselect Same for all  Top: 10px • Click OK Without the padding • The podContent class will fit inside the padding of the pods The height is set to 181px • The height of the images • Overflow: hidden o This will crop off 58px of the images protruding to the right o Nondestructive o The full width will be seen by other devices Design View • Tag Selector
(photo of the salad in the first pod) o Properties panel  Class: podContent • Tag Selector
(photo of the Café tables in the second pod) o Properties panel  Class: podContent Place your cursor in the third pod • Tag Selector o Properties panel  ID: news • This allows us to make two descendent selector to target the content in the News pod New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: #news .podContent o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Box o Overflow: hidden o Margin  Deselect Same for all  Top: 12px • Click OK New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: #news .podContent p o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Type o Font-‐size: 15px o o

 













16

HTML5 and CSS3 in Dreamweaver CS5 Category: Box o Margin  Deselect Sam for all  Top: 5px  Bottom: 5px  Left: 6px • Click OK We will now fix the headings in the pods New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: .pod h1 o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Type o Font-‐size: 16px o Font-‐weight: normal o Color: #000 • Category: Background o Background-‐color: #ccc o Background-‐image: icon_chevron.png o Background-‐repeat: no-‐repeat o Background-‐position: 95% • Category: Box o Margin  Deselect Same for all  Top: 0  Right: 0  Bottom: 10px  Left: 0 o Padding  Leave Same for all selected  Top: 5px • Click OK Since the headings are in links, we will remove the underline • We will create a class to remove the underline New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: a.block o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Type o Text-‐decoration: none • Category: Block o Display: Block •

 



 



17

Dreamweaver

o

18

• Click OK  Place your cursor in one of the headings • Tag Selector
o Properties Inspector  Class: block  Repeat with the other two headings in the pods  Finally we will set the elements as bold  New CSS rule • New CSS Rule dialog box o Selector Type: Tag o Selector Name: time o Rule Definition: desktop.css o Click OK  CSS Rule definition dialog box • Category: Type o Font-‐weight: bold • Click OK Styling the footer  New CSS rule • New CSS Rule dialog box o Selector Type: Tag o Selector Name: footer o Rule Definition: desktop.css o Click OK  CSS Rule definition dialog box • Category: Type o Color: #fff • Category: Box o Clear: Both o Padding  Deselect Same for all  Top: 10px  Right: 0  Bottom: 10px  Left: 0 • Click OK  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: footer p o Rule Definition: desktop.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Top: 0  Right: 0

HTML5 and CSS3 in Dreamweaver CS5   









Bottom: 5px Left: 0

• Click OK New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #phone o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Type o Font-‐weight: bold o Color: #000 New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #facebookTwitter o Rule Definition: desktop.css o Click OK CSS Rule definition dialog box • Category: Box o Float: Right o Margin  Deselect Same for all  Right: 25px Click inside the phone number • Tag Selector
o Properties Inspector  ID: phone

HTML5 and CSS3 in Dreamweaver CS5 – Part 3: Using CSS media queries to target different screen resolutions http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html •

Review the task ahead o CSS Media Queries allow us to style rules for different devices by specifying conditions  Maximum and minimum screen width  This allows us to have only one HTML markup o Dreamweaver Multiscreen Preview panel shows how the page will look at three different resolutions simultaneously o The desktop version is 840px wide  To large for tablets • We will need to reduce the width to 700px • We will place the first tow pods next to each other • We will let the third pod fill the entire screen  To large for phones • We have chosen 320px for phones

19

Dreamweaver

•

•

20

• The menu bar needs to be tighter • The large background will not be shown • The pods will be stacked vertically Targeting devices with CSS media queries o Not supported in IE8 and below  As long as we have the main style sheet • The page will be stylized for all browsers o Setting conditions in media queries  We will target the other devices using the media queries media="screen and (min-‐width: 321px)" media="screen and (min-‐width: 321px) and (max-‐width: 768px)" o Attaching style sheets with media queries in Dreamweaver CS5  The Multiscreen Preview panel automates the creation of media queries based on widths • Just specify the minimum and maximum widths  Create two blank CSS style sheets • phone.css • tablet.css • Close the style sheets  index.html  Click the Multiscreen button in the Document toolbar • Window > Multiscreen preview • Only one set of styles is set by default • Click the Media Queries button (top right of the panel) o You can change the values  We will keep them at their default values o Select Use existing CSS file for the first two options o Click the folder icon  Select phone.css and tablet.css respectively o Set the option for Large (Desktop) to Do not target large screens o Click OK • Dreamweaver will link the new style sheets to index.html o Look in the Code View  File > Save Optimizing the styles for tablet devices o Minimize the Multiscreen Preview panel o Related Files toolbar > tablet.css  CSS Style panel • New CSS rule o New CSS Rule dialog box  Selector Type: ID  Selector Name: #container  Rule Definition: tablet.css  Click OK • CSS Rule definition dialog box o Category: Box  Width: 700px


o

o

o

o

o

o Click OK Resize the design view section  Reflects the narrower width in the layout • The last menu items drops down to the next level • The News pd also drops down • The background image to the mission statement protrudes beyond the right edge of the page CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #logo o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Background o Background-‐image: med_logo.jpg • Category: Box o Height: 100px • Click OK This makes the background image better, but the menu needs to move higher to compensate  CSS Style panel • New CSS rule o New CSS Rule dialog box  Selector Type: Tag  Selector Name: nav  Rule Definition: desktop.css  Click OK • CSS Rule definition dialog box o Category: Box  Padding • Deselect Same for all • Top: 110px o Click OK We now need to change the menu items  We need to reduce the width to fit the 700px container  The background image is 669px  The current styles • Padding: 10px • Border: 1px  We will reduce the width of the links to 114px  We will reduce the font-‐size CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: nav ul

21

Dreamweaver

o

o

o

o o

22

o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Type o Font0size: 18px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Compound o Selector Name: nav ul a o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 114px • Click OK The maincontent needs to be the same width as the container  We will also remove the bottom padding  We will need to add a small left margin to balance the content with the menu CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #maincontent o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 700px o Margin  Deselect Same for all  Left: 5px o Padding  Leave Same for all select  Top: 0 • Click OK Now we will fix the mission statement CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #vision o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Type o Font-‐size: 26px

HTML5 and CSS3 in Dreamweaver CS5 Category: Background o Background-‐image: med_hero.jpg • Category: Box o Width: 289px o Height: 217px o Padding  Deselect Same for all  Top: 45px  Right: 350px • Click OK We can now expand the two pods to display the full width of each image  We will also gibe the Event s pod an extra margin on the live Place your cursor in the Events pod  Tag Selector
• Properties panel o ID: events CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Class o Selector Name: .pod o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 305px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Class o Selector Name: .podContent o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 302px o Height: 180px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #events o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box •

o o

o

o

o

23

Dreamweaver Margin  Deselect Same for all  Left: 7px • Click OK o The News pod is still the same width as the other two  We will make it the same width as the other two combined o CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #news o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 650px o Margin  Deselect Same for al  Top: 20px • Click OK o We will add a small left to margin to the footer paragraphs o CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: footer p o Rule Definition: tablet.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Left: 5px • o View the desktop and tablet version in the Multiscreen Preview panel Optimizing the styles for mobile phones o This process is very similar o We can use display: none to hides certain parts of the page o Related Files toolbar phone.css o The images folder has a smaller version of the logo o CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #container o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box o

•

24

HTML5 and CSS3 in Dreamweaver CS5 • o

o

o

o

Category: Box o Width: 100%

CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #logo o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Background o Background-‐image: sml_logo.png • Category: Box o Width: 270px o Height: 82px o Margin  Deselect Same for all  Right: auto  Left: auto • Click OK Multiscreen Preview panel  Page doesn’t quite look right  The menu bars are too big and to far down CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Tag o Selector Name: nav o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Left: 10px o Padding  Deselect Same for all  Top: 100px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: nav ul o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Type

25

Dreamweaver

•

o

o o

o o

26

o Font-‐size: 24px Category: Box o Margin  Deselect Sam for all  Right: 10px Click OK

• CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: nav ul a o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Block o Text-‐align: left • Category: Box o Width: 97% o Padding  Deselect Same for all  Right: 0 • Click OK We increased the font-‐size to make it easier to read on a mobile device Since the widths of the links are calculated from the parent element  We don’t have a declared width  They expand to accommodate the text The mission statement’s background image needs to go  The text needs to be smaller CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #vision o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Type o Font-‐size: 16px o Line-‐height: normal • Category: Background o Background-‐image: none • Category: Box o Width: 280px o Height: auto o Clear: both o Padding  Deselect Same for all  Top: 10px


o o o

o o o

o

o

• Click OK We need to clear because the menu items are floated  There’s a danger of the text floating up alongside the last menu button Live View  The animation plays havoc with the layout CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: nav ul li:hover o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Top: 0 • Click OK We don’t need to override the transition properties  The top margin no longer changes We will now remove the padding from the maincontent
, set the pods to full width, and nudge the items away from the edges CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #maincontent o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Padding  Leave Same for all selected  Top: 0 • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Class o Selector Name: .pod o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 305px • Click OK CSS Style panel  New CSS rule

27

Dreamweaver New CSS Rule dialog box o Selector Type: Class o Selector Name: .podContent o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Width: 302px o Height: 180px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: Compound o Selector Name: footer p o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Left: 5px • Click OK CSS Style panel  New CSS rule • New CSS Rule dialog box o Selector Type: ID o Selector Name: #facebookTwitter o Rule Definition: phone.css o Click OK  CSS Rule definition dialog box • Category: Box o Margin  Deselect Same for all  Right: 5px • Click OK Multiscreen Preview panel  Compare the three views If you don’t want to display the images in the pods for the mobile phone layout  CSS Style panel • Open the .pod CSS rule • CSS Rule definition dialog box o Category: Box  Padding • Deselect Same for all • Bottom: 0 o Click OK  CSS Style panel •

o

o

o o

28

HTML5 and CSS3 in Dreamweaver CS5 Open the .pod h1 CSS rule CSS Rule definition dialog box o Category: Box  Margin • Deselect Same for all • Bottom: 0 o Click OK  CSS Style panel • Open the .podContent CSS rule • CSS Rule definition dialog box o Category: Block  Display: none o Category: Box  Width: 302px  Height: 180px o Click OK  CSS Style panel • Open the #news .podContent CSS rule • CSS Rule definition dialog box o Category: Block  Display: block o Click OK o These rules move the padding from the bottom of the pods and the margin from the bottom of the pod headings o The images are hidden  Display: none  This also hides the News pod • We set the display property of the podContent class that’s a descendent of the #news ID o Display: Block We now have three unified layouts from a single HTML page o We added two additional short style sheets  Tablet  Phone • •

•

29

Editing a WordPress theme with Dreamweaver CS5 - JWarren ...

Html5 & css3

HTML5 and CSS3:

HTML5 CSS3

Extending Dreamweaver CS5 - Adobe

HTML5 and CSS3

HTML5 Canvas vs CSS3

JavaScript, HTML5, CSS3 - tekom

^+JaaN~(( Download 'New Perspectives HTML5 and CSS3 ...

**PouL~[[ Download 'New Perspectives HTML5 and CSS3 ...

HTML5 and CSS3 - The Pragmatic Bookshelf

**RaaJ= Download 'New Perspectives HTML5 and CSS3 ...

Web Communication with Dreamweaver CS5 exam objectives

Training Guide: Programming in HTML5 with JavaScript and CSS3 ...

Download-This-HTML5-CSS3-Boos.pdf - Google Drive

Basics of web design : HTML5 & CSS3

Les bases du HTML5/CSS3 - Pearson

HTML5 & CSS3: - Montana State University MSU Library

Mobile Web Developer (HTML5, CSS3, JavaScript) - Architech

HTML5, JavaScript, CSS3 Rich Internet Application

HTML5 Training Course | jQuery Training | CSS3 Programming ...

[PDF] jQuery, CSS3, and HTML5 for Mobile and ... - Google Sites

Create modern Web sites using HTML5 and CSS3

PDF/ePUB New Perspectives HTML5 and CSS3 - Google Sites

HTML5 and CSS3 in Dreamweaver CS5 - JWarren Consulting

HTML5 and CSS3 in Dreamweaver CS5 - JWarren Consulting

o Right-‐click the text in design view  Select Wrap Tag  Type: head • Press the down arrow to select header form the code hint menu o Press Enter twice o The

o Right-‐click the text in design view

HTML5 and CSS3 in Dreamweaver CS5 Select Wrap Tag Type: hgroup • Press the down arrow to select header form the code hint menu o The

Today's specials

Events

News

Suggest Documents