Role of a web designers and Web developers
There are two primary jobs involved in creating a website: the web designer and web developer, who often work closely together on a website.
The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. The main responsibility of a Web Designer is to ensure that the website that they are creating is appealing to the desired target audience and catches their attention.
Web Developers are expected to have an understanding of programming languages and coding to ensure that they can implement certain aspects of their design.
Course Details
This course aims to give new web designers the skills needed to produce professional web sites learning the skills to use the latest software (Fireworks, Dreamweaver and Flash). The course takes the student step-by-step through the construction of a complete website from the very basics of Website design teaching the HTML language, to the uploading of the Website to your web space. You will enjoy the creative experience of developing multi-media web pages and also learn to use specialized products such as Adobe Flash CC and Adobe Dreamweaver, gradually building on the experience and ultimately designing and creating a high quality professional website on your own.
Course Overview
Website Design and Creation with Dreamweaver
Working With Cascading Style Sheets
Introduction to Cascading Style Sheets (CSS), and gain an understanding of how to implement CSS using Dreamweaver. Explore the basics behind how CSS works and how to use it to format, or style, your page text.
Working with Text, List and tables
In this lesson on structuring text, you will learn how to group blocks of text into elements like headings, paragraphs, and lists. Find out how to create, format and style standard tables.
Designing with images
In this lesson, you will learn how to use Dreamweaver to insert and format images within your documents. Dreamweaver provides many ways to work with graphics, both within the program and in tandem with other graphics tools such as Adobe Fireworks and Adobe Photoshop.
Working with navigation
Well structured navigation elements are the backbone of every successful Web site. In this lesson how Dreamweaver handles many variations of links ranging from hyperlinks to e-mail links and does so with ease and flexibility.
Adding Interactivity
Dreamweaver creates sophisticated interactive effects with behaviors, data sets, and accordion panels using the Spry Framework for Ajax.
Crafting a Page Layout
Cascading Style Sheets are the core of Web design. In this lesson we are going to examine some Web design principles, explore page layout using CSS and get acquainted with Dreamweaver’s exceptional CSS tools that do the coding for us.
Working with Forms
In this lesson we will focus on the creation of form pages, their formatting, and their layout. Forms allow site visitors to input their information and send it to the Web server. For the Web server to use the data visitors enter, there must be a processing script on the server.
Adding Multimedia
Learn how to add Flash videos and movies to a web page with just a few easy steps.
Increasing Productivity
Dreamweaver’s productivity and site management capabilities are among its most useful features for a busy designer. In this lesson, learn to use Dreamweaver templates, Library items, and server side to work faster, make updating easier and be more productive.
Web Animation and Design with Flash CC
Getting Acquainted
In Adobe Flash CC Professional, the Stage is where the action takes place, the Timeline organizes frames and layers and other panels let you edit and control your creation.
Working with Graphics
In this lesson you will learn how to use rectangles, ovals and lines to create interesting complex graphics and illustrations. Also, you will learn to edit their shapes and combine them with gradients, transparencies, text and filters for even greater possibilities.
Creating and Editing Symbols
Symbols are reusable assets that are stored in your Library panel. Learning how to work with symbols is an essential step to creating any animation or interactivity. The movie clip, graphic and button symbols are three types of symbols that you will be creating and using often for special effects, animation and interactivity.
Animating Symbols
Learn how to use Flash Professional to change almost any aspect of an object – position, color, transparency, size, rotation and more, over time. Motion tweening is the basic technique of creating animation with symbol instances.
Animating Shapes and Using Masks
In this lesson, learn how to easily morph (create organic changes in shape), with shape tweens. Masks provide a way to selectively show only parts of a layer. Together, they allow you to add more sophisticated effects to your animations.
Creating Interactive Navigation
As part of this lesson learning, let your viewers explore your project and become active participants. Button symbols and ActionScript work together to create engaging, user-driven, interactive experiences.
Working with Sound and Video
Sound and video add new dimensions to your projects. In this lesson learn how to import sound files and edit them directly in Flash, and use the Adobe Media Encoder to compress and convert video files to use in Flash, or to export Flash animations as videos.
Loading and Displaying External Content
In this lesson, learn how to use ActionScript to load external Flash content. By keeping Flash content modular, you’ll make your projects more manageable and easier to edit.
Using Variables and Controlling Visual Properties
Learn how to use ActionScript to control your graphics on the Stage while your movie is playing. Combine complex mouse interactions with variables to create interfaces that respond dynamically to your user for more immersive environments.
Publishing to HTML5
Learn how to use the Toolkit for CreateJS to publish your Flash art and animation assets to HTML5 and Javascript. The Toolkit for CreateJS enables a seamless and integrated workflow for both designers and developers.
Publishing Flash Documents
By the end of this course, learn how to test and publish your completed Flash project, in a variety of formats for playback on different devices and environments – nearly everywhere with Flash Professional.
Website Design with Fireworks
Getting to know the workspace
In this lesson, you will get up to speed on the Adobe Fireworks CS6 interface. Creating a brand-new web page design and exploring the interface as we go.
Pages, states and layer panels
Understand the relationship between pages, layers, and states the most important concept to grasp in Fireworks. These elements add structure to your document. Layers are probably the most important workflow and design tool you have in Fireworks
Working with bitmap images
Adobe Fireworks includes a solid set of tools for creating and editing bitmap images for websites and mobile applications. Learn how to crop, manage, import and improve appearance for a bitmap using bitmap tools and live filters.
Working with bitmap selections
Making selections on a bitmap image is the key to working with bitmaps regardless of the software application. Learn how bitmap selection isolates a specific area for alteration, protecting all other areas from being affected.
Working with vector graphics
You can draw almost any shape in Fireworks by using vectors. Learn how to use the Properties panel and sub selection tool to modify vectors you have created.
Masking
Masking, combined with strokes, live filters, and gradient fills, is a key technique for creating and editing imagery without permanently affecting images. Fireworks lets you work with both bitmap and vector masks easily and seamlessly.
Working with text
Working with type can be a fun and creative part of your design. Learn the text formatting features normally found in desktop publishing applications, such as kerning, spacing, color, leading, and baseline shift. Learn how to edit text any time even after you apply Live Filter effects.
Using styles and the styles panel
Working with styles can improve productivity, because you can apply a series of preset effects for text, vectors, and, to some extent, even bitmap images. Learn how to save a style and use it as often as you want without having to rebuild or match the complex effect from scratch.
Using symbols
Symbols can contain multiple objects within a single asset while still giving you quick access to editing those objects. They are a great option for reusing common graphical elements, such as logos and buttons in a design.
Optimizing for the web and mobile
Proper optimization minimizes quality loss while reducing file size, thus cutting download times for images. In previous lessons you learned the basics of working with graphics in Fireworks. Now you will combine those skills with some new tools to optimize assets for web pages and web-page creation.
Prototyping basics
Learn how layout features (Smart Guides and tooltips), new symbol libraries, and the ability to switch seamlessly from vector to bitmap graphic editing make Fireworks an ideal application for building prototypes.
High-fidelity prototyping
Fireworks is an excellent graphics editor but it is not designed to be an HTML5 web-page editor you can find all the tools you need to build a realistic, dynamic prototype to whet your client’s appetite. This lesson focuses on prototyping and use slices for visual effects such as rollovers and other interactivity.
Improving your workflow
Firework has full ways to save you time from batch processing and custom automation of tasks to built-in features and integration with Adobe Bridge. You will find many ways to speed up your project workflow without cutting corners.
Going further
Fireworks CS6 does not stop at creating graphics and prototypes. New in CS6 is the ability to skin (create a visual look and feel) for a jQuery mobile site. In this lesson, you will learn how to create a theme for a jQuery Mobile site and customize and edit a jQuery design in Dreamweaver.
Website Design with HTML5
Introduction to Hypertext Markup Language
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages.
Starting a HTML Document
Get started by Learn to create your first HTML document – the basic template for future pages, What HTML is, how it’s structured, and learn the major tags and features of the language.
Structuring Documents for the Web
In this chapter, you learn the key concept to create a web page and how to give it structure. Understand how a web page describes its structure to a web browser. You also learn the meaning of key terms used by web designers, such as elements, attributes, tags, and markup.
Fine-Tuning Your Text
Beyond the basic structural elements outlined in previous lesson, you get to learn how to use a wide range of elements to mark up your text. By the end of this lesson, you’ll have a hang of all the elements you might need to mark up almost any kind of content.
Links and Navigation
In this chapter, you learn how to link between pages of a website, link to other sites, how to structure folders in a site and how to link to specific parts of a page in a site.
Images, Audio and Video
In this chapter you learn, how to add images to a web page, what are the different types of image formats & where to use each of those and how to add audio and video to your web pages. Also, you learn all about the ‘video’, ‘audio’ and ‘object’ elements.
Tables
The objective of this lesson is to learn about tables and how they are used in HTML. Also you get to learn about basic table elements and attributes and get to create accessible tables.
Forms
Almost every time you want to collect information from a visitor to your site, you need to use a form. Hence in this lesson, you learn to create a form, to use different types of form controls, what happens to the data a user enters, how to make forms accessible and how to structure the content of forms.
Cascading Style Sheets (CSS)
In this chapter, you learn how to use CSS to take control of the style of your pages, including the color and size of fonts, the width and color of lines, and the amount of space between items on the page.
More Cascading Style Sheets
In this chapter, you continue to learn how to use CSS to control the presentation of HTML web pages, starting with CSS properties that enable you to control the presentation of links, backgrounds, list styles, table styles, and outlines around boxes. You then learn a technique to add content to a page using ‘:before’ and ‘:after’ pseudo-classes. Finally, you learn how to use CSS to position boxes on the page, which enables you to create attractive layouts for your pages.
Rounded Corners, Animations, Custom Fonts and more with CSS3
In this chapter, you learn about the latest version of the CSS specification, CSS3. Unlike previous versions of the specification, CSS3 consists of smaller specifications that focus on particular areas of interest. These are called modules. CSS3 significantly increases the power of CSS.
Learning JavaScript
Here you learn how to start programming using JavaScript, how the Document Object Model enables you to access and manipulate HTML elements, how to apply logic to your JavaScript programs, how to loop through collections of information with JavaScript and lastly – how to work with dates, math and other built-in JavaScript features.
Checklists
This final chapter contains checklists on some helpful topics and you get to learn about Search Engine Optimization (SEO) and Accessibility.
Check out our sample video tutorials
