1 / 47

The easy way to a nice looking website design

The easy way to a nice looking website design. By a total non-designer (Me!). Website Refresher. Three types of Website Hand rolled HTML. Lightweight static pages. Scripted Website. (PHP, ASP.NET etc.)

eara
Download Presentation

The easy way to a nice looking website design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The easy way to a nicelooking website design By a total non-designer (Me!)

  2. Website Refresher Three types of Website Hand rolled HTML. Lightweight static pages. Scripted Website. (PHP, ASP.NET etc.) Content Management System (CMS) e.g. WordPress, Joomla, Drupal (Mensa Website) and many many more.

  3. Handrolled Websites Can be very pretty but take a lot of work and look a bit 90s. http://raymondwalley.com

  4. Scripted Websites A scripted website is where the script (.php, .ASP) is a computer program that runs on the server and outputs HTML etc to the browser. Any website which is not built on a CMS but which has logins etc is also a Scripted Website.

  5. Content Management Systems (CMS) Data is held in a database. This can include instructions about the appearance as well as functional data. A CMS is a scripted website. Apart from some written in ASP.NET, the majority of CMS are written in PHP. Most CMS are Open Source. i.e. Free.

  6. Just Some of the PHP CMS!

  7. Making a Scripted Site Look Pretty There are thousands of free templates out there. Search for Free CSS templates Free html5 templates Free web templates

  8. So You’ve Found a Nice CSS Theme • Let’s assume website hosting is set up. • Need to download theme files. • Edit files. • Upload. • Voila! • Example: http://bespokeprogrammers.com

  9. Original Template http://www.solucija.com/template/internet-sharing

  10. My Website!

  11. Another Example Client’s Past Life Regression site needed refreshing. Used this template: “small business” on http://all-free-download.com

  12. Original Template

  13. Ended Up as

  14. Pros and Cons for Scripted Websites Pros • Look’s pretty. • Easy to Change. • 1000s of templates. Cons • Usually need a web developer or to learn PHP. • Can be time Consuming.

  15. Using a CMS Generally not too difficult to master. Once learnt you can change appearance very quickly. The popular ones have thousands of themes to alter appearance as well as plugins or extensions to add new functionality.

  16. Most Popular CMS WordPress - most popular CMS for blogs Drupal (New British Mensa website) Joomla We’ll focus on WordPress, I’ll show to use it.

  17. WordPress • Not just for blogs but also for full websites. • Takes a minute to install (with some hosts, not manually). Two Versions • WordPress.com – hosted service. Free or Premium. • WordPress.org – free software, you host.

  18. Example 1 – WordPress Blog Site

  19. Example 2 – My Blog XamApp.com

  20. Not a Free Theme ($39) but beautiful!

  21. How to Setup WordPress In this demo, I’ll Install WordPress (1-2 minutes) Upload a few plugins (2-3 minutes) Look for and install a theme (3-4 minutes) Sit back and bask in the glory! (A lifetime!)

  22. install WordPress (1-2 minutes) Start with a “Naked Website”. No Content

  23. Logged into CPanel Install from open source installer

  24. WordPress Install Takes 1-2 Minutes

  25. After Installing

  26. WordPress Dashboard

  27. Need to Keep WordPress Upgraded New versions often with security fixes come out every few weeks. This is for WordPress.org Wordpress.com is managed so they do it, but much less flexibility unless you pay for service.

  28. Customising WordPress Themes – completely change the look Plugins – Add extra functionality Widgets – On screen controls WordPress comes with two default themes- 2012 and 2013. Here’s what the site looks like with the 2012 theme.

  29. 2012 Theme Plain with no images. We can do better!

  30. WordPress Dashboard lets you search

  31. Lots to Look For

  32. Or Google for Themes Search for Free WordPress Themes Free Charity WordPress Themes

  33. Lots of variations in search!

  34. A Free Charity Theme - Danko

  35. Found this one

  36. Two Options Search from the WordPress Dashboard. It’s a one-click install. But limited choices. Search Externally – Ie Google. Lots more available externally but quality varies enormously and you may need a techy to upload unless you are happy with FTP. (File Transfer Protocol).

  37. Themes Each comes as a single zip file. Need to downloaded, unzipped into your PC. All files copied over to server themes directory Use FTP client to copy files. Eg Core FTP is a free FTP client from http://CoreFtp.com

  38. FTP – How To (Slightly Techy!) 1/3 (For Windows) Goto http://coreftp.com Download and install free Core FTP

  39. FTP 2/3 - Setup the site details Fill in these four highlighted fields. Site Name URL Username Password Then click the Connect button.

  40. FTP 3/3 - Drag the Theme folder Left is your PC, right is webserver folders. Use buttons to navigate folders then Drag folder from left to right, wait for files to copy.

  41. New Theme now known to WordPress

  42. Now activate the theme But still need to Configure it.

  43. Configuring Adding a Logo Adding Pages (it depends if it’s a static page site or a series of posts site). Menus (if the theme supports them) Tweaking the Theme. Adding Plugins for functionality Configuring Widgets

  44. After Some Tweaking

  45. What are Plugins For? I’ve installed these plugins. All free. • Cache the site for speed. • Increase WordPressSecurity. • Build a sitemap and upload to Google/Bing. • Display on smartphones(Next Page). • Automated Backup. • Simplifying Updates. • And lots lots more available.

  46. Website as seen by Smartphones This is thanks to the WpTouch Plugin

  47. Questions?

More Related