Do Not Start Building Your Site Until You Have Defined Your Website in Dreamweaver!

  1. VIDEO m04-01
  2. Open Dreamweaver CC 2015 R3
  3. Select the "Beginner" workspace
  4. Reset the "Beginner" workspace
  5. Select the "Files" panel
  6. You should see the site you defined
  7. Go to the "File" menu, and select "New" or use the short cut "Ctrl+N"
  8. From the "New Document" window select "Bootstrap"
  9. For the item "Boostrap CSS" you should have "Create new" selected
  10. For the item "Design: Include a pre-built layout" this should be unchecked
  11. Click "Create"
  12. Click the "Files" panel, and you should see three newly created folders: "css", "fonts", "js".
  13. If you explore the "css" folder you will find the Bootstrap css file.
  14. If you explore the "js" folder you will find the Bootstrap JavaScript file.
  15. If you explore the "fonts" folder you will find the glyphicon fonts.
  16. From the "File" menu, select "Save As" and save the new document as "dev"
  17. View the DOM panel and explore the parts of the web page
  18. Make sure you are in Live view (upper left corner)
  19. Notice at the bottom of the page, your page has a title of "Untitled Document". If you do not title a page, the page will be displayed in the browser tab, Favorites lists, and history lists as an Untitled Document.
  20. Replace the text "Untitled Document" with the title of your webpage. You created this in your first assignment.
  21. Switch to code view. Notice the title of your website is contained within the <title></title> tags.
  22. Save your website by selecting "Save All" in the standard tool bar.
  23. VIDEO m04-02
  24. Click on the "meta tags" in the code, and notice the changes at the bottom of the Dreamweaver interface in the Properties panel.
  25. Place the cursor at the end of the viewport metatag and hit "enter" to create a new line
  26. From the top "window" menu, choose "snippets" or use the keyboard shortcut "Shift+F9"
  27. From the "html_snippets" list, select "Meta Tags for SEO", and press Insert
  28. Click on the "refresh" button in the Properties inspector panel, or press F5
  29. Click on the meta tag "description" and enter a brief description of your website. You created this in your first assignment.
  30. Click on the meta tag "keyword" and enter keywords for your website. You created this in your first assignment.
  31. VIDEO m04-03
  32. Switch to Live view
  33. Resize the width to 'xs', less than 768 px.
  34. From the DOM panel, select the body tag
  35. In the Insert Panel, select Bootstrap Components
  36. Click on Navbar:Navbar fixed to top to insert a Navigation Bar
  37. Click on the first word "Link", or using the DOM panel, click on the first locate the <a> element inside the navigation bar. This <a> element is a child element of a list element, or <li>. The <li> is a member of the "active" class, or has a class of ".active"
  38. In the Insert Panel (right hand side) select Bootstrap Components / Glyphicons: Home. Select to "nest" the glyphicon.
  39. This will insert the folloing code next to the original "Link" text: <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
  40. Switch to Code view, and delete the text "Link."
  41. Click Save All from the Standard Toolbar
  42. Switch to Live View
  43. Use the Live View Scrubber to see how the website changes. Notice the text "Link" has been replaced with a Home icon.
  44. VIDEO m04-04
  45. Switch to the 'sm' view, or move the liver scrubber to the view content of 768 px or greater. You need to be able to see the larger view of the navigation bar, with the "drop down" elements..
  46. The navigation bar has two drop down menus, one on the left, and one on the right. We will delete the one on the right.
  47. Select the second <li class="dropdown">. This will be found inside <ul class="nav navbar-nav navbar-right">
  48. Use the DOM panel to locate the second list item <li>, with a class of dropdown, or .dropdown
  49. Press 'delete'
  50. In the Status bar, select the Nav. We will be adding a new HTML5 Section element to the web page, after the Navigation element.
  51. From the top menu Insert panel, click on Section to add a Section semantic element, for placement select next
  52. Choose to add the Section After the Navigation Bar
  53. From the top menu Insert panel, click on Footer to add a footer semantic element
  54. Choose to add the Footer After the Section element
  55. In the next section we will use an online resource to help select colors for the navigation bar
  56. VIDEO m04-05
  57. Visit the site TWBSColor and experiment with different colors for the navigation.
  58. Visit the site HTML Color Codes. Upload your file color_set.jpg from Module 2 to the site to determine the hex color codes of your color set.
  59. Return to TWBSColor and input the colors from the HTML Color Codes site.
  60. Copy the contents of the CSS section from the TWBSColor page
  61. In CSS Designer, under Sources, click "+" to add a new source
  62. Select Create a New CSS File
  63. Select Browse from the dialog box and open the 'css' folder
  64. Type in 'nav' for the file name and select save, the select 'save' to create and save the file
  65. In the file bar at the top of Dreamweaver, click on nav.css. If you are not in 'split' view, choose split view and view the contents of the nav.css file.
  66. Paste in the nav.css file the contents copied from the TWBScolor website. As soon as the content is pasted, you should see the navigation bar change.
  67. Experiment with different color combinations
  68. VIDEO m04-06
  69. Switch to Design view
  70. Click inside the footer to edit the content of the footer.
  71. Type in the content: "Copyright Student Name"
  72. Click after the word 'Copyright'
  73. In the top menu, select Insert / HTML / Character / Copyright to add a html copyright symbol (&copy;)
  74. Make sure to add a space before and after the Copyright symbol if necessary
  75. Click "Save All"
  76. Select the 'footer' in the Status bar.
  77. We are going to apply a Bootstrap 'text-center' class to automatically center all the text inside the footer. Click here to learn about Bootstrap Alignment classes.
  78. Click on "Class" in the Property inspector, and apply a class of 'text-center'
  79. We are going to further customize our footer. We will create a custom css style sheet for this website for all our custom rules.
  80. Select the CSS Designer panel, click "+" in Sources and select "Create a New CSS File"
  81. Click on Browse and open the CSS folder. In the 'File name' bar, type "styles" and click Save
  82. Click "OK" in the Create A New CSS File dialog box.
  83. If you click on the Files tab, and click on the '+' to open the css folder, you will see your newly created styles.css file and the nav.css files.
  84. VIDEO m04-07
  85. Switch to Live view.
  86. In CSS Designer, with styles.css and GLOBAL selected, click "+" in Selectors to add a new selector, in the file name box enter '#footer'. Using a '#' makes this new selector an ID selector, which is used only once on a web page.
  87. Select the footer in the status panel, and assign the footer an ID of "footer'
  88. Click Save All
  89. Select the 'Layout' icon in the Properties panel
  90. Add padding of 20px top and 20px bottom.
  91. Optional:

    1. Choose a color for the background color for the footer
    2. Experiment with changing the color of the text in the footer by selecting the Text color
    3. Drag your color_set.jpg image to the root directory of your website.
    4. In the Properties panel, select the Background shortcut.
    5. Select background-color, the pop-up color picker appears.
    6. Select HEX colors, colors that begin with #
    7. Select 2 - 4 four colors to add to the presets.
    8. Experiment with changing the colors.
    9. To change the primary colors of the nav bar, select navbar-default in the nav.css files.

Wayne Joness
West Los Angeles College, cs952
Fall 2016