Archive for the ‘Online Video Tutorials’ Category

Getting Started in Website Design

September 18, 2011

Hello Everyone,

If you have ever thought about creating your own website, but didn’t know where to begin, I have created some online video tutorials to help you build your first website.

I have “unofficially” identified six levels to Web Design & Development. These include, but are not limited to, the following:

6 – Content Management Systems (Joomla, Drupal, Plone, etc.)
5 – Interactive Design & Integration (Adobe Flash & Microsoft Expression)
4 – Template Design & Modification
3 – Visual Design (Extensive knowledge of Photoshop and Code is extremely essential.)
2 – Code (HTML/HTML5, CSS3, XML/RSS, JavaScript, JQuery, PHP, etc.)
1 – WYSIWYG Editors (a.k.a. “Web Editors”, “Text Editors”, etc.)

Now, I have creating professional websites for more than a decade and I am a coder (HTML, CSS, XML, RSS, JavaScript, etc.) but I am also trained to use web editors such as Dreamweaver. I’ve used it [Dreamweaver] way back when it was just version 3, no, not CS3, but simply 3 and Macromedia was the company that created the software. And although Dreamweaver is the king of the web design world, its price tag maybe out of the financial reach of many people. Even for students who have academic discounts – it can still be costly.

But, there are alternatives! KompoZer and Amaya are both Free Open Source Software for PC, Mac and Linux.

I’m currently conducting Graduate-level courses which require students to design, create and upload their own creations to the campus servers. Some students are familiar with Dreamweaver and have been encouraged to continue to utilize the multitude of features and flexibility this software has. However, many more students have never experienced the art of designing and creating their own sites.

Mind you, these students are not Comp Sci Majors. So, this experience should be as stress-free as possible. I’m having the majority of them begin at level-one and work with WYSIWYG Editors. For those who gravitate towards more challenging projects, I’ll introduce them to some level-two coding. As well as for those who possess some Graphic Design chops, we’ll touch on a bit of both level-two and level-three.

To begin, students can download either (or both) Amaya and KompoZer. As I stated earlier, I have created some online video tutorials to take them (or you) step-by-step in creating a basic website using a “cookie-cutter method”. Why, you ask? Simply put, Graduate-level students have a lot on their plate. Projects and assignments will usually have deadlines around the same timeframe as everything else – so, this method ensures that the website is done as quickly and is fully functional in a short period of time. This method is not just for students, but for anyone who is looking to design and create their own site for whatever reason.

So onward to designing a website.

1.0 – Make a list of items you want to have on your website. Its good practice to group like items into categories which will later on become the main links of your site.

2.0 – Once the list is completed, create a “storyboard”. This “storyboard” will serve as a “blue print” to create your site. It may look like a flowchart, a wireframe, a schematic, etc. The purpose is to visualize how your site is going to connect one web page to another.

This website can help you create you “blue print”: Love Charts – http://www.lovelycharts.com/

2.1 – Following the “storyboard”, you’ll want to sketch out at least two of your web pages. You don’t need to have drafting skills to design these two pages, but this is another way to help solidify your vision on how your finalized website will look once its completed.

3.0 – Now, you’ll need to download a web editor. Both amaya and KompoZer are free (and legal) to download. Adobe Dreamweaver is available for a 30-day free trail. Believe it or not, Microsoft Frontpage is still kicking around in various circles, even though Microsoft killed it in Novemeber of 2006. Why is it still around? Well, it used to be free.

Downloads:
Amaya – http://www.w3.org/Amaya/
KompoZer – http://kompozer.net/
Adobe Dreamweaver –  http://www.adobe.com/products/dreamweaver.html

3.1 – Some have asked about creating a website using online tools such as Wix.com, Weebly.com and Webs.com – and although they do serve a purpose, they are still very limited in their features, functions and flexibility.

To learn how-to work with any of the software mentioned here, I have included the links to my YouTube Videos along with descriptions for each.

[A] Installing Software onto a Jump Drive –

Description:

Educational Technology –
I’m demonstrating a video on “how-to” download and install software onto your jump drive. The reasoning behind this is a simple one – You may go into a computer lab/Internet Cafe, to do some work, only to find that the software you need is not installed.

With this method, you can sit on virtually any computer; plug in your jump drive; launch the software; do your work; and then save it!

In this demonstration, I’m focusing on properly installing KompoZer – a Free Open Source Web Design Editor – onto my jump drive. However, the software can be whatever you need it to be, The final stages of the video is a bonus, since the video shows you how to SAVE back to the jump drive.

[B] Create a web page in Amaya and save to jump drive –

Description:

Web Design: Beginner Level – Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive. This module will demonstrate how-to create a basic web page and then save it to a jump drive.

[C] Create an entire website in Amaya –

Description:

Web Design: Beginner Level – Amaya is a Free Open Source application for creating websites. A variety of tools that most people will find intuitive.

In this module, we’ll create a basic website. First up, design one “perfect” page. This page will have a HEADER, NAVIGATION BARS, space for the BODY of text (which comes in later), and FOOTER information.

You can, at this time select a background color. If you decide to go with a dark background, select light-colored text. (i.e.: Black background works with text that are white, yellow or even orange.

We then use “SAVE AS” to save the page as the different web pages for the site. Important to remember to give each individual page its own TITLE. The TITLE is what appears in the upper left-hand corner of all browsers.

In the next module, we’ll go over linking the NAVIGATION BARS.

[D] Create External Links –

Description:

Web Design: Beginner Level –
This module will demonstrate how to create external links to other websites from your own site. This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m14s || KompoZer = 2m01s || Dreamweaver = 3m24s

[E] Creating Internal Links in Dreamweaver –

Description:

Web Design: Beginner Level –
In the module, we will cover the following:
1.0 – Create additional web pages
2.0 – Create internal links with the Navigation Bar
3.0 – Copy & Paste the Navigation Bar
4.0 – Save the web page you are working in

This demonstration uses the following software: Dreamweaver CS3, KompoZer, FrontPage

Chapters:
1.0-Create a New Page = 0m33s || 2.0-Save The Page = 0m59s || 3.0-Linking Your Navigation Bar = 4m04s || 4.0-Copy The Navigation Bar = 5m43s

[F] Adding TITLES to Web Pages –

Description:

Web Design: Beginner Level –
This module will demonstrate how and where to create the TITLE for your web page(s). This demo uses the following software: Dreamweaver CS3, KompoZer, FrontPage.

Chapters:
FrontPage = 0m16s || KompoZer = 1m46s || Dreamweaver = 2m32s

I am currently working on additional video tutorials to supplement the course content. If the information found here is helpful to you or if you have questions, comments and/or suggestions, please feel free to post your thoughts here in the comments or on YouTube.

To quickly find all these videos on YouTube, in the search box, type in the following: VegaDMS (It is cap-sensative.)

Thank you very much. Til next time…

You have been Teknolized!
-VegaDMS