Skip to Main Content

Indiana University Indiana University


Archive for the 'Web Basics' Category

Internet Explorer and YouTube problems?

The last week or so I’ve run into a problem with IE where when I try to view some YouTube videos I see a flash of the screen that should load and then I’m redirected to a page where I see this error:
This page can't be displayed

In looking for a solution, I found some comments from other people having the same problem. They had come up with two options to solve the issue, either:

  1. Use a different browser like Firefox or Chrome
  2. Log out of Google+

Not sure why logging out of Google+ fixes the issue but I found it worked for me.

Jen

Firefox: Adding Sites to the New Tab Page

Recently, I wanted to add a website to the new tab page that appears in Firefox when a new tab is opened. In looking at the help pages from Firefox, I found it showed how to work with pages that were automatically added and how add a bookmarked page. However, it seemed to me that bookmarking a page first shouldn’t be required. I searched on Google and found other people with the same issue. At this pointed I decided to just try some things, and I found that it is possible. The screen cast included below shows how to add a website to the new tab page:

it2go Episode 38 – Dreamweaver Page Properties

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.

it2go – The IT Training Podcast

Using JavaScript to create a dynamic tab-based webpage

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?
Well, there’s good news and bad news. The bad news is that you’re going to need to write a bit of javascript to get this to work, and if you don’t know javascript, I can understand your reflex to just close this tutorial right now– but hold on! The good news is that it’s simple and doesn’t require an in-depth understanding of javascript to get this working.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

(more…)

Creating an animated Gif in Photoshop CS5

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.

a series of images

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.

(more…)

Quick Tip: Why Does My Page Look Funny in Internet Explorer?

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?

Microsoft's Apology for IE 6

If so, you are suffering from a disease I’ve come to call “Compatibilitus Brokenus.” Better known as “Compatibility View broke my web page.”

(more…)

Create a website with rollovers using Illustrator and Dreamweaver

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.

(more…)

Revise Web Pages Directly from a Browser with Adobe InContext Editing

Clip Art Graphic of a Desktop Computer Cartoon CharacterAs a web designer, developer, or administrator, are you constantly managing simple requests to change page content for nontechnical team members ? If so, you may find Adobe InContext Editing useful. InContext Editing gives clients and nontechnical team members the ability to update website content without having to learn any HTML. Potentially, this could save you a lot of time in updating web pages, providing time-consuming training, or recovering from user mistakes.

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.

(more…)

Web Standards Smackdown: XHTML2 vs. HTML5

Standards Smackdown: XHTML2 vs. HTML5Way 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…)

Extending STEPS with lynda.com: Dreamweaver CS4

IT Training and Education currently offers three workshops on Dreamweaver CS4:

  1. Dreamweaver CS4: The Basics covers the Dreamweaver environment and building a publishing a simple web site using tables.
  2. Dreamweaver CS4: Creating Websites with CSS concentrates on how to build a website using Cascading Style Sheets to control the layout.
  3. 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 New Features You’ve got prior experience using Dreamweaver to create CSS-based websites, and you’d like to start building dynamic pages based on data from a database, create forms, or add advanced client-side interactivity using Javascript. These lynda tutorials cover areas of more advanced web development not covered in STEPs workshops.
Dreamweaver CS4: Introduction to Spry
Dreamweaver CS4 Dynamic Development

See a more detailed chart after the jump… (more…)

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.