Adobe Dreamweaver CS6 Part 3 Create a Liquid Layout Page from A
Total Page：16
File Type：pdf, Size：1020Kb
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. Adobe Dreamweaver CS6 Part 3 Page 1 of 11 © Copyright 2013 Computer Applications Training, Colorado State University 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 <meta charset tag, for correct sizing in mobile browsers: <meta name="viewport" content="width=device-width, initial-scale=1" /> 4. Copy and paste this line of code above the </head> tag for correct display in Internet Explorer 7-8: <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 5. Copy and paste this code just below the </title>tag, which links to the boilerplate.css stylesheet: <link href="boilerplate.css" rel="stylesheet" type="text/css" /> 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 </title> tag. 6. Copy media-queries.css to the 3-column-liquid folder and add this link below the boilerplate.css link: <link href="media-queries.css" rel="stylesheet" type="text/css" /> 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. Adobe Dreamweaver CS6 Part 3 Page 2 of 11 © Copyright 2013 Computer Applications Training, Colorado State University Adobe Dreamweaver CS6 Part 3 Page 3 of 11 © Copyright 2013 Computer Applications Training, Colorado State University 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. Adobe Dreamweaver CS6 Part 3 Page 4 of 11 © Copyright 2013 Computer Applications Training, Colorado State University 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 </h1> tag, and insert an h2 tag containing Libraries. Adobe Dreamweaver CS6 Part 3 Page 5 of 11 © Copyright 2013 Computer Applications Training, Colorado State University 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. Adobe Dreamweaver CS6 Part 3 Page 6 of 11 © Copyright 2013 Computer Applications Training, Colorado State University 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 <none>. 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.