Archive

Monthly Archives: February 2012

 

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:

Advertisements

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.

Creating a site in dreamweaver notes:

1.Open a new html document in dreamweaver and title it either within the code or using the title box up top, hitting enter once completed. Save this document in a new folder on the desktop called root, save as index.html, and create a new folder within root folder for images. When naming these documents, do not use uppercase letters, spaces or special characters.

2. Create new CSS file and save as style.css next to index in root folder. From here link style.css to index page using the chain link icon located on the right. (Note: * in tab means document is currently not saved)

3. In the style.css tab, go to line 4 and type body (because body exists in html it isn’t necessary to type anything before the word body) then curly brackets with three lines in between. Type background-color: in line 5 ( menu will drop down, double click on color, you can select color from palette if unsure of the number) after number put ; (Note: If you are ever interested in finding the number for colors using the color picker in photoshop will locate it)

4. In line 9: pound sign identifies an id and a period identifies a class, you can also type yourself a note within the code using /**/ will be in gray, pound now line 11 #container{} type width: 1000px; next line height: 600px; next line background-color: (choose one different from background)

5. From here go back to source code tab, inside body type <div (select id) id=”will get menu to choose container, hit enter then close with> next line <!– end of container bracket –> add closing </div> next line after note. Save these changes and preview in firefox, you should have a large block of color.

6. Go back to style tab under body, line 6, margin: 0px; it assumes this value for all four margins since only one is specified. Under container, line 15, margin-top: 0px; line 16, margin-bottom: 0px; line 17, margin-left: auto; line 18, margin-right: auto; should center layout. Then delete these lines and in line 15, type margin: 0px auto; this will do the same form of centering without extra code.

7. In line 18, #header{ line 19 width: 1000px; line 20, height: 50px; line 21 background-color: chose one different from previous two selected; close on line 22} then go back into source code inside container line 11 <div id=”header”></div> Preview these changes in firefox, should see large box of color on top.

8. To adjust header box go to margin in style.css body change to margin-top: 20px; To put an image within the header save for web and devices at correct height and width (in this case 1000px by 50px as jpg) in source code under header line 12, <img src=”browse for jpg” border=”0″ alt=”header”/> Complete these same steps to include a footer on the page

In class we began creating another website for an existing or created company, which we then sliced within Photoshop, so for future reference here are notes on how to slice correctly within this program and save for web and devices:

1.  Once design is complete make guides in Photoshop, you want to have as few as possible and stay around 120 as a file size. It is important to be precise when creating these guides for an efficient website.

2. Drag slice tool and conform to guides with the select slice tool, make sure the number of guides actively created in blue are equal to the number of slices you wish to have, the gray numbered slices are those which the program has created itself.

3. From here, save for web and devices, and you are able to click on every individual slice and assign a compression to each, look for the smallest possible quality JPEG for slices, try to stay between 45-60. Then click save, format images only, create a new folder, than change this to html and images, settings are changed to other, slices, generate table, keep all slices checked, click ok and finally save. Note: In this step when creating our second website, in the slices section, we selected the option Generate CSS where we previously chose Generate Table. Make sure html file and images are saved together in a folder.

4. Then bring this file into Dreamweaver, and to observe the power of CSS we started at line 10 in the coding where it says style, and select to the end of that section, then cut and paste that section in a new CSS file in Dreamweaver. Save this new file as style.css next to your html file in your documents. After saving close this document, go back to original html document and in the CSS styles panel on the right hand toolbar click on the link icon, browse to find style.css file and hit ok. Doing this should allow your web page to look correct in preview again.

5. Locate the background color section in the code, copy all of the information within the quotations, go to the top of the page where it says source code, style CSS, click on the style CSS. Here go to the fourth line of code, type body {} and place copied information within these brackets. Then preview page in safari and save.

6. To center your page, go into code where it says position:absolute, delete this and type relative and then delete the next two lines and type in margin: 0px auto;

7. Delete the slice containing the body text on your web page, locate where this slice was in the source code, go back to style and type under existing text, background-color; #FFF; (number varies on what color is wanted in the background). Then go back in CSS under body, enter <h1></h1> with the headline text in between and then below <p></p> for the body copy. Under these enter font family, color, size and leading coding.

http://gozips.uakron.edu/~lam127/