- - The Adobe site no longer has the tutorial that this relies on - - do not distribute - - -

 

 

Instructions for using the Adobe tutorial:
How to make and a style responsive web page

Instructions

  1. If you do not already have the most recent version of Dreamweaver, go to this page at the Adobe website to download a 7-day free trial of the latest version of Dreamweaver.
    1. If you already have the most recent version installed, you do not need to take this step.
    2. You will be required to create an Adobe account if you have not done so already.
    3. Do not use an older version of Dreamweaver for this assignment.
    4. If anything about this exercise, or Dreamweaver, has changed that makes the information in this document inaccurate, or if you find any errors, please let me know and send me the web address of this page with your comments. It will be much appreciated!
  2. Start your exercise by clicking on the link below and follow all the steps:
  3. As a part of the exercise, you will be creating and using a folder to contain all of the files required for your Dreamweaver site. When you have completed the exercise please do the following:
    1. Rename that folder as follows (use YOUR names):
      yourlastname-yourfirstname-dw-responsive-web-page-assignment
      • For example, I would name my folder:
        vaughan-daniel-dw-responsive-web-page-assignment
    2. Delete the sub-folder named completed
    3. Zip the folder. To zip a folder do the following:
      1. In Windows Explorer, right click on the folder and select Send to > Compressed (zipped) folder
      2. In the Mac Finder, right click on the folder and select Compress your folder name
        1. your folder name will be the name of the folder you are compressing.
      3. The zip file ought to have the same name as the folder.
      4. Then submit that zip file to me.

Useful Information

Learn how to build a responsive web page

Time Notes
1:45
  • A site name can be any name you want to use to identify the project.
  • A site name could be the name of a client, product, person, group, etc.
  • It is merely a name for you to use to identify the site/project within Dreamweaver.
  • The rule for not using spaces in file or folder names does not apply here because it is neither of those. It is only used internally by Dreamweaver.
2:22
  • Note that the site name is in a drop down menu in the top left of the Files panel. That menu is where you can find site names and then easily and rapidly switch between projects.
2:49
3:30
  • A visible "grid" that includes rows and columns is usually not seen.
  • The grid is an abstract structure that represents the many options that Bootstrap makes available to organize and align page content.
  • The system of creating storage areas for content is analogous to Excel where you can merge two or more "cells" to create a wider cell that straddles columns and/or rows. (NOTE that the word "cell" is not used by Bootstrap - I am using it as an analogy.)
  • That is what is shown in the example page layout. The top section is a row with only one "cell" that straddles all 12 columns. Then there are three sections each with a photo on top and each of which is straddling four columns in one row.
4:19
  • Underneath the file tab "Untitled", note the horizontal row of the names of the files that are linked to from the html file.
  • You can see that the code in the document contains links to a CSS (.css) file and also to two JavaScript (.js) files.
  • Also note that underneath those file names are three buttons. The right-most button ought to be Live. If yours says Design then use that button to see a menu to change it to Live.
  • Live view provides a more accurate representation of how the page will look in a browser than Design view. Live view also provides better tools for structuring a page. But there are certain things that can only be accomplished in Design view.

 

Add a page title and container

Time Notes
:20
  • He sets up the document views in what had been Dreamweaver's traditional arrangement for many years: code shown vertically on the left. That is also my preference.
  • Sometimes I open Window > Code Inspector. That panel can be used as a Code View/Editor. I undock it and move it to a second monitor. That frees up space in my monitors to use for the page display and other panels.
:43
  • If you don't see the Properties panel, select it from the Window menu.
  • The Properties panel is horizontal and provides options relevant to the current selection.
  • Note that there is also a Properties section in the CSS Designer panel. It lists the CSS property names that are the formal names used in code. The Properties section appears as a vertical column in the CSS Designer panel.
2:55
  • The term Heads Up Display (HUD) refers to interface components that display information visually within or on top of an image.
  • The term originated with the use of projections on to airplane cockpit windows that displayed information about the flight in order to assist the pilot. The pilot can see whatever is ahead while at the same time seeing information superimposed on top of it.
3:15

 

Add structure and content

Time Notes
:23
  • DOM refers to the Document Object Model.
  • In Dreamweaver's DOM panel it is a hierarchical representation of the elements in the page.
  • It uses indentations to indicate nested elements.
  • It allows you to select elements and provides many other functions.
2:20
  • The Stack refers to the appearance of an element in the DOM panel when it has nested elements within it that are not shown. The icon for the parent element will look like a pile, or stack. By clicking on it, it will display elements within it.
2:38
  • Note that the carousel's div element has two classes and one id attribute.
3:31
  • The article element is identical to a div element and also many other html5 elements such as aside, section, header, and footer. The only difference is the element name which conveys the type of information contained within the element.
  • Otherwise, the only default property that any of them posses is a line break at the end that forces subsequent content to be displayed beneath it (unless it is floated).
3:39
  • Note that the article element (and some other subsequent elements) contain temporary text to identify the element's location.
  • The text is also necessary to see the elements because without content the elements would be invisible in a browser.
4:29
  • This "thumbnail" image is larger than what I would consider to be a thumbnail size.

Add custom content

Time Notes
:55
3:39
  • The presenter refers to ipsum text. It is more commonly known of as Lorem ipsum because of the first two words in the text.
  • This text has been used for decades in mock-ups.
  • The reason Latin is used is because most people do not understand what it means, so it is less of a distraction. Also, the length of the words and amount of capitalizations is similar to English.
  • It is Latin from "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero.
4:30
  • The coding method used to generate the Lorem ipsum text is a free text editor plugin named Emmet. Emmet can also be installed in other text editors.
  • Emmet makes coding tasks much easier.
  • Note that the TAB key executes Emmet commands, NOT the Enter/Return key!
  • Dreamweaver includes the Emmet plugin by default.
  • To further demonstrate what Emmet can do, enter an exclamation mark ( ! ) in your code view and press the tab key. An entire basic page structure is created! But you probably don't want it, therefore use Ctrl-Z/Cmd-Z to remove it.
4:35
  • The refresh button is not needed if you simply click in the Live view area.
5:49
  • To insert a copyright © symbol in Design view follow this menu path:
    Insert > HTML > Character > copyright
    • This is one of the things than cannot be done in Live view.
  • I am NOT a lawyer, therefore do not follow this advice about how to properly include a copyright unless you want to. It specifies that the copyright holder's name be included and other information be added as well.
7:16
  • The statement "medium or larger" is accurate unless a different column span is specified for larger size screens.
7:39
  • The Duplicate command does not appear in the Edit menu with Design view selected.
  • However, the Ctr-D/Cmd-D shortcut does work.
  • Also note that the Duplicate menu item in the Edit menu (using Live view) does not display the shortcut keys although it does for many other commands. Fascinating! ;-)

 

Add images and links

Time Notes
:51
  • Note that if the images folder had not been opened in advance you could click and drag and then hover over the closed images folder and, after a moment, it would open.
1:35
  • A folder icon is also next to the link address in the Properties panel. It performs the same function as using the folder icon in the HUD.
2:26
  • "The link field" - refers to the a (anchor) element.
  • The a element is used for creating links.
  • Almost anything within an a element will appear as a link if there is a value in the Link field.
  • The # symbol is interpreted by browsers as the top of the page. If the link is clicked on it will go to the top of the page or reload the page with the top being seen.

 

Style text content

Time Notes
1:10
  • The Designer panel is easier to use if you make it wider than what is shown. When you make the panel wider it will display two columns within the panel making it easier to work with. This is demonstrated later in the videos.
  • To widen the panel, hover over the left edge of the panel until you see a horizontal double pointing arrow, then drag to the left until two columns appear.
1:54
  • The presenter refers to the display of the selector in Code view as a declaration. The term declaration usually refers to a property:value; pair.
  • What he refers to is commonly identified as a CSS rule.
  • The rule in this case has a selector (consisting of three sub-selectors). There are no declarations within it yet.
  • Regrettably, there are many variations of the meaning of CSS terms.
2:03
  • When the Show Set checkbox is enabled (checked), only the properties that have already been set for the selector will be shown. This makes it very difficult to use the panel for specifying new properties and values. That is why it is unchecked.
5:10
  • The code for the margins could be written more simply as:
    margin: 60px auto;
6:00
  • Whenever each pair of values within the six characters of hexadecimal color code are the same, it is a shade of gray.
  • Also note that #000000 is black and #FFFFFF is white.

 

Style the menu

Time Notes
:35
  • The classes that are already in place were included when the navigation bar was added using the Insert > Bootstrap panel earlier in the exercise.
1:04
  • When more than one class name is coded as the value of an HTML class attribute, it means that those classes are assigned to the same element.
2:39
  • What he has done is the equivalent of using a Container from the Bootstrap Components panel.

 

Add the finishing touches

Time Notes
2:56
  • When using an ID selector, its name cannot be used as an html id attribute value in more than one element on the same html page.
  • Each ID name (value) must be unique on a page.
  • This is not the case with classes. The same class name can be used as the html class attribute value in multiple elements (including different element types) on the same page.
  • IDs are often used in JavaScript code to uniquely identify objects in a page.
3:05
  • Whenever a css value is zero, a unit of measurement is not required.