Home |
17: Teaching Support | Weebly


Weebly is an easy way to create your own website based on page layout templates.


It is free and uses a drag and drop system for adding text and images etc to your pages.

Weebly appears to run most smoothly through the Mozilla Firefox browser on the Mac so we would suggest you create your website using this program.

Firefox icon



Before you start designing your site, you should plan out its structure on paper.

Drawing a site map on paper will help you to determine how the pages of your website will connect together.

This is a website designed to promote a conference called ChallengingCraft which was held at Gray's School of Art in 2004. http://www.challengingcraft.org

This site is made up of many many pages and before putting it together using computer programs like Adobe Dreamweaver / Adobe Photoshop / Adobe Illustrator it was important to create a sitemap in order to know how many pages were involved and how they would link up.



These are examples of 3D students' websites from previous years.






This is a sitemap based on the areas previous students have chosen to include.

The examples above are laid out in Illustrator but drawing out a rough structure in your sketchbook would do the same job. eg this sitemap sketch

Please develop a site map for your own website based on your own requirements.



Click here to download a folder of images and text to use as a basis for the exercise below.

(Folder is called 'ImagesAndText.zip')



1 Create a Weebly account

To use Weebly you need to register (free) and create a user account.
(Please read the terms of service.)

Click here to create a Weebly account



2 Building a web site

The first thing you will be asked to do is to provide a title for your website

Choose a title for the site

• Your name would probably be a good choice as a title but use something else if you prefer
• Click the 'Continue' button



You will then be asked to choose a website address for your site

Choose a website address

• 'Option A' is free. In the example above we have entered http://graysschoolofart.weebly.com
• The above address could be sent out to an employer or client in order to look at examples of your work
• Option B allows you to pay to register a new domain name
• Option C lets you link an existing domain name to the site you are building in Weebly

• Click the 'Continue' button



The default first page will appear

Default first page

• The title you entered appears at the top
• You will see a number of options in the menu along the top of the screen



3 Choose a visual theme for your website

Click the 'Design' tab to select a visual theme for your site

Designs - Visual Themes

• Move your mouse over the squares to see themes applied to the web page (They may take a moment to load.)
• Click the arrows at the right and left to scroll to see different options
• For a portfolio website you should consider a theme that will not distract from the work being shown
• The layout selected above allows you to upload an image and your site name is integrated at the lower right



4 Upload a new header image to replace the one on your page

Images on the web will appear quickly in a user's browser if they are saved at a low file size.
If a web page takes too long to load up people tend to become bored, leave and go to another website.

Images on the web should be -
• Physically quite small
• Low resolution (In general terms, this refers to how much detail they contain - 72dpi is standard on the web)
• Saved as GIF or JPG file format

To use the layout template you will also need to create a header image to sit at the top of the page

• Open Photoshop
• Choose File > New and create a new blank document - Size: 680x175 pixels - Resolution: 72dpi
• Open a high resolution image eg a digital photograph
• Choose Select > All
• Choose Edit > Copy
• Click on the blank document you opened
• Choose Edit > Paste
• Your image should now be pasted into the blank document
• Choose Edit > Transform > Scale to reduce the size of the image you have pasted into the document
• Use the 'Move' tool in the toolbar to reposition it as required
• You may also want to include copyright information
• Use the Type tool to add copyright info eg © Your Name 2008 (copyright symbol = alt g)
• Choose File > Save for Web and choose JPEG or GIF as your saving format

Uploading your other images
It will probably be necessary to reduce the size and resolution of your images and resave them using Photoshop.

• Open your image in Photoshop
• Choose Image > Image Size
• Adjust the dimensions of your image (a maximum of between 500 and 950 pixels wide should be ok)
• Set resolution to 72 dpi
• Choose Filter > Unsharp Mask to sharpen your image.
• You may also want to include copyright information
• Use the Type tool to add copyright info eg © Your Name 2008 (copyright symbol = alt g)
• Choose File > Save for Web and choose JPEG or GIF as your saving format

Saving files for the web from Photoshop



If the theme you have selected contains a header image, click it to select it.

Swapping an Image

• A dotted line will appear around the edges of the header image
• Information will appear above it (Header Options)
• These refer to the image size in pixels (680pixels x 175pixels in thiscase)

• Click the 'Edit Image' button

Add Image / Add Text options

• The 'Add Image / Add Text' options will appear (the size is indicated alongside)
• Click the 'Add Image' button

Add Image / Choose File options

• The window will expand
• Make sure that 'My Computer' is selected
• Click the 'Choose File' button to upload an image saved on your computer

• The 'Upload' window will open

Upload window

• This allows us to upload a new image to replace the existing one
• Click on the image you want to upload
• Click the 'Select' button to upload the new image

Image Uploaded

• Your image you selected should have been uploaded, replacing the previous one

• If may be too large for the header area

• Click the 'Crop' button

Cropping Uploaded Image

• Resize the white rectangle to match the size of the header area
• Click the 'OK' button to confirm the crop

To add a copyright notice to your image -

• Click the 'T - Add Text' button

Adding Text to the Image

• Select a Font and Size
• Move the 'Example Text' to the lower right hand corner
• Click inside the text, select it and enter © Your Name 2010

© = alt g

(Click the red 'x' button to delete your text if necessary)

• Click the orange 'Save' button at the top right to confirm changes to your image and text


5 Add text and images to the page

Click the 'Elements' tab to start adding images and text

Adding elements



Click and drag the 'Title' element onto the page



• You should see a box for entering title text into
• Enter a heading relevant to the kind of work you do eg 'Designer Maker of Jewellery'

To change the colour / size / style / alignment of the text, use the control strip above the Title box

Text control

• To have a space between heading and information beneath it, click the enter key at the end of the line



Click and drag the 'Two Column Layout icon onto the page, below the header


Two Column Layout

• The page will take a moment to update
• You should see two boxes underneath your header image
• A vertical line indicates the size of the two columns
• Click and drag this line to adjust the width



Drag the Picture icon into the column on the left

Picture Icon

Uploading an image

• A Sample Image should appear containing the words 'Click Here to Edit'
• Click the sample image and the 'Upload' window will open
• Choose the JPG image you want to upload and click the 'Select' button
• Your image should appear on the page
• If you click on your image a small red square should appear at the lower right so you can make it smaller or larger

Page with an image

• To add more images, click and drag the Picture element into the left hand column (just below the image that has been uploaded)

Uploaded Images

• Repeat the steps above to upload more of your own jpg images



To add text

• Write a short statement (100-150 words) about your work in Microsoft Word
• In Weebly, click and drag the Paragraph icon into the column on the right and side

Paragraph Icon

• Weebly will create an area to hold your text
• Copy>Paste your text from Word into Weebly

Paragraph of Text

• If you do not have text ready you can copy > paste Lorem Ipsum into your page as 'placeholder' text.
• Some place holder text is in the folder for you to use temporarily if you do not have your own

• Using Lorem Ipsum lets us see roughly how a page will look if final textual content is not yet available.
• A Lorem Ipsum generator can be found online here http://www.lipsum.com



6 Adding an email link

Adding an email link

• Enter the text you would like to use as an email link eg 'Email: yourname@youremailaddress.co.uk'
• Click and drag to select the text you want to use as the link
• Click the icon in the list at the top marked with a chain

Link Icon

• A window will appear - select Email address from the column on the left and enter your email address
• Click the 'Save' button to confirm your details



7 Publishing your website

To make your website available to the public to view, click the 'Publish' button at the top of the screen

Publishing the site

• After a few moments, you should see the message above
• Choose the option at the top
• Click the 'Continue' button

After a few moments, you should see the 'Website Published!' message

• Click the blue text to visit your website
• Click the 'x' to close the window

Website Published

You could send the link to potential employers or clients and they would be able to see your work on the web


8 Add more pages to the site

Additional pages can be added to show more examples of your work / cv / exhibitions / contact info etc
(Refer to your site map when you are adding and naming pages)

• Click the 'Pages' tab at the top of the screen
• The 'Manage Pages' screen will appear

Managing Pages

• Click the 'New Page' icon to add a page
• Give the page an appropriate name
• To add dropdown menus within the navigation (eg the Gallery section above) click and drag a page to the right)
• To delete a page, select it in the list and click 'Delete Page'

• 'Password protect' pages is a function you pay for by upgrading to the professional version of the software
• For the moment, leave 'Show in Navigation' set to 'Yes' so that your pages will appear in the navigation strip

• When you are finished, click the 'Save' button



9 Add a Contact Form

Another way of letting people contact you through your site (other than an email link) is via a Contact Form.

• Click the 'Contact' link in your site's navigation area to go to your 'Contact' page
• Drag the 'Contact Form' icon onto your page

Contact Icon

Contact form

• Click the 'More' button in the Weebly menu at the top of the screen

Contact Form Elements

• You can add the elements above by dragging them onto the page

• Click the red 'Close' button to finalise the form



10 Adding a copyright notice

Once everything is finished remember to add a copyright line on the pages such as...

All images and text are © Iain Morrison 2008

Alt + G = ©



11 Making your website appear as a search result in search engines

• Click 'Settings'
• The 'Edit Site Settings' window will open
• Click 'Search Engine Optimization'

Edit Site Settings

• Enter a Site Description for your website.
• This will appear as the description of your site when it appears as the result of a Google search

• Enter Meta Keywords appropriate for your site
• These are words relevant to your site's content eg your name 3D, Design, Jewellery, Ceramics

• Click the 'Save' button to save your settings


12 Registering a domain name

At present, the pages you have created have an address automatically assigned to them by Google.
eg http://graysschoolofart.weebly.com/

Once your pages have been published your work is accessible when the address is entered in a web browser.
You can make use of this free web address as a way to allow people to look at your portfolio of work.


However you may want to register your own domain name instead.

You register a domain name with an Internet Service Provider (known as an ISP).

Obviously the ISPs listed above are just examples and you should try to get the best cost/service available.
You should find an internet service provider you feel comfortable working with. Good after sales service is very valuable and it is worth looking into this before choosing an ISP. (eg look into what level of telephone support / online support is available, as well as the reputation of ISP for customer service etc / reliability etc)


Normally there will be a section called 'domain name registration' (or similar) where you can enter your chosen domain name to see if it is currently available or if someone else has already registered it.

You should choose a domain name that is relevant to you, and potentially one which is also quite short and easy to remember.

Various domain name endings exist for you to choose from. Some are more expensive than others.


If the domain name you want is available, the cost of registration can be from around £5 to £25 for one to two years. You can register for longer than this if you prefer and the longer the registration period, the greater the cost.

Just before the registration period is up, you can reregister if you still want to make use of your domain name.
(It is a good idea to put a reminder in your calendar so you do not forget to reregister athough many companies will send a reminder to your email address.)

Most ISPs take payment online by credit/debit card and some also do so by telephone.

Please be aware that when you register domain names your registration details are stored in the WhoIs database. This database can be accessed by anyone and your personal contact details used to register may be available to the public and subject to potential abuse! Some ISPs now take steps to ensure that your details are hidden (sometimes at extra cost) but this is by no means guaranteed.


After you register your domain name you normally receive an email containing the following -

• A receipt for payment which you should keep and print for your own records
• A web link to an area within the ISP's website
• A username
• A password

If you click on the web link and enter your username and password you will be able to access your control panel. This gives access to different aspects of your domain name and lets you enter various different settings.

You may find that although your control panel is activated shortly after your domain name is registered, if you entered 'www.yourdomainname.com' into a browser immediately after registration, it is possible that nothing would appear in the browser until up to about 3 days afterwards. (However generally the process is quicker than this.)



Web Redirection

Before you purchase / register a domain name you should check the ISP's website (or contact the ISP by email or telephone directly) to check that they can provide 'web redirection.'

Web redirection means that when someone types www.yourdomainname.com into a browser they are automatically connected to web pages hosted on another server elsewhere.

Sometimes there is an extra charge for this service so it is definitely worth checking into this BEFORE you register and pay for your domain name!

The address of the page you need to connect to is generally the first one created in Weebly.
eg http://graysschoolofart.weebly.com/

Having made enquiries about web redirection and subsequently registered your domain name, if you visit the link you sent to you by your ISP you should be able to enter your username / password and access your control panel.

Once here you should be able to enter your Google domain name (eg http://graysschoolofart.weebly.com/) in the appropriate area. This is normally available under a heading like 'web redirection' / 'web forwarding' / 'web pointing' or similar, depending on which ISP your domain name is registered with.

Having done this, when someone enters your domain name (eg www.yourdomainname.com) into a browser, they should automatically see your Google Pages.

Domain name registration and web redirection should not affect your ability to update/add to the site you have created in Google Pages so you can continue to add to and develop your site after you register your domain name.


Other Free Web Design Sites / Exhibition Spaces





Example of a Gray’s Student Site on flickr


Back to the Teaching Support content page >>