After studying this chapter you will be able to understand: Font properties, controlling text with CSS, styling links, styling background, styling tables, the process to design a page layout, div tag, coding a page using divs and CSS. | 1 CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr. Tehseen Riaz Abbasi 1 2 3 3 Font properties font-family font-size font-weight font-style font-variant Controlling text with CSS word-spacing letter-spacing line-height text-align vertical-align text-indent text-decoration text-transformation 4 Styling links Styling background background-color background-image background-repeat background-position Styling tables text and font vertical – align width height background - color background - image 5 The process to design a page layout div tag Coding a page using divs and CSS Styling divs and positioning it. 6 CONNECTIONS: a smaller version of social web Users can register themselves After registration they can send a text message to anybody who is registered with the website User’s can view the received messages 7 Determine the requirements of the site Group the required information Make a site map Identify key elements for each page Decide about the arrangement of information on each page Translate the design into code 8 Under standing the audience Who? Who will visit the site? You can create fictional visitors Men and women of 20 to 50 years of age Why? Why have they come to your site? Send messages View received messages 9 What? What does a visitor need to achieve a goal? Will they be familiar with your product? How often? How often can you realistically expect them to visit? In-order to make changes 10 Things You Want the Site to Do Determining the requirement of the owner of the site which are not already listed User must register themselves in-order to send and receive messages 11 12 Group related information/sections Home page: login form, registration form User page: user’s information, recent messages Inbox: Received messages Outbox: Sent messages Send a message: Send message form 13 Site map shows how many pages you need and how they relate Usually look like either a family tree or folder list 14 Home page User page Inbox Outbox Send a message 15 Common . | 1 CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr. Tehseen Riaz Abbasi 1 2 3 3 Font properties font-family font-size font-weight font-style font-variant Controlling text with CSS word-spacing letter-spacing line-height text-align vertical-align text-indent text-decoration text-transformation 4 Styling links Styling background background-color background-image background-repeat background-position Styling tables text and font vertical – align width height background - color background - image 5 The process to design a page layout div tag Coding a page using divs and CSS Styling divs and positioning it. 6 CONNECTIONS: a smaller version of social web Users can register themselves After registration they can send a text message to anybody who is registered with the website User’s can view the received messages 7 Determine the requirements of the site Group the required information Make a site map Identify key elements for each page Decide about the arrangement of information on each .
