Week 1 – Introduction, Websites and Project Management

Assignment:

In order to document the weekly tasks I created a blog through the university of Brighton’s system, Edublogs, which is based on WordPress. It’s a relatively simple to use method of building a website; with an abundance of guides as to it’s use. This made it an ideal platform to host my work. I wanted every week’s projects to be consolidated onto a single page that can be accessed through a menu, as opposed to  a collection of posts that are linked together via tags or categories.

Choosing the Theme

The entire blog needs to be built around a chosen “theme” this is a pre-set layout that lets you socket widgets; which will appear in their pre-set places according to which theme you’ve chosen. Edublogs comes with 242 of these to chose from so I spent some time looking through them; choosing 4 that I liked. Aaron, Aldehyde, Auto Focus and Clearly.

Navigation

Scroll over the name of the blog and click the “Themes” tab

This will take you to the Themes page, where you can browse and select themes from the library. You can preview how each on will look with your website using the “Live Preview” option!

Clicking the “Customise” button will allow you to alter the details of the theme. Such as Font, colour and and background.

I spent some time playing around with each one of them and had settled on AutoFocus for a while. Unfortunately that theme had some problems when it came to setting up the content of the website. For example, the menu’s would only appear at the bottom of the page and wouldn’t be in line with the rest of the footer widgets. Additionally, the main draw of the theme, it’s 4 large navigation buttons which show the latest posts would ONLY work with posts; I needed them to navigate to the pages, so the theme was unsuitable for my needs.

 

Afterwards I chose Aaron, because of the large banner, simple layout and navigation bars that could be linked directly to the separate pages.

Populating the Website

Menu’s – The Backbone of the Website. 

I started to work on the navigation of the website, created via a series of Menus. Originally, the site had 5 different menus; Weekly Tasks, CAD Work, Visual Portfolio, Sketching and About Me! This was, extremely cluttered and looked especially awful on the Auto Focus theme and several of the Menu’s only had one page in them, with the same name.

I then consolidated all the Pages into just two Menus; Weekly Tasks and CAD work.

 

Navigation to the Menu’s 

Under the same “Appearance” tab, there will be a “Menus” tab. Clicking on that will bring you to the Menu section.Clicking “Create New menu” will allow you to begin creating the Menus.

Pages – The Content of the Website. 

Now that the Menu’s have been created. I needed to start filling them! As said before, I wanted every weekly project to have its own separate page tied to a menu. Creating a page is simple enough,

Navigation

Scroll over the “New” button and click the “Page” drop down.

This will take you to a blank page where you can start populating page.
Pages can be updated anytime by pressing “Update”

I created a page for each of the Projects I’d completed thus far, and then added a few more for things like “Sketching” and the different CAD Projects.

Tags and Categories

Tags and Categories are a tool used for organising and navigating the website more easily. Although my blog doesn’t make use of them as it’s based around menus and pages, this section will still explain how they work.

Any post created can be given a category, then all posts in that category can be accessed by clicking on the category link on the home page.

Importing Images

Image Formatting

Not all the pictures and screenshots needed to populate a blog will be the correct size, or fit within the pre-set dimensions of Small/Medium/Large. Thankfully, it’s possible and very easy to re-format the picture by gong: (Click the image)>Edit>Edit Original.

This will bring up the box shown below and allows you to edit the size and the aspect ratio of the image.

Video Embedding

On the “About Me” section of the blog, you can see I’ve embedded a song on the about me page. Embedding an image is done by taking the embed code normally found under the “Share” tab of Youtube Video’s and then pasting into the “Insert Embed Code” tab of “Add Media”

This embeds the video on the page rather than just placing a link to it.

Further Reading/Referencing

Edublogs User Guide

Image Formatting Guide – Squarespace 

 

 

 

 

 

Print Friendly, PDF & Email