Need to return to my electronic portfolio on Weebly? Click here.
Interested in creating a classroom website? Consider Weebley. Here’s what you need to know…
Introduction
In my Educational Technology course works, the Technology Design Portfolio Task 1 asks students to create the shell of a website to demonstrate technological abilities associated with the task. In time, my website will become a real resource for prospective employers to review to see a variety of products that exemplify of my technology skills. Please access my site by visiting http://mrsstephkirk.weebly.com/.
Creating a Website
In looking to create your own website, the first step is to identify the purpose of the page. For me, I wanted to create a page that could serve as an electronic portfolio of ways I have personally used technology in my English III American Literature class. Because this is intended for prospective employers, the examples of materials included in the page will come from a variety of places throughout the curriculum I have been creating with my students.
Once identifying the specific purpose, the next step is selecting a website development tool. Though I have a paid personal blog on WordPress, I decided to use the free version of Weebly to create a website that would double as an e-portfolio to demonstrate my technological skills because it is the site recommended by local districts in my area. Additionally, Weebly is incredibly easy to work with as it operates by a simplistic “drag and drop” design element for adding content. While Weebly does have a Help Center to give additional support, I decided to skip the hour-long video and play around to learn how to use the site on my own.
Setting the Stages
Once creating an account in Weebly, the basics will be set up for you, and a prompt will direct your path through creating a website theme. In selecting a theme, I scanned for themes that were free, visually appealing, and available for computer and mobile devices. This was important because in an interview, the panel members are more likely to have a mobile device than an actual computer to access my page. After selecting the theme, the prompt will direct you to choose the website domain. As you enter your selected text, a green check will show that your domain is available whereas a red letter x will show you that you cannot use a domain. I wanted to select something that would relate to my purpose, so I selected “MrsStephKirk”. At this point, the stage is set and you are ready to move into building your site by filling the home page and adding and desired additional pages.
Once in the editing phase of your website creation, Weebly divides the options into manageable chucks of Build, Design, Pages, Store, Settings, and Help. This section will help guide users through creation of the site before selecting Publish, which is highlighted in orange on the right of the page.
Building a Website
Under the Build option, your page will preview on the right while a menu of options is available on the left. Weebly is set to automatically create a table of your design elements, but you may select any element, drag it onto your previewed page, and drop it into the desired position. Options for the elements include text, images, maps, embed codes, structural elements such as spacers and dividers, and media elements.
In building my page, I started out with the default page of an image on the right with a title and small text on the left. To change the text, click on the text field and start typing. It is that easy. For images, I selected an image of my own classroom. To add my own image, I clicked the cog representing setting and uploaded my image from my computer. Next, I wanted to be able to add images to link to the pages required as a part of TDT Task 1. For this, I dragged over three images and a text field beneath each image. For the images that will act as the links to the additional pages, I created a graphic using WeeMe on the iPad and removing the image background in powerpoint. I added the text of the desired linking page and saved the slides as images, uploading them to the page by following the prompts. Next, I added a spacer from the drag and drop menu on the left and created a title for Additional Links. Under this title, I knew I wanted to place a link to my personal blog and to my personal Teachers Pay Teachers store. Therefore, I dragged over to image placeholders and a text section beneath each image so that I could describe what the links would go to. For these images, I simply visited the pages and created a screenshot to upload. After creating this shell for the main site page, I needed to create the pages that would serve as the links.
Adding Pages
With the basic elements on the first page, I was ready to add additional pages. To do this, I selected the Pages heading on the top options menu bar. The default on Weebly sets you up with three pages, but you may have a total of five on the free version. By clicking the page titles on the left, I was able to customize my pages as desired. For my pages, I selected Welcome, About Stephanie, Graphics, Multi-Media, Resources and Files, and Contact. In setting up the page, I clicked the title of the page on the left and made adjustments to the page by using the prompts on the right. The first change I made was to set the basic page headers to landing page. Next, I decided whether or not to make the page option show up in the site navigation. In looking on the main page, anything over three didn’t make the final cut on the home page and defaulted into a drop-down menu labeled as more. Rather than leave the more option, I wanted a less cluttered visual and decided to hide About Stephanie and Contact from the navigation options. Those links will be on the page, but not listed in the menu itself. Next, I clicked Advanced Options to see what else I could do with my pages. Since Task 1 is to create a shell, I decided to select the option to hide all pages from search engines. With the shell set up, I wanted to sculpt the outline of the pages before submission. To do this, I clicked the page on which I wanted to work, moving back to the Build option on the top menu bar. At this point, I followed the drag and drop steps I followed when building the site until I had each of the desired elements in a position I found visually appealing on each of my pages.
Designing the Details
Once my pages were created, I wanted to explore the Design menu option from the top menu bar. This selection area allows changing fonts, including font sizes and colors. Just as I read from left to right and top to bottom, I started working on my individual pages from left to right and top to bottom. This part was easy: the scaffold was there, so I clicked around the website elements and identified the text style, size, and color I liked best when looking at the preview on the right side of the page. Once I moved through each page, I clicked save on the bottom right. This saves all changes made on the page and gets the page ready to publish when ready. However, there is one more step before publishing the page.
Applying Links
After creating the pages and adjusting the design elements, I needed to set up my links where I wanted them to be. To do this, I started with the default link settings of connecting to external URLs because I knew that would be easiest. By clicking on the pictures for the additional links, another box opened with options for the image. I selected the option reading link, which opened a variety of linking options. To add the link to the external URLs, I selected external site, the default setting, and typed in the address to my personal blog and to my TPT store as directed by the image selected. Next, I moved into adding the links to the pages within this site. For this, the steps are similar except that you must change the default from external URL to Standard Page. Once selecting Standard Page, a drop down menu will populate with the pages you have created. To add the link, I only needed to verify the desired page for each image and select the page I wanted the image to link to.
Finalizing the Page
Having the feeling that my page was complete, I selected the orange publish option on the top right of the Weebly interface. This informed me that my page was live and gave me a link to view the page. As a final preview, I opened the link in a new tab and clicked around to make sure all links worked and that I liked the view of the final product. Fortunately, everything worked as I expected and I was pleased with the published site. As a final check, I emailed myself the link, logged out of Weebly, and examined the page again. Success.
Updating and Editing
At this point, the shell of the page is created enough to submit my Task 1. When I am ready to add elements, I will simply log into my Weebly account and view the page on the right with the editing tool menu on the left. Depending on what I want to add, I will follow the same steps I have outlined as I created this shell. Hopefully, this page will be a living document of my technological skills as they advance during my studies and help me find future employment in technology-rich schools.
Kirk's Corner 