Page Layout

Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1Summary of the previous lectureFont propertiesControlling text with CSSStyling linksStyling backgroundStyling tablesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan2OutlineThe process to design a page layoutdiv tagCoding a page using divs and CSSBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan3Consider a web application to developCONNECTIONS: a smaller version of social webUsers can register themselves After registration they can send a text message to anybody who is registered with the websiteUser’s can view the received messagesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan41. The processDetermine the requirements of the siteGroup the required informationMake a site mapIdentify key elements for each pageDecide about the arrangement of information on each pageTranslate the design into codeBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan51.1 Determining requirementsUnder standing the audienceWho? Who will visit the site?You can create fictional visitors Men and women of 20 to 50 years of ageWhy? Why have they come to your site? Send messages View received messagesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan61.1 Determining requirementsWhat? 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 changesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan71.1 Determining requirementsThings You Want the Site to DoDetermining the requirement of the owner of the site which are not already listedUser must register themselves in-order to send and receive messagesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan81.2 Grouping and categorization Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan9Group related information/sectionsHome page: login form, registration formUser page: user’s information, recent messagesInbox: Received messagesOutbox: Sent messagesSend a message: Send message form1.3 Make a site mapBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan10Site map shows how many pages you need and how they relateUsually look like either a family tree or folder list1.3 Make a site mapBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan11Home pageUser pageInboxOutboxSend a message1.4 Key element for each pageBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan12Common sections (header, navigation, footer etc.)Page specific sectionsCommon Sections (header, footer)Page specific sectionsHome page: login form, registration formUser page: user’s information, recent messages1.4 Key element for each pageBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan13Inbox page: received messagesOutbox page: messages sent by the userSend message page: form to send a message 1.5 Arranging elements on pages Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan14Web PageheaderLogoLogin formSign-In formFooter1.5 Arranging elements on pages Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan15User InfoUser PictureUser dataActionsRecent MessagesMessage2. Translating design into codeBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan16Liquid vs Fixed designThe Div tagCoding the design2.1 Liquid vs Fixed designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan17Liquid Designdesigns automatically fits to the screenUse percentage values to declare height and width of sectionsFixed designDesigns remain fixed widthUse fixed values to declare height and width of sections2.2 The tagBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan18Defines a division or section in an HTML documentVisually, allows us to make containers that can be formattedCan be declared as2.2 The tagBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan19Starts a divDiv styleDiv contentsDiv endsSecond div2.2 The tagBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan20First divSecond div2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan21 //header div ends //container div ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan22Header and logo divsHeading text Form element //form container ends //end of center content //container div ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan23Header and logo divsLogin form div’sHeading text Form element //form container ends //end of center content //container div ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan24Header and logo divsLogin form div’sRegistration form div’s //end of center content //container div ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan25Divs required to make the structure:Main containerHeader LogoCenter containerForm containerForm headingForm row2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan26Main container2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan27Header div2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan28Logo div2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan29Center content2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan30Form headingForm row2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan31Styling labelStyling input field2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan32Div adding spaceFooter div2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan33Container divHeader divLogo divHeader endsContainer ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan342.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan35Center content startsForm container startForm headingForm startsRow startsLabelInput fieldRow endsForm container endCenter content ends2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan362.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan37Space is addedForm containerheadingForm rowSecond row2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan382.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan39Footer div2.3 Coding the designBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan40SummaryThe process to design a page layoutdiv tagCoding a page using divs and CSSBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan41Chapter 9, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 42Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References