Crea%ng

a Website E-por1olio with Weebly

Instruc%ons
To start, click on the approved website development resource link h7p://www.weebly.com/.
This link will take you to the Weebly home page.

Image: Weebly Homepage (www.weebly.com)

Click on the “Create Your Website” bu7on to begin registering and building your website. From
there you will be prompted to sign up (register) an account with Weebly. Enter all required
fields on the sign up page and press con%nue.

Next you will select the usage for your website. Select the “I want a personal website” and click
on the “try weebly website” bu7on.

Now select a theme for your website. To create an idenMcal porNolio of this project, select the
Muse technologies theme and then click the “Start Edi%ng” bu7on at the top right of your
screen.

You will now choose a website url for your porNolio by selecMng your domain name. Type in
your desired url into the provided text box and select “search”. Weebly will check to see if your
name is available and will provide paid and free opMons for you to use. For this project I decided
to use the free opMon, the Subdomain, with Weebly’s branding.

Click on the domain name of your choice and select “choose”

You should see a compleMon announcement. Click done to conMnue building the website.

You may be prompted to read about applicaMon updates. Click “reload editor” to conMnue.

Now that you have secured a web domain, it is Mme to plan your website. Mapping out the
content and structure of your website before developing the website can be helpful in the
organizing process.

Fill in the worksheet below:

Website Name: Learning PorNolio

Domain: h7ps://wgulearntechnow.weebly.com/
Theme name: Muse Technologies
Total Pages: 4
Home Page: Main

Page 1 : Graphics
Page 2: MulMmedia
Page 3: Summary

Building Webpages
Main Page
With selecMng a theme/ website template on Weebly, your colors, backgrounds, and fonts are
packaged together and preselected. We will modify the template to fit our website’s needs for
task 1.

In editor, under the Build tabs, you will see header text that should read “my site”. Click on the
text box to add your web site name.

ConMnue to edit the text content of the template by replacing it with your Mtles, headings and
subheadings.

For this main page, I added my name, school, and project type into the large heading box. In the
next Header 2, I added the course name. For the text, I generated web-filler text using lorem
ipsum by enter “=lorem()” into Microso^ Word. Copy and paste the filler text into the paragraph
text through the website for this task. Click on the paragraph text boxes to edit, remove and
add text.

The next secMon of the main page includes four clustered text boxes with headers. Change the
headers to the names of your porNolio pages and change the paragraph to lorem ipsum.

Following the for paragraph boxes is a quote box. Delete the quote box by clicking on it and
clicking the x in the top right corner of the box.

Add an Image

Replace the quote box with an image but selecMng the image element from the elements menu
on the le^ side of the screen. Drag and drop the image element onto your page below the four
paragraph boxes.

To add an image, double click on the new image box within your page and click search. Type in
terms that related to the image you want (school, laptop, website for example) and click search.
Select an appropriate image and click enter. Resize your image by selecMng the image box at
dragging the image size from the bo7om right corner of the box.

Change the last header by clicking on the header box. Click on the text exisMng test to add
Western Governors University (delete the exisMng text).
Click on the paragraph text below, select the exisMng text and delete it. Replace it with lorem
ipsum text.

Pages

Page 1
At the top of the edi%ng menu, click on pages. You should see four pages listed. We will revise
the pages to fit the needs of this task.

Double click on the Services page from the le^ menu bar.
• Change the page name to your first page name (Graphics).
• Change the page header (header 1) to Graphics by clicking on the top text box, deleMng
the exisMng text and typing in Graphics.
• In the ediMng menu at the top of the screen, click on the Build tab.
• Back to the page, select the paragraph text box under the page header 1 (Graphics) and
delete the content. Replace the text with lorem ipsum text.
• Delete the three paragraph text boxes and header boxes by clicking on each box and
selecMng the x at the top right corner of the box. The website will ask if you would like to
delete the element. Click delete to complete.
• Delete the addiMonal spacer by following the delete steps above.
• ConMnue to delete all text boxes, headers and images, including addiMon space boxes.
• Add three image elements to the page.

Page 2
Double click on the Pages tab in the ediMng menu. In the le^ menu, click on the arrow to return
to the pages list. Click on the + add icon at the top of the pages menu.
• Add a standard page and replace the page name with your Page 2 name (MulMmedia)
• Add your page name to the heading 1 element box.
• Click on the build tab in the top ediMng menu.
• Select the image icon from the le^ elements menu. Drag and drop the element into the
page.
• Click on the added element to highlight the box. Select the do7ed box on the top-center
of the image box to drag it down to the bo7om half of the page (with the gray
background.
• Double click on the Pages tab in the ediMng menu. In the le^ menu, click done to finish
add your new page.

Page 3
In the Pages menu, select the contact page by doubling clicking the name. Click Delete to delete
this page from your site. A message box will appear – click Delete to compete the task.
Returning to the pages menu, select the mulMmedia page and drag it upward in the menu to
correct the page order of your website’s navigaMon menu.
Double click on the About page to edit. Delete the page by following the instrucMons above
(deleMng the contact menu).

• Click on the Graphics page from the pages menu.

• Select copy. This will create a new page idenMcal to the graphics page.
• Edit the copied Graphics page by changing the page name, and page content
o Double click on the copied page.
o Change the page name to Summary.
o Change the page header (1) to Summary.
o Delete the three image boxes.
o Click on the arrow in the pages menu to return to the page lisMng.

Adding Hyperlinked Text and Page Naviga%on

• Double click on the Home page in the Pages menu list.
• Scroll down to the four text and header boxes named a^er the website’s pages.
• To link the heading to the webpage, click on each heading (Mtle), select the link icon,
select “standard page” from the link menu, and elect the appropriate page.
• You may have a duplicate heading. If this happens, click on the Mtle text with your mouse
to see which heading is hyperlinked. A blue box will show when you click on the
hyperlinked text.
• Complete these steps for the three website page heading on your main page. It is ok not
to hyperlink the Mtle for the homepage.

External link

• Scroll down to the last header Mtled Western Governors University and click on the
heading and select the text in the box.
• Click on the hyperlink icon (chain links) and select website URL from the link menu
• Add the www.wgu.edu url and click on the page to exit the link menu.

Publish Your Website

At the top right corner of your ediMng page, click on the publish bu7on to make your content
public and available for internet views.

Once your website is published, exit the ediMng site by clicking the x at the top le^ corner of the
page. You can test your link in a new browser page and check the website’s links, and page
layouts before sharing your link.