GD 65 Class 03B

Topics

One-Column Layout Exercise
  • Smithsonian Education
  • Video: One Column Layout Part 1
  • Video: One Column Layout Part 2
  • Video: One Column Layout Part 3
Dreamweaver
  • WYSIWYG authoring tool
  • Creating a new web page in Dreamweaver
  • Previewing in the browser
  • Dreamweaver Windows
  • Page properties
  • The document toolbar

One-Column Layout Exercise

Smithsonian Education


VIDEO: Please watch if you’re using Dreamweaver CC

Shortcut to toggle as discussed in video below:

For PC users: Hit Ctrl + Alt +Shift + P and the CSS Designer will turn into the old CSS Panel.
For MAC users: Hit Command + Option + Shift + P and the CSS Designer will turn into the old CSS Panel.


Unable to display content. Adobe Flash is required.

VIDEO: One Column CSS Layout – Part 1


VIDEO: One Column CSS Layout – Part 2


VIDEO: One Column CSS Layout – Part 3


Dreamweaver

WYSIWYG authoring tool

Dreamweaver is an HTML editor and an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application.

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in the browser rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, animations, sounds, etc. Dreamweaver does not create the page for you — you need to understand the basics of page structure and layout in order to understand how to best use Dreamweaver. When it comes to building a web page, Dreamweaver is not smarter than you. Similar to an application like Word (which does not write a paper for you), Dreamweaver does not automatically build a website for you. Both of these applications are only tools. You have to understand how to build a website in order to best use Dreamweaver.

Creating a new web page in Dreamweaver

  • Select FILE > NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE > SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Give the file a name. This name should be all lower case, and have no spaces between words.
  • SAVE the file
  • There are two windows to use when creating web pages:

    Document
    . This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

    Code Inspector
    . This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).

Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Chrome or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE > PREVIEW IN BROWSER > Chrome (or Explorer, Firefox or Safari).

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

document_toolbar

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View – where you see how the page will appear in a browser
  • Split View – a split page view where you see the code at the top, and the design at the bottom
  • Code View – where you see only the code that describes the page

Dreamweaver CC tutorial: Toolbars | lynda.com

Leave a comment