Personal Site:

1. Only apply a float after header/navigation, as long as height is determined there shouldn’t be a problem.

2.If you need assistance with new tabs introduced, CSS 3, W3schools and Google are all great resources, can search for CSS rounded corners.

3.Creating opacity, in style tab (goes from 0-1, so 0.4 is about 40%) type in Opacity:0.4; Filter: alpha (opacity-40); /* for IE8 and earlier*/

4. The p tab we have been running is generic, therefore if you need it to be more controlled, in style tab would type .content_column_c p{} put font information in the brackets.

5. Different opacity approach-take out opacity and filter lines, make new image that is 1 pixel by 1 pixel and fill with black. Then bring opacity to 40 and save this as PNG-24 with transparency on. Then in html, background-image: (Select image just created, this essentially preserves color of text and runs opacity in background as a single image.)

6.Rounded corners- in style type moz-border-radius:30px; border-radius:30px;

7.Lightbox demo-Lightbox matrix link is on the Web 1 site, lists clones of lightbox, fancybox is what is used in our class. When putting an animation on an image, the a href goes to a large image and the a id goes to a thumbnail, keep the large image around 900 to 80 pixels. If the image is in a list the code should look like: <li><a id=”example 3″ href=”images/zoom/dust.jpg”><img src=”images/asb.png” alt=”ASB”/></a></li>

8.Making clicking on the email link of site open mail with your address listed: Email: <script>noHarvest( );</script> <script language=”Javascript” type=”text/javascript”> goes above and close with </script> below. <script language=”Javascript” type=”text/javascript”> var name=’lam127′; var server=’zips.uakron’; var suffix=’.edu’; function noHarvest( ) {document.write(‘<a href=”‘ + ‘mailto:’ + name + ‘@’ + sever + suffix + ‘”>’ + name + ‘@’ + server + suffix ‘</a>); } </script>

In class we have been working on perfecting our portfolio sites before the end of the semester, and mine has been coming along pretty smoothly. Work still needs to be done on the navigation site to ensure it looks the way I would like, as well as making sure nothing shifts when visiting each individual page. I also need to include descriptions of each of the examples of work I have displayed on the site, a very crucial aspect to be added. Overall I’m happy with the design, it is very simple and the black and white suits my own personal taste, as well as the addition of the rollover color images on my work page.

 

With my junior year in school fast approaching, I figured it was time to build a resume to start applying for internships and graphic design jobs in the area. I haven’t had any formal direction on how to make one, however the web is always helpful when I don’t know where to begin with something! I found this really helpful graphic design blog discussing what you should and shouldn’t put in a resume, particularly pertaining to graphic designers. So to all you fellow undergraduates in the dark on this process, hopefully this will shed some light as it did for me..

http://www.youthedesigner.com/2008/04/29/the-graphic-design-resume-guide/

I recently read a really helpful blog giving tips on successful blogging. I have really enjoyed the experience of blogging weekly for web, however I would like to start my own personal blog but am a bit lost on where to begin. The link below is to the blog discussing the tips, and I have also listed them below:

http://brunchatsaks.blogspot.com/2011/08/top-tips-for-beginner-and-experienced.html

– Top Tips for Beginner (and Experienced!) Bloggers –
Blog for yourself. Blogging is about you; a place for your likes, desires, thoughts, and feelings. Write, share, and express as if no one is reading. If you are concerned with comments and followers, they will come in time. My first few months of blogging I had 2 followers (my boyfriend and myself), about 100 visitors per month (again, probably all my boyfriend and myself) and maybe a comment every ten posts or so. I put the whole number thing out of my head and continued to focus on what my blog meant to me. After a while I looked up and noticed that people started to trickle in here and there. While it has always meant the world to me to have others visit, read, and share, I still try and focus on why I started my blog and stick to blogging for those reasons alone.

Be honest. If there is one thing blogging has taught me, it’s that truth in what you write is of the utmost importance. I have been disappointed and hurt as a fan of some blogs that I realized were pulling the wool over my eyes. Stories weren’t adding up; convictions in old posts didn’t match those in newer posts; the list could go on. Respect your readers and visitors enough to be honest with them. They are intelligent and will always figure out if honesty is being compromised.

Communicate. Not only is blogging about sharing your own life and inspirations, but it’s about connecting with others. If someone is kind enough to take time to read your post and comment on it, then if it all possible, return the gesture. If you are the one who comments first, be genuine. Saying things like “come read my blog” or “follow me and I’ll follow you back” only turns people away. Read the post and comment as if you were talking with a friend. I’ve been surprised by the lifelong friendships formed from blogging, and I’ve found that having a network of blogging friends makes the experience all the more valuable and meaningful.

When beginning designing my own personal portfolio website, one place I found very helpful was the site SIteInspire.

http://siteinspire.com/

I think it is important to know what’s going on currently within web design, and this site enables visitors to search pages within different categories such as portfolio sites, minimal sights or ones using large images within the background. After looking through several sites I made note of aspects I would like to use in my own once we begin coding in Dreamweaver, such as a blink of color when rolling over navigation links, a more asymmetrical layout, as well as images blinking color upon rollover. I had some trouble with deciding which images I should use on the home page of my site, so I think further research on that will definitely help my overall product.

 

1. Assign to body a font family, or could assign the p class a certain font family under the body by typing .p{ font-family: assign font; font-size: 9px; color: #colornumber; close}

2. To customize the headline text type h1{font-family: assign font; font-size: 9px; color: #colornumber; close} ( Note: This also needs to be added to the source code) and add padding on right if necessary for text, then adjust width, in style.css

3.Background color behind the header under color of text line, it puts the color behind, border-top( or bottom for drop shadow): #000 1px solid;

4. In Source Code, want to be inside header if the navigation list is located within the header on previously created page which is being redone. put a note in beginning of list <!–starts unordered navigation list–> in the next line <ul> and close with </ul> inside these place <li>home</li> next line place next link, for example <li>about me</li> and after <li><a href=””>Home</a></li> (Note: this helps us to deal with one style sheet rather than five different ones for each page).

5. To Get rid of the bullets before the links, in a new line under the header type #header ul{ list-style:none; } and need to close after with </div> after the links in the source code, put a note before the ending that it is in end of the header div.

6. To stretch the list of links over the header, need to assign a float to #header ul li{} place this under the header ul line and inbetween the brackets type float: left;

7. Then under the header ul li in the next line type #header ul li a { font family, font size, color, text-decoration:none;}

8. To space links under header ul li portion type padding-left: however many pixels; then can adjust padding right as well, can put border on right. instead of using text for the links, can use img src and link tabs as images.

Here is an example of a page which we completed as practice within class:

1. To create a box for an image in between the header and footer, create a new id in the Style.css tab, named for example box by typing #box{ width: 1000px; height: 400px; background-color: same as background;}  From here, go back to the Source Code tab in between the header and footer, and type <div id=”box”> in the next line link the image from the footer <img src=”browse for image”border”0″alt=”box”/></div>

2. To place an image and text next to each other, remove image from the Source Code under <div id=”box”> and type <div class=”box_column_a”></div> in the next line then type <div class=”box_column_b”></div> Then go back under the Style.css tab under box and type .box_column_a{} and under this put .box_column_b{} under these lines, enter the width of column a 700, 300 for column b and the height for both 600px; and then a different background color for each. After this in the next line type float: left; From here go back under the Source Code tab and under <div class=”box_column_a”> in the next line type <p> and in the next line enter desired text, followed with a </p> in the next line and closed with </div> in the following line. Then under column b put <img src=”browse for image, (which was resized to the height of the box for example here 800px) /> and in the next line close with </div>

3. To achieve a border around the container go under the margin line and type border: enter white color number #FFF solid 5px; ( Note: Padding is within the layer and margin shifts the entire layer) Under both columns a and b in the Style.css tab enter padding-left: 10px; and in the next line padding-top: 10px; you then need to adjust the height and width of the column accordingly ( for example change to 690 and 490 if adjusted 10px) To change the text color under column a, following the padding line type color: choose color number; save and preview in Firefox.