Web Technologies and Programming Lecture 14

1Web Technologies and ProgrammingLecture 142Page Layout 3Summary of the previous lectureFont propertiesfont-familyfont-sizefont-weightfont-stylefont-variantControlling text with CSSword-spacing letter-spacingline-heighttext-alignvertical-aligntext-indenttext-decorationtext-transformation4Summary of the previous lectureStyling linksStyling backgroundbackground-colorbackground-imagebackground-repeatbackground-position Styling tablestext and fontvertical – alignwidth height background - color background - image5OutlineThe process to design a page layoutdiv tagCoding a page using divs and CSSStyling divs and positioning it.6Consider 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 messages71. 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 code81.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 messages91.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 changes101.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 messages111.2 Grouping and categorization 12Group 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 map13Site map shows how many pages you need and how they relateUsually look like either a family tree or folder list1.3 Make a site map14Home pageUser pageInboxOutboxSend a message1.4 Key element for each page15Common 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 page16Inbox page: received messagesOutbox page: messages sent by the userSend message page: form to send a message 1.5 Arranging elements on pages 17Web PageheaderLogoLogin formSign-In formFooter1.5 Arranging elements on pages 18User InfoUser PictureUser dataActionsRecent MessagesMessage2. Translating design into code19Liquid vs Fixed designThe Div tagCoding the design2.1 Liquid vs Fixed design20Liquid 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 Tag21Use DIVs to create the skeleton of the page.There should be no display-specific information in the XHTMLThe Goal: separate the information from the layout / presentation of the pageLayout is entirely controlled by CSS2.2 The Tag22The tag defines a division or a section in an HTML document.The tag is used to group block-elements to format them with CSS.Tip: The element is very often used together with CSS, to layout a web page.Note: By default, browsers always place a line break before and after the element. However, this can be changed with CSS.2.2 The Tag23Identify major sections of the pageMasthead (Logo and Title)MenuContentSearchFooter Don’t overuse the DIVs!Don’t worry about positioning in the XHTML!2.2 The tag24Defines a division or section in an HTML documentVisually, allows us to make containers that can be formattedDoes not format by itselfUsed to logically group a sequence of block level tagsDon’t try to use it to use it to group tags that are not block level, like Can be declared as2.2 The tag25Any block level tag can have its width and height setBe careful especially with height because if text exceeds the size of the area allocated unpredictable things might occurExample: Keep the to 75% of the width of the browser windowbody {width:75%}2.2 The tag26Use the float attribute:float:right|leftText is aligned around the block level tagclear:right|left|bothPrevents a floating element from appearing along-side a block level element2.2 The tag (Example)27Starts a divDiv styleDiv contentsDiv endsSecond div2.2 The tag (Example)28First divSecond div2.3 Coding the design29 //header div ends //container div ends2.3 Coding the design30Header and logo divsHeading text Form element //form container ends //end of center content //container div ends2.3 Coding the design31Header and logo divsLogin form div’sHeading text Form element //form container ends //end of center content //container div ends2.3 Coding the design32Header and logo divsLogin form div’sRegistration form div’s //end of center content //container div ends2.3 Coding the design33Divs required to make the structure:Main containerHeader LogoCenter containerForm containerForm headingForm row2.3 Coding the design34Main container2.3 Coding the design35Header div2.3 Coding the design36Logo divCenter content2.3 Coding the design37Center contentForm container2.3 Coding the design38Form headingForm row2.3 Coding the design39Styling labelStyling input field2.3 Coding the design40Div adding spaceFooter div2.3 Coding the design41Container divHeader divLogo divHeader endsContainer ends2.3 Coding the design422.3 Coding the design43Center content startsForm container startForm headingForm startsRow startsLabelInput fieldRow endsForm container endCenter content ends2.3 Coding the design442.3 Coding the design45Space is addedForm containerheadingForm rowSecond row2.3 Coding the design462.3 Coding the design47Footer div2.3 Coding the design48SummaryThe process to design a page layoutDetermining requirementsGrouping and categorization Key element for each pageTranslating design into codeLiquid vs Fixed designThe Div tagCoding the designCoding a page using divs and CSSPositioning and resizing divs.49THANK YOU50