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 suppoted by artwork, typography & visual structure.

What about Javascript and PHP? How do they relate to HTML?

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

Both Javascript and PHP is beyond the scope of this unit. However you'll be looking at what Javascript can do in a later module. Look to our TasTAFE Cert IV Web Technologies for an intro to PHP.

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

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, project brief, technical specifications etc. All that's left to do is assemble it in Dreamweaver using the supplied images and copy.

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.

The HT Green page is 1 column, 960px wide, with a header, content section and footer, centered in our browser and using a background image.

It includes a hero image, three thumbnail images and some copy.

Download the tutorial videos from Google Drive

A series of six tutorial videos show you how to use Dreamweaver to create this layout.

Download the videos from our Google Drive folder (see your teacher for the links) then save them to your desktop and play them using VLC Player (or similar).

What's in the Videos?
They demonstrate how you define your site and create a new document based on the centred, 960px width layout with a single column, header & footer.

Also demonstrated is how to add images, wrap text around the images, add a background image and adjust the layout all using css and Dreamweaver.

It's a lot to take in if you're new to html, css and Dreamweaver so don't rush and ensure you understand every step before your move on to the next.

Submission Guidelines
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 Dec. 2016, 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.