Intro to Web Dev Session 2 – Planning and Structure.
-
Upload
milo-harrell -
Category
Documents
-
view
232 -
download
0
Transcript of Intro to Web Dev Session 2 – Planning and Structure.
Intro to Web DevSession 2 – Planning and Structure
Wireframes• Wireframes are one of the design tools used to
ensure smooth development of any Website, App or Software pages
• They are a graphical representation of layout plans ready for programming / coding
• They can be used to plan and keep track of sizes, colours and div id’s
1040px – id=“pagecontainer” background=“#______”1020px –
id=“contentcontainer” background=“#______”1000px – id=“headercontainer” background=“#______”
id=“slideshowcontainer” background=“#______”
id=“sidebar-box” background=
“#______”
250pxid=“sidebar” background=
“#______”
id=“maincontent” background=“#______”
id=“home-box-left” background=
“#______”
id=“home-box-mid” background=
“#______”
id=“home-box-right” background=
“#______”
1020px – id=“footercontainer”
background=“#______”
Storyboards• Storyboards are a planning tool for Website, Apps and
Software user journeys
• There are many differing ways to layout storyboards, the key fact is that they contain details about the content for each page
• Storyboards are often used to display and give customers the opportunity to authorise site plans and content.
• Bear in mind the journey a customer will take when viewing the site in deciding on pages and content
HOME
Site Structure• Each page of the website should be stored in its own folder
and named index.html
• This allows us to reference filesfrom any page of the site. And also only keep files near pages that they are required for which improves loadtime.
• Home page index file is stored in the root directory