Intro to DreamWeaver: Planning a Site

When you guys finish the midterm, you can get started thinking about what you want your first website to be about, and what you might want it to look like. Watch this video for more on planning a website. It's a bit simplistic, but it's enough for this course. If you're really interested in Web Design, consider taking it next year.

Continuing CSS: Working with Lists

If you have the old link for the first animation with CSS tutorial, be aware the new link is here: Learn CSS: Basic Animated Buttons...

New video:
Learn CSS: Refresher on Lists + a bit of CSS
Animating with CSS isn't really that important, but it is neat. Lists on the other hand, have become pretty important through the use of CSS. Most websites now use lists to create their menus. If you are new to CSS, you probably haven't done much with lists, as they are pretty ugly in base html. In this first video, get a little refresher before we press into creating menus with lists.

Don't forget, your final is already online. If you haven't looked at it yet... you probably should start. It's due by the end of this week.

Continuing with CSS

I've re-uploaded the video working with Brackets, as there were a couple little issues with the encoding. It should run better now for the few who had issues. See it on YouTube.

The CSS video on lists is almost ready. I've uploaded the incomplete version to our campus archive; you can get started on it there if you're on campus today. The completed video should be ready tomorrow.

Today

No new activities today. Make sure you understand the prompt for your final, and participate in Hour of Code.

Intro to DreamWeaver: Images p2 and CSS

I've uploaded the second part of the Images lesson for DreamWeaver. In this video, we look at how to create roll-over images and image maps.

I've also uploaded the next section, working with CSS with DreamWeaver.

DigC: Intro to DreamWeaver: Images and Hyperlinks p1

Part 2 of both Images and Hyperlinks imported incorrectly. So, they won't be up until Monday. However, you can start learning about Hyperlinks and Images today, as part 1 of both exported fine.

Wait until you can work through part 2 of each before turning in either one.

Part 2: Creating Hyperlinks 1 of 2

Part 3: Using Images 1 of 2

Creating in CSS: Part 6

I haven't recreated the early CSS videos yet, so you'll have to use the old ones in our school archive still if you're on activities 1-5. However, if you are activity 6:

In the video below, I'll lead you through creating a button with CSS. In the video below, I only create one and it doesn't go anywhere. However, I'd like you to create three, all in the same .html file, and I'd like them to be links. This means, you'll have to remember how to create links, and how to create IDs with CSS, since I don't demonstrate that in this video. Watch on YouTube

DigC: Intro to DreamWeaver, part 1

Today, we'll move on from Adobe InDesign into Adobe DreamWeaver. DreamWeaver is used to create webpages. The software allows working in code, or in design mode. This gives us a lot of control if we want it, but also gives us an easy way to build webpages.

This may seem daunting for someone with no background in building websites, but don't worry- we'll walk through it gradually. By the end of this unit, you'll have the skills to build a simple, but functional website.

When learning a language, the first program we often write is just to make it say Hello World. However, HTML is not a programming language, and thanks to DreamWeaver, a lot of the code will be generated for us- so we are going to do quite a bit more than just Hello World. Watch the video on YouTube here.

WebDesign: Uploading & Intro to Brackets

If you haven't uploaded your table-based website, you need to do that today. Next class you need to begin the CSS activities. If you haven't found a free web server to host your website, you'll need to do that too. If you need assistance, watch the videos from before we went on holiday.

Just before the break, a couple of you brought to my attention that FileZilla isn't working. The tech department has blocked the port that FileZilla utilizes. I've left FileZilla in the video, as I still recommend it for home use, but while at school use FireFTP for now. It's an add-on for Mozilla Firefox, and is currently working fine. It should last long enough to get the issue with FileZilla cleared up with our Tech Dept.

If you need help, watch the video on YouTube.

If you're ready to move on, play with the code editor Adobe Brackets today. I've prepared a video on YouTube about it as well.

Bringing it back

I had discontinued this for a while... but I realize now that may be a mistake. I'm going to be bringing this back. My intent is to start creating a lot of video content and publish it through YouTube. All of this will be free to use as an individual or as content if you are an instructor or teacher. I would greatly appreciate thumbs ups for content you find useful. I'll probably start this back up at the start of the new year- and it'll probably get a face lift at that time as well.

Thanks for staying interested, and keep your eyes open around the end of December/start of January.