Web & Graphic with User Experience Design (UX Design)

Web Design - XHTML, HTML5, CSS3, Dreamweaver, Photoshop & XD

Web Design

• Overview of Web Design
• Effective Tools and software available
• HTML5, XHTML, HTML and CSS in Brief
• Supporting HTML5 cross-browser
• Web Page Building Blocks
• A Basic HTML Page
• Semantic HTML: Markup with Meaning
• Markup: Elements, Attributes, and Values
• A Web Page’s Text Content
• Links, Images, and Other Non-Text Content
• HTML Page Structure
• Creating First Web Page
• Creating a Title
• Creating Headings
• Understanding HTML5’s Document Outline
• HTML Validation

Working with Web Page Files

• Planning Your Site
• Creating a New Web Page
• Saving Your Web Page
• Specifying a Default Page or Homepage
• Editing Web Pages
• Organizing Files
• Viewing Your Page in a Browser

Basic HTML Structure

• Headings
• Common Page
• Header
• Navigation
• Defining a Section
• Specifying an Aside
• Creating a Footer
• Creating Containers
• Adding the Title Attribute to Elements

Structural building blocks

• <div>, <section>, and <article>
• Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer>
• HTML5-style heading element levels
• Structural elements: <nav>, <aside>, <figure> (and <figcaption>)
• Putting it all together
• Accessibility and HTML5

Images

• About Images for the Web
• Getting Images
• Inserting Images on a Page
• Offering Alternate Text
• Specifying Image Size
• Scaling Images with the Browser
• Adding Icons for Your Web Site

Web Links, Anchor Links, Internal and External Links

• The Anatomy of a Link
• Creating a Link to Another Web Page
• Creating Anchors
• Linking to a Specific Anchor
• Creating Other Kinds of Links

CSS2 and CSS3 (Cascading Style Sheet)

• CSS Building Blocks and Working with Style Sheets
• Style Rule
• Adding Comments to Style Rules
• Creating an External Style Sheet
• Linking to External Style Sheets
• Creating an Embedded Style Sheet
• Applying Inline Styles
• The Importance of Location
• Using Media-Specific Style Sheets
• Offering Alternate Style Sheets
• The Inspiration of Others: CSS

Formatting Text with Styles

• Choosing a Font Family
• Specifying Alternate Fonts
• Creating Italics
• Applying Bold Formatting
• Setting the Font Size
• Setting the Line Height
• Setting All Font Values at Once
• Setting the Color
• Changing the Text’s Background
• Controlling Spacing
• Adding Indents
• Setting White Space Properties
• Aligning Text
• Changing the Text Case
• Using Small Caps
• Decorating Text

Layout with Styles

• Considerations When Beginning a Layout
• Structuring Your Pages
• Styling HTML5 Elements in Older Browsers
• Resetting or Normalizing Default Styles
• The Box Model
• Changing the Background
• Setting the Height or Width for an Element
• Setting the Margins around an Element
• Adding Padding around an Element
• Making Elements Float
• Controlling Where Elements Float
• Setting the Border
• Offsetting Elements in the Natural Flow
• Positioning Elements Absolutely
• Positioning Elements in 3D
• Determining How to Treat Overflow
• Aligning Elements Vertically
• Changing the Cursor
• Displaying and Hiding Elements

Style Sheets for Mobile to Desktop

• Mobile Strategies and Considerations
• Understanding and Implementing Media Queries
• Building a Page that Adapts with Media Queries

Working with Web Fonts

• What Is a Web Font?
• Where to Find Web Fonts
• Downloading Your First Web Font
• Working with @font-face
• Styling Web Fonts and Managing File Size

Enhancements with CSS3

• Understanding Vendor Prefixes
• A Quick Look at Browser Compatibility
• Using Polyfills for Progressive Enhancement
• Rounding the Corners of Elements
• Adding Drop Shadows to Text
• Adding Drop Shadows to Other Elements
• Applying Multiple Backgrounds
• Using Gradient Backgrounds
• Setting the Opacity of Elements

CSS3 Properties

• Color and transparency
• Backgrounds
• Borders
• Drop shadows
• text-shadow
• Gradients

Lists

• Creating Ordered and Unordered Lists
• Choosing Your Markers
• Choosing Where to Start List Numbering
• Using Custom Markers
• Controlling Where Markers Hang
• Setting All List-Style Properties at Once
• Styling Nested Lists
• Creating Description Lists

HTML Forms and HTML5 forms

• Creating Forms
• Processing Forms
• Sending Form Data via Email
• Organizing the Form Elements
• Creating Text Boxes
• Creating Password Boxes
• Creating Email, Telephone, and URL Boxes
• Labeling Form Parts
• Creating Radio Buttons
• Creating Select Boxes
• Creating Checkboxes
• Creating Text Areas
• Allowing Visitors to Upload Files
• Creating Hidden Fields
• Creating a Submit Button
• Using an Image to Submit a Form
• Disabling Form Elements
• New HTML5 Features and Browser Support

Video, Audio, and Other Multimedia

• Third-Party Plugins and Going Native
• Video File Formats
• Adding a Single Video to Your Web Page
• Exploring Video Attributes
• Adding Controls and Autoplay to Your Video
• Looping a Video and Specifying a Poster Image
• Preventing a Video from Preloading
• Using Video with Multiple Sources
• Multiple Media Sources and the Source Element
• Adding Video with Hyperlink Fallbacks
• Adding Video with Flash Fallbacks
• Providing Accessibility
• Adding Audio File Formats
• Adding a Single Audio File to Your Web Page
• Adding a Single Audio File with Controls to Your Web Page
• Exploring Audio Attributes
• Adding Controls and Autoplay to Audio in a Loop
• Preloading an Audio File
• Providing Multiple Audio Sources
• Adding Audio with Hyperlink Fallbacks
• Adding Audio with Flash Fallbacks
• Adding Audio with Flash and a Hyperlink Fallback
• Multimedia Files
• Considering Digital Rights Management (DRM)
• Embedding Flash Animation
• Embedding YouTube Video
• Using Video with Canvas

HTML Tables and CSS

• Structuring Tables
• Spanning Columns and Rows

jQuery, JavaScript internal and external

• Integrating jQuery Menu
• Integrating jQuery Tabs
• Working with Scripts
• Loading an External Script
• Adding an Embedded Script
• JavaScript form validation

Testing & Debugging Web Pages

• Trying Some Debugging Techniques
• Checking the Easy Stuff: General
• Checking the Easy Stuff: HTML
• Checking the Easy Stuff: CSS
• Validating Your Code
• Testing Your Page
• Troubleshooting when Images Don’t Appear

CSS Properties and Values

• CSS Properties and Values
• CSS Selectors
• CSS Color Values
• Gradients
• Media Queries
• CSS Font Embedding

Making your website live

• Use FTP to load your website
• Choosing your domain name
• Configuring your domain with domain registrar

Adobe Dreamweaver

• Navigating the Workspace in Dreamweaver
• Working with the Document window
• Managing files in the Files panel
• Updating properties in the Property inspector
• Configure workspace layout

Defining a Site

• Creating local root folder
• Setting server information with hosting account details
• Connecting via FTP

Creating Web Pages

• Using the New Document dialog box
• Creating and managing files with the FIles panel
• Previewing pages in a browser

Laying out Web Pages

• Using the Layout section of the Insert panel
• Creating fluid grid layouts

Formatting Text

• Inserting special characters
• Using Find and Replace
• Using Spellcheck
• Understanding paragraph and header tags
• Inserting line breaks
• Creating lists

Cascading Style Sheets (CSS)

• Understanding basic CSS syntax
• Creating and managing CSS styles in the CSS Styles panel
• Applying styles using the Property inspector

Managing Links

• Understanding basic link types
• Creating links using the Property inspector
• Creating content navigation

Images and Rich Media

• Inserting images
• Using the Property inspector to update and edit images
• Inserting Flash content

Writing HTML Code

• Using the Code view of the Document window
• Making changes to code using Design view of the Document window
• Selecting specific code
• Understanding related files

Adobe Photoshop

• Managing Assets Using Adobe Bridge
• Navigating between Adobe Bridge and your computer
• Working with metadata
• Organizing collections
• Outputting projects to PDF and for the web
• Automating multiple images in Bridge

Using Camera Raw

• Basic single image adjustment
• Selective image corrections
• Batch processing and editing
• Understanding Process Version and workflow options
• Automating multiple images

Understanding Photoshop Fundamentals

• Navigating the Photoshop workspace
• Importing and exporting presets
• Resetting sliders and options
• Using tool groups and options

Understanding Selections

• Creating selections using appropriate tools
• Adding and subtracting from selections
• Quick Mask usage
• Using Refined Edge

Understanding Layers

• Creating and organizing layers
• Understanding the differences between raster and vector layers
• Understanding layer masks
• Searching for layers
• Understanding layer groups
• Understanding layer blend modes

Understanding Adjustments

• Differentiating between adjustment types
• Using TAT, clipping, and visibility
• Refining masks on adjustments

Editing Images

• Working with the retouching tools
• Working with Liquify
• Using the transform controls
• Using the Puppet Warp
• Using the Clone Source tool
• Creating panoramas
• Using HDR Pro
• Creating speciality images (black and white and duotone)
• Selecting color

Working with Design and Print Production

• Using character and paragraph styles
• Using vector shapes
• Working with layer comps
• Creating frame based animations
• Working with layer styles

Outputting for Web, Print, and Mobile

• Differentiating between file types
• Using Save For Web
• Using the Print dialog

Adobe Experience Design (XD)

• Introduction to Adobe Experience Design XD
• Starting a Design
• Inserting Text, Images, & Graphic Elements
• Changing an Artboard’s Background Color
• Adding Text
• Styling Text
• Importing Images
• Cropping Images (Masking)
• Importing Graphics (Photoshop, Illustrator, SVG)
• Graphic Effects (Fill, Stroke, Shadow, etc.)
• Fills
• Strokes
• Adding Shadows