Web Design – SS2 Data Processing Lesson Note (Third Term)

Website design means the planning, creation and updating of websites. It also involves information architecture, website structure, user interface, navigation ergonomics, website layout, colours, contrasts, fonts, photography and icon design. All these elements combine to form a website.

Behavioural objectives

By the end of the lesson, students should be able to:

• explain what website design means;
• describe a web page;
• state the uses of a web design package;
• list and describe the components of a web design package;
• name examples of web design packages.

What is a web page?

A web page is a text file containing Hypertext Markup Language (HTML) formatting tags and links to graphic files and other web pages through a web server. Web pages can be interactive and can use multimedia. The main thing to remember when creating a web page is to establish a goal by setting many links.

What are the uses of a web design package?

A web design package is used to create web pages. Other uses include:

1. Accessibility Checker: This gives users the ability to check if their code is standard compliant and their website is easily accessible for people with disabilities.
2. Split View Option: This allows users to code in code view and preview in design view without the hassle of switching between the design and code view tabs.
3. Interactive Buttons: These give users an easy way to create web graphics for navigation and remove the need for a complicated image-editing package such as Adobe Photoshop.
4. Dynamic Web Template (DWT): This allows users to create a single template that can be used across multiple pages and even the whole website.
5. Code Snippets: These let users save their commonly used pieces of code and store them for easy access when next they are needed.

What are the components of a web design package?

1. A Solid Layout: In web design, the foundation is your layout. Laying out a web design involves placing all the content and navigational elements.
2. Effective Typography: This is the flow of the words. It is important for a web design’s typography to be easy to read and follow while establishing structure and hierarchy within the content.
3. The Right Colour Scheme: Choosing the right colour scheme is extremely important because it will set the mood of your design more than any other component.
4. Appropriate Design Elements: Your creativity can go wild here with texture, icons, patterns, etc. However, keep in mind that design elements also play a big role in setting the mood of the design. So keep things consistent with the goals of the website and its audience.
5. Hit Counter: This gives details about the number of visitors to a website through a graphic counter.
6. Advertising Banner: The advertising banner produces an ad-banner rotator with images of your choice. Ad-banners are usually used to generate revenue, but they can also be used to rotate many images to create slideshow effects.
7. Table of Contents: This creates a page with hyperlinks to each page on your site. The table of contents can be used as a site map.
8. Marquees: A marquee is text that scrolls across the screen. It is used when you want to draw attention to a certain point.
9. Scheduled Pictures: This component can be used when you have a limited offer or you want to add variety to your page.
10. Search Form: This gives visitors an easy way to search your site.

What are examples of web design packages?

1. iWeb: iWeb allows users to create websites and blogs and customise them with their text, photos and movies. It integrates with other services, including Facebook, YouTube, Google Adsense and Google Maps. It allows users to create a website in just a few minutes without knowledge of programming or HTML. iWeb provides Apple-designed templates that you can easily customise, so you do not have to worry about design.
2. Microsoft FrontPage: This is a web tool that allows users to create custom websites without having to know HTML code. It helps you to manage the pages on your website as well as create and edit web pages in a What-You-See-Is-What-You-Get (WYSIWYG) fashion.
3. Adobe Dreamweaver: This is a web design package that is suitable for everything from simple page design to the development of dynamic pages written with ColdFusion, PHP, ASP, CSS, XML, XSLT and JavaScript. Dreamweaver is the most powerful, most fully featured web developer tool. It combines a great WYSIWYG editor, an FTP client and a convenient scripting environment.
4. Microsoft Expression Web & Studio: This is a web design tool you can use to design and develop web pages using XML, CSS, ASP.NET, ASP.NET AJAX, XHTML, XSLT, PHP and JavaScript. Expression Web requires .NET Framework and Silverlight to install and run. It uses its own standards-based rendering engine, which is different from Internet Explorer’s Trident engine.
5. Webplus X4: This is a quick and easy way for anyone who wants to create and publish eye-catching desktop and mobile sites without having to use any code.
6. NetObjects Fusion: This is a commercial program with a graphical user interface that generates HTML or XHTML through its proprietary database.
7. Amaya: This is a free and open-source WYSIWYG authoring tool with browsing abilities. It has XML-based capabilities such as XHTML, MathML and Scalable Vector Graphics (SVG). It displays free and open image formats such as PNG and SVG, as well as a subset of SVG animation.

Evaluation

1. What does website design mean?
2. What is a web page?
3. State three uses of a web design package.
4. What is the function of a hit counter?
5. Name four examples of web design packages.

Assignment

1. Explain the difference between a marquee and an advertising banner.
2. Choose any two web design packages from the lesson and describe one feature of each.