The eLearning Center for Delaware Technical Community College, Owens Campus

Web Design I
Master professional skills for designing today's Web sites.

Web design today is an increasingly challenging creative environment. To compete in this field, you'll need not only a mastery of graphic design, navigation design, and page layout, but also a basic proficiency in Web foundations like HTML, XHTML, CSS, and JavaScript. Sounds like a tall order? This distance learning course equips you for the challenge through industry-foundation online, instructor-led web design projects. Course assignments focus on project planning, layout, usability, learning different design styles, adding popup windows, forms, and CSS. Develop your Web design skills by training with one of the leading experts on Web design and technology. You'll complete the online course with a clutch of projects and a fully functional site to add to your portfolio.

Objectives:

Students can expect to learn how to:

  · Plan a Web site design using detailed research and client information, and manage the basics of a designer/client relationship.
  · Develop a site map that details the architecture and naming of and the relationships between all planned site pages.
  · Create table-based Web page layouts that conform to set sizes (absolute) or resize as necessary (relative), and use single-pixel GIFs for added layout control.
  · Develop user-friendly pages with bandwidth-saving techniques and effective navigation systems.
  · Design blogs and other personal Web sites using creative and cutting-edge design techniques.
  · Develop corporate Web sites that conform to business needs and employ the characteristics of effective business design.
  · Use JavaScript code to launch pop-up windows and validate user input forms.
  · Add cascading style sheets (CSS) to Web sites using external .css pages, embedded styles, and other methods, and apply a variety of CSS styles to areas of text.
  · Create standards-based Web pages using XHTML code and test for standards compliance.
  · Design page layouts using CSS code and defining page sections with DIV and SPAN tags.
  · Add dynamic HTML effects to Web pages including text tickers, image rollovers, and slideshows.
  · Create a large-scale Web site as a final portfolio piece, showcasing skills in Web layout, navigation design, and (X)HTML and CSS code.

LESSON 1 Planning Your Web Project
Great Web sites are always the result of effective preparation, planning, and user analysis. Lesson One maps out the initial training steps that no Web project should start without. Whether you're working solo or as part of a small team, you'll learn how to define a site's core purpose, research the competition, refine project objectives, build an audience profile, inventory content, and create a basic site map. In the training exercise, you'll apply these concepts as you start to plan your final project.

LESSON 2 Building HTML Layouts
Lesson Two addresses the aesthetics and methodology of HTML table layout, also known to cognoscenti as hacking tables. You'll study the merits of fluid versus fixed layouts, and how to manipulate cell borders, spacing, and padding or add single pixel GIFs to get the layout you want. Until CSS gains universal acceptance, these will continue to be core skills for a Web designer.

LESSON 3 Usability and Interface Design
Lesson Three explores the art and science of usability. You'll begin with a big picture view of bandwidth today, learning usability guidelines for image optimization, CSS, and multimedia elements. You'll examine the do's and dont's of navigation design, and review case studies on leading sites. Finally, you'll look at the impact of color on Web design, learning what you need to know about color theory (hue, value, contrast, saturation) to make good design decisions. In the training exercise, you'll create the initial page design of your final project site.

LESSON 4 Personal Publishing
Few would dispute that the Web has changed the nature of publishing. Everyone's at it! Lesson Four looks at the influence of personal publishing (home pages, portfolios, zines, and blogs) on Web design styles today. Since many of your Web design projects may be personal publishing projects, you'll look at a range of approaches to this creative space, including how to set up and design blogs. In the training exercise, you'll design a personal publishing site for a friend.

LESSON 5 Business Publishing
Chances are, you've heard the word e-commerce. You can't get into a conversation with someone about the World Wide Web without talking about how to make money on it. Lesson Five looks at best practices in business site design: how use screen real estate, accommodate advertising and sponsorships, and make the right design style choices for businesses large and small. Since most ecommerce projects demand user interaction and metrics, you'll also look at how to handle forms and help your client benchmark the success of your Web project. In the exercise, you'll design a media promotion site to launch a new TV series.

LESSON 6 Underground Styles
This lesson is dedicated to creating Web sites that look unique, or at least distinctive. Through a series of case studies, you'll explore the features of sites created in avant-garde or experimental design styles. Movements featured include HTMinimaList style, drafting table/transformer style, paper bag style, and supertiny SimCity style. Feeling stylish? In the training exercise, you'll implement a page design in one of these four styles and try your hand at some JavaScript.

LESSON 7 Designing Content and Presentation for CSS
Cascading Style Sheets is the future of Web design, giving designers superior control of layout and ease of updating throughout a site. Lesson Seven builds the fundamentals you need to know about CSS for professional Web design, whether you're a hand-coder or a WSYIWYG wizard. You'll look at the pros and cons of CSS compared to straight HTML, and explore proper markup techniques for converting HTML sites to CSS, using external style sheets or the style method. A section on W3C foundations provides an overview of current trends, including the emergence of XML and how to test your site for foundations compliance. In the exercise, you'll check a page for foundations compliance and add CSS.

LESSON 8 Crafting Web Page Designs with CSS
Now you've got a solid grasp of presentation using CSS, it's time to study how to build CSS page designs from scratch. Lesson Eight shows you how to use ID attributes and div and span tags to create two or three-column layouts, without using HTML tables or SPGs. You'll apply this knowledge in creating a three-column page layout in the training exercise.

LESSON 9 Interactive Applications
DOM (the language one uses to interface HTML, CSS, and JavaScript to create interactive components) should be part of every Web designer's toolkit. Lesson Nine gives you some simple ways to add pop and sizzle to your sites. You'll learn how JavaScript events and functions work to create interactive effects and how to add DHTML rollover effects to your site buttons and create a slideshow for a photo album or portfolio. Afterwards, a final large-scale project will enable you to apply everything you've learned in this course.