WEBSITE DEVELOPMENT A GUIDE TO CREATE A SIMPLE WEBSITE IN WEEBLY
TABLE OF CONTENTS I. HOW TO CREATE A WEBSITE IN WEEBLY i. PROCESS ii. BUILDING YOUR WEBSITE iii. INSERTING YOUR META TAGS iv. SITEMAPS v. FOOTER AND BREADCRUMBS NAVIGATION vi. HEADER TAGS vii. IMAGES viii. GOOGLE ANALYTICS ix. WEBMASTER TOOLS
CHAPTER ONE
CREATE A WEBSITE WITH WEEBLY
3
CREATING A WEBSITE WITH WEEBLY
CREATING A WEBSITE WITH WEEBLY As we enter the digital age, the ability to create a website is an extremely valuable skill. It will be good to have prior experience, but none is required. The tool we recommend for beginners to create a website is Weebly.com. Weebly provides you a free and easy way to create a practical, functional, and appealing website in a short time frame. Weebly provides you an easy drag-n-drop editor that makes editing your website extremely simple and requires no coding experience. This guide and its contents will guide you through the process of creating a weebly site. Now with an easy editor comes limitations and there are plenty when it comes to using weebly. However, for those that have very little knowledge on how to create and take a website live, Weebly can help you accomplish this task very quickly.
CHAPTER TWO
CREATE A WEBSITE WITH WEEBLY:
PROCESS
5
CREATING A WEBSITE WITH WEEBLY: PROCESS
PROCESS 1. Visit http://www.Weebly.com and sign up
2. Choose a title for you website
Use keywords or key phrases that are SEO friendly if possible
6
CREATING A WEBSITE WITH WEEBLY: PROCESS
CREATING A WEBSITE WITH WEEBLY 3. Register your domain name (Very important: but you can also do this at a later time once your site is built if you prefer) a. Choose Option C “I already Own a Domain” i. Input a domain name you have already purchased
b. Select and copy the A Record Weebly provides you ie. 199.34.228.100
8
CREATING A WEBSITE WITH WEEBLY: PROCESS
NAMECHEAP 3. Find your domain name that you registered earlier and click on it.
4. Click on “All Host Records” on the left navigation bar under the “Host Management” section.
7
CREATING A WEBSITE WITH WEEBLY: PROCESS
CREATING A WEBSITE WITH WEEBLY c. Visit the domain registration site that you purchased the domain name from. We recommend you visit a 3rd party site because if you buy it directly from Weebly prices are greatly inflated. Example domain registration sites include, GoDaddy.Com, BlueHost.Com, and the example I am going to walk you through http://www.NameCheap.com
NAMECHEAP 1. Log into your Name Cheap account
2. Find where it says “Number of domains in your account” and click “View”
9
CREATING A WEBSITE WITH WEEBLY: PROCESS
NAMECHEAP 4. Under “Record Type” select “A (Address)” for both options.
5. In the space to the left under “IP Address/URL” please paste the IP Address that you copied from your weebly account.
6. Scroll to the bottom and click “Save Changes”. You are now all done with registering your domain name.
CHAPTER THREE
CREATE A WEBSITE WITH WEEBLY:
BUILDING YOUR WEBSITE
11
CREATING A WEBSITE WITH WEEBLY: BUILDING YOUR WEBSITE
BUILDING YOUR WEBSITE Now that you have registered you Domain Name it is time to start building your website. 1) Choose a design a. Select the design designated in the image to begin
After you have completed this selection you can select a different design template, it is not permanent
2) Create Pages a. Click on the pages tab on the top part of the editor
12
CREATING A WEBSITE WITH WEEBLY: BUILDING YOUR WEBSITE
BUILDING YOUR WEBSITE b, Click on “New Page” to add a new page. c. Name each page that you would like on your site. d. If you would like to add a blog, now click on “New Blog” and create a blog. 3) Start Building a. Dive in and start building beautiful web pages. b. Be sure to design the site with Conversion in mind. Some example Conversion goals might be to drive donations, receive volunteer applications, receive a contact submission, or simply watch a specific video. Be sure to design your web site with your specific conversion goal in mind. c. Be sure to watch the short http://www.Weebly.com video on the home page.
CHAPTER FOUR
CREATE A WEBSITE WITH WEEBLY:
INSERTING YOUR META TAGS
14
CREATING A WEBSITE WITH WEEBLY: INSERTING YOUR META TAGS
INSERTING YOUR META TAGS Meta tags can be extremely useful in improving your sites search engine optimization. *Note: Due to the current limitations of weebly you will not be able to upload a different set of meta tags for each individual page. This process will walk you through how to create a universal meta tag for all of your pages. PROCESS: 1) Click on the “Pages” tab in your Weebly editor. 2) Select your page that you want to add the meta tags to. a. In the grey area on the right there will be a blue link titled “Advanced Settings” click it b. This will open up the page title, description and meta keywords field. Paste appropriate meta information that will aid your site with SEO. 3) Click “Save” 4) Repeat step 3 for each page on your site. *Note: If you change to a different design template then you must repeat these steps all over again.
CHAPTER FIVE
CREATE A WEBSITE WITH WEEBLY:
SITEMAPS
16
CREATING A WEBSITE WITH WEEBLY: SITEMAPS
SITEMAPS Weebly is a great tool to use because it automatically creates your XML Sitemap and updates for you. However, you will still need to create a text link sitemap. This will be intended to be a link in your footer navigation. Having this will make your site look more professional. PROCESS: 1) Visit http://www.MYSITE.com/sitemap.xml and verify that it exists and that is up to date with all of your pages. 2) Create a new page and title it “sitemap” leave out the .html because weebly will add it later. a. Make sure to select ‘No’ in the “Show in Navigation?” option b. Click on the “Edit This Page” button 3) Now select the “Paragraph with Title” element and drop it onto the page 4) Name the title “Sitemap” 5) In the paragraph option create a new line for each page you have and link the title of each page to its respectable page.
CHAPTER SIX
CREATE A WEBSITE WITH WEEBLY:
FOOTER & BREADCRUMBS NAVIGATION
18
CREATING A WEBSITE WITH WEEBLY: FOOTER AND BREADCRUMBS NAVIGATION
FOOTER & BREADCRUMBS NAVIGATION It is very important to have HTML navigation on your site and to interlink all of your pages. With that said you will need to create a footer and breadcrumbs navigation. It is very simple and just requires some copying and pasting. *Note: You must have your Sitemaps created before doing this. PROCESS FOR FOOTER NAVIGATION: 1) Open your weebly editor and be on the home page. 2) Click on the “Paragraph” element and drag it to the very bottom of the page.
19
CREATING A WEBSITE WITH WEEBLY: FOOTER AND BREADCRUMBS NAVIGATION
FOOTER AND BREADCRUMBS NAVIGATION 3) Double click on it to edit the text and type in the title for all of your pages. 4) Now link the text to their respectable pages. Use the text editor at the top to link them. a. To link just highlight the title of the page in the text and click on the link button at the top in the editor. Then select the page from “Your Pages”
5) Once you have finished linking the pages center the text a. *Optional – Divide each link with a divider “|”. it should look like this: Page 1 | Page 2 | Page 3 b. To create the divider hold down the CTRL button and hit the forward slash “\” button above ENTER.
20
CREATING A WEBSITE WITH WEEBLY: FOOTER AND BREADCRUMBS NAVIGATION
FOOTER AND BREADCRUMBS NAVIGATION 6) Now to get this footer on every page do the following: a. Publish your site and visit your homepage with the footer you just created. b. Now right click anywhere on the page and select “View Source Code” and then scroll down to where your content ends and find the code for your entire footer. It should look like this: </div> <!-- /box --> <div class="paragraph" style=" text-align: center; "><a href="/index.html">San Diego Photographer</a>&nbsp;| <a href="/san-diego-headshots.html">San Diego Headshots</a> | <a href="/acting-headshots.html">Acting Head Shots</a> | <a href="/sandiego-event-photographer.html">San Diego Event Photographer</a> <br />| <a href="/professionalmodel-photography.html">Professional Model Photography</a> | <a href="/sorority-eventphotographer.html">Sorority Event Photography</a> | <a href="/contact.html">Contact Us Now</a> | <a href="/sitemap.html">Sitemap</a> | <a href="/links.html">Links</a>&nbsp;| <a href="/privacypolicy.html">Privacy Policy</a> |<br /> </div> c. Now select that code and copy it. d. Open up your Weebly editor and select the “Design” tab and select “Edit HTML/CSS” e. Make sure you are under the HTML tab f Locate this snippet of code: </div><!-- end id:content --> g. Enter a space after the code and paste the code you copied from your source code. h. Hit the “Preview” tab to make sure it looks right. 7) Once it is on every page you can go ahead and delete the paragraph box you created on your homepage.
21
CREATING A WEBSITE WITH WEEBLY: FOOTER AND BREADCRUMBS NAVIGATION
FOOTER AND BREADCRUMBS NAVIGATION PROCESS FOR BREADCRUMBS NAVIGATION *Optional*: 1) Open your weebly editor and be on the home page. 2) Click on the “Paragraph” element and drag it to the very top left of the page. 3) Double click on it to edit the text and type in the title of your pages 4) Now link the text to their respectable pages. Use the text editor at the top to link them. a. To link just highlight the title of the page in the text and click on the link button at the top in the editor. Then select the page from “Your Pages” 5) Divide each link with a divider It should look like this: Page 1 -> Page 2 -> Current Page
CHAPTER SEVEN
CREATE A WEBSITE WITH WEEBLY:
HEADER TAGS
23
CREATING A WEBSITE WITH WEEBLY: HEADER TAGS
HEADER TAGS Weebly allows you to create titles for pages, but they are not H1 titles. Therefore, it is very important that you create your own. By adding in H1 Titles instead of Weebly Titles, your site will be much more SEO friendly and more people will find your website organically. PROCESS: 1) 2) 3) 4)
Open your home page on the weebly editor Select the “Custom HTML” element and drag-n-drop to the very top of your page. Click on “Edit HTML” Now insert the following h1 tags a. <h1>Your Title of the Page</h1> 5) Now you most likely see a giant unneeded space appear after making this change. Do not worry about this it only shows in the editor. If you publish and view your site it comes out fine. 6) Repeat this process on every page.
CHAPTER EIGHT
CREATE A WEBSITE WITH WEEBLY:
IMAGES
25
CREATING A WEBSITE WITH WEEBLY: IMAGES
IMAGES Make sure to add your pages keywords to the alt text of every image on your site. Only the search engines can view alt text so you don’t need to worry if the images match the alt text. PROCESS: 1) Open your page of choice in the weebly editor 2) Select the image element and drag into your place of choice. Upload your image. 3) Once your image is uploaded click on the “Advanced” tab on the image editor tool bar (its on the left)
4) In the box where it says “Alt Text:” enter your keywords (2 max) 5) Repeat these steps for every image on every page. Mix up the keywords and spread them out evenly.
CHAPTER NINE
CREATE A WEBSITE WITH WEEBLY:
GOOGLE ANALYTICS
27
CREATING A WEBSITE WITH WEEBLY: GOOGLE ANALYTICS
GOOGLE ANALYTICS In order for you to track your web site’s performance you will need to track your analytics. Analytics help you optimize conversion and better understand how your audience uses your website. PROCESS: 1) Visit http://www.google.com/analytics login and/or sign up 2) On the far right open up the drop down menu and select “Create New Account”
3) Click on “Sign Up” and input all of the appropriate information and follow the steps as instructed. 4) Once you are given a string of code copy the code and go to your weebly editor. 5) In weebly editor click on the “Settings” tab and then select “(SEO) Search Engine Optimization”
6) In the “Footer Code:” box paste your code that you received from Google then click save.
CHAPTER TEN
CREATE A WEBSITE WITH WEEBLY:
WEBMASTER TOOLS
29
CREATING A WEBSITE WITH WEEBLY: WEBMASTER TOOLS
WEBMASTER TOOLS “Google Webmaster Tools” allows Webmasters access to important statistics about their site, their users and information about how Google spiders the site. Signing up for Google Webmaster tools is easy, it’s free and it can be very helpful in executing on certain aspects of Search Engine Optimization. Also sign up for Yahoo Site Explorer and Bing Webmaster Center – URLs listed at the end of this section. PROCESS: 1.) Go to www.google.com/webmasters/tools and sign up for an account. 2.) Go to the Dashboard and add your site by typing in the full http address and clicking Add Site. a. http://www.YOURWEBSITE.com 3.) Verify your site. Google will give you further instructions. You will either add an .html file containing specific information supplied by Google or add a meta tag with information supplied by Google. Either way is fine. Once you are verified as the site owner, you can begin using the Webmaster tools. 4.) Add your XML Sitemap. Enter the address of your sitemap. Check back a day later and it should have crawled it. It will let you know if there were any errors. 5.) Sign up for Yahoo Site Explorer at http://siteexplorer.search.yahoo.com a. Verify your site b. Submit XML Sitemap 6.) Sign up for Bing Webmaster Center at http://www.bing.com/webmaster a. Verify your site b. Submit XML Sitemap