The Web Design course gives students an opportunity to learn web design principles and development from a business and marketing perspective. Students learn web design using current, industry-leading software. Students are also introduced to the fundamentals of web design without the need for expertise in HTML coding. The class is project-based.

ESSENTIAL QUESTIONS

• What is the purpose and goal of your website?
• Who is your target audience?
• How will you capture the attention of your audience?
• How will you use color, text and images to accommodate your target audience?
• What is the Classic Dreamweaver workspace?
• What is the fastest way to open and close panels?
• How do I view the options within each category of preferences?
• What do the icons on the Files panel indicate?

CONTENT OBJECTIVES

Students will be able to . . .

• understand and customize the components of the Dreamweaver workspace.
• create a Dreamweaver website using a template.
  • identify the critical aspects of website development (refer to critical vocabulary)/
  • change formatting.
  • add links.
  • preview a web site in a browser.

Vocabulary - URL, HTTP, www, e-commerce, ISP, cross-platform site, focal point, white space, typography, W3C, IP, DNS, ICANN, Accredited Registrar Directory, SSL, FTP, webmaster, XHTML, Dreamweaver workspace, application bar, insert bar/insert panel, document tab, document toolbar, document window, status bar, tag selector, select tool, hand tool, zoom tool, set magnification, mobile size, tablet size, desktop size, window size, download size/time, Unicode (UTF-8), panel doc, panel, panel group, code view, split view, design view, live view, preferences, DocType, document type definition, CSS file, template, site/website, remote site, local site, Dreamweaver site definition, sub folder, path, directories, master folder/route, local files, fixed layout, liquid layout, homepage, headings, formatting, links, order lists, unordered lists, definition lists, web page title, Adobe BrowserLab

ESSENTIAL QUESTIONS

• Will the template include editable regions?
• What is the purpose of inserting a DIV tag?
• What is the purpose of the new CSS rule dialog box?
• Where are the classes listed for the style sheet?
• Are the px and pt font-size units similar?
• Why do I need to move the insertion points to the div.container region before creating the new navigation region?

CONTENT OBJECTIVES

Students will be able to . . .

• create a new Dreamweaver HTML5 dynamic web template.
  • add CSS and image folders.
  • create an external style sheet and add CSS rules to the style sheet.
  • create an editable region within the template.
  • create a new page from the template.
• define the regions of a webpage.
  • use the regions to determine an effective layout and formatting for their website.
• preview a webpage using a Live view.

Vocabulary - CSS, style, style sheet, CSS rule definitions, selector, class, declaration, resource folders, wireframe, pixels, DIV tag, margin, float property, padding, property, value, external style sheets, link tag, internal style sheets, inline styles, .DWT file, editable region, non-editable region

ESSENTIAL QUESTIONS

• What part of the template does the .image rule format?
• What is the purpose of the Update Template Files dialog box?
• What is the purpose of pressing the SHIFT+ENTER keys simultaneously?
• Why am I creating a relative link?
• Can I create links on a new page that doesn’t contain any text or images yet?
• Are all of the newly created links ready to be tested?
• What information does the e-mail link dialog box already contain?
• What is a visited link?

CONTENT OBJECTIVES

Students will be able to . . .

• modify a Dreamweaver template.
  • insert images/add graphics.
  • effectively utilize the different types of links.
  • use/replace template placeholders.
  • add CSS rules to existing style sheets.
• understand the use of social networking sites as a business platform.

Vocabulary - prototype, all mode, current mode, copyright, vector images, bitmap images, picture, element, grid, bit-resolution, JPEG, progressive JPEG, GIF, PNG, alternate text, alt tag, social networking, site, relative link, absolute link, email link, rollover link, compound selector, anchor tag, image placeholder

ESSENTIAL QUESTIONS

• Can I use the Property inspector to format text within a table?
• What is the visual feedback displayed above the table?
• What do the values that appear next to the column width represent?
• How does the Access key work?
• What is the purpose of the tab index?
• What is an item label?
• Does it matter where the Submit button is placed on the webpage?

CONTENT OBJECTIVES

Students will be able to . . .

• create a webpage using tables/forms.
  • insert, format, and modify tables/forms.
  • use the Input Tag Accessibility Attributes dialog box to add text fields.
• add a menu and radio groups.
  • describe and add buttons.
• view and test a form.

Vocabulary - rows, cells, columns, table data, table row, merging, forms, behaviors, labels, text field, init val, radio group

ESSENTIAL QUESTIONS

• What is the correlation between the property inspector and the Spry validation text fields?
• What is the Preview states required error message?
• Why does the Copy Dependant Files dialog box display?
• On the contact.html page tab, why do SpryValidationTextField.js and SpryValidationTextFIeld.css refer to?
• What is the SpryAssets folder?
• How does the Email Address type validate the email text field?
• How does the Phone Number type validate the phone number text field?
• What is a Hint property?
• How does the Date type validate the Date text field?
• Why is it necessary to delete the initial value?
• What does it mean to set the default state to Close for the Spry collapsible panel?
• Why is it important to name each tab?
• What is the purpose of changing the file paths on the icon panel?
• Why is it necessary to select one file in the Src text box and a different file in the link text box?

CONTENT OBJECTIVES

Students will be able to . . .

• master the elements of Spry.
  • identify and describe Spry framework and widgets.
  • apply Spry validation fields.
  • edit/test a web page form with Spry Validation.
  • utilize the Spry Collapsible panel of a webpage.
• create and maintain an Adobe account.
• utilize, review and save Widgets from the Widget browser to the My Widget.
• combine knowledge of Spry and Widgets to add and review a Lightbox Gallery widget to a collapsible panel within a webpage.

Vocabulary - initial state, required state, valid state, invalid state, Adobe Widget Browser, AIR, Adobe exchange, preset, thumbnail image

ESSENTIAL QUESTIONS

• What should occur when the portfolio page opens in a browser?
• How do I include different browsers on the ‘previewed/debug in’ browser button?
• What is the purpose for specifying width and height values for the video?

CONTENT OBJECTIVES

Students will be able to . . .

• add multimedia using plug-ins and HTML 5.
  • explain audio codecs.
  • set parameters and embed a sound file in a webpage.
  • differentiate between various different video formats.
  • set parameters and embed a video file in a webpage.

Vocabulary - plug- in, codec, embedding

ESSENTIAL QUESTIONS

• What is the fader.class file?
• When is the alternate text displayed?
• Why is it necessary to include a forward slash in front of applets, in the base textbox?
• What is the purpose of the delay and stop parameters?
• What is the effect duration?
• What does pixel size mean in relation to the border-radius?
• What is the difference between the X-Offset and Y-Offset and how can they be altered?
• What is the blur radius and how can it be altered?

CONTENT OBJECTIVES

Students will be able to . . .

• describe and effectively utilize media objects.
  • use and insert Java applets into a Web page.
  • create and insert a Flash movie/video.
  • use and insert a Shockwave movie.
  • utilize plugins and Active X controls to enhance the interactivity of their webpage.
  • use behaviors to modify their media object appearances.
  • add CSS3 properties and add transitions using the CSS Transitions Panel.

Vocabulary - Active X control, helper application, behaviors, event, action, java script, transition, Adobe Flash, flash animation files, flash player, .fla, .swf, .swt, .swc, .flv, shockwave, .dcr, .dir, .dxr, .cst, .cxt, applet, java, code, codebase, name, alt, width/height, param name and value, CSS3 transition

ESSENTIAL QUESTIONS

• What is the purpose of the description meta tag?
• Should the Web site be tested in every type of browser (chrome, Internet Explorer, FireFox)?
• How can other pages within the site be tested?
• When testing Web pages, why does blurring occur?
• What does it mean when the report states that services2.html is broken in multiple files?

CONTENT OBJECTIVES

Students will be able to . . .

• publish a functional website.
  • understand the concept of copyright.
  • use and add meta tags to the websites.
  • test and proofread a website using Adobe BrowerLab.
  • test site links within the website using Link Checker.
  • publish a website to a remote server using FTP.
• manage website content.

Vocabulary - head, meta tags, Adobe BrowerLab, 2-up view, onion skin, orphaned file, DNS, web server, FTP, copyright, local/network, RDS, server name, FTP address, user name, password, web URL, uploading, downloading