Archive Dreamweaver

Feedback from websites is one of the main functions of the web. Here are some videos explaining how to create and validate a form using HTML and CSS.

FORM BUILDING IN DREAMWEAVER
http://www.youtube.com/watch?v=7soyO5DwJMY&feature=fvwrel
SENDING YOUR "EMAIL TO FORM" TO THE SERVER HOW TO
http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/
STYLING A SIMPLE FORM WITH CSS (this places the CSS in the head of the document. This is not good form. Place the CSS in a linked CSS file for more efficient use.
http://www.youtube.com/watch?v=RtJgCxHhLqk
VALIDATING A FORM USING BEHAVIOURS
http://www.youtube.com/watch?v=KpJnwbyxUE4&feature=relmfu
ADOBE TV DREAMWEAVER
http://tv.adobe.com/show/learn-dreamweaver-cs5/

YouTube is an amazing facility for storing and viewing videos. Here is a technique you can use to place a video on your website and have YouTube do all the work streaming the video. The big plus is you do not have to store your video on your own site, thus saving space on your server.
EMBED VIDEO IN YOUR WEB SITE

Navigation on the web generally means to load another page into the browser. Another navigation technique is to navigate within the same page. ie Navigate from the top of a page to a section within the same page and back again. Useful for content heavy pages.
ANCHOR LINKS EXPLAINED
ANOTHER ANCHOR LINK EXPLAINED

Starting a web site from scratch can mean a lot of repetitive tasks. These good people have set up a time saving structure to create magazine style grid layouts. Looks a bit tricky at first but is a good learning curve for the budding web warrior.
960 GRID SYSTEM

Media queries are all about delivering a web site to Desktops, Tablets and Iphones using HTML, CSS and Javascript. Media queries automatically detect whether the content is being viewed on an Iphone, Tablet or Desktop and  re-arrange the layout of a site to maximize the space on the destination platform. How good is that.
MEDIA QUERIES PART ONE
MEDIA QUERIES PART TWO

Clients often have content that can be dowloaded from a site. eg PDFs or Word Documents. Here's how its done.
DOWNLOADABLE CONTENT EXPLAINED

 Javascript is to HTML what Action Script is to Flash  ie it adds major functionality and funkiness with very little effort. Check this out.
SHADOWBOX EXPLAINED
JQUERY CYCLE PLUG-IN EXPLAINED
JQUERY CYCLE PLUG-IN SOURCE

Graphic Designers sometimes take themselves a bit too seriously. Here's a few attempts at humour surrounding our whacky profession. Enjoy!
DIFFICULT CLIENT
CHEAP CLIENT
S*IT THAT GRAPHIC DESIGNERS SAY

The world is mobile. Smart Phones and Tablets have bludgeoned their way into our lives. Web sites must work on as many platforms as possible. The good news is that traditional web skills in HTML and CSS dominate this arena. YES! Here's a bit of light reading on the subject.
THE MOBILE WEB CONCEPT EXPLAINED

Turn an Unordered list into navigation. Too easy. Unordered lists come with a selection of bullet symbols by default. Here is simple method of replacing the default  bullet symbols with images. Adds style and consideration to any layout.
UNORDERED LISTS INTO NAVIGATION
UNORDERED LIST BULLET IMAGE
UNORDERED LISTS

Float your divs to create interesting and appealing layout.
Floating an explanation
Floating explained by someone else

Liquid layouts adjust to the browser dimensions by re-sizing layouts to suit the current browser setting. Drag the bottom corner of the browser and the layout changes. Liquid layouts use percentages instead of hard-coded numbers. eg a layout column could be 200 pixels wide (fixed size) or 20% of parent window (liquid). Its all in how you define your CSS widths. Too easy.
Dreamweaver liquid layout explained
The Div Story

Our overlords at Adobe have created a series of videos that explain the whole web design process. Great viewing for that lonely Saturday night or after a long shift waiting on tables. They speak of HTML 5 but many concepts are relevant to our HTML 4 adventures.
Adobe TV dreamweaver web site overview

G'day students. The Web can be a mysterious place, full of weird sounding Concepts. What's a blog? Whats an RSS feed. I have gathered together a collection of YouTube links that explain some of the major concepts involved in our current studies.
Blog
http://www.youtube.com/watch?v=NN2I1pWXjXI
RSS Feed
http://www.youtube.com/watch?v=0klgLsSxGsU&feature=channel
Social Networking
http://www.youtube.com/watch?v=6a_KF7TYKVc&feature=channel
Twitter
http://www.youtube.com/watch?v=ddO9idmax0o&feature=channel
Wiki
http://www.youtube.com/watch?v=-dnL00TdmLY&feature=channel
Social Media
http://www.youtube.com/watch?v=MpIOClX1jPE&feature=related
World Wide Web
http://www.youtube.com/watch?v=wZoMbBzqxyc&feature=channel
History of the Internet
http://www.youtube.com/watch?v=9hIQjrMHTv4&feature=related
History of YouTube
http://www.youtube.com/watch?v=x2NQiVcdZRY&feature=related
HTML Email
http://www.youtube.com/watch?v=ad4tywpYkPA&feature=related

Here are a few links to supplement the introductory lessons in Dreamweaver

You video on setting up a site in Dreamweaver 
What is CSS (CSS explained)
What is HTML (HTML explained)


PROTECT IP / SOPA Breaks The Internet from Fight for the Future on Vimeo.

Jquery is a combination of HTML, CSS and Javascript that create amazing effects and adds brilliant functionality to a web site. Generally easy to understand and implement, Jquery has begun to dominate the web landscape. Here are a few great reference sites.
http://webdesignledger.com/resources/best-jquery-plugins-of-2010
http://www.dynamicdrive.com/

SEO or (Search Engine Optimization) is all about giving yourself a higher ranking in the various search engines on the web. Clients get very funny if your brilliantly designed and functional web site is not able to be found. People use Google as a defacto Address line and rarely type in any URLs manually. Here are a few tips.
http://www.youtube.com/watch?v=VBAJgksyhxo
http://www.youtube.com/watch?v=TDZEoDtNYx8&feature=related
http://www.youtube.com/watch?v=HBHoM971g70&feature=related
http://www.youtube.com/watch?v=-YjPOwRB_Nw&feature=related
http://www.youtube.com/watch?v=ot45fjeJqbk&feature=related

Data Tables have received bad press since the adoption of CSS layout techniques. Once we used Tables for layout as well as Data handling. NowTables should be used as their original purpose ie Creating and laying out Data information. Leave the layout and styling to CSS. Here are a series of videos that show you how to create a table and then style it using CSS.
CREATING A TABLE
http://www.youtube.com/watch?v=cKwTu2V51tY
http://www.youtube.com/watch?v=Gt4E6jx238E&feature=related
http://www.youtube.com/watch?v=8Tq3CsgFtmE&feature=related
STYLING DATA TABLES WITH CSS Videos
http://www.youtube.com/watch?v=2pBEVi8pO8Y
http://www.youtube.com/watch?v=dwEVg-HPROw&feature=related
http://www.youtube.com/watch?v=5pDw6L5nsbI&feature=related
http://www.youtube.com/watch?v=Jp3IgsuINyo&feature=related
http://www.youtube.com/watch?v=WxGhw8digw8
http://www.youtube.com/watch?v=ZfTu6GemwvA&feature=related


HTML and CSS can be a tricky business. One mistake in the code and it could be a design disaster. Thankfully the W3C, a bunch of good people provide a free service to test your code. Simply upload at the links below and watch the magic. They will check the code and return a list of errors, Some are fatal, some you can live with, but it recommended that you use this service.
HTML VALIDATOR
http://validator.w3.org/#validate_by_upload
CSS VALIDATOR
http://jigsaw.w3.org/css-validator/
ABOUT THE W3C
http://www.w3.org/Consortium/mission.html

Hello I hope your all fit and well and feeling happy. Here is a back to basic look at planning a web site. Web sites are all about thinking ahead. Targeting market needs and wants, Content, Design, coding should all be standardised before you draw your first Div. Planning can turn web development into a joy. Lack of planning results in issues at the development stage as well as down the track when the client wants a 50% make-over.
THOROUGH YET SIMPLE GUIDE
http://www.realfreewebsites.com/articles/website-planning-guide/
WEBSITE PROJECT PLANNING TEMPLATE
https://docs.google.com/previewtemplate?id=0Apy_FCy70vsOdHBCR1I5LXBsbkI0ZTdGZ3lfM3RLUUE&mode=public
GENERAL TEMPLATES
https://docs.google.com/templates?hl=en_GB
HOW TO WRITE A CONTRACT
http://24ways.org/2008/contract-killer


Adobe Flash has hit turbulent times with the discontinuing of the Flash Player for Mobile devices. However there is good news for experienced Flash Developers. Flash based IOS (iphone, Ipad) apps and Android apps can be created with a combination of Flash Professional and Adobe Air. Adobe is creating pathways for Flash Files to be published in HTML 5 through the Flash Application in the latest CS6 Professional version. This is the first step on the road back from digital oblivion for Flash. Here is a brief History of the Flash Application.
A HISTORY OF THE FLASH APPLICATION
Draw, Animate, Deploy are the 3 stages of most Flash Work Flows. Here are the basics of creating imagery in Flash. It is a bit weird at first but once you get used to the different modes you can create great vector artwork. Then with the magic of "Tweening" ( the same concept as After effects Tweening) you can animate single objects or combinations of nested graphics. Too much fun.
Merge Drawing vs Object drawing > What the?
Nice perspective approach to draw a background part 1
Nice perspective approach to draw a background part 2
Classic Tweening 101
Object Motion Tween from our Overlords at Adobe

Flash not only handles the animation of the objects on the stage. It likes to interact with the viewer. Buttons are the bridge that runs the scripts that make Flash sparkle. Here are some tuts that explain buttons and the creation of a basic Advertising banner. Essential Technique!
BASIC BUTTON
INVISIBLE BUTTON
BANNER BASIC
BANNER AD WITH PHOTOSHOP 1
BANNER AD WITH PHOTOSHOP 2

Publishing your brilliant flash file as a Mobile device app ranges from relatively easily as in the Android Case to painful in the case of the Apple IOS. Android is free so anybody can test their app on their device. This is not without a strict certificating regime as explained in the video below. Apple on the other hand requires you to become an "apple Developer" which costs $100. After forking out your hard earned dollars you can log into the Apple Development centre and achieve your Certificates and provisioning profiles to test your app on your iphone or Ipad. This is a rigorous procedure to identify your app etc in the Apple world. About as silly and as convoluted as a process can be. Takes a few times to get it right. Fortunately some kind person has explained the procedure in the 2nd video below. Whichever way you go it's a brave new world for designers to show their wares.
Publishing to Android device
Publishing to Apple IOS device

Navigation along a Flash Timeline is all about labelling frames, Creating buttons and applying AS3 scripting to complete the navigation. You can use the Code Snippets to create the AS3 or write the code yourself. Here are a couple of good tutorials for basic code snippets.
Code snippets explained
Timeline Navigation Here are some helpful links. Paralax Sample One
Paralax Sample Two
Paralax sample Three
The Bone Tool in Flash
Portfolio Tips One
Portfolio Tips Two
Portfolio Tips Three
Portfolio Tips Four