Bruce Mau Webpage

4/28/11
     
     After practicing HTML and learning to navigate Dreamweaver, I finally finished my webpage. I was inspired by one of Bruce Mau's book cover designs from his Zone Books project. This is my webpage about Bruce Mau.

Webpage Layout

4/21/11
     
     For our final project we are designing a webpage. The webpage will be inspired by a work created by our assigned designers. The designer I was assigned was Bruce Mau. I chose one of the book cover designs from his Zone Books project to influence my design.
     We will be creating the webpage using Dreamweaver. I drew up a layout of how I plan to organize my webpage. This is a photo of the layout and below it is the book cover that influenced the design.

HTML Resume

4/7/11
    
     Today in class we learned to use HTML, which stands for Hyper Text Markup Language. We used many examples to help us practice using the HTML tags. This was very helpful and  thoroughly explained the difference between a page title and a heading. Our homework assignment was to create a resume using HTML. I've attached images to show what the HTML version of the resume looks like and what it looks like when it's "translated." The bottom window shows what the language looks like when I'm creating my website. The top window is what you see on the actual website.

W3 Schools Notes

4/5/11

     

HTML

HTML allows you to create your own website.

Intro- HTML is a language used to describe web pages and it stands for Hyper Text Markup Language. There are keywords enclosed in angle brackets called HTML tags.

Get Started- It makes no difference if you save an HTML file as .html or .htm. Dreamweaver and Visual Studio are popular editors used to write and edit HTML.

Basic- The language of HTML can be very confusing but luckily there are some patterns. For example, headings and paragraphs are defined in a similar way. Headings start with <h1> and end with </h1>. While paragraphs start with <p> and end with </p>. Images are a little different because they begin with <img src= and end with />.

CSS

You can save lots of information with CSS.

Intro- CSS stands for Cascading Style Sheets and it explains how to display HTML elements. Styles helped to solve the issue of including fonts and colors in websites because it allowed web developers to store HTML document formatting in a separate CSS file.

Syntax- There is a selector and one or more declarations in a CSS rule. The selector is generally the HTML element you want to fashion. The declaration defines what will be done to the selector. Each declaration has two parts, a property and a value. The property is the style trait you want to alter (such as color) and each property has a value (such as red). For example, if you want to change the color and font size, it would look something like this, {color:red; font-size:14px;}.

Id & Class- Id and class selectors allow you to specify a style for elements. The id selector specifies a style for a single, unique element while the class selector specifies a style for a group of elements. The id selector is described using a “#” and the class selector is described using a “.”

Styling Backgrounds- There are a few different background effects that can be applied using CSS properties. Background color and background images are specified in a similar way. For example, a background color can be defined as {background-color:#42535;} and a background image can be defined as {background-image:url(‘paper.jpg’);}.

Styling Text- You can alter the color, alignment, and indentation of text. You can also alter the decoration and transformation of text. This would include altering text from underlining to uppercase and lowercase letters.

Box Model- Box Model in CSS, refers to the design and layout. Margins, borders, padding and content make up the different parts of a box model from the outside working your way in. To determine the full size of an element, you need to add all four of the elements.

Border- With border properties, you can define all different kinds of borders such as dashed, dotted, solid, ridged, and grooved. You can also determine the width and color of the border.

Outlines- Outlines go outside the border and help to make the element stand out. They can also be altered with color and width.

Margin- The margin is completely transparent. You can determine specific widths for each side of the margin.

Padding- Padding establishes the space around the content but inside the border of an element. Like margins, each side of the padding can be determined individually.

Final Design

Test Prints

Mock Layouts