Week #11 - Code for a Comment Box on a Webpage

To insert a comment box to a website, you must insert a special code. Here is a link demonstrating the proper code for the insertion of a comment box to a site:

 

http://www.htmlcommentbox.com/

 

This link not only shows how to write the code of a comment box, but how to write the code cleanly, and properly. Here is an image of the proper way to write the code of a comment box:

 

 

A comment box allows the viewers of the website to leave ratings, feedback, and reports to the creator of the site. This is effective for the creator of a website because it allows them to see what they may need to work, and what they are doing well.

 

Week #10 - Creating Scrolling Text That Stops at a Location

To create text that rolls across a screen, that stops at a certain location on a web page visit this link that demonstrates the proper steps to complete this process. Also, this link shows different codes for alternative scrolling text options:

 

http://www.quackit.com/html/codes/scrolling_text.cfm

 

This code will make text slide across screen and then stick to a specific spot.

 

<marquee behavior="slide">This text will scroll in
    and "stick."</marquee>

This text will scroll in and "stick." 

<marquee behavior="slide">This text will scroll in
    and "stick."</marquee>

 

This code will allow the text to scroll and stick to a spot on the page.

 

 

 

Scrolling text may draw the attention of the viewer, and focus on important aspects of a site.

 

Week #9 - Creating External CSS

This post is the process of creating external CSS for multiple pages. External CSS is very helpful when making multiple pages, and here is how to create complete the process: 

- In Dreamweaver, create new. When the options screen appears, select CSS.

- Before saving the CSS file, you must create a folder on the desktop with sub folders for images and sources. 

- Save the file to the folder on the desktop 

- Next, open a new HTML file and in the bottom right of the page attach your CSS file 

- Lastly, you may adjust the HTML file as long as the CSS file is attached. 

Here is the Options Screen that allows you to select CSS styles sheet before saving it to your root folder: 

 

Here is an additional link to creating external CSS: http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e1ca.html

 

Week #8 - Creating Photo Borders in Photoshop

Borders can add an addition to the appearance of an image, as well as made certain aspects of the the image stand out over others.

1. The first step to creating an effective border in photoshop is to add a photo, then create a white layer above the image.

2. Next, add extra canvas space around the image

3. The, contract the image by choosing Select, Modify, Contract 

When the Contract Selection dialog box appears, insert a value from ranging from 5-15 px.

4. Then you must add a Layer Mask to the first image layer.

5. Next, apply the "Spatter" filter to the layer mask. This brings up the border outline; in which allows the user to change the settings of the border appearance.

 

6. Photoshop offers a variety of filters that the user can choose based on how they want the border to appear. Overall, the border allows the Photoshop user to create an effective appearance in the eyes of the viewer.

Here is the original image, and the new image after applying an effective border.

Here is the link to the website I obtained my information from: http://www.photoshopessentials.com/photo-effects/photo-borders/

 

Week #7 - Creating Rounded Corners on Divs

The creation of rounded divs can create an interesting appearance, as well as an attractive look to a website. Rounded divs can also be used on a website as tabs. Rounded tabs/links on a website creates a fascinating look to the site you are working on. In order to create rounded divs, follow these steps:

1. In the CSS panel, select the current tab.

2. Next, under the properties panel, add a new property named border-radius. 

3. Adjust the values to the proper size and then place the div in the designated area.

 

 

This allows the Dreamweaver user to create a rounded div, that can be used as effective tabs. 

Here is the site that may assist you through this process: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html

 

Final appearance:

 

Week #6 - Rollover Links

In order to make links more visible & appealing to the user, use rollovers in order to make them stand out more. You may either use the coding for this procedure, or you may use the Dreamweaver application for an easier process. To make rollover links, follow this procedure:

Open Dreamweaver, then draw an AP div. In the AP Div, create a new CSS rule, then open page properties and select Links. You can change the settings of the rollover links in this box. This will allow you to create the rollover link. Another way to complete a rollover link is by inserting the code in the code view in Dreamweaver. This is the code will make a rollover link:

 

 

This code was taken from the resource: http://www.htmlgoodies.com/beyond/css/article.php/3470411

 

This is very helpful because it allows the user to see the rollover and find the link easier. 

 

Week #5 - Exit Slip & Blog Skip Week

 

Week #4 - Reducing of Wrinkles

After taking pictures during photo shoots, photographers often use Photoshop as their editing program. They use Photoshop's unique features such as the Healing Brush tool to remove the wrinkles, or blemishes on someones skin. This may be a very important feature that one can use when editing either skin conditions, or wrinkles on someones body.

On this site, I learned how to complete this act of removing wrinkles/blemishes from a picture.

http://www.photoshopessentials.com/photo-editing/healing-brush/

 

This feature consists mostly of using the Heal Brush tool, but also requires the use of changing the opacity of the image, and creating different layers to balance the change in colors. Overall, this tool may be very influential, especially for professional photographers.

 

Week #3 - Creating a Dark Background Behind an Image (Silhouette)

When creating my Photoshop Ping Pong project, I used this technique to cut out the background color of several images from the web. For example, there was a blue background of the sky behind my bear before I created a silhouette. To complete this task, I primarily used the magnetic lasso tool to select the image I wanted, then after selecting the inverse property, I'm allowed to delete the background colors. 

 

 

 

This site helped me with the creation of my Photoshop Ping Pong Project. 

 

This site had a great example of how to cut out the background colors of an image by using this tool:

http://blog.lorrifreedman.com/index.php/2008/09/16/creating-a-black-background-using-photoshop/

 

Week #2 - Photoshop 3D Acrylic Text Effect

This week I was exploring the web for interesting text effects in Photoshop. I ran across this site that gives a full, in-depth tutorial on how to create an appealing 3D acrylic 3D text effect. This can be used on a website to create an appealing appearance for the viewers. 

This is the site that gave me the in-depth tutorial on how to create such an interesting effect in the application of Photoshop:      http://www.photoshoplady.com/tutorial/awesome-3d-effect-in-photoshop/8112

Week #1 - Scrolling Text Across the Page

This week I was roaming the web and found this interesting code that allows text to scroll across the page. This code caught my attention because it looked very appealing although it may distract the viewers.

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}