Website Tutorial Using Yola

The annual Teen Biotech Challenge is a product of the BioTech SYSTEM under the Directorship of Dr. Denneal Jamison-McClung. Signing Up For A Website To begin using Yola, you must first sign up for a free account at: http://www.yola.com/.

Just fill out the required fields and voila! You are now a Yola member.

Now that you’ve become an elitist, follow the steps below to get started on your Teen Biotech Challenge award winning website. Be prepared for all the fanfare, website groupies and biotech bunnies or rabbits that will be knocking down your door to get at such a talented techie!!

Website Tutorial 2

Getting Started Okay, let’s jump in - both feet first!

IMPORTANT: Once you are finished with your website, you will be giving the

BioTech SYSTEM program manager your login and password information and the site then becomes the property of the Teen Biotech Challenge. If there are images, text or other webpage component that you’d like to use in future, please save them in local files. All passwords will be changed and thus the ability to make further adjustments to the websites. Winning webpages will be published on the Teen Biotech Challenge website (http:///teenbiotechchallenge.ucdavis.edu). By entering this contest, you give consent to turn over your website to the BioTech SYSTEM and acknowledge that it may be published along with your name and school affiliation. The content of your website may not include explicit or offensive language, images or multimedia elements. Please do not include any personal information such as phone number, email addresses and personal images. Provide a name for your website where the field asks: “Enter Your Business Name” then choose “Other” for Website Category. Later, you will add pages to the website for the other required sections: Biotech Innovators, Social, Political & Economic Impact, Ethical & Legal Issues, and Related Links & Project References. Additional pages may be added, if needed.

Website Tutorial 3

Now that you’ve entered a name, the following dialogue box opens up. Select “Start editing now” to start the web design process. After you do so, you will see something similar to this:

IMPORTANT: First select the green “Publish to the web” button bar. This is something you need to do regularly, so make it a habit!

Website Tutorial 4

Next, choose a website name that relates to your chosen topic in one of the seven TBC focus areas: Agricultural Biotechnology; Biofuels & Bioenergy; Bioengineering & Nanotechnology; Biomanufacturing; Genetic Testing & Forensics; Genomics & Synthetic Biology; or Regenerative Medicine. For example, a student working on a TBC website in the Agricultural Biotechnology focus area might name their website “AgBiotech4FoodFiberFuel” or “YummyBTCorn”. In other words, choose a name that will reflect the content of your website. When you publish your site to the web, you need to see if someone else has the same domain name. Enter your site name under “Get a free Yola subdomain:” and see if it’s available. If it isn’t, then click on the “Next” button to proceed with designing, otherwise, choose a different title. Notice that there are Site Builder Tips throughout the building of your website. Thanks Yola! After reading the introductory message and builder tips, go ahead and close the dialogue box.

Website Tutorial 5

The next dialogue box that pops up after you have a website domain name is important for the people who run the contest. You will need to write down your web address and give to your teacher so that s/he can provide us with the site url for judging purposes.

After you’ve copied the site address, close the dialogue box and now get ready to start with designing your Rembrandt! To begin, determine what layout you’d like to have for your main page. To start the process, click on the “Layout” drop down menu and start experimenting with the different styles.

Website Tutorial 6

After you’ve chosen your layout, you should see some items on the bottom of your page that look similar to this:

These are called “Widgets” and you will be using them for the rest of the design process. If you double-click on these widgets, you can see that you’re able to change the margins, upload new images and do a lot of other things quickly.

However, we will mostly be using the menu located directly to the right of your web layout.

Website Tutorial 7

Notice that by double-clicking on any of the icons, you can access text and photo tools and upload all the pictures that you’ll be using in the creation of your biotech website. Double-clicking on any of the areas of your webpage will enable you to change the banner photo, heading title, and content for your headings.

Website Tutorial 8

Changing Your Style Let’s say you’re a visionary but need to see something first to get ideas. No problem, with Yola, you can change your layout style and select from one of the free templates that they offer. Simply select the “Style” dropdown menu and select “Change Style”. Notice that you can click“ Free Styles” from the left side to see the formats that are available to you.

Go ahead and make the change or keep the one that you’ve already started, the controls are in your hands! Adding Pages

Using the “Page” tab at the top of your homepage, you can choose “Add New Page” from the drop down menu. This can also be done by selecting the “Pages” tab at the top of the homepage . Now, add the required site pages, starting with “Biotech Innovators”. Notice that the heading displayed at the top of each page will default to the website title, which you may want to edit. I decided to change the heading on each page to correlate with the “Name” of the page. The “Switch Grass Can Fuel America” page heading

was changed to “Biotech Innovators”.

Website Tutorial 9

Click “OK” when finished with the new page set up. You should see the change reflected in the new page’s top menu . Add the rest of your pages using the “Page:” menu for the additional required pages (Social, Political & Economic Impact, Ethical & Legal Issues, and Related Links & Project References). DON’T LET THIS HAPPEN TO YOU! Publish your site NOW and Constantly!

Website Tutorial 10

Page Designing When you want to access your different pages, simply use the “Page:” drop down menu to select the one you want. Remember, your main page is called the “Index”, and it is important to keep that name. Once you have created your pages, you can now get creative by adding designs for each of them using the widget tools. Widgets Yola offers over a myriad of widgets that you may “drag and drop” into the content areas of each page on your website. Check out the panel on the far right hand side of the screen. You may add a text box, image box, multimedia box, etc… Have fun! Adding Content Organize and store text, image files and multimedia elements that you will use on your website using the “Site” dropdown menu and choose “File Manager…”. Yola allows up to 1024 MB of free data storage.

Website Tutorial 11

Text Editing Make sure that your text is an appropriate size/style/color for optimal readability. To change the text from the default (recommended), use the buttons at the top of the page. They appear whenever you are clicked inside a banner or text box.

Let’s say I want to change the color of the font to red. All I need to do is highlight the text that I want to change and then choose a color on the palette If I point to a red square, my selected text could look like this:

You can change the color of regular text but not always the text that is in the banner heading, as in the case of the template I choose. Some templates give more than one palette to select from. Changing the margins of the text may be accomplished by clicking on “Margin” within the text box. Think of the margins as padding within the box. How much padding, if any, do you want from the sides of the textbox? Adding text indentations, bullet lists, etc… may be done using the appropriate buttons on the text editing toolbar.

Website Tutorial 12

Save Your Work It is a good idea to frequently save your work. You will find the “Save” button on the

blue tabular menu next to “Preview” . The “Preview” button allows you to see your website as it will look in any browser (Internet Explorer, Firefox, etc.)

Don’t forget to publish your site regularly as well! Making Hyperlinks Putting a link in your website is easy. Highlight what you want to use as a link using the

link icon on the formatting toolbar.

The following dialog box will pop up:

You are given four choices to link to, one of your webpages, an external website, an email address or a file. For an external website, choose:

If you link to an external website, make sure to give the entire address starting with http://

Website Tutorial 13

This and That (and maybe the other) Under the “Page” drown down menu, you can access the “Page Manager” which comes in handy when you want to re-order your pages for navigation.

Apply to all pages:

You can choose to apply the same background to all of the pages on your site instead of changing the background on each page individually:

1. Click on the "Style" button on the main menu. Select "Edit Background" and then "Apply to All Pages".

2. A dialog box will open asking you to confirm whether you would like to apply the change to all the pages on your site, click on "Apply and Save" if you would like to go ahead.

Yola’s website tutorial can be found here: http://www.yola.com/tutorials/article/Adding-title-description-and-keywords-tags-1285944418844/Promotion_SEO_Traffic_and_Advertising

Website Tutorial 14

Your Fans Await You You did it! Great job! Do you hear anyone at your door? Well, maybe it’s a bit too soon for the fans to be coming just yet.

Have fun building your website! If you run into problems with your site, you can email Marianne Hunter at mahunter@ucdavis.edu. Please be as thorough as possible explaining your situation and include “TBC” in your subject line of the email so that it will be answered quickly.