Web Publishing | Intro to HTML & CSS

Lesson 3: Introduction to CSS, Dreamweaver & Google Fonts

The previous lesson looked at HTML specifically how to write HTML to make a web page. This lesson introduces Cascading Style Sheets (CSS) and how this code can transform plain-looking HTML pages into effective layout designs supported by artwork, colour, texture and typography.

What about Javascript? How does that relate to HTML?

HTML is a basic programming language that is then "supercharged" using additional code such as Javascript, CSS, PHP and other coding languages to offer high levels of interactivty and functionality which HTML doesn't natively support.

Javascript is beyond the scope of this module, however you'll be looking at what Javascript can do in a later module. Look to our TasTAFE Cert IV Web Technologies for a more detailed look at these technologies.

Note: HTML5 offers greater scope for interactivity than older versions of html. You can do a lot with just HTML5 without these other coding languages.

New features of HTML5 offer:

What's Cascading Style Sheets (CSS) and why is it important?

It's fair to say CSS is now equal to HTML in terms of significance in a web page. CSS adds visual presence to the HTML structure. It can also be used to animate items. Examples of CSS-based animation.

Learning Task | With CSS, without CSS

It's easy to see what a web page looks without CSS. Just add Chris Pederick's Web Developer Extension to either Chrome, Firefox or Opera to enable a single click activation/ de-activiation of css.

With CSS:

 

Without:

Install the extension, visit your favourite website then try turning CSS off to see what a difference it makes.

Note: The Web Developer extension does a lot more than this.

CSS Production Gains

CSS adds flexibility from a production standpoint. By using CSS you can change one thing like the appearance of the typeface for sub-heads and this one change can then affect all the sub-heads in your entire site. This is a great time-saver. Similarly, if a background image for a 200-page web site needed to be swapped out, it's easily done using CSS.

The page you're reading now uses CSS for the following :

Learning Task | W3Schools CSS Tasks | 6-8 hrs

This next step helps to build a solid understanding of how CSS works.

W3Schools offers a series of learning tasks that introduce CSS. It's similar to their HTML series. The tasks build your css coding skills gradually by letting you "tinker" with the code and instantly see the results.

Work through the CSS series at your own pace from CSS "Home" to CSS "Forms".

There is no submission required for this task, work at your own pace although 6 to 8 hrs is a suggested duration. Pay special attention to the explanation of inline, internal and external css.

 

Chris Adams 2017

 

With this groundwork in place, we can now jump into Dreamweaver.

What is Dreamweaver?

Dreamweaver is a combination of code editor, visual design tool and publishing tool and is widely supported by Adobe and a community of developers which makes it one of the most popular options for front-end web designers. It's used to make the resources your working with right now.

It has a lot of productivity shortcuts that make it worth learning in preference to a pure code editor like Notepad++ , Atom or Brackets.

If you need to know more about Dreamweaver and all its features, Adobe is a good place to start.

Learning Task : Your first Dreamweaver layout

Design a web layout from scratch | HT Green

HTML5 TAGS refresher (video, 8 mins)

If you've worked through the Khan Academy or W3Schools resources to learn core HTML skills your next step is to re-visit HTML5 tags. HTML5 tags can be confusing to use thanks to "mountains" of documentation written explaining how you use them and almost all the documentation fails to explain them without providing meaningful examples.

This resource from "Tutor For You" is one of the better tutorial videos that explains the header, main, article, section, aside and footer tags. It's 8 mins of your time well spent IMHO.

 

After you've watched this video, you should now have a better understanding of which tags to use where to re-create our HTGreen layout.

 

We're going to re-create the "HT Green Energy Consultants Web Page" (see opposite). It's very simple, it doesn't have any links or navigation just a few images, some copy and styled text.

We will assume all the pre-production has been done such as wireframing, Creative Brief, Technical Specifications, Functional Specifications etc.

All that's left to do is assemble it in Dreamweaver using the supplied images and copy.

 

Adobe Dreamweaver

Adobe Dreamweaver has evolved to become a powerful code editing tool. It has production efficiencies such as code snippets, error highlighting, built-in FTP, code colouring, code prompts, built-in drag n' drop support for responsive web design, Bootstrap, JQuery and now GitHub integration.

There is a learning curve, so now's your chance to flatten that curve out.

Learning Dreamweaver CC2015.3 - CC2017

With the release of CC2017, Adobe made significant changes to Dreamweaver. If you're used to previous versions learning the new way of doing things can be challenging.

Thankfully we have a series of video demos including exercise files that can make this learning easier. These assets can be found on our shared Google Drive.

These skills-building videos will give you sufficient understanding to start re-creating the HTGreen layout. Contact your teacher for access to these resources.

HTGreen Content

The content is all done, grab the bodycopy here (.txt file) and download the images.zip folder here...(80KB .zip)

Make a folder called htgreen on your computer to extract them to.

Layout Strategy

The HT Green page is 1 column, max-width of 960px, with a header containing a hero shot, a main region containing the thumbs and bodycopy and lastly a footer.

This is all centered in our browser and uses a background image positioned top-left with a background colour that allows the background image to seamlessly merge with it. 

Study the video demos and try to re-create the layout.

Submission Guidelines
Once you're happy with the result, submit your HT Green layout for feedback in a single zip folder. Ensure all the HTML, css and image files are in the folder before you zip it up and send it in.

 

Chris Adams 2017

Google Fonts

With the advent of Google Fonts, Adobe Typekit, Fontsquirrel and the @font-face CSS rule, designers have been freed of the "miserable seven" standard HTML typefaces.

There's now 800+ typefaces and counting, as of Aug. 2017, in Google Webfonts alone.

Learning Task: Use Google Fonts in the HT Green page

The procedure to deploy Google Fonts in your site is easy.

Download and watch the demonstration video in our shared Google Drive; ltonflood12fonts.mp4

It's for the ltonfloodcontrol site but the process is the same for any site.

Using the method shown, change both the subheads and the bodycopy tyepfaces for the HT Green page.

For a detailed explanation of the process check out the Google Webfonts API Support page.

Which Typefaces?
How you choose the typefaces is up to you but if you're new to this, here's a guide that might help. Our Design Module introduces working with typefaces in greater detail.

 

Submission Guide
Zip the site root folder and submit for feedback via email.

Assessment Task | L'ton Flood Control Site | 12 hrs

Once you've received feedback on your HT Green layout and you've successfully deployed custom typefaces then this is your next step, this task builds on what you've learned but adds more pages and the vital navigation menu.

You'll make a multi-page site using a two column layout, a navigation menu with styled menu links to provide visual feedback to the user.

L'ton Flood Control Report

You task is to recreate the L'ton Flood Control Report site (shown opposite) by starting with a blank page then adding divs and HTML5 tags to create the layout and the navigation menu.

It's centered in the browser, with a top menu, a hero shot, a content area with left hand column and wider right hand column and lastly, a footer.

Supporting Videos
The are eight tutorial videos (from a series of 12) that support this task which need to be downloaded from our Google Drive shared folder. They vary in duration from 7 to 12 mins and from 150 to 230MB. See your teacher for the link to this resource.

Method
On your desktop make a new folder to act as the site root folder, name it ltonflood and expand the images960.zip folder in there. You can download the zip folder here (images960.zip, 420KB).

After you've downloaded (and archived) the videos watch them in sequence to help you with the following steps:

  • Defining a new Site
  • Making a new blank page & adding DIVs to contain text and images.
  • Adding images, creating CSS rules for HTML tags, backgrounds, borders and fonts
  • Tweaking the layout to add the "bling" and adjust the column positions
  • Adding links and adjusting their appearance

If you get stuck with the instructions for this task, either Skype your teacher or ask for clarification in our Web Publishing Forum.

Submission Guidelines
After you're recreated the layout (as closely as you can) make a copy of the site root folder, call it ltonfloodfinal. Remove any redundant and big files from within this new folder (such as .psd files), test it in your browser one last time to make sure it all works then zip it up ready for submitting.

Submit the zipped folder using email or your preferred cloud storage.

 

Chris Adams 2017

Lesson Summary:

We had our first look at CSS and Dreamweaver then created a simple html layout. We then created the "HTGreen Energy Consultants" page that introduced shaping the layout using simple css.

Custom typefaces were added using Google Fonts then we created another site from scratch; the "L'ton Flood Report Site". This presented a more complex layout with multiple pages.

These tasks are designed to build your skills gradually to the point where you should be confident enough to make your own site.

If any step doesn't make sense then jump into our Web Publishing Forum and ask for clarification there.