Class 04A

Topics

Final Project Assignment
  • Competitive Analysis
FTP
Dreamweaver
  • WYSIWYG
  • Creating a new web page in Dreamweaver
  • Previewing in the browser
  • Dreamweaver Windows
  • Page properties
  • The document toolbar

 


Final Project Assignment

Due Thursday, December 13

Pick an existing website of your choice. The website must be a business or organization, and not a personal site for you or someone you know. Redesign this site for your final project but give it a new name – your final project will be inspired by this site but will not use the name from this site. (We want to avoid copyright issues surrounding the use of someone’s name, logo and content).

Write a couple paragraphs critiquing the effectiveness of the current site. Base your critique on the objectives from “The Basics of Web Design” reading and the critiques you did Week 03.

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

Describe what works and does not work with the design. Who is the target audience? Post this critique to your Tumblr blog.

Redesign 5 pages of the website you’ve selected to redesign. Create a sitemap for your project and save it as a PDF to your “source_files” folder. Create a design comp (for all 5 pages) in Photoshop paying close attention to the layout and the balance and composition of the page. Using image slicing (we will cover this in later in class), create the assets and compress their file sizes effectively. Pay particular attention to the consistency and functionality of the navigation system. Using either a one-column structure or two-column, build the pages in HTML using one external CSS file.

Specifications:

  • Optimize your design for a browser resolution size of 1024 x 768 (remember the dimension of your page should be 990 pixels wide and “the fold” is around 560 pixels. The page should not end at 560 pixels!)
  • Your Photoshop file must be RGB and 72 dpi.
  • Set up your file structure correctly with a “lastname_firstname_final” folder containing 2 separate folders: “final_web” and “source_files.”
  • Complete 5 HTML pages with one external CSS file
  • Must use HTML text for the main content of your site, not images.
  • Please use images you have created, or free or royalty-free images on your site. (See possible sources below).
  • Upload your final project to the class server via FTP.

Possible sources for images:


FTP (file transfer protocol)

Please review the FTP page on this website. Be sure you understand how to upload files to the class server. You’re required to upload your final project website to the class server so please let me know if you have any questions about this!


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 Explorer or Safari 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, Flash, 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 the application InDesign which does not design a brochure 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 Safari 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>SAFARI (or Explorer or Firefox).

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.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).

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
  • Code and Design 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

 



Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65