Intro to Web Dev Session 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= “#______” 250px id=“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 files from any page of the site. And also only keep files near pages that they are required for which improves load time. Home page index file is stored in the root directory