Week 03

Week 03 – Topics

Class meeting: Thursday, November 8 at 2:00pm
AET 105

If you haven’t done so already,  please post your Tumblr URL to the comments section of this site.

Marking up text
HTML
CSS
FTP
WYSYWYG authoring tool: Dreamweaver


ASSIGNMENT 3

Below are your assignments due next week by noon, Wednesday, November 14 (except for discussion which is due Monday, November 12).

READ

1. All class notes from Week 3
2. Assigned Reading from Textbook:

  • Chapter 5: Marking up Text
  • Chapter 11: Cascading Style Sheet Orientation
DISCUSS
Discussion is due by noon, Monday, November 12. Please post by this date.

Discussion – Assignment 3: Website Design Critiques
Save a .jpg or .png image of your design comp for Monday May Design to your Tumblr blog by Friday, November 9. For this discussion you will critique each others’ design based on the criteria from the “Basics of Web Design” post on the everything about web* website. For your classmate, please discussion how successful their design is in the following areas:

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

Please critique the Monday May Design for each classmate in your group. I’ve created the groups below.  Please find your classmate’s design on their Tumblr blog. All links to Tumblr blogs are posted in the right-hand column of this site. Please post your comments in the Discussion section of the smconline.org site in your Group post. Don’t forget to identify which classmate you’re critiquing and be sure to post your comments in the correct Group section!

Please post your designs to your Tumblr blogs ASAP!

If you don’t post your design to your Tumblr blog, your classmates aren’t responsible for critiquing your work and your grade for this assignment will be adversely affected. You’ll also miss out on the opportunity to have others give you valuable feedback!

Here’s the groups:

Group 1

Alex Nilsson
Chrissy Wahlstrom
Dalya Perelman
Emma Andersson
Marina Zabavsky

Group 2

Emma Lundin
Gregg G
Linn Johansson
Isabel Cynthia Soto
Laikin Carter

Group 3

Jazmyn Michel
Jennifer Choi
Jonathan Pehrson
Jordan Sanchez
Keishan Moseley

Group 4

Layla Shapiro
Griffin Davis
Madison Woodruff
Sara SultanalI

WATCH

VIDEO: One Column CSS Layout – Part 1
VIDEO: One Column CSS Layout – Part 2
VIDEO: One Column CSS Layout – Part 3
.

EXERCISES (2 parts)

Part 1 – Practice creating a one-column layout for the Smithsonian Education web page demonstrated in class. Please refer to the class notes and the videos for this exercise. Please make sure your are using correct file organization and turn in the entire “final_web” folder which contains all the files for the web page. Upload your web files as a zip file to the “Dropbox” on smconline.org site by noon, Wednesday, November 14.

Download the Photoshop file for the Smithsonian web page and a folder of the 2 images for this exercise.

Part 2 – Exercises from Chapter 5 & 11
Please complete exercise 5-1, 5-2, 5-3 from Chapter 5 and exercises 11-1, 11-2.
Upload your files as a zip file to the “Dropbox” on smconline.org site by noon, Wednesday, November 14.

When you upload your zip file to the Dropbox, please put both parts of the assignment in ONE folder and be sure to include your name in your file names. For example: yourlastname_assignment3.zip


Creating a new document in Notepad (Windows users) (pg 53)

These are the steps to creating a new document in Notepad on Windows XP.

  1. Open the Start menu and navigate to Notepad (in Accessories).
  2. Clicking on Notepad will open a new document window, and you’re ready to start typing.
  3. Next, we’ll make the extensions visible. This step is not required to make HTML documents, but it will help make the file types more clear at a glance. In any Explorer window, select “Folder Options…” from the Tools menu 3 and select the “View” tab.
  4. Find “Hide extensions for known file types” and uncheck that option.
  5. Click OK to save the preference and the file extensions will now be visible.
Creating a new document in TextEdit (Macintosh users) (pg 54)

By default, TextEdit creates “rich text” documents, that is, documents that have hidden style formatting instructions for making text bold, setting font size, and so on. HTML documents need to be plain text documents, so we’ll need to change the Format.

  1. Use the Finder to look in the Applications folder for TextEdit. When you’ve found it, double-click the name or icon to launch the application.
  2. TextEdit opens a new document. You can tell from the text formatting menu at the top that you are in Rich Text mode. Here’s how you change it.
  3. Open the Preferences dialog box from the TextEdit menu.
  4. There are three settings you need to adjust:
    Select “Plain text”.
    Select “Ignore rich text commands in HTML files”.
    Turn off “Append ‘.txt’ extensions to plain text files”.
  5. When you are done, click the red button in the top-left corner.
  6. Quit TextEdit and restart it to open a new document with the new Plain Text settings. The formatting menu will no longer be on the new document.
Marking up text

Chapter 4 exercise

<html>
<head>
  <title>Black Goose Bistro</title>

    <style type="text/css">
    body { background-color: #C2A7F2;
    font-family: sans-serif;}

    h1 { color: #2A1959;
    border-bottom: 2px solid #2A1959;}

    h2 { color: #474B94;
    font-size: 1.2em;}

    h2, p { margin-left: 120px;}
    </style>

</head>
<body>
  <h1><img src="blackgoose.gif" alt="black goose logo">Black Goose Bistro</h1>

    <h2>The Restaurant</h2>
     <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere.
     The menu changes regularly to highlight the freshest ingredients.</p>

    <h2>Catering</h2>
     <p>You have fun... <em>we'll handle the cooking.</em> Black Goose Catering can handle
     events from snacks for bridge club to elegant corporate fundraisers.</p>

    <h2>Location and Hours</h2>
     <p>Seekonk, Massachusetts;
     Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>
HTML

Figure 1 shows the anatomy of a typical HTML element.

A typical HTML element

Figure 1: Anatomy of an HTML element.Read Figure 1 description

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

What the heck is a “Div”?

The <div> tag defines a division or a section in an HTML document. The <div> tag is often used to group elements to format them with styles. With divs you’ll be able to create one-column, two-column and three-column layouts. These layouts are the beginning structure for most page layouts.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML

A simple example of a web page

<html>
<head>
   <title>Basic HTML</title>
</head>

<body>
<p>Some text for a web page that demonstrates the basic
form of HTML in a web page.</p>
</body>

</html>
Basic CSS
 p {
  font-family: Arial, Helvetica, sans-serf;
  font-size: 12px;
  color: #333333;
  line-height: 16px;
}
Additional Resources

HTML Cheat Sheet
CSS Cheat Sheet

Basic HTML: One column layout
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">  
</div>

</div>
</body>
</html>

(Remember, the <div> tag defines a division or a section in an HTML document. The <div> tag is often used to group elements to format them with styles.)

Basic CSS: One column layout
*{
    margin: 0px;
    padding: 0px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
}

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;    
}

#header {
    height: 150px;    
}    

#content {
    background-color: #FFF;
}

#footer {
    height: 50px;
    background-color: #f3f2f2;
}
One-Column Exercise: Smithsonian Education

HTML
<html>
<head>
<title>Smithsonian Education</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
     <div id="nav">
<ul>
<li><a href="#">Educators</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Students</a></li>
</ul>
     </div>
</div>

<div id="content">
     <div id="photo">
  <img src="images/egyptian_empire.png" width="500" height="350" />
     </div>

     <div id="maintext">
  <h1>The Rise of the Egyptian Empire</h1>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
    there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
    Semantics, a large language ocean. </p>
     <br />
     </div>
</div>

<div id="footer">
  <p>&copy; Smithsonian Education 2011</p>
</div>

</div>
</body>
</html>
CSS
*{
    margin: 0px;
    padding: 0px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    background-color: #CBC6BD;
}

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;    
}

#header {
    height: 150px;
    background-image: url(images/smithsonian_logo.png);

}    
#content {
    background-color: #FFF;
}

#nav ul{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    color: #dee1e4;
    padding-top: 45px;
    padding-left: 55px;
    list-style-type: none;
    line-height: 22px;
}

#nav ul a {
    color: #dee1e4;
    text-decoration: none;
}

#nav ul a:hover {
    color: #9B591B;
}

#photo {
    margin-right: auto;
    margin-left: auto;
    width: 500px;
    padding-top: 50px;
}
#maintext {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}
#footer {
    height: 50px;
    background-color: #f3f2f2;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #bab8b8;
}    

#maintext h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    color: #333333;
    padding-bottom: 5px;
    padding-top: 10px;
}
#maintext p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    padding-top: 5px;
    padding-bottom: 10px;
}
#footer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: right;
    color: #b2b0b0;
    padding-top: 20px;
    padding-right: 50px;
}
FTP (file transfer protocol)

Please review the FTP page on this website. Be sure you understand how to upload files to the class server. Please let me know if you have any questions about this!

Dreamweaver
WYSYWYG 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