Wordpress
Blogger
Wix
Weebly
Ning
CSS Templates
Thursday, February 27, 2014
Tuesday, February 25, 2014
Resources for class, 2/25
The CSS Box Model:
http://www.w3schools.com/css/css_boxmodel.asp
The position declaration:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Positioning elements with CSS:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:
http://www.box.net/shared/e1xxy2tyib
The start.html file to begin the tutorial:
http://www.box.net/shared/fefsodgohv
Follow this tutorial to page 17 only – disregard the last three pages.
http://www.w3schools.com/css/css_boxmodel.asp
The position declaration:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Positioning elements with CSS:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:
For the CSS rules for the "maincontent" div, add a "float left" property. In order for the text in the "maincontent" div to have some space between it and the sides of the div, add 20 pixels of padding to the left and right margins. Add 5 pixels of padding to the left and right margins of the "sidebar" div as well. Finally, add the "clearfloat" class to a "br" tag just before the footer, following the directions at the bottom of page 14.
http://www.box.net/shared/e1xxy2tyib
The start.html file to begin the tutorial:
http://www.box.net/shared/fefsodgohv
Follow this tutorial to page 17 only – disregard the last three pages.
Thursday, February 20, 2014
Wednesday, February 19, 2014
A reference link
Here's a download we'll be referring to in Thursday's (2/20) class:
https://app.box.com/s/88wypfnsv9qwyj1a8cgv
https://app.box.com/s/88wypfnsv9qwyj1a8cgv
Wednesday, February 12, 2014
Tuesday, February 11, 2014
References for Today's Class: 2/11
Today, in class, I'd like you to choose an html template from Dreamweaver (one of the two-column options with a header and footer), and re-style several elements. Don't just change the elements in a random manner – try to make all your styling cohere into an attractive design. There are at least six elements I want you to alter:
And here are some links to online color palette resources:
Colour lovers
Design seeds
1. Insert new text, instead of the Dreamweaver "dummy" text. You can use Lorem Ipsum text.
2. Style the text differently.
3. Change the margins and/or padding on some elements.
4. Insert a few links in the text, and change the styling of the links.
5. Insert at least two images, and "float" them relative to the text.
6. Change the background color of all the elements (header, footer, sidebar, content).
And here are some links to online color palette resources:
Colour lovers
Design seeds
Thursday, February 6, 2014
Tuesday, February 4, 2014
Assignment for Thursday (2/6)
For Thursday's class, please draw up a one-page wireframe of the home page of a site that is in the same genre of the site you'd like to create in the latter half of the semester. So if you're making a portfolio site, pick a well-designed portfolio site; if you're making a blog, pick a well-designed blog.
See the "References for Tuesday, 2/4" blog post below for more info on what a wireframe is – but don't worry about making "second level" pages yet - and don't worry about the customizing nav bar info in that post, either - we'll pick up on those things next class. I just want a homepage wireframe for next class.
See the "References for Tuesday, 2/4" blog post below for more info on what a wireframe is – but don't worry about making "second level" pages yet - and don't worry about the customizing nav bar info in that post, either - we'll pick up on those things next class. I just want a homepage wireframe for next class.
Monday, February 3, 2014
References for Tuesday, 2/4
Using list elements to make a nav bar:
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:
Your assignment for Thursday's class is to have:
1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):
2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples). A flowchart example (click to enlarge):
Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?
I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes.
Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.
The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.
A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.
The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:
1. change the names of all the nav buttons, and make them all external links to actual websites.
2. change the font face in the nav bar.
3. change the color of the nav bar, including in the "hover" state.
4. change the dimensions of the padding on the nav bar.
Your assignment for Thursday's class is to have:
1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):
2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples). A flowchart example (click to enlarge):
Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?
I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes.
Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.
The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.
A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.
The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).
http://www.freetv-video.ca
Subscribe to:
Posts (Atom)