Final Product

1st – Portfolio Website

The whole reason I took this class was to better understand web design so I could create my own website. I already own my own domain name and due to the lack of time during my BFA I could not take the time to better learn Dreamweaver, HTML, and CSS so I instead used Cargo Collective. And Cargo Collective is a great site and has its uses in terms of social networking and having a simple interface where designers who don’t necessarily use HTML can have a website. But this is a tough world to compete in and having the ability to create one’s own website would be a great asset to stand out. I have plenty of image to use for my final web design.

2nd:

My section option would be to do a redesign of my church’s website – with their permission of course. I would like to give them a chance to have a more updated website that could attract our congregants and push us through to the 21st century where our events and presence becomes a strong force in print as well as in web.

 

Advertisements

October 3, 2011 at 2:01 am Leave a comment

Week 4 Summary

This Week in Web Design:

Background Images

Background images can be used to create a more dynamic background. Since last week we learned about GIFs, JPEGs, and PNGs and how we can compress images to make the loading time for websites for effective for a wide range of users, we now learned methods through LYNDA on how to create various background images. There are two distinct ways – repeat and non-repeat. Using a repeated image allows the creator to use a smaller image to cover the entire dimension of the webpage. This is achieved through tiling an image to create a pattern.

CSS

As reviewed previously, HTML tells the web browser what the elements, CSS tells the browser how elements will visually appear on the page.

This week we went more indepth on using padding and margins to vary the space with various elements. We also created a navigation bar using and unordered list and using CSS, we dictated how the navigation bar is suppose to appear.

Float – can be used to crate columns.

September 19, 2011 at 6:26 am Leave a comment

Week 3

This Week In Web Design:

This week was all about images for the web, links, more HTML and the introduction of CSS.

Oh dear. Here we go.

Images:

There are three types of images we use for the web. They are JPEGs, GIFs, and PNGs.

JPEG stands for Joint Photographic Experts Group. JPGs are best used for photographs. They can be sized down through a combination of image size and visual quality. JPEGs do not allow for transparency behind an image.

GIF stands for Graphic Interchange Format. GIFs are best used for images containing flat colors, text and vectors. Unlike JPEGs, GIFs can have a transparent background.

PNG stands for Portable Network Graphics. PNGs did not become mainstream with browsers until 2006 and like GIFs, PNGs can have transparent backgrounds. However, PNGs are not supported on older browsers. PNGs can have a gradient of color unlike GIFs.

Images & HTML

Images can be added through using the IMG code.

ex:

<img src=”portfolio.jpeg”>

Using the “width/height” notations within the img tag, allows the browser to allot a space for the image to appear as the browser is loading instead of the text and headers being mangled up in a purgatory state of loading. The “alt” notation allows for a description of the image in case the image cannot load. Borders can also be had within the img tag. Vspace and Hspace adds a margin around the image.

Getting Fancy with CSS

HTML identifies objects on a website, CSS describes how they appear and there are multiple ways to do it. CSS stands for Cascading Style Sheets. Within the HTML itself,

and tags can be used to describe specific pieces like paragraphs and headers to appear certain ways. (They can also be used to override the stylesheet.) That’s all fine and dandy, but the most efficient way to create a consistent look for a website is creating a separate document with all the visual information to your heart’s content.

Some Links on Color:

Color Matters
Colorstrology
Kuler

September 12, 2011 at 1:07 am Leave a comment

Week 2

This Week in Web Design:

Links

As stated in earlier notes URL stands for Uniform Resource Locator, meaning that URL’s point to different kinds of resources on the internet. There are two parts to a URL:

htttp://www.yahoo.com

HTTP: is the Protocol Identifier – this points out the type of protocol to be used to access the resource desired. This protocol is the Hypertext Transfer Protocol, which was discussed in Week 1’s readings and is primarily for hypertext documents. Resource Name refers to the Domain Name – string of easily understood numbers & letters to point out a specific website or IP Address that further directs the search of the URL on a server with a file name.

Absolute Links – connects to page to someone else’s website.

Relative Links – connects to a page on your website.

This week, we went over some basic HTML tags.

Some Examples Include:

<p> Paragraph Tags
<br /> Break Tags
<nobr> No Break Tags – not supported by the Standard.

<h1><h2><h3> Header Tags

<q> Quote
<strong> Bold
<em> Italic

<ol> Ordered List
<ul> Unordered List

We also learned how to connect and post html documents to the AACC server using FTP through Dreamweaver.

September 7, 2011 at 4:35 am Leave a comment

Week 1 Summary

This Week in Web Design:

Overview: (a summary of the notes taken from readings & lecture)

The Internet is a network of computers. World Wide Web is large set of documents that can be viewed over by many different computers. WWW obeys a set of instructions – the Hypertext Transfer Protocol (HTTP). Websites (a combination of webpages, graphics, video and other files) and Webpages (also known as HTML pages, made up of basic text files that contain instructions for the browser to follow,) are associated with unique HTTP addresses, and are accessed by a URL (Uniform Resource Locator) also known as a website address. URL’s are short strings that identify resources in the web: documents, mail, images and other resources.

Users request information, servers stores and retrieves requests for information by the user.

Most basic webpages have instructions that are written in some form of these three types of code:

HTML (or XHTML) – Coding language with tags – pieces of information that describe the particulars on a web page. Provides a hierarchy & structure while telling the browser what each component of the site is but not how it will appear on the site.

CSS (Cascading Style Sheets) – Different type of directions that describes how each component in HTML will appear.
Example:
type of font used on site
Color of text in the body

Javascript -More complicated programming method  that allows the page and the user connect and interact with one another.

HTML5 – Step up in in HTML and the revision of HTML, and will replace XHTML 1.0. Currently used by more advanced designers but will not become more common until 2012.

HTML/XHTML

HTML means Hyper Text Markup Language and it is a coding language that describes how a web page shows its information. HTML4 was released in 1997. Extensible HyperText Markup Language or XHTML (1.0) was the first major shift from HTML4 and allowed other browser platforms such as cell phones, cars, and televisions to access web pages. Viewing the source means to view the HTML or coding of a webpage.

Tags

HTML & XHTML are made up of a set of instructions or tags that tells the page how the information should be laid out.

Image & Link Tags – tells where to locate graphic, multimedia etc.
Formatting Tags – tells how to depict a paragraph, word, or link.
Head & Body Tags – tells the general format of the page
Script Tags – tells the browser how to process certain types of information.

Tags are distinguished by less-than and greater-than signs. In order for the browser to proceed with a command, tags must be opened and then closed. An example:
<italic></italic>
This may or may not be in italics.

Web Browsers

Web Browsers are applications that process and understand how to read HTML, CSS, and Javascript – to visit a webpage, you must enter the URL into the browser’s address bar. In turn, the browser will access the web server of the page requested and display it. Each browser reads and renders web pages ever so slightly different than other browsers.

Most Common Browsers:

Mozilla Firefox
Internet Explorer
Google Chrome
Safari
Opera

Creating a Web Page

We used HTML to code webpages and web pages can be created in a variety of methods.

Simple Text Editors – write out codes by hand
Example:
Notepad
UltraEdit Pro
BBedit
WYSIWYG Editors – (What You See is What You Get) see both code & design editing modes
Example:
Dreamweaver
Microsoft Expression Live
Macromedia Homesite

Name Web Files

Rules
Don’t duplicate names
Only use numbers, letters and underscores!
Keep them simple
Use lowercase (servers can be case-sensitive)
Don’t use spaces (servers interpret spaces different and may cause the page to appear strange)
Don’t use special characters
Use underscores to separate words & numbers
Always start a file name with a letter
Use at least 3 to 4 characters extension on file names

Organizing Workspace

All files and folders for a web page must live in the same folder called a root folder. This is also known as the “local” copy of webfiles and can sit on a desktop, flash drive or in another folder like the Documents folder. These files will be transferred to a server and then allows the public to view.
Same rules apply to naming documents as they do folders.

Links Read This Week:

But – before we get to that; links are also known as hyperlinks and they connect two HTML files together. You do not have to have ownership of both pages to link them together. And the underline beneath the links? That’s their default and tell-tale sign they are links. And here they are:

25 Useful WYSIWYG Editors Reviewed – Gives a great overview of some of the WYSIWYG Editors out there.
A Brief History of Markup – Describes the history of HTML4 with the introduction to HTML5
Overview: FTP Frequently Asked Questions – Discussing transferring files from the local files to be accessed by the public.
Current Browser Statistics – Displays some statistics of some of the most frequently used browsers by users today.

August 28, 2011 at 7:24 pm 1 comment

Hi There!

This is the first post of many posts for Web Design 1.

August 24, 2011 at 6:32 pm Leave a comment


Blog Stats

  • 117 hits

Twitter

Error: Twitter did not respond. Please wait a few minutes and refresh this page.