RESOURCES

GETTING A WEB SITE
Naming your Site
| Hosting and Domain Purchase | Define a Site | Cascading Style Sheets (CSS)

Domain Name/Uniform Resource Locator (URL)/Web Address

Brainstorm ideas for your preferred name find one that is available and suits your professional identity.

Before you go to the hosting site to sign up write down a few alternatives for your web address (URL or Uniform Resource Locator). Make it simple and not too long and be professional with your choice.

Purchase both your domain + hosting for your site.

If you already have an outside host then you are welcome to use that one.

DO NOT use www.angelfire.com or www.tripod.com. You will find that you have to upload your files manually as the free hosting does not include Dreamweaver automatic uploading–not to mention the banner ads that would inundate the top of your web pages.

 

Hosting and Domain Name Purchase

There are several more affordable options - the site at http://www.hosting4students.com seems to be very affordable and http://www.godaddy.com is very inexpensive. Either could get you up and going for under $20....

Using godaddy as an example simply because it's the one I'm most familiar with, the first thing you'd need to do is find an available domain name using their search service and purchase it..this should be in the ballpark of about $10 for a year.

Then, under the hosting plans>web site hosting section at the top you can purchase the hosting for the name you've just purchased...a 3 month plan at $4.99 a month is just under $15.

Once you've paid for the hosting service, you'll get an e-mail verifying your user name and password which you'll have chosen at the time of purchase as well as two IP addresses...these will be a series of 12 digits like 123.456.789.010. You'll need this information to set up the site and get Dreamweaver working.

Back at Godaddy, use your user name and password to sign in to your account and go to the domain manager...the name you've purchased should be shown here as well as the option to assign the name to the space you've just purchased (which you'll want to do).

For right now, that's about all there is to it...hold on to the e-mail with the IP addresses because you'll need these when we go to set up Dreamweaver for the automatic posting.

Other hosting options:

http://www.bestwebhosting2009.com/?gclid=CNCQ0u6o6pgCFRIcawodalKo1A
Do not use www.angelfire.com or www.tripod.com as you will find that you have to upload your files manually because the free hosting does not include Dreameaver's automatic uploading–not to mention the banner ads that would be seen at the top of your web pages.

Define a Site

This is the first important step to developing your web site.

There are two videos for you to review to understand how to define your site.

Here is a link to a video on Adobe's site:

www.adobe.com/go/vid0145

Cascading Style Sheets

Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation makes it much easier to maintain the appearance of your site from a central location because you don’t need to update every property on every page whenever you want to make a change. Separating content from presentation also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, those using screen readers).

CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and visually formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web page. You can set margins and borders for block-level elements, position them in a specific location, add background color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out pages with CSS.

For a tutorial on understanding Cascading Style Sheets, see www.adobe.com/go/vid0152.

CSS PAGE LAYOUTA CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements).

Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. Additionally, the problem of cross-browser rendering causes certain CSS layouts to display properly in some browsers, and display improperly in others. Dreamweaver makes it easy for you to build pages with CSS layouts by providing over 30 pre-designed layouts that work across different browsers.

Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout, but you can also create CSS layouts using Dreamweaver absolutely-positioned elements (AP elements). An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an absolute position assigned to it. The limitation of Dreamweaver AP elements, however, is that since they are absolutely positioned, their positions never adjust on the page according to the size of the browser window.

If you are an advanced user, you can also insert div tags manually and apply CSS positioning styles to them to create page layouts.

For a tutorial on creating CSS page layouts, see www.adobe.com/go/vid0155.

CSS RESOURCES
www.csszengarden.com/
www.webstandards.org
www.adobe.com/go/vid0152
www.colorcombos.com/

CSS ARTICLE
Very cool and informative, worth the read.

http://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/

LEGENDS
SU-ISDP
CSULB-GDP
DESIGN FUTURE © 2003 | Terms and Conditions | Privacy Policy | Contact Me