How to create single page website

1
(No Transcript)
2
How to Make a One Page Website This tutorial
explains how to create a vertical-scrolling one
page website in four steps. Check out the demo!
One Page Website Design
There are at least 3 kinds of One Page websites.
The basic idea is that all content is placed on
one page, but only a portion of it is centered on
your computer screen at a given time. Then you
can watch the old content slide away when you
click a link, instead of loading a whole new
page. Often, the scroll bar is still visible on
the side, so you could actually drag it up and
down and see the whole page at once. The picture
below is a screen shot I took of another
designers website, Eshbeata.com. His first page
starts at the top, the second starts at the image
gallery, the third page starts where the dirt
3
begins, and the last page is centered around the
ocean
4
I classified the types of one page websites by
the direction/s that the page scrolls. Here is my
breakdown, with examples Vertical Scroll (Most
Common) Barrel Barc, Beaver Lab, Little White
Umbrella, Eshbeata Horizontal Scroll Vanity
Claire, Hotel Oxford, Lomotek 2D Scroll Steve
Jacqs Once again, this post explains the vertical
method. When designing your single page website,
you need to decide the following things
1.
Will my page start at the top and scroll down
(like this), start at the bottom and scroll up
(like this), or start in the middle, and move all
over (like this)?
2. 3.
How will you differentiate each page? Will the
page be a journey, as with Eshbeatas site, where
you travel from above ground
to underwater?
4. 5. 6. 7. 8.
Will each page have a separate background
color? Will you put a piece of art that defines
the border? No separation at all? Will there be
overlap between the pages? If you dont care
about overlap, you dont have much to worry
about, but if you want
each page to fill everyones screen, you need
to add extra margin to the bottom of each page
to account for different screen sizes. A netbook
might only display 500 pixels, while a 27-inch
monitor might display 1200 pixels (depending on
the users resolution settings).. I tend to give
1200 pixels if I want to be completely sure only
one page will display at a time. The HTML One
page website html is actually pretty simple.
Youve seen the FAQ pages that have a list of
questions at the top, and then you click one and
it takes you to the middle of the page (like
this)? Thats the technique were going to
use. Basically, youre going to create a
navigation just like normal, except where you
normally do an hrefLink Address, instead of a
link address, you will put a pound sign followed
by the unique id of each page
ltdiv id"nav"gt ltulgt ltligtlta
href"about"gtAboutlt/agtlt/ligt ltligtlta
href"portfolio"gtPortfoliolt/agtlt/ligt
5
ltligtlta href"contact"gtContactlt/agtlt/ligt lt/ulgt
lt/divgt
This lets the browser know that the link is
within the page. (Just think about when you use
href causing the page to refresh its the
same idea. The is still telling the browser
to load the same page, except when you include
text after the sign, its further telling the
browser to look for link of that name on the same
page, and scroll to that location). So then if
you wanted three pages in one, you just create
an id for each page in the html. Then, the first
thing you do within that div is insert the id
you specified in the navigation within an anchor
tag, like this
ltdiv id"page1"gt lta id"about"
class"smooth"gtlt/agt About page content goes
here. lt/divgt ltdiv id"page2"gt lta
id"portfolio" class"smooth"gtlt/agt Portfolio
page content goes here. lt/divgt ltdiv
id"page3"gt lta id"contact"
class"smooth"gtlt/agt
6
Contact page content goes here. lt/divgt
So thats it for your html just add the rest of
the html content as you normally would, except it
will all go in the same file (likely index.html),
and each pages content will go within the
appropriate id (page1, page2, or page3). The
CSS There is a lot I could tell you about the
style sheet for a one page website, but the only
crucial thing you need to do is give each page id
(page1, page2 and page3 from the HTML example)
a height of 1000 pixels (tall enough to take up
a users computer screen, unless you want overlap
its up to you!). This will cause your total
page to be several thousand pixels tall,
depending on how many internal pages you
have. The other main consideration is the
navigation bar. I tend to make a thin navigation
bar (say 70px) that is fixed to the top of the
screen, so the user can click between pages
instead of having to use the scrollbar to find
their way around (which ruins the fun of a 1-page
website for me). JQuery Smooth Scroll In order
to make your one page website scroll up and down
smoothly using jquery, just paste the following
code into your html file, right before the .
Seriously, thats it. You dont need anything in
the header, and you dont need to host a jquery
file anywhere on your site. When you click a link
in your site that takes you somewhere else within
the same page it will slide smoothly.
ltscript src"https//ajax.googleapis.com/ajax/libs
/jquery/2.1.4/jquery.min.js"gtlt/scri ptgt ltscript
src"https//github.com/kswedberg/jquery-smooth-
scroll/blob/master/jquery.smooth-scroll.min.js"gtlt/
scriptgt ltscriptgt
7
('.smooth').on('click', function()
.smoothScroll( scrollElement
('body'), scrollTarget ''
this.id ) return false ) lt/scriptgt
(Thanks to for this code!) Call To Action If
you appreciated this article, I would be very
grateful if you would share it with your friends
or leave me a comment. Im just getting my start
as a blogger and would love to hear what I could
be doing better.