Adobe Fireworks

Adobe Fireworks is a rather interesting tool that allows you to essentially lay out a webpage but not have to monkey around with as much coding. Though this is meant as a mock-up or a prototype, you will be able to see your website in it’s arranged state, allowing you to try and use content management to your advantage.

Adobe Fireworks, instead of creating different files for each and every page for your webpage, Fireworks can link everything through one document. Linking the pages are quite simple, and are essentially as they are in Dreamweaver, where you specify the link. Once exported, Fireworks will allow you to click each one of your linked buttons, and navigate to the pages. Of course, this means you must create the page for the site to recognize it.

Adobe Illustrator and Web Design

So apparently, Adobe Illustrator is actually good at creating templates for web design. The way you do this however, is rather strange, or at least it is to me. In Illustrator, after you’ve created your template, you can export this template to a .ai file. Afterwords, open Adobe Fireworks and import the .ai file. This will allow you to add in text, images, and even go through and export it all into an HTML document afterwords.

 

Illustrator creates the shapes and text in a vector format. This means that so long as it is a vector, it can be re-sized infinitely without becoming pixelated. When the image in Illustrator is exported to something like a .png however, you will rasterize the image, but your save shall remain in tact. A raster image is essentially what you’d create in a program like Photoshop. Pixels that when resized, become distorted.

 

For creating templates for Web Design, unless you’re truly going over the top with effects needed for your template, Illustrator is the way to go simple because you can resize your template at any time, allowing you to preview your design for the web, mobile devices, print, etc.

Web HTML – Day 4 – Divs

Using the <div> tag is an easy way to classify a certain area to be stylized. There are multiple ways to use these styles, whether to tell it an id to reference, adding styles manually within that selected div, or using a class. To add an id to a div is simple. An example of this would be;

<div id=”ThisID”>Text goes here</div>

In order to utilize this id, you’d need to create a bit of CSS, which can vary, and would look as such for an example;

#ThisID { color=”#ff0000″;

size=”12px”;

}

This will make a red text at the size of 12 pixels. This would look like;

Text goes here

Web HTML – Day 3 – Cascade Style Sheets

A cascade style sheet (CSS) is a way to modify a page’s design. Whether it be color, background images, etc. There are two types of cascade style sheets. An internal, also called embedded or inline, or an external. Internal style sheets can allow you to modify a page by itself such as modifying a <h1> tag to be the color blue. This only applies to the page you’ve put this on however, and must be placed within the <head> tags in the <style> tag. An external CSS will allow you to modify multiple pages, such as turning the background a light shade of yellow.

The external style sheets are separate files in which you must link through the <link> tags as so. <link href=”YourSheet.css” rel=”stylesheet”> This will then allow the site to recognize your external style sheet, and read it. Unlike the internal CSS, you do not need to put the <style> tag. A file with the extension “.css” will ONLY have styles, or else it shall not work.

Web HTML – Day 2 – XHTML and HTML5

So, after reading more in the book I’ve learned that HTML is quite an easy language to understand, though as well as it being easy to comprehend, it is also easy to mess up with the smallest of mistakes, just like any other coding language. Whether it be a missing quotation mark, or a missing ending to a tag, studying over your HTML will help you out in the long run to ensure that your code works fine. W3 has ways of checking your code and alerting you if your code has any errors.

I’ve leaned there are ways to go through and add in select symbols such as the copyright symbol, which can be added to your page by typing &copy;. Doing this will display the special character for copyrighting.

Web HTML – Day 1 – The Basics

I began my day in class reading the sixth edition of Web Development & Design Foundations with HTML5 by Terry Felke-Morris. We learned about the essentials of Web Design, including the Front End of a website, and the Back End which contains all the coding that makes the site work. HTML, also known as HyperText Markup Language is the code that creates everything within your website. This can be something simple like a page’s title, to the color of text within the article.  The Front End involves the visual appearance such as blue text on a yellow background.

I learned the difference between the Web and Internet. Internet involves cables which connect computers, printers, etc. The Web however contains every single domain name created. Domain names are in URL’s such as “http://JohnSmith.com “. “JohnSmith” is the domain name, while the entire “http://JohnSmith.com ” is the URL.

Promoting Yourself with Digital Media

The last class assignment was to create a video on either digital media, or photography. As much as I love photography, I had a feeling digital media was a better way to go. Digital media in every essence of the word, is digital content which can be streamed through the internet. Digital media runs hand and hand with social media, in the sense that every site you upload to, is a form of social media. Digital media is the content, while social media is the host.