Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Planning a Website

Want to create a website for yourself or your business? There are lots of options these days! We discuss how to create a traditional website, as well as some free alternatives. Learn about domain names, hosting services, design templates, and more.

Tech Team

on 24 August 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Planning a Website

Planning a Website
How to Build a Website
The Decision
Deciding the Content
Where to go from here?
Expand your knowledge with...
Layout & Design
Keep it Simple
Three Click Rule
See important info in one click
Works for web and mobile devices

File by File
HTML Files
Images &
Coding Languages
Given a Domain
Hypertext Markup Language (HTML)
The standard language used to create web pages.
The building blocks of HTML are called tags.
CSS (Cascading Style Sheets
) - Used to add additional formatting and layout control. A single CSS file can be linked to many HTML pages for uniform styles.
- Adds interactivity to websites.
body {background-color: #99cccc; font-family:"arial"; }
function mouseOver()
{document.getElementById("b1").src ="images/next2.gif";}
Web Server - A computer that stores web page files and makes them available through the Internet. Usually purchased through a monthly fee.
URL (Uniform Resource Locator)
A unique web address that leads to a specific web page.
Classical Method
Content Management Systems (CMS)
Online Site Builders
More Difficult
Less Difficult
Create Your Files
Purchase a Host and Domain
Upload Your Files
Coding Language: HTML
Working with Images
Learn to utilize HTML coding by:
Websites - Codeacademy, Lynda, W3schools
Books -
HTML for Dummies
Classes - Tech Team, CofC, Online
Use software to help:
Code Editors
(FREE - Windows Only)
Text Wrangler
(FREE - Windows & Mac)
Sublime Text
(FREE - Windows & Mac)
Professional Software
Paint.net -
getpaint.net (free, Windows only)
gimp.org (free, Windows and Mac)
Pixlr -
pixlr.com/editor (free, web-based)
Adobe Photoshop or Illustrator
(Windows and Mac)

Get an overview of different methods of creating a website

Understand the strengths and weaknesses of each method

Decide which method would suit your needs

Know where to go for more information
Tech Team
Charleston County Public Library
68 Calhoun Street
Charleston, SC 29401
(843) 805-6885
Presented by:
Web Hosts
Amount of Space
Customer support
Bandwidth (Total Traffic)
Domain included
A few options:
Choosing a Domain
Purchased through a domain registrar, like GoDaddy or NameCheap
Can also be purchased through the web host
Approximate cost: $10 per year
Must be a name that is not already taken
Brainstorm names and extensions:
.com .net .org .info .us .biz
Register early to secure a particular name
Connect the domain to the host
Renew each year!

From the web host's Control Panel
Using FTP
Pros and Cons
Lots of details
Provides control over the details
Wide selection of tools and service providers
Not the easiest or fastest way
Virtually any website is possible with
enough time and skill
Files on your computer
Files on web server
Login info provided by web host
File Transfer Protocol: A quick, direct method of uploading and downloading files from a web server, usually through FTP software
Free FTP Software:
Filezilla (Windows and Mac)
FireFTP (Firefox extension)
Blog Features
Blog Providers
Designed to publish sequential articles or pictures
Can be used creatively for other purposes
Free to set up
Hosting in an "all in one" package
Apply ready-made templates and themes for a polished design
Includes a free, longer URL: myblog.blogspot.com
Domain names can be purchased: www.myblog.com

Standard blog format
Easy to learn
Used with a Google account
More flexible
Slightly steeper learning curve
Also used as a CMS to make full websites
Why Blog?
If your web site involves chronological posts or news
Quick and easy to set up
Free hosting
Ready-made, polished templates
Why not?
No chronological posts needed
More flexibility and control needed
If you need a complex website, e.g., one with many sub-pages and sub-menus
A quick way to make a general-purpose website using visual tools instead of HTML code.
Site Builder Features
Similar to blogs, but designed for traditional websites
Create pages with visual tools instead of code
Apply ready-made templates for a polished design
Less flexibility than a traditional website
"All in one" package with web hosting included
Free and paid services are available
What you get varies greatly between service providers
Site Builder Services
(free and paid plans)
(free, uses Google account)
(paid plan only)
Offers advantages of site builders and traditional websites by separating content from structure and design.
CMS Requirements
A compatible web host
Installation of CMS software
Some hosts offer easy "one click" installation, configuration, and support
Other hosts may require manual configuration
Requirements vary depending on the CMS
PHP support and MySQL database are often required
CMS Features
Content is edited visually, like a blog or site builder
Structure and design can be fully customized with HTML, CSS, and other code languages
Site can also be customized with pre-made templates and other add-ons
Popular open source CMSs are supported by a community of developers and users
Well suited for organizations with a technical user to set it up, and anyone else can update content
Similar to the blog at Wordpress.com but with more freedom to customize. Requires a web host. Fast and simple. Available at wordpress.org
Medium difficulty, available at Joomla.org
Three popular, free, and open source content management systems.
All three required PHP and MySQL by the web host.
Steeper learning curve, with wide range of functions for larger websites. Available at Drupal.org
Perfect for sequential posts of information like news, articles, or photographs. With some effort, blogs can also be used as general purpose websites.
Classes and Tutorials
Software, Blogging, and Content Management Systems:
Creating Web Pages All-In-One for Dummies by Richard Wagner – 006.76 WAGNER
Creating a Web Site: The Missing Manual by Matthew MacDonald – 006.7 MACDONAL
Web Design : a Beginner's Guide by Wendy Willard – 006.7 WILLARD
The Complete Idiot's Guide to HTML5 and CSS3 by Joe Kraynak – 006.7 KRAYNAK
HTML5 : the Missing Manual by Matthew MacDonald – 006.74 MACDONAL
Sams Teach Yourself HTML and CSS in 24 Hours by Julie C. Meloni – 005.72 MELONI
Dreamweaver CS5: The Missing Manual by David McFarland - 005.72 MCFARLAN
Head First WordPress by Jeff Siarto – 006.7 SIARTO
Blogging for Dummies by Susannah Gardner and Shane Birley – 006.7 GARDNER
Wordpress Web Design for Dummies by Lisa Sabin-Wilson – 005.72 SABIN-WI
Picture Yourself Building a Website with Joomla! 1.6 by Robin D. Turner – 006.78 TURNER
Beginning Drupal 7 by Todd Tomlinson – 006.76 TOMLINSO
General Guides and HTML:
webdesign.about.com – Articles, guides, and resources on general topics
www.w3schools.com – Tutorials and references for HTML, CSS, and more
www.htmldog.com – Tutorials and references on HTML and CSS
thimble.webmaker.org – Type out HTML code and instantly see the result

expression.microsoft.com/cc197140 – Training videos and tutorials from Microsoft
adobe.com/devnet/dreamweaver.html – Guides, tutorials, and examples from Adobe
support.wordpress.com – Wordpress blog support
support.google.com/blogger – Blogger support

codex.wordpress.org – Online Wordpress manual and repository
docs.joomla.org – Official Joomla! documentation wiki
drupal.org/support – Drupal support and documentation
wpchs.org – Wordpress Charleston User Group

www.codeacademy.com – Interactive lessons on HTML, CSS, and advanced coding
Explore the fundamentals of hypertext markup language (HTML), the coding used to design web pages. Practice entering source code for a web page that includes hyperlinks, a table, and a photograph. Completion of Internet Basics (or previous experience) is expected.
Web Page Design (Charleston County Public Library, Technology Learning Center)
www.gcflearnfree.org/blogbasics - Tutorials on blogging
Example :
<title> Charleston County Public Library </title>
General Guides:
Software and blogs:
Content Management Systems:
By Florian Hirzinger - www.fh-ap.com (Own work (Florian Hirzinger)) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons
By Florian Hirzinger – www.fh-ap.com (Own work (Florian Hirzinger)) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons
Download: Moving a file from the Internet "down" to your computer
Upload: Moving a file from your computer "up" to the Internet
Quick and easy method for just a few files. More time consuming if you are uploading many files or uploading frequently.
Pros vs. Cons
HTML Editor
Creative Commons is a nonprofit organization that enables the sharing and use of creativity and knowledge through free legal tools. These licenses are not an alternative to copyright. They work alongside copyright and enable you to modify your copyright terms to best suit your needs.
To search for safe images use:
Creative Commons
Google Search
Filter your results
Full transcript