On this week’s episode, we’re talking about how to update Page Properties in Dreamweaver. We also talk a little bit about Adobe Days, coming up on April 17th at IUB and April 19th at IUPUI.
Archive for the 'Web Basics' Category
Have you ever been to a web page where you can click on buttons or tabs that swap content on the page without having to load an entirely separate web page? Have you ever wondered how to make your own page have similar behavior?
Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS
There are many different ways and programs you can use to go about creating a fun and interesting animated gif for the web. For this tutorial I will show you one quick and easy way to create an animated gif using Photoshop CS5. I am working on a Mac, but a PC will do just the same.
You can check out a preview of what the completed animated gif can look like by visiting this link. Keep in mind, this is a web page I designed to showcase the animated gif created for this specific tutorial. Uploading your completed animated gif directly to the web will not result in the animation being centered on the web page.
To begin with, I used Photoshop to create a series of images of which I kept in one folder. These images will act as the states for my animated gif. It is not necessary to use Photoshop to do this. You can create an animated gif with a series of photographs or a group of illustrations created in Illustrator in much the same way. Really, as long as you can open your files with Photoshop, you can create an animated gif out of virtually anything. The important thing to note is that each layer, or state, should be the same dimensions and resolution and will need to have something different, whether that change is slight or dramatic.
Have you ever visited a page that looked fine in Internet Explorer one day, and then the next it looks like a web page designed by a monkey?
If so, you are suffering from a disease I’ve come to call “Compatibilitus Brokenus.” Better known as “Compatibility View broke my web page.”
Knowing the basics of Illustrator and very little Dreamweaver, it has become very easy to create an interesting and fun website, complete with rollovers without knowing any code. Here’s an example of what can be accomplished. I used CS5 on my iMac, but you can use a PC and Adobe versions as old as CS2 just as well.
To Start with, create a new Folder on the Desktop (or wherever you plan to save your website) and title is “website.” This will provide a location where all your files for this particular website will be saved. It is important to keep all web files for one website in one location.
InContext Editing is an online service that designers may use to allow content editors and publishers to update website content directly through their browsers — without compromising design integrity. Your team members won’t need to learn HTML, nor even install extra software. And for now, it is free.
Way back in July, the W3C (the governing organization of web standards) announced that it was not going to renew the charter of the XHTML2 working group. In non-bureaucracy speak, that means the W3C has stuffed XHTML2 standards development into a bottle and chucked it out to sea, where it will spend the rest of eternity bobbing on the waves and following the thermal currents. The W3C did this so that it could focus all of its attention on developing HTML5.
“Wait a minute, ” one might shout on hearing this news, “I thought XHTML was the wave of the future, and HTML was what Cro-Magnons used to code their web pages??? What’s going on?”
Its easy to be confused, and, yes, even a little bit alarmed by this news. But, in essence, the labels here don’t really represent what you think they do: XHTML2 isn’t really XHTML as you know it, and HTML5 encompasses a lot more than HTML4.01. Here’s what you need to know about both of these standards: (more…)
IT Training and Education currently offers three workshops on Dreamweaver CS4:
- Dreamweaver CS4: The Basics covers the Dreamweaver environment and building a publishing a simple web site using tables.
- Dreamweaver CS4: Creating Websites with CSS concentrates on how to build a website using Cascading Style Sheets to control the layout.
- Dreamweaver CS4: Navigation, Templates & Media Integration covers how to create pop-up menus for navigation, build Dreamweaver templates to simplify site maintenance, and include multimedia on your web sites.
While these workshops provide an excellent platform on which to start exploring web design and development using Dreamweaver, they are by no means exhaustive. And, there may be certain concepts (especially related to CSS) for which you’d like additional reinforcement. This is where lynda.com can come in. Remember that from now until Dec. 20, IU community members get FREE access to lynda.com. As of this writing, lynda.com has 8 Dreamweaver CS4 series, for a total of almost forty additional hours of training on Dreamweaver CS4. Awesome! And when we retire, we’ll actually have time to watch all of it.
Here’s a chart to help you narrow down which lynda.com Dreamweaver CS4 videos cover the topics you’re interested in:
|lynda.com Dreamweaver CS4 Tutorials||Target audience for this lynda tutorial|
|Dreamweaver CS4 Getting Started||If you’ve heard of Dreamweaver, but have no idea why you’d use it; this would be a good prerequisite for taking the STEPs workshop Dreamweaver: The Basics.
|Dreamweaver CS4 Essential Training||You’re ready to build your first web page or web site using Dreamweaver. Covers much the same ground as Dreamweaver: The Basics, with additional coverage of CSS.
|Web Site Planning and Wireframing: Hands-On Training|
|Dreamweaver CS4 with CSS Essential Training||You’ve got basic web concepts like tables and images under your belt, and you want to learn how to make attractive, usable, easily-maintainable sites with CSS. Is an excellent refresher course after taking the STEPs workshop Dreamweaver:Creating Websites with CSS.
|Creating a CSS Style Guide: Hands-On Training|
|Dreamweaver CS4: Introduction to Spry|
|Dreamweaver CS4 Dynamic Development|
See a more detailed chart after the jump… (more…)