Scribd
Upload
8 views

CSS Notes Part 2

The document discusses developing a social media website called CONNECTIONS. It covers determining requirements, grouping content, making a site map, key elements for each page, and translating the design into code. The process includes understanding the audience, their goals, common and page-specific elements, and liquid vs fixed design.

Uploaded by

Rana Mudassir Ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

CSS Notes Part 2

The document discusses developing a social media website called CONNECTIONS. It covers determining requirements, grouping content, making a site map, key elements for each page, and translating the design into code. The process includes understanding the audience, their goals, common and page-specific elements, and liquid vs fixed design.

Uploaded by

Rana Mudassir Ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Introduction to CSS

Class: BSCS 5A/5C


Instructor: Syda Fatima

Consider a web application to develop


 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

The process
 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

Determining requirements
 Understanding the audience
 Who? Who will visit the site?
o You can create fictional visitors
o Men and women of 20 to 50 years of age
 Why? Why have they come to your site?
o Send messages
o View received messages
 What? What does a visitor need to achieve a goal?
o Will they be familiar with your product?
 How often? How often can you realistically expect them to visit?
o In-order to make changes
 Things You Want the Site to Do
 Determining the requirement of the owner of the site which are not
already listed
o User must register themselves in-order to send and receive
messages

Grouping and categorizing


 Group related information/sections
o Home page: login form, registration form
o User page: user’s information, recent messages
o Inbox: Received messages
o Outbox: Sent messages
o Send a message: Send message form

Make a site map


 Site map shows how many pages you need and how they relate
 Usually look like either a family tree or folder list

Home page

User page

Inbox

Outbox

Send a message

Key elements for each page


 Common sections (header, navigation, footer etc.)
 Page specific sections
 Common Sections (header, footer)
 Page specific sections
 Home page: login form, registration form
 User page: user’s information, recent messages
 Inbox page: received messages
 Outbox page: messages sent by the user
 Send message page: form to send a message
Arranging elements on page

Translating design into code


 Liquid vs Fixed design
 The Div tag
 Coding the design

Liquid vs Fixed
 Liquid Design
o designs automatically fits to the screen
o Use percentage values to declare height and width of
sections
 Fixed design
o Designs remain fixed width
o Use fixed values to declare height and width of sections

The <div> tag


 Defines a division or section in an HTML document
 Visually, allows us to make containers that can be formatted
 Can be declared as
o <div>……</div>

You might also like