tailieunhanh - Lecture Introduction to web engineering - Lec 19: Page layout

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. | Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1 Font properties Controlling text with CSS Styling links Styling background Styling tables Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 2 The process to design a page layout div tag Coding a page using divs and CSS Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 3 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 4 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 5 Under standing the . | Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1 Font properties Controlling text with CSS Styling links Styling background Styling tables Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 2 The process to design a page layout div tag Coding a page using divs and CSS Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 3 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 4 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 5 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 6 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 7 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 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 8 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 9 Group related information/sections Home page: login form, registration form User page: user’s information, recent messages Inbox: Received .