Web Site Design

After completing this three-day course, students will have a good understanding of the concepts behind good web site design. Many topics are covered from basic structure to getting your site found.

Target audience

Students should be familiar with PCs and the use of a keyboard and mouse. Students should be proficient users of the Windows 95 (or later) operating system and Internet Explorer 5.x and have completed the HTML 4 Basics course or have equivalent practical experience.

Course content

Introducing HTML, and the Future of Markup Introducing HTML • Introducing HTML as a Markup language • HTML and the World Wide Web Consortium • Separating style from structure

Introducing XML Introducing XML as on open standard for structuring data • Introducing XHTML as the future of HTML

Understanding how browsers affect your work Understanding different types of coding • Solving browser related problems • Discussing the use of HTML text editor • Coding for Multiple screen resolutions • Understanding bandwidth concerns

Designing for the medium Crafting the look and feel of the site • Making your design portable • Designing for low bandwidth • Planning for clear presentation and easy access to information

Designing the whole site Creating smooth transitions • Using a grid to provide visual structure • Using active white space effectively

Designing for the user Designing for interaction • Designing for location • Guiding the user’s eyes • Keeping a flat hierarchy • Using the power of hypertext • Deciding the size of the content

Designing for the screen Distinguishing between a screen and a page

Getting started with site planning Creating a site specification • Identifying the content goal • Analyzing the audience • Building a Web site development team

File names and URLs Naming files • Using URLs

Understanding directory structure Differentiating relative and absolute paths • Building a relative file structure

Preparing a diagram for the site Creating the information structure

Creating usable navigation Locating the user • Limiting information overload

Using text-based navigation Linking with text based navigation • Linking to individual files • Linking to document fragments • Linking to external document fragments • Adding contextual linking

Using graphics based navigation Using text images for navigation • Using icons for navigation • Using the ALT attribute • Creating page templates

Understanding table basics Using table elements • Defining table attributes • Spanning columns and rows • Choosing relative or fixed table • Determining the correct width of the table • Removing default table spacing

Table pointers Writing easy-to-read table code • Removing extra spaces • Centering tables • Stacking tables • Nesting tables

Creating a page template Building the basic table structure • Setting a fixed width • Creating the page banner cell • Creating the feature cell • Setting the column widths • Vertically aligning cells • Testing the template

Understanding types of templates Observing two-column templates • Observing two-column with banner templates • Observing three-column templates • Observing three-column with banner templates • Observing three-column main templates • Observing three-column sectioned templates • Observing three-column main sectioned templates • Web typography

Understanding type design principles Using fonts effectively • Designing for legibility • Avoiding the use of text as graphics

Controlling typography with the < FONT> element Setting font size • Specifying font alternates • Setting font alternates • Setting font color • Using the < FONT> element

Introducing CSS Understanding the CSS basics • Linking to an external style sheet

Understanding CSS selection techniques Selecting multiple elements • Selecting by context • Selecting with the CLASS attribute • Working with the < DIV> element • Working with the < SPAN> element

Understanding CSS font properties Selecting a specific font family and alternates • Specifying font size • Specifying font weight • Specifying the line height • Specifying letter spacing • Specifying text indents • Specifying color • Specifying text background color

Specifying block-level space values Specifying text padding • Specifying text margins • Specifying text borders • Coding easy-to-read rules

Styling with CSS Setting up document divisions • Styling the standard paragraph • Styling the chapter number • Styling the chapter title • Styling the credit and book title

Understanding graphic format basics Discussing the image file formats • Using interlacing and progressive display • Analyzing places where you can find images • Choosing the right format

Understanding computer color basics Choosing the right color depth • Discussing dithering • Using non-dithering colors • Choosing a graphics tool

Using the < IMG> element Replacing < IMG>attributes with style sheets • Specifying image width and height

Managing graphics Sizing graphics for the page • Removing the hypertext border from an image • Aligning text and images • Adding white spaces around images

Using advanced graphics tools Using transparent spacer gifs • Using single pixel rules • Using background images

Working with hexadecimal colors Defining universal color names • Setting background page color • Using background color in tables • Changing link colors

Understanding frames Understanding frame benefits • Understanding frame drawbacks

Examining frame syntax Using the < FRAMESET> element • Using the < FRAME> element • Using the < NOFRAMES> tag

Using other frame related features Nesting frames • Controlling scroll bars • Controlling frame borders • Controlling frame margins

Targeting frame sets Naming frames • Targeting named frames • Using special target names

Planning frame content Understanding frames and screen resolutions • Designing effective frames • Mixing fixed and variable frames

Publishing your Web site Choosing an ISP • Buying a domain name • Using the ISP comparison checklist • Using FTP to upload files

Testing your Web site Testing considerations • User testing • Varying your subjects • Formalizing your testing • Developing a feedback form • Refining and updating your content

Attracting notice to your Web site Working with search engines • Using meaningful titles • Using < META > elements • Guidelines for working with frames • Using ALT text with images • Submitting URLs to the search engines

About Courseware Company :: Instructor-led training courseware :: Self-study solutions :: Buy online today