eportfolio Design Workbook

Transcription

1 eportfolio Design Workbook This sheet must go on your eportfolio as a Draft Gallery! Name What is your eportfolio s title and why did you choose this title? How do the titles of the top tabs relate to this main choice? Discuss below. What image will you use for your header? Why? Discuss below. What image(s) will you use for your landing page/homepage? Discuss below. (Please note that you should use ORIGINAL work here, not popular youtube videos, etc). What will you use for your background image? Why? Discuss below. Go to the SAMPLE eportfolio to see how the actual webpages look and what you need to put on each webpage. Go to: (you need to be logged on to Digication to access this!) You can also visit this page to see 20 sample eportfolio designs:

2 Three Different Looks for Your eportfolio The visual design of your eportfolio will be entirely unique. You have many paths you can take, all depending on what you want to communicate. Before anyone reads a word of your essays, they see your design. The design wraps all around your words and essays so be deliberate about the choices that you make. There are three main styles you could choose for your website design. Go to to see samples and then fill out the box below for the ONE choice that you make! Large Central Image If you choose style #1, then you have one large image that will be the background of your website. Explain that image below if you choose style #1. Why do you choose this image? What s the main color in this image? How will you use that color on the rest of the website? Style #1 Style #2 Medium Tile Effect If you choose style #2, then you have one medium-sized image (like a 4X6 photo or something the size of a phone) that will be the background of your website. Explain that image below if you choose style #2. Why do you choose this image? What s the main color in this image? How will you use that color on the rest of the website? Style #3 Small Tile Effect If you choose style #3, then you have one small image (like the size of a quarter or a little bigger) that will be the background of your website. Explain that image below if you choose style #3. Why do you choose this image? What s the main color in this image? How will you use that color on the rest of the website? Your Color Theory Read the color theory webpage at Carmen s professional epprt. Go to: AFTER you read that webpage, decide your THREE main colors. What is your main color (the color for the body where your essays will go)? What other two colors will you use as accents? What do you want these three colors to convey? Discuss below. If necessary, go back to page one and rethink/change your header so that it matches the colors you are using on this website!

3 Sample eportfolio Home Page/Landing Page with Labels

4 For a digital version that explains the code of the eportfolio, go here: Understanding CSS and Your eportfolio * Code (This is the default code setting) body { background:#eeeeee; color: #222222; #site_topnav ul li a { color:#000000; #header_container { padding-bottom:0.5em; padding-top:10px; #header_container, #main_container { background-color:#ffffff; border-color:#ffffff; border-style:solid; border-width:0 10px; position:relative; #header_container.title { border-bottom:2px solid #CCCCCC!important; padding:15px; #module_topnav { border: 1px solid #ccc.navigation_topnav { background-color:#f7f7f7; What the Code Is & What It Does YOU CAN CHANGE THE PARTS IN GRAY! Do not mess with the parts in black!!! This is section B on the eport Diagram, the background border. Your background image will now override this on digication but, sometimes, when that image is loading, this is the color that will appear. This is your main font color. This is the font color for topmost navigation menus (Home, People, etc). This is section C on the eport Diagram. This is for the amount of space that you want between your e-portfolio title and the menu that comes right below it. This is the amount of space that you want between your header image and topmost navigation menus (Home, etc). This is the background color of your main page in section A on the eport Diagram. This is the color of the border for section A on the eport Diagram. This is the style of the border in section A on the eport Diagram. You can make it dashed or have no border at all. Go to the border tools on the next page to see the parameters. This will determine how thick, thin, or visible the borders are in section A on the eport Diagram. (The top/bottom borders are set to 0.) do not change - very easily broken This is the size, then style of the border right under the header. There is a line/border that goes right under your eport title. This is that line/border. This is the color of the border right under the header. There is a line/border that goes right under your eport title. This is that line/border. This has to do with spacing but it may be overridden by your other CSS properties already. This is the border of the TOP TAB: weight/thickness, style, color. This is the background color for your TOP TAB. This is section E on the eport Diagram.

5 .navigation_topnav a { color:#222222; font-family: Verdana,Helvetica,Arial,sansserif; #footer_container { background:none; border-top:1px solid #AAAAAA;.title { display:block; #footer { background:none; This the font color for the TOP TAB. This is section E on the eport Diagram. These are the fonts your site will use, in order of preference (left to right). If a computer does not recognize the first font, it goes automatically to the next one listed. This is the background color for the footer area--- Section F on the eport Diagram. If you add a color (right now there is nothing, remember to add # before the code. This is the top border of the footer (Section F on the eport diagram). First comes size, then style, and lastly, color. Do not change - easily broken. This repeats the background color of the footer. Some Basics on HTML Color Codes There are MANY versions of a color, so stay with the same HTML, for instance, for every yellow that you choose. You can even mix them yourself. Here are examples for HTML color looks like: one version of yellow would be FCEB03 (there are MANY); Blue is 2C03FC. For all the colors, go to this basic HTML color picker: Somes Basics on Border Style For more on border-style values, go to: These websites are at course website and Carmen s eport (under this class s title).

6 Topmost Navigation/SECTION C (Logout, etc) Header Your Site s Title Top- Nav/Top Tabs/Top- Navigation Bar (Section E) Left Tabs/ Left- Navigation Main Container/ Body (Section A) Footer/ SECTION F Background/ SECTION B * Cascading Style Sheets (CSS) is a style language used to describe the look and formatting of texts written in markup language, especially webpages.