Adobe Dreamweaver CS6 Part 3 Create a Liquid Layout Page from A

Adobe Dreamweaver CS6 Part 3

Create a liquid layout page from a template A liquid layout uses percentages for widths, so columns so are resized for different screen sizes.

1. Create a new page: a. Click File, New… b. Click 3 column liquid, header and footer. c. Set DocType: to HTML 5. d. Layout CSS: should already be set to Create New File. e. Click Create. 2. Save the stylesheet in a new folder: a. Add a folder named 3-column-liquid. b. Double-click the folder. c. Click Save. This saves the stylesheet in the folder. 3. Save the web page in the same folder: a. Click File, Save or press Ctrl-S. b. Double-click the 3-column-liquid folder. c. Name the file index.html. d. Click Save.

Preview the page in Dreamweaver

1. Click the Code, Split and Design buttons to switch between the code and/or design views. 2. Click the Live button. This is a more realistic non-editable preview. 3. Click the Live Code button. This shows the code that the Dreamweaver browser actually renders. a. Paste any URL into the address box, and click any element to view the HTML and CSS code. 4. Click the Inspect button. Click CSS Styles, Current. Hover over an element to see its CSS. 5. Click the Multiscreen button and click Multiscreen Preview. Right-click the tab and click Close.

Preview in multiple browsers 1. Click the Preview button and click Preview in Firefox, or click File > Preview in Browser > Firefox. a. Drag the right edge of either browser to the left until the window becomes very narrow. Notice that you must now scroll horizontally to see all content. b. Repeat for Internet Explorer (shown as IExplore in the Dreamweaver menus). 2. In Internet Explorer, Press F12 to view or hide the Developer Tools. a. Click Browser Mode and Document Mode. Try IE8, IE7, Compatibility View, Quirks Mode.

Add responsive design to the page using media queries Components (columns, images, etc.) should automatically rearrange, resize or hide to fit the screen size.

1. Copy (Ctrl-drag) these files from the resources/stylesheets folder into the 3-column-liquid folder: desktop.css, tablet.css, phone.css, boilerplate.css 2. Click the Code button (and Source Code if necessary) to view the source code of the web page. 3. Copy and paste this line of code below the 4. Copy and paste this line of code above the tag for correct display in Internet Explorer 7-8: 5. Copy and paste this code just below the tag, which links to the boilerplate.css stylesheet: Or follow these steps: a. Click the CSS Styles menu. b. Click the All button. c. Right-click the white area below thrColLiqHdr.css. d. Click Attach Style Sheet… e. Click Browse… Double-click boilerplate.css. Click OK. f. Select this link tag in the source code and drag it just below the tag. 6. Copy media-queries.css to the 3-column-liquid folder and add this link below the boilerplate.css link: Or follow these steps: a. Click the Modify menu and click Media Queries… b. Click the radio button next to Site-wide media query file: media-queries.css. Or click the Specify button, type media-queries.css and click OK. c. Click the Default Presets button. This makes media queries for Phone, Tablet and Desktop. d. Select a Phone stylesheet. i. Click Phone. ii. Next to CSS File:, select Use existing file: iii. Click the folder button and select phone.css. e. Repeat the above step to select a Tablet and Desktop stylesheet. f. Click OK. The media-queries.css stylesheet is created, and a link tag is added to index.html. g. Press Ctrl-S to save your changes. 7. Test that the media queries work for multiple screen sizes in one or two browsers. a. Press F5 to refresh the browser window. b. Drag the right edge of the window left and right. Notice that the columns are rearranged, and horizontal scrolling is reduced or removed. c. Test live pages using actual mobile devices, and Internet Explorer in IE7 and IE8 Modes.

Create a page using the Fluid Grid Layout New in Dreamweaver CS6, the Fluid Grid Layout visually creates layouts for different device sizes.

1. Create a new page. a. Click File, New Fluid Grid Layout… b. Assure that DocType is HTML 5. c. Change the Desktop columns from 10 to 12. d. Click the Create button. 2. Save the stylesheet in a new folder. a. Add a folder named fluid-grid. Double-click the folder. Name the file layout.css. Click Save. 3. Save the web page in the same folder. a. Press Ctrl-S. Name the file index.html. Click Save. 4. Save related styles and scripts in the same folder. a. In the Copy Dependent Files dialog, select the fluid-grid folder and click Copy. b. In the Files tab, click the + button next to the fluid-grid folder. It should now contain index.html, layout.css, boilerplate.css and respond.min.js. 5. Click Code to view the source code. Try to understand what the meta, link, and script tags do.

6. Remove the only layout div. a. Click div#LayoutDiv1 in the bar just below the document in Design view. b. Press the Delete key to remove this div. (Do not remove the gridContainer div!) 7. Insert a div tag named header.

a. Click Insert > Layout Objects > Fluid Grid Layout Div Tag or use the button in the Layout bar. b. In the ID box, type header. Start new row should be checked. Click OK. 8. In the same way, add div tags named article, nav, sidebar and footer. 9. Click the three device buttons below the content (Mobile Size, Tablet Size, and Desktop Size). a. For Phone Size, the divs are already arranged into one column.

10. Arrange divs into two columns for tablets. The navigation float to the right of the content. a. Click the Tablet Size button. b. Click in the nav div. Click the black “Move up a row” arrow to the right of the div. c. Resize the nav div to be 3 columns wide by dragging the right edge toward the left. d. Resize the article div to be 5 columns wide. nav should move up and to the right of article.

11. Arrange divs into three columns for desktops. The sidebar should float right of the navigation. a. Click the Desktop Size button. b. Move the nav and sidebar divs up. Resize them to be 3 columns each. c. Resize the article div to be 6 columns. nav and sidebar divs should move to the right.

12. Click File, Save All. Use Multiscreen Preview or browsers to verify that the design is responsive. 13. Add some content to each of the sections. For example, a. Triple-click the header tag, press the Delete key, click Insert > Tag, click the h1 tag, click Insert, type Colorado State University in the Header box, click OK, and click Close. b. Click after the closing tag, and insert an h2 tag containing Libraries.

Attach a Sample Stylesheet 1. In the CSS Styles tab, click All. 2. Right-click anywhere in the area below the tab and click Attach Style Sheet… 3. Click the sample style sheets link. 4. Select a design (Basic, Text, Colors, or Full Design).

5. Click Browse, double-click the fluid-grid folder, and click Select. 6. Click OK. 7. Check that a new stylesheet (e.g. Level3_3.css) is now in the folder, and that the page has visibly changed in Design view. 8. Click the header div and select the the header class in the Properties window. 9. Repeat for the footer and nav divs.

Create a Spry Menu Bar Dreamweaver’s Spry objects use XML, CSS and JavaScript to add interactivity to pages with little coding. Controls include menu bars, tabbed and collapsible panels, data, and form field validation.

1. Create a new HTML5 blank page. a. Click File, New… Under Layout, click . Select DocType: HTML 5. Click Create. b. Press Ctrl-S. Create a folder named spry and double-click it. c. Type index.html and click Save. 2. Add a Spry menu bar. a. Click Insert > Spry > Spry Menu Bar or click the Spry Menu Bar button in the Spry menu.

b. Select Horizontal and click OK. Press Ctrl-S. css and js appear in a SpryAssets folder and tags. 3. In Design view, click the Spry Menu Bar: MenuBar 1. In the Properties section, the menus and their menu items are listed.

a. Change some menus and menu items by clicking them and editing their Text and Link fields. b. Add or remove items by clicking the + or – buttons for a menu or item. c. Move a menu item up or down by selecting it and clicking the up and down arrow buttons. 4. Press Ctrl-S to save your changes. Preview in a browser. 5. Spry stylesheets are customizable. Let’s change the mouseover background color of all menu items: a. Click the CSS Styles tab and click All. b. Click the + next to SpryMenuBarHorizontal.css and click the rule with a.MenuBarItemHover. c. Use the color picker to select a dark green (such as #063) instead of blue (#33C). 6. Click File > Save All to save your changes to the stylesheet. Preview in a browser.

Add a Web Font CSS3 Web fonts are an easy way to add graphics-free, accessible, maintainable fonts to your site. They are now supported in all major browsers, and many online sources provide free and commercial fonts.

Google Web Fonts With Google Web Fonts, you simply link to fonts that are hosted on the Google server.

1. Select a font from http://www.google.com/webfonts. 2. Click the Quick-use button for the font.

3. Find the step labeled Add this code to your website and copy the link tag into a page, or use this: 4. Copy the font-family tag into a style definition, or paste this into the bottom of a stylesheet: h1, h2 { font-family: 'Pirata One', cursive; } 5. Save changes and preview in a browser.

FontSquirrel With FontSquirrel Web Fonts, you must download the font files and host them on your site.

1. Copy the three fonts folders from the webfonts folder into one of your folders. Or select a font from http://www.fontsquirrel.com/, click View, read the license, click @font-face Kit, click Download, and extract all files from the .zip file into a folder.

2. Import one or two fonts into your stylesheet (paste these two lines in the top of your stylesheet): @import url("OpenSansRegular/stylesheet.css"); @import url("Contra/stylesheet.css"); Or in Dreamweaver CS6, add fonts to the site using the Web Fonts Manager (Modify > Web Fonts). 3. Change the font family of some elements (e.g. body or article) to OpenSansRegular or Contra. .sidebar1 { font-family: OpenSansRegular, sans-serif; } .sidebar2 { font-family: Contra, serif; } 6. Save changes and preview in a browser. 7. Examine the stylesheet.css file in one of the font folders to see how web fonts generally work. The @font-face tag defines a font-family using one or more src rules (a font file and its format). @font-face { font-family: 'OpenSansRegular'; src: url('OpenSans-Regular.ttf') format('truetype'); }

Add a Video

Add a Video Tag in HTML5 HTML5 allows you to embed videos without a plugin, but you may need free conversion software like Any Video Converter or Handbrake, since different browsers support different video formats:

 .mp4 - Internet Explorer 9+, Chrome and Safari  .ogg and .webm - Chrome, Firefox and Opera

1. Create a new HTML5 blank page. a. Click File, New… Under Layout, click . Select DocType: HTML 5. Click Create. b. Press Ctrl-S. Create a folder named html5-video and double-click it. c. Type index.html and click Save. 2. Copy (Ctrl-drag) the videos folder from the resources folder into the html5-video folder. 3. Click Code to view the source. Paste this video tag between the and tags:

4. Press Ctrl-S to save your changes. Preview the page in multiple browsers.

Embed a YouTube Video Social media sites and services (e.g. YouTube, Facebook, Twitter, Flickr, Picasa, ShareThis, RSSInclude, Google +, Maps and Custom Search) provide widgets or plugins of code to embed content into a page.

1. Select a video from http://www.youtube.com/. 2. Click Share, Embed. 3. Select a Video size from the drop-down menu. 4. Right-click the code starting with

5. Open any web page in Dreamweaver. 6. Click where you would like the video to appear. 7. Click the Code button to view the source code. 8. Click Edit, Paste or press Ctrl-V to paste the iframe into the source code. 9. Save and preview in a browser.

Validation, Conversion and Cleanup

Validate HTML Open a page in the resources/oldpages folder. Click File > Validate > Validate Current Document (W3C).

View Site Reports of HTML 1. Click Site > Reports. For Report on:, select Current Document, Folder, or Entire Current Local Site. 2. Under HTML Reports, check all the boxes (Missing Alt Text, Untitled Documents, etc.) 3. Click Run. In the Site Reports tab, double-click a filename to highlight the error in the page.

Check Page: Browser Compatibility, Spelling, Links (File Menu) 1. Click the Check button and click Browser Compatibility. 2. Click Commands > Check Spelling, or press Shift-F7, or use the Check button. 3. Click File > Check Page > Links or press Shift-F8. 4. From the Show: menu, select Broken Links, External Links or Orphaned Files.

Check/Change Links Sitewide 1. Click Site > Check Links Sitewide. Double-click a broken link to see it in the code. 2. Click Site > Change Link Sitewide… Fill in the boxes and click OK. (This is Find and Replace for links.)

Convert an older page/site to XHTML or HTML5 1. Click File > Convert > HTML5, XHTML 1.0 Transitional, or XHTML 1.0 Strict. (This only converts one page and does not convert XHTML to XHTML5.) 2. Some manual conversion is also needed, e.g. changing div tags to header, footer, article, aside, nav.

Import a Word or Excel document Click File > Import > Word Document… Select a document and click Open.

Clean up XHTML, Word HTML (Commands menu) Use these to clean up old, hand-coded HTML pages, and old pages pasted from MS Word.

Apply source formatting Click Code. Click Command > Apply Source Formatting. The code is neatly indented and easier to read.

Find and Replace 1. Click Edit > Find and Replace or press Ctrl-F. 2. In the Find in: menu, choose Current Document, Folder, or Entire Current Local Site. 3. In the Search: menu, choose Text, Source Code or Specific Tag. 4. Fill in the Find and Replace boxes. 5. Check some options (Match case, Match whole word, Ignore whitespace, Use regular expression). 6. Press Find Next, Find All, Replace or Replace All. This is a powerful tool. Use with caution.

Web Development Resources Disclaimer: No endorsement of non-CSU content is implied, but you may find some of these links useful. Web Development at CSU http://web.colostate.edu/ - Department of Web Communications http://graphicstandards.colostate.edu/web-requirements.aspx - Web Site Requirements/Guidelines http://graphicstandards.colostate.edu/logos-web.aspx - Web Logos http://ccs.colostate.edu/style_guide/ - Writers Style Guide http://www.acns.colostate.edu/Services/WebHosting - ACNS Web Hosting Services http://mail.rams.colostate.edu/ - Google Sites (part of Google Apps for CSU) Web Courses at CSU http://www.jtc372.net/ - JTC 372: Web Design and Management http://www.online.colostate.edu/courses/JTC/JTC372.dot - JTC 372 (online) http://www.cs.colostate.edu/~ct310/ - CT 310: Web Development (using PHP and MySQL) http://biz.colostate.edu/cis/Pages/courses.aspx - CIS 410: Web Application Development (ASP.NET) Adobe Dreamweaver http://www.adobe.com/products/dreamweaver.html - Product overview http://www.adobe.com/devnet/dreamweaver.html - Text tutorials http://tv.adobe.com/show/learn-dreamweaver-cs6/ - Video tutorials of Dreamweaver 6 basics http://tv.adobe.com/product/dreamweaver/ - All Dreamweaver video tutorials Alternatives to Dreamweaver http://sites.google.com/ - Google Sites http://www.wordpress.com/ - WordPress blogs/sites (ACNS also hosts some WordPress sites) Microsoft: WebMatrix 2; Expression Web 4, Office 365 Website, Visual Studio 2012 Express for Web Others: Angelfire, Moonfruit, SnapPages, Tripod, Webnode, Webs.com, Weebly, Wikispaces, Wix, Yola Web Fonts http://www.fontsquirrel.com/ - FontSquirrel downloadable Web fonts http://www.google.com/webfonts - Google linked Web fonts http://www.webfonts.info/ and http://www.typekit.com/ - free and commercial Web fonts Web Development http://www.w3schools.com/ - W3Schools: interactive tutorials on HTML, CSS, JavaScript, etc. http://www.google.com/analytics/ - Google Analytics: Track website usage http://www.google.com/webmasters/ - Google Webmaster Tools: Track website indexing problems http://validator.w3.org/ - HTML validator http://jigsaw.w3.org/css-validator/ - CSS3 validator http://www.usability.gov/ and http://www.webstyleguide.com/ - Web design process http://webdesign.meetup.com/cities/us/co/fort_collins/ - Web design meetup groups in Fort Collins Browser Developer Tools https://addons.mozilla.org/en-US/firefox/extensions/web-development/?sort=users - Firefox add-ons (Web Developer, Firebug, WAVE Toolbar, LinkChecker, Spell Checker, ColorZilla, FireShot, etc.) https://developers.google.com/chrome-developer-tools/ - Google Chrome Developer Tools http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx - IE Developer Tools (F12)