Roughing out the frameset

Posted by: Ping

1. In Dreamweaver: File > New: HTML 2. View > Visual Aids > Frame Borders (Make sure Ruler and Grid are showing) 3. Drag the border to right about 200 px / Command Drag to drag the top frame 4. Save Framesets As index.html / Create the site (save it into the frame-site folder) 5. […]

Teaching Schedule &
Office Hour_Spring 2012

Posted by: Ping

Teaching Assignments / Class Meeting Time_Spring 2012 MWF: Art-211 Design II / 3D Design 11:30 am – 1:20 pm / A-211_Section II 1:30 pm – 3:20 pm / A-211_Section I TuTh: Art-420: Viscomm III / Web Design 7:30 am – 10:20 am Office Hours_Spring 2012 MWF: 3:20 pm – 5:20 pm TuTh: 10:20 am – […]

CSS : Link Selector & Link Styling Order

Posted by: Ping

The order of link styles in the code matters. If they are out of order they may not work properly. The correct top to bottom order should always be: 1. a:link (a) 2. a:visited 3. a:hover 4. a:active (they control the entire linking system except those inside the navigation div) CSS Reference & Properties

Dreamweaver CSS – Spry Menu

Posted by: Ping

Before | After Get the exercise asset here 1. In Dreamweaver, choose Site > New Site 2. Select the text “Menu Goes Here”, then delete the text 3. Insert > Spry > Spry Menu Bar 4. Delete items / add items for creating sub-menus 5. In CSS panel, select ul.MenuBarHorizontal a (change bgcolor to #CCC) […]

Button rollover with CSS

Posted by: Ping

There are a couple of ways for button rollover: A. Button rollover with Javascript (treat the buttons as image links) B. Button rollover with CSS Download the reference file from here <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>DWWK</title> <link href=”dwwk.css” rel=”stylesheet” type=”text/css” /> </head> <body> […]

DWWK Project – Get started

Posted by: Ping

Today’s class content: 1. Design the home page layout in Adobe Illustrator CS5 (800 X 600 or 1024 X 768) 2. Export the design to Adobe Photoshop CS5 3. Create a gif animation for the banner image 4. Re-name slices to different image names, and save all images into the image folder 5. Create site […]

Basic CSS Structure

Posted by: Ping

CSS stands for Cascading Style Sheet. It is a style language used to define the colors, fonts, etc. of, elements in an HTML file or in an HTML site. The main concept is that HTML files hold the content and CSS formats that content. There are three CSS styles in the World Wide Web: • […]

A-420 / Project-2:
Dreamweaver Workbook

Posted by: Ping

Objective Build a web site to achieve the following : 1. To create web pages by using Adobe Dreamweaver CS5. 2. To learn web site construction and management. 3. To learn CSS rules in the Dreamweaver environment. 4. To learn other software like Illustrator, Photoshop, that assist in building web pages. 5. To upload the […]

Page Layout Using AP Div

Posted by: Ping

AP Div stands for Absolute Positioned Div. Earlier we used table tags to layout a page. Let’s learn a more advanced layout technique, page layout using AP divs, through the following exercise. In this exercise, you need: 1. create an HTML page with a header, a main content area, and a sidebar using AP divs. […]