ICS 202 Web Site Design 2 Credits The use of web design software in creating Web Pages. Available options for hosting Web pages. Design of web pages. Program interactive websites. Use of multimedia. Group design of web pages for the department/faculty as part of the course. ICS 202 - Web Site Design (2 Credits Compulsory) Course Duration: One hour Theory and 3 hours practical per week for 15weeks. As taught in 2010/2011 Session Courseware Developed by: Olayiwola W. Bello B.Sc. M.Inf Sc. (Ibadan), MBA (Ife) Department of Information and Communication Science, Faculty of Communication and Information Sciences, University of Ilorin, Ilorin. Nigeria. Email: laibello@yahoo.com laibelo@unilorin.edu.ng Office Location: Room 10F19 Block 10, Unilorin permanent site. Consultation Hours: 12:00noon 2:00pm on Mondays and Tuesdays Lecturer: Olayiwola W. Bello B.Sc. M.Inf Sc. (Ibadan), MBA (Ife) Department of Information and Communication Science, Faculty of Communication and Information Sciences, University of Ilorin, Ilorin. Nigeria. Email: laibello@yahoo.com laibelo@unilorin.edu.ng Office Location: Room 10F19 Block 10, Unilorin permanent site. Consultation Hours: 12:00noon 2:00pm on Mondays and Tuesdays COURSE DETAILS Course Content The use of web design software in creating Web Pages. Available options for hosting Web pages. Design of web pages. Program interactive websites. Use of multimedia. Group design of web pages for the department/faculty as part of the course.
Course Description The course is designed to introduce students to the fundamentals of web design. It includes the basics that are required in developing skills required of potential web developers. Internet concepts; creating web pages with HTML and web design software; web design practices; accessibility; web development process; media and interactivity on web pages are included in what the students will be introduced to. Course Justification The internet is continuing to expand in commercial, academic and social circles as a means of communicating, advertising, publishing and distributing information. Companies now also require in house personnel to continually update and improve their websites and individuals are not also left out. With the increase in popularity of the Internet, the design and development of websites has become a common course of study for many students. The course will give students a deeper understanding of the web, provide a basic background on the fundamentals of web design while they learn to build their own websites using HTML which will give students far better control over the development of corporate and/or their own websites. They will also be introduced to WYSIWYG web design software which is a rapid application tool to design web sites. Course Objectives At the completion of the course students will be able to have a better understanding of how documents in various forms are presented on the Internet and World Wide Web. Students will also be equipped with the entry knowledge into the field of Web design. Course Requirements Students must have a minimum of 75% attendance. As well, all students will be involved in the learning process by participating in assignments individually and in groups. Each student is required to have a yahoo mail address to facilitate students web interaction and web group discussion. Methods of Grading Continuous assessment will carry 30 marks. This will include assignments (25 marks) class test (5 marks). Examination will carry 70 marks, making a total of 100. Course Delivery Strategies The strategies for delivering this course will include lectures, practical laboratory sessions and group work. Lecture Content Week 1: Overview of the Internet and World Wide Web Objectives: The objectives are: to understand the evolution of the world wide web as well as Internet standards organizations and ethical use of information on the web. Students will
also be taken through concepts like Internet protocols, URL s, domain names and markup languages. Description An overview of the course and brief history of the World Wide Web and its administration. Options available in design of web pages (software, markup and programming languages). The concept of domain names. s (Blog/Wiki creation) Blog creation from free blog services e.g http://blogspot.com. You will use this blog for activities relating to your learning of web design. You could note web sites that contain useful resources and those with interesting features. After knowing how to develop your own site you could include the URLs and reason for your design decisions. Blog addresses will be submitted for evaluation. 1. Describe the difference between the Internet and the Web 2. Explain three events that led to the commercialization and exponential growth of the Internet. 3. What is a Uniform Resource Locator? 4. Describe what happens anytime a URL is typed into a web browser 5. What are markup languages? 6. Identify two protocols used on the Internet to covey information that use the Interne but does not use the Web 7. Describe three attributes of the font tag and their use 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A.
Week 2: Basics of HTML Objectives: This topic will equip students with the foundation HTML and its relationship with other markup languages. It will also deal with the following concepts: Body and Text Basics, Block-Level Tags (Lists, preformatted and Indenting Text), Text formatting and HTML Validation. Description What is HTML? Introduction to web page editors and basic anatomy of a web page. Tag, Element, Attributes, values and purposes of tags associated with title, body and texts. s (HTML BASICS) Html, title, head, body, Body tag, text attributes, Heading tag, paragraph tag, line break tag, Definition lists, ordered lists, unordered lists, preformatted text, indenting text, text formatting, special HTML characters 1. Describe the origin, purpose and features of HTML 2. Describe the purpose of the header and body sections of a Web Page. 3. Describe the features of a heading tag and how if configures the text. 4. Describe the difference between the ordered list and unordered lists. 5. Describe three attributes of the font tag and their use. 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 3: Links and Tables Objectives: At the end of the lectures students should be able to understand how to create several types of hyperlinks in web environment. They should also be able to know how to use and format tables on web pages.
Description Types of links (Relative and Absolute links) and ways of using tables on web pages. Attributes, values and purposes of tags associated with links and tables s Anchor tag, absolute and relative links, opening link in new window, internal links (establish target and reference target), e-mail links. Table tag and its attributes, table headings, table captions, formatting a web page with a table, flexible and fixed able widths, and nested tables. 1. Describe when to use an absolute link. Is the http protocol used in the href value? 2. Describe when to use a relative link. Is the http protocol used in the href value? 3. What happens when a web site visitor clicks on an e-mail link? 4. Describe the reasons for the use of tables on a web page. 5. What is the difference between cell padding and cell spacing? 6. Write the XHTML to create an absolute link to a Web site whose domain name is google.com. 7. Write the XHTML to create a relative link to a Web page named contact.com 8. Write the XHTML to create an internal link to the named anchor designated by top 9. Write the XHTML to create an en e-mail link to the named anchor designated by top 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 4: Colour and Visual Elements Objectives: At the end of the lecture, students should be able to understand the use of colours, lines and graphics on web pages. It will also include the understanding of how to incorporate images on web pages
Description Using colour and lines on web pages, types of graphics (GIF, JPEG and PNG) and Images in web design. Attributes, values and purposes of tags associated with colours and visual elements like graphics images and lines. Image maps Colour and the body tag (bg color, text, link, vlink and alink), horizontal rules (width, color, aign, size, nonshade). The Image tag and its attributes, image links, using a table to format images, thumbnail images and image maps. 1. Is it possible to try to code a web page that looks the same on every browser and every platform? Explain your answer. 2. Will using the Web Safe Colour Palette guarantee that your web page colours look identical on every platform and operating system? 3. When configuring an image map, describe the relationship between the image, map and area tags. 4. True or false? Save your images using the smallest file size possible. 5. Write the XHTML to create an image hyperlink. 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 5: Frames and Forms Objective: At the end of the lecture, students should be able to understand the use of frames and forms in web design and describe the elements used in them. Their advantages and disadvantages will be critically examined and they should also understand how to create frames and forms for different functions. Description
The concept of frames advantages/disadvantages and accessibility in web design. Attributes, values and purposes of tags associated with frames. Overview of forms using forms in XHTML. Attributes, values and purposes of tags associated with forms. Using the frameset tag and its attributes, inline frames. The form tag and its attributes, form elements (text box, password box, check box, radio button, scrolling text box, select list submit button, reset button and hidden form elements 1. List and explain the advantages of using frames in web page design. 2. Explain the drawbacks of using frames in web page design. Which is the most important draw back and why? 3. What type of form element will you use to configure a situation whereby a single response only can be selected from say 10 possible options? 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 6: Web Multimedia and Interactivity Objectives: At the end of the lectures, students should be able to understand the different types of audio and video file types an how they are incorporated into web design. Description Audio and video file types and how to obtain them. Adding sound and video to a web page. s
Using sound and video on a web page. 1. Write the XHTML to add a video called music1.mov to a web page 2. Write the XHTML to add a background sound called music2.wav to a Website. It should only play once. 3. Write the XHTML to add a background sound called music3.mid to a Web page that will loop repeatedly. 4. Write the XHTML to add a an audio file called music4.wav to a Web page that can be controlled by the visitor. 5. Describe issues involved with adding media such as audio or video to a Web page.. 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Weeks 7: Web Site Design Principles and Techniques Objectives: At the end of the lectures, students should be able to describe the common types of Web site organization, describe design principles/techniques and apply such in web design. They should understand how to create clear and easy Web site navigation, understand how to use graphics in Web design thereby enabling them to design user-friendly Web pages. Description Types of web site organization, navigation best practices and various design principles Major components of web page design, types of layout design techniques and best practices for text and graphics design. A review of all practical classes taken in previous weeks.
1. List and explain the design principles known to you. 2. Explain the types of web site organization known to you. 3. List the major components of Web page design. 4. What factors are necessary to be considered in designing a website? 5. Evaluate the home page of your university website using the Best Practices checklist. Describe the result. 6. List and explain the best practices of writing text for the web 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 8: Web Site Development Objective: At the end of the lectures, students should be able to understand the skills, function and roles needed for a successful web development project. They will also be able to understand and apply the System Development Life Cycle concept and be introduced to web hosting. Description: Job roles for successful web design project. The development process. Web hosting and hosting needs. A review of all practical classes taken in previous weeks. 1. Describe the role of the project manager 2. Explain why many different roles are needed on a large-scale Web project. 3. List and describe in depth the techniques used in testing a web site 4. Describe the difference between dedicated web server and a collocated web server 5. Briefly explain other website development methodologies known o you.
6. Why is price not the most important factor in choosing a hosting service? 1. Terry 1,2,4, F. (2007) Web Development and Design Foundations (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: 0-321-43675-X 2. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A. Week 9: Review of XHTML and Design Concepts/Class Test Objective: This weeks schedule is to aggregate the teaching done so far and test the skills and understanding of the students on what they have learnt to this point. Description: Review and class test test Week 10: Introduction to Macromedia Dreamweaver Objective: At the end of the lectures, students should be able to know what they can do with Dreamweaver, understand its work space, and know how to accomplish basic tasks in Dreamweaver Description: Overview of Dreamweaver and its workspace and getting started with the software. 1. Describe the Dreamweaver workspace layout 2. Describe the Dreamweaver document window 3. Describe the Dreamweaver document toolbar 4. Describe the Dreamweaver status bar 5. Describe the Dreamweaver insert bar 6. Describe the Dreamweaver coding toolbar 7. Describe the Dreamweaver property inspector
8. Describe the Dreamweaver files panel 9. Describe the Dreamweaver CSS Styles panel Dreamweaver Environment Introduction 1. Janine Warner 2,4 (2006). Dreamweaver8 For Dummies. Wiley Publishing, Inc. NJ U.S.A ISBN: 0-7645-9649-7. 2. www.teacherclick.com/dreamweaver8 3. www.tutorials-4-you.com/dreamweaver8 4. www.tutorialized.com/tutorials/dreamweaver 5. dreamweaver8tutorial.com Week 11: Setting Up Dreamweaver Site and Creating Table Based Layout Objective: At the end of the lectures students should be able to set up the working environment for Dreamweaver and understand how to create and save a new page, insert tables, set table properties, insert an image placeholder and add colour to the page Description: Setting up site and creating web page layout Site set-up and layout creation in Macromedia Dreamweaver 8. 1. What are the parts that make up the Dreamweaver site? 2. What do you understand by a local folder in Dreamweaver? 3. What are tables used for in Dreamweaver? 4. Describe the process of creating a table layout in Dreamweaver? 5. List and describe the table properties known to you in Dreamweaver? 6. How will you set table properties in Dreamweaver? Janine Warner 2,4 (2006). Dreamweaver8 For Dummies. Wiley Publishing, Inc. NJ U.S.A ISBN: 0-7645-9649-7. Week 12: Adding Content to Pages
Objective: At the end of the lectures students should be able to add content to web pages in Macromedia Dreamweaver. This will include how to add images, texts, video files, create links and preview pages in a browser Description: Inserting text, images, Flash Video Creating links and previewing macromedia Web page in a browser. Adding content to pages in Macromedia Dreamweaver 8. 1. List the types of contents that could be added to a web page in Dreamweaver? 2. Describe the process of inserting images in Dreamweaver? 3. Describe the process of inserting text in Dreamweaver? 4. How will you create links in Dreamweaver? 5. How will you insert and play a Flash file Dreamweaver? 1. Janine Warner 2,4 (2006). Dreamweaver8 For Dummies. Wiley Publishing, Inc. NJ U.S.A ISBN: 0-7645-9649-7. 2. www.teacherclick.com/dreamweaver8 3. www.tutorials-4-you.com/dreamweaver8 4. www.tutorialized.com/tutorials/dreamweaver 5. dreamweaver8tutorial.com Week 13: CSS in Dreamweaver Objective: At the end of the lectures students should be able to format Web page appearance using Cascading Style Sheets (CSS) in Dreamweaver. Description: Learning about CSS, Creating a new style sheet, Exploring the CSS Styles panel, attaching a style sheet, creating a new CSS rule and applying a class style to text. Cascading Style sheets in Macromedia Dreamweaver 8. 1. What do you understand by CSS in Dreamweaver? 2. Explain the process of creating a new style sheet 3. Using class examples, create a new CSS rule for a web page of your choice. 4. Describe the CSS styles panel. 5. Apply a class style to a body of text of your choice.
1. Janine Warner 2,4 (2006). Dreamweaver8 For Dummies. Wiley Publishing, Inc. NJ U.S.A ISBN: 0-7645-9649-7. 2. www.teacherclick.com/dreamweaver8 3. www.tutorials-4-you.com/dreamweaver8 4. www.tutorialized.com/tutorials/dreamweaver 5. dreamweaver8tutorial.com Week 14: Publishing Site in Dreamweaver Objective: At the end of the lectures students should be able to understand how to publish your web pages in Macromedia Dreamweaver 8. Description: Uploading local sites Hour: Site publishing in Macromedia Dreamweaver 8. 1. What is a remote folder in Dreamweaver? 2. What do you understand by remote sites? 3. What are some of the common issues you may encounter in setting up a remote folder? 4. Explain how you will solve the issues listed in 3 above. 5. Explain how you will upload you local files. 1. Janine Warner 2,4 (2006). Dreamweaver8 For Dummies. Wiley Publishing, Inc. NJ U.S.A ISBN: 0-7645-9649-7. 2. www.teacherclick.com/dreamweaver8 3. www.tutorials-4-you.com/dreamweaver8 4. www.tutorialized.com/tutorials/dreamweaver 5. dreamweaver8tutorial.com Week 15: Revision All topics treated will be revised. Questions will be entertained on all topics taken from the beginning of the course and hopefully clarifications would be made on ambiguous concepts and grey areas Further Readings
www.referencedesigner.com/tutorials/html www.html-5-tutorial.com www.easywebtutorials.com/html-tutorial www.htmltutorialtopics.com www.webmasters-resources.com/html www.freeprogrammingresources.com www.teacherclick.com/dreamweaver8 www.teacherclick.com/dreamweaver8 trytutorials.com/dreamweaver-8-tutorial Legend: 1 University Library 2 Bookshops 3 The Internet 4 Personal Collections 5 Departmental Library