Get Adobe Flash player

Building a Weebly Site

This assignment's purpose is to act as a tutorial for students to get familiar with the CMS website called "Weebly". Everyone will create an identical website by following the steps on this page. The website we are making will be an informational site about MHS's Multimedia class.


 PART 1Creating a Weebly account, choosing a theme, and setting up the main navigation pages

  1. Make a new folder in your Multimedia folder and name it "Website Design"
  2. Go to https://www.weebly.com/
  3. Click "Sign Up" in the upper right-hand corner of the screen.
  4. Enter your first and last name, school email address, and create a password. Then click the blue "Sign Up" button.
  5. Create a Word document within your "Website Design" folder and name the document "Weebly Account"
  6. Put your login information (email and password) for your Weebly account in this document.
  7. If the Weebly website asks you if you want to sell online, click "Not Now".
  8. Select the theme called Muse Technologies by clicking on its image. It is under the Business category and looks like this:
  9. Click the blue button at the top right of the screen that says "Start Editing"
  10. On the "Choose Your Website Domain" popup window, select the the option that says "Use a Subdomain of Weebly.com"
  11. Now you need to type in what you want your website URL to be. Everyone will follow this naming convention:
    1. Type the first initial of your first name followed by your last name (all lowercase with NO SPACES). Then type a dash mark. Then type mhs followed by another dash mark. Then type tutorialsite.
    2. It should look something like this: adunfee-mhs-tutorialsite
  12. Click Continue in the upper right corner of the popup window.
  13. Now we are ready to make an informational website about our Multimedia class at MHS!
  14. First, let's change the names of our pages. Right now, they say Home, Services, About, and Contact. We can edit this by clicking the link at the very top of the page that says Pages.
  15. On the left-hand side of the screen, you can edit your pages. You can reorder the pages here by dragging and dropping and add new pages by clicking the plus icon. If you click on a specific page, you are then presented with more options such as re-naming the page, deleting the page, or creating a duplicate copy of the page.
  16. We will keep the first page as Home. We also want to keep the About page, but we want it to be the second page. Move the About page by clicking and dragging it so it appears just below the Home page.
  17. Now rename the Services page to instead be called Projects.
  18. Delete the page called Contact by clicking on the page and then clicking Delete. A window will pop up asking you if you are sure you want to delete this page. Confirm that you do actually want to delete the page by clicking Delete again.
  19. Now let's add a new page by clicking the plus icon and choosing Standard Page. Name this page Work Samples. Change the header type to be No Header. Then click Done.
  20. Your pages column should now look like this:
  21. Click the blue "Publish" button in the upper-right corner of the Weebly workspace to publish your work.
  22. The following window will appear. Click the orange "Continue" button.
  23. Your changes are now live. Click on the blue link to open your website and verify your changes.
  24. In your Web Design folder on Google Drive, make a document titled "Tutorial Site". In this document, copy and paste the link to your tutorial website.

 


 

PART 2: Customizing the theme

  1. Log back in to your Weebly account by going to https://www.weebly.com/ and clicking Log In in the upper right-hand corner of the screen. Enter your email address and password and then click the blue "Log In" button.
  2. You will be taken to your dashboard page. The dashboard is where you can access your account settings and manage all of the websites you have created through Weebly, among other things. We want to go back to the website we were working on before. Make sure that the "Muse TECHNOLOGIES" website is activated in your website selection menu and then click the white button that says "Edit Site".
  3. Before we get any further, let's change the name of our site to something that matches our website. It does not make sense to have our website named "Muse Technologies" anymore. To change the name of our site, click on the link at the very top of the page that says Settings.
  4. Under "Site Title", change the text to say MHS Multimedia Design and then click "Save".
  5. Now let's change the color scheme of our website. By originally choosing the Muse Technologies theme, we got a nice base template to begin working off of. The template came with navy blue as the default color. We are going to change the main color to be red to go along with our Morton themed website. Click Theme from the top menu on your screen.
  6. On the left-hand side of the screen, you will see different options you can edit to alter the colors and features of your Weebly template. You can toggle the color scheme to be light or dark, change the theme entirely (switching to a different base template instead of using the Muse Technologies one we originally decided upon), change font styles, and change how the main navigation and pages are setup.
    1. At the very bottom of the left-hand column, you will see a button that says "Edit HTML/CSS". Clicking on that button will allow you to edit the source code and make custom changes to the template and your website. We will revisit this later.
  7. We are going to change the color of our paragraph titles. On the left-hand side of the screen, click on "Change Fonts" and then click on "Paragraph Titles". Click the drop-down arrow next to the Color option. Choose the red color as shown in the image below. (Second row, sixth column). Alternatively, you can click on the arrow at the bottom of the color selector and it will expand the color picker tool. The color we have chosen has a hex value of #A82E2E. You can set the color by either choosing it from the colored squares, manually adjusting the color picker, or manually entering a hex value.
  8. Go back to the previous menu by clicking the left caret symbol (<) at the top of the sidebar next to the text that says "Change Font".
  9. Make sure you are on the Home page of the website. You can ensure this by clicking Home on the website navigation bar. Next we are going to change the color of the big navy blue banner. Let's make it a Morton grey color. But what color is that EXACTLY? We could guess. Or could find out for sure to make sure we have the exact color.
    1. We are going to find that exact color by bringing in a screenshot of the Morton district website into Photoshop, grabbing the color with the eye dropper tool, and copying its hex value.
    2. Visit the Morton district website by clicking here: http://www.morton709.org/home
    3. Take a screenshot of the webpage by using the Snipping Tool. Click on your start menu and type in snipping tool in the search bar. Select the Snipping Tool program from the start menu.
    4. With the Morton district website visible on your screen, click "New" from the Snipping Tool icon menu. Draw a box around the District 709 logo, specifically around the clay pot. After you draw a box around the area you want to "snip", the image is then copied onto your clipboard. You could save the image using the Snipping Tool menu options, but that is not necessary for what we are doing.
    5. Open Photoshop. Go to File > New and choose "Clipboard" from the Preset dropdown menu. Click OK. (Note: Photoshop will automatically take in the size of the image you have on your clipboard and create the canvas to be that exact size when you choose "Clipboard" as the page size.)
    6. Paste the image that you have copied onto your clipboard from previously using the Snipping Tool by going to Edit > Paste or by pressing ctrl+V on your keyboard.
    7. Use the eyedropper tool to sample the grey color from your image. Choose the grey color of the clay pot in the image - you may need to zoom in on this area before picking up the color. After your eye dropper has picked up the grey color, double click on the foreground color box in your toolbar.
    8. The color window will open and you should be able to view the hex value of the grey color. Copy that hex value by highlighting the text and pressing ctrl+C on your keyboard.
    9. Now we are ready to put the hex value of our grey color into our Weebly site.
  10. Go back to Weebly and click on the big navy blue banner (be careful to click on the banner itself, not the text box on top of it). Then click Edit Background.
  11. Click Change Color and then paste the hex value you copied from Photoshop by highlighting  the current hex value in the Weebly color picker and pressing ctrl+V on your keyboard. You can exit the color picker window by clicking anywhere outside of it.
  12. Change the text in the banner to say Multimedia Design is the best class at Morton. #realtalk
  13. Make the text that says #realtalk to be the red color we chose for the paragraph titles earlier. Highlight #realtalk and make the color the same red that we used before by clicking on the color selector icon from the font tool bar (see image below).
  14. Make the text that says Multimedia Design is the best class at Morton. the color #626262
  15. You can close out of Photoshop since we are done using it for now (there is no need to save the PSD file).
  16. Click the blue "Publish" button in the upper-right corner of the Weebly workspace to publish your work.
  17. Your changes are now live. Click on the blue link to open your website and verify your changes.

 


 

PART 3: Creating the "About" page

(You should now be relatively familiar with how the Weebly interface is set up, so screenshots are not included in this section as they shouldn't be needed at this point.)

  1. Log back in to your Weebly account by going to https://www.weebly.com/ and clicking Log In in the upper right-hand corner of the screen. Enter your email address and password and then click the blue "Log In" button.
  2. You will be taken to your dashboard page. Make sure that the "MHS Multimedia Design" website is activated in your website selection menu and then click the white button that says "Edit Site".
  3. Click on the "About" link on the website navigation bar.
  4. Delete all of the elements within the navy blue banner by hovering over the elements with your mouse. Click on the white X that appears in the corner of the element's bounding box. Then click delete.
  5. Find a picture (of your choice) that represents Morton High School and/or Multimedia Design on the internet. Try to find an image that will fit well within the banner area on the About page (notice that the space is much wider than it is tall). Save the image to your network drive.
  6. Click on the big navy blue banner and then click Edit Background.
  7. Collapse the "Color" dropdown by clicking the downward pointing caret symbol (v). Then choose the "Image" option and click Add Image.
  8. Click the Upload Image button and find the photo you saved to your network drive. The image should then be automatically placed into the banner area.
  9. You can edit the appearance of the image by adjusting the settings that appear in a tool bar at the bottom of your screen. You can also move the image around by clicking and dragging on the image.
  10. Once you are happy with your banner image, click the green Save button in the upper-right corner of the screen.
  11. Click on the textbox that says "Established in 1976" with your cursor. Change the text to say "What is Multimedia?" Make sure the text is still the red color.
  12. Visit the MHS Graphics Introduction to Multimedia webpage here: http://www.mhsgraphics.com/index.php/multimedia/introduction-to-multimedia
  13. Copy the first paragraph of text that begins with "Multimedia: the combination of..." and ends with "...to how it actually works."
  14. Go back to Weebly and paste this text into the textbox below the title you just edited that now says "What is Multimedia?"
  15. Now click on the textbox that says "Our Goal" and change it to say "Multimedia Design at MHS"
  16. Go back to the MHS Graphics Introduction to Multimedia Design webpage and copy the second paragraph that begins with "In this course..." and ends with "...to said target audience."
  17. Paste this text into the textbox below the title you just edited that now says "Multimedia Design at MHS"
  18. Delete the entire "Our Team" section
  19. Click on the textbox that says "We're Here for You 24/7" with your cursor. Change the text to say "Course Objectives"
  20. Go back one more time to the MHS Graphics Introduction to Multimedia Design webpage and copy the list of objectives.
  21. Change the list to be numbered instead of bulleted by using the text toolbar.
  22. Drag and drop the Map feature from the grey toolbox area on the left-hand side of the screen. Place the map below the objectives textbox.
  23. Edit the map so it shows Morton High School by entering MHS's address in the textbox
  24. Change the height to be 350. Leave the width at "auto".
  25. Leave the rest of the settings as the default values.
  26. Drag and drop the Title feature from the grey toolbox area on the left-hand side of the screen. Place it above the map, but below the objectives section.
  27. Edit the title to say "Where Can You Find Us?"
  28. Let's add some space between the objectives section and the map section. Right now, the sections seem to be a little bit too close for liking so we are going to add some "breathing" room in between them. Drag and drop the Spacer feature from the grey toolbox area on the left-hand side of the screen. Place it below the objectives section but above the map title section.
  29. Click the blue "Publish" button in the upper-right corner of the Weebly workspace to publish your work.
  30. Your changes are now live. Click on the blue link to open your website and verify your changes.

 


 

PART 4: Cleaning up the "Home" page & Creating the "Projects" page

  1. Log back in to your Weebly account by going to https://www.weebly.com/ and clicking Log In in the upper right-hand corner of the screen. Enter your email address and password and then click the blue "Log In" button.
  2. You will be taken to your dashboard page. Make sure that the "MHS Multimedia Design" website is activated in your website selection menu and then click the white button that says "Edit Site".
  3. On your website's home page, click the textbox that says "Welcome to Muse Technologies" and change it to say "Welcome to MHS's Multimedia Design Class"
  4. Edit the textbox right beneath the title you just edited to say "Welcome to MHS's Multimedia Design class website. Get an inside look into our class by checking out the pages on this website!"
  5. Delete the rest of the elements on the homepage.
  6. Remove the banner from the Projects page by clicking on the navy blue background of the banner and selecting "Delete". Confirm that you want to delete the banner section.
  7. Visit Ms. Dunfee's "Projects" page by clicking here: http://adunfee-mhs-tutorialsite.weebly.com/projects.html
  8. Your goal is to recreate Ms. Dunfee's "Projects" page by using your problem solving skills in figuring out how to do so without direct instructions. You may need to use some of the drag and drop features from the grey toolbox area on the left-hand side of the screen.
  9. Make sure that the links behave exactly how they do on Ms. Dunfee's page. (Some links should open in a new tab.)
  10. Make sure the "project idea" form is duplicated exactly as you see on Ms. Dunfee's page. (Notice that not all fields are required. Required fields are denoted with a red asterisk.)
  11. Click the blue "Publish" button in the upper-right corner of the Weebly workspace to publish your work.
  12. Your changes are now live. Click on the blue link to open your website and verify your changes.

 


 

Part 5:  Creating the "Work Samples" page

In creating the "Work Samples" page, students will learn how to implement "apps" (also referred to as add-ons, modules, or plug-ins).

  1. Log back in to your Weebly account by going to https://www.weebly.com/ and clicking Log In in the upper right-hand corner of the screen. Enter your email address and password and then click the blue "Log In" button.
  2. You will be taken to your dashboard page. Make sure that the "MHS Multimedia Design" website is activated in your website selection menu and then click the white button that says "Edit Site".
  3. Click into your "Work Samples" page. We are going to put images of  some example projects on this page.
  4. We could use the features from the grey toolbox area on the left-hand side of the screen (like the image, gallery, and slider features), but let's make something more custom. We can find an image gallery plug-in or module through what Weebly calls Apps. Click "Apps" from the top menu on your screen in the Weebly workspace.
  5. In the Apps workspace, you will see different plug-ins you can download categorized in various ways. Some of these apps are free while others require you to purchase them. I can browse by clicking into various sections or I can specifically search for something by using the search bar at the top of the page.
  6.  Find and select the app called Photo Overlay. This plug-in lets us display images on our website that have the ability to be expanded to show a bigger version of the images when you click on them. This is also commonly referred to as a lightbox.
  7. Click on the blue Add button on the right-hand side of the screen.
  8. Select MHS Multimedia Design as the website you want to add it to and click "Continue". Allow the app access to your site and click "Connect".
  9. You should be automatically taken back to your website editor. At the very bottom of the grey toolbox area on the left-hand side of the screen you will see apps you have installed. There are already a few apps installed here because they came with the MUSE TECHNOLOGIES template that we chose at the beginning of this assignment. (You can manage your apps and their settings by choosing the blue text that says "Manage".)
  10. Click back onto your Work Samples page by selecting it from your website's menu.
  11. Drag and drop the Photo Overlay feature you just downloaded from the grey toolbox area on the left-hand side of the screen.
  12. You can now change out and add photos to the Photo Overlay module by clicking on the placed module on your website and using the Photo Overlay options box. You can adjust the size of the overall image viewer, disable "autoscale" (this automatically adjusts the size of the photo based upon the size of your screen), or view a tutorial.
  13. If you click on the Edit button in the Photo Overlay options box, you are presented with several different editing tools.
  14. Feel free to explore the options here and add images of your past assignments, but for the purpose of this tutorial site you are not required to make any changes to the Photo Overlay plug-in at this time. Leaving the module to be the default image of the lion is fine.
  15. Click the blue "Publish" button in the upper-right corner of the Weebly workspace to publish your work.
  16. Your changes are now live. Click on the blue link to open your website and verify your changes. 

 


  

Part 6:  Submit your work

  1. In your Web Design folder on Google Drive, make a document titled "Tutorial Site". In this document, copy and paste the link to your tutorial website.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Go to your About page by clicking on it in your website navigation menu.