|
4 | 4 |
|
5 | 5 | ### Demonstration: Implementing an Adaptive User Interface |
6 | 6 |
|
7 | | -#### Preparation Steps |
| 7 | +#### Preparation Steps |
8 | 8 |
|
9 | | -1. Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles. |
| 9 | +Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course. |
10 | 10 |
|
11 | 11 | #### Demonstration Steps |
12 | 12 |
|
13 | | -1. Read the Lab Scenario to students and point out that they should read each scenario before attempting the lab for a module. |
14 | | -2. Point out to students that the Exercise Scenario for each exercise contains a description of what they will accomplish in the exercise, and is also essential reading. |
15 | | -3. Start Visual Studio, and open the **ContosoConf.sln** solution in the **Allfiles\Mod10\Labfiles\Solution\Exercise 2** folder. |
| 13 | +1. Read the lab scenario to the students and point out that they should read each scenario before attempting the lab for a module. |
| 14 | +2. Point out to the students that the exercise scenario for each exercise contains a description of what they will accomplish in the exercise, and is also essential reading. |
| 15 | +3. Start Microsoft Visual Studio, and then from the **Allfiles\Mod10\Labfiles\Solution\Exercise 2** folder, open the **ContosoConf.sln** solution. |
16 | 16 | 4. On the **Debug** menu, click **Start Without Debugging**. |
17 | 17 |
|
18 | | ->**Note:** If the message **Intranet settings are turned off by default** appears, click **Don’t show this message** again. |
| 18 | +>**Note**: If the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**. |
19 | 19 |
|
20 | 20 | 5. In Internet Explorer, on the navigation bar, click **About**. |
21 | 21 | 6. Press F10 to display the menu bar. |
22 | 22 | 7. On the **File** menu, click **Print preview**. Point out that the layout of the **About** page is modified to suit a printer; there is no navigation bar, and the text is displayed without splitting it up into three columns. |
23 | 23 | 8. Close the **Print Preview** window. |
24 | | -9. In Internet Explorer, press F12 to display the F12 Developer Tools window. |
25 | | -10. On the **Tools** menu, point to **Resize**, and then click **480 x 800**. Point out that the Internet Explorer window changes size and matches that of a handheld device. |
26 | | -11. Close the F12 Developer Tools window. |
27 | | -12. In Internet Explorer, notice that the layout of the navigation bar has changed; it is displayed over two lines, and the Register Free link is no longer displayed. |
| 24 | +9. In Internet Explorer, press F12 to display the **F12 Developer Tools** window. |
| 25 | +10. On the **Tools** menu, point to **Resize**, and then select **480 x 800**. Point out that the **Internet Explorer** window changes size and matches that of a handheld device. |
| 26 | +11. Close the **F12 Developer Tools** window. |
| 27 | +12. In Internet Explorer, notice that the layout of the navigation bar has changed; it is displayed over two lines, and the **Register Free** link is no longer displayed. |
28 | 28 | 13. Close Internet Explorer. |
29 | | -14. In Solution Explorer, expand the **ContosoConf** project, expand the **styles** folder, and then double-click **print.css**. |
30 | | -15. In the Code Editor window, show the CSS styles in this file. Mention that students will create this stylesheet to format pages when they are sent to a printer. |
31 | | -16. In Solution Explorer, double-click **mobile.css**. |
32 | | -17. In the Code Editor window, scroll through the file and explain that it contains the styles used by the application when it runs in a narrow window matching that of a handheld device. |
| 29 | +14. In **Solution Explorer**, expand the **ContosoConf** project, expand the **styles** folder, and then double-click **print.css**. |
| 30 | +15. In the **Code Editor** window, show the CSS styles in this file. Mention that students will create this style sheet to format pages when they are sent to a printer. |
| 31 | +16. In **Solution Explorer**, double-click **mobile.css**. |
| 32 | +17. In the **Code Editor** window, scroll through the file and explain that it contains the styles used by the application when it runs in a narrow window matching that of a handheld device. |
33 | 33 |
|
34 | 34 | ©2018 Microsoft Corporation. All rights reserved. |
35 | 35 |
|
|
0 commit comments