Web Design Class-general links and outlines

This class is for those who are looking for more personal enrichment and willing to step outside of their comfort zones to try to become a web designer or online entrepreneur. Try to be front end developer, doing online business or just for life enrichment

Log on to FAS network computer: Use computer 1-4, 13-17,or 18-21 with username CE1-20

classOutline location: my computer->t drive (utilities on fashome)->webclass_wu

->classOutline->webclass1~

1: Intro to Dreamweaver-industry standard tool (2 class meets) and a website tool Bravenet combined with Dreamweave (2 classes)

Overview of the internet technology:

First class could be overwhelming; topic will be broke down to smaller chunk latter

Objective:

1.Create first page in the website: index.html

2.Create local site and reference it

3.Insert images and hyperlinks--investigate insertion and property panel Find the text contents and images- from .text

Terminology:

Blog: web log, journal like recording what’s happening in life.

WordPress: a popular blog site, and blog software that can be installed in your own site.

Domain Name: The name for your web site and email (2^nd part); DNS will point the domain name to the machine (web server’s IP address). It is easier than IP address to remember.

Social network: a site (facebook.com or myspace.com) on the internet or company’s network to post or exchange information, photo, video, etc. This is a very efficient and low cost on target audience to spread out the information as advertising.

Sub domain: a sub name site under a company’s domain, it can be comprehended as just a folder under someone’s name.

Wiki: A collaborative website whose content can be edited by anyone who has access to it.

Web Host Server: The computer that serves your pages to browser. It must have a static IP address and set it to public accessible through http protocol.

Root of website: Folder where you put your web page files index.html or default.html.

ISP is internet service provider who connects you to internet, ex Comcast, SBC, AOL….

FTP up load/down load: Using File Transfer Protocol to put file or get file, which is more reliable than using http protocol. DNS: the domain name server which point out which web server’s URL has that certain name’s site.

TCP/IP: Lower layer of protocol used in internet networking.

Router: Machine forward data packets to where it should go and also differ/ control internet traffic.

Directory: the path of the file located. Since we don’t have web server yet, when you are setting up your Dreamweaver site, use document as path, rather than site root for now.

Related info and setup for the class

http://sites.google.com/site/webandanimation/

Register a free web host and sub domain:

http://www.weebly.com/

http://jigsy.com/

Set up a website folder on your local computer

After logging on, create a folder in your H personal drive (right click your mouse button,ànewàfolder, click inside of the text box and name it: yourname, company_web or local_sites) This will be the website root on your local machine. Remote site, on the web server, should mirror to this site’s structure. Download tutorial sample files to your local_sites folder, and extract them inside local_site.

Also check out the file “newsite” in the same folder. http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html cafe_townsend_cs3.zip (ZIP, 2.1MB)

Play simulation to define a new site first. Defining a site is important, because most of the pages’ problem latter would be from this. http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html when setting up a new site select advanced tab, give a site name, select the site folder (local_site), and select image folder inside your site folder. Click document rather than site root this time. Steps to build a website

• Planning a Website :Search domain name available



• Determining the Site Mission :purpose of this site



• Determining the Audience



• Organizing Content



• Determining Technologies for a Site: Search web host that can provide the technology/services



• Creating a Mock-up: start to create the pages



• Appling Design Principles: keep the same look and feel through the site



• Developing Readable Content for the Web : text choice



• Improving Readability: accessibility issues



• Performing Usability Testing



• Increasing Search Engine Rankings

Resource on line Download 30 days Trial Dreamweaver http://www.adobe.com/downloads/?ogn=EN_US-gntray_dl_trialdownloads

Download tutorial http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html ore Tutorials: http://www.adobe.com/devnet/dreamweaver/?navID=gettingstarted More learning about coding http://www.webdeveloper.com/design/

Dreamweaver Web Design Introduction http://tv.adobe.com/watch/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/part-01-introduction/

OVER VIEW -Server

-Client

-How they're linked together

HTML: hyper text mark up language html 5 now http://diveintohtml5.org/

Cascade style sheet

now is CCS3 some of the new features

CSS3 border-radius property

Media Queries: http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/

Design in Photoshop-images in 3 formats .gif(head edged graphic), .mpg,(gradient tones photo) .png(layer transparent)

Create first page: index.html Create local site and reference it

Insert images and hyperlinks--investigate insertion and property panel

Find the text contents-

If you have something in mind that requires many technical functionalities, you may need to use ready made building blocks.

Drupal http://drupal.org/getting-started/before/overview

another web tool

http://jigsy.com/

Social media to advertise:

http://www.facebook.com/advertising/?campaign_id=225919016727&placement=emu&creative=tfa&keyword=ret_oc