Tute schedule

Tute 1

Set up OPAX account, FTP and WS-FTP

Tute 2

Reading discussion, what is HTML? Basic HTML tags, HTML in Notepad.

Tute 3

Reading discussion, HTML in Notepad. Create and upload pages to OPAX.

Tute 4

Reading discussion, What is CSS?  Introduction to Dreamweaver: workspace, files, site management.

Tute 5

Reading discussion, Dreamweaver: images, CSS, page properties, tables, image rollovers.

Tute 6

Reading discussion, HTML & Dreamweaver revision, images and the web.

Introduction to Fireworks: basic image editing including rotate, crop, resize

Tute 7

Reading discussion, Fireworks: b/w image, brightness/contrast, add text and text filters to an image. Find and download images on Flickr

Tute 8

Reading discussion, Dreamweaver review: make new site with 5 pages, text and image provided to insert and link

Tute 8

Reading discussion, using multiple media on the web: audio

Tute 10

Reading discussion, using multiple media on the web: video

Tute 11

Project consultation

Tute 12

Project consultation

————————–

Tute 1 Your Opax server space and FTP

THE INTERNET and FTP EXPLAINED

Set up OPAX

  1. Start > Programs > Internet > Mozilla Firefox or Internet Explorer
  2. Open http://www.swinburne.edu.au/design/tutorials/P-web/T-How-to-set-up-your-OPAX-webspace/ID-61/
  3. Click on Weekly Guide > Setting up an OPAX account
  4. Follow instructions
  5. After set up, go to your new web space:

http://opax.swin.edu.au/~123456 where “123456” is your student number.

Using WS-FTP

  1. Start menu > Programs > Network > WS FTP
  2. The WS-FTP workspace: your computer and the remote server
  3. Make a new connection with your username (student number) and password (SIMS)
  4. Connect…. Not working? Close WS-FTP and try again.
  5. Importance of ‘public_html’ folder

Upload a file

  1. At WikiCommons find an image http://commons.wikimedia.org
  2. Save it without spaces in the file name (use dashes instead) eg flower-pic.jpg
  3. Download it to My Pictures
  4. Upload it to your website space
  5. Type in your OPAX URL eg http://opax.swin.edu.au/~123455/flower.jpg and see your picture

Free, open source FTP software to download

  • Filezilla (Windows and Mac)
  • Cyberduck (Mac)

===============================================

Tute #2

What ‘s happened to this writing?

Can you work out any of the markings? Decipher it here

HTML markup language

Uses:

  • semantic markup = instructions that describe the text’s purpose or meaning eg “this is a paragraph”, “this is the main heading”
  • presentational markup = instructions that are only about style eg “this text should be in italics”
  • “tags” made up of the “less than” < and “more than” > characters and the forward slash / and letters, or word in between eg <br />

HTML used to be a mix of semantic and presentational markup, now at HTML 5, it’s much more about semantic markup , and only using elements that are appropriate to the content meaning. Presentation is defined somewhere else, using another file type called a style sheet (.css).

Pairs of HTML tags

  • Most tags are in a pair – they have an “opening/start tag” <html> and a closing/end tags: </html>.
  • These tags don’t work unless they are in a pair
  • Text goes in between them eg <html> text in here </html>

Stand alone HTML tags

  • A few tags don’t have a pair, they just sit by themselves
  • You just have to remember which ones they are
  • Some common ones are <br> (line break)

Where do I write HTML tags?

  • In a file type called “.html” or “.htm”
  • You can use any text editor to write html files, and specialised editors like Dreamweaver
  • Today we’ll use Notepad

Where do HTML files display?

  • When the internet began, html was the native file format of a web browser like Internet Explorer or Firefox. A “web page” was really a HTML document. The browser is the software needed to view it. (in the same way that you open Word to view a .doc file)
  • Nowadays, when you view a web page, it’s unlikely that it’s in HTML. Visit some websites and see what the file extension is at the end of the URL. Is it .htm or .html?
  • Many different file types can display in web browsers and have for a long time.
  • Html is still used to create web pages but the most common file type is now PHP.

HTML and its display in a web browser

4 basic HTML tags

  • http://www.youtube.com/watch?v=6AyPVuKIncE
  • 4 paired tags essential for all HTML documents.
  • <html> </html>: defines the document as html
  • <head> </head>: important information about the document. Does not display on the web page.
  • <title> </title>: the name of the document. Goes inside the <head> tags. Displays in the browser up the top, not in the page itself.
  • <body> </body>: what displays on the page, the “body of content

More HTML tags

  • <p> </p>: this text is a paragraph
  • <b> </b>: this text is bold
  • <h1> </h1>: this text is biggest heading on this page. There are similar tags from <h1> to <h6>
  • <br>: a line break here. This tag is self-closing and is not in a pair.
  • <em> </em>: italics text
  • <hr>: horizontal line. This tag is self closing.
  • A full list of HTML tags

========================================

Tute #3: Tags with attitude attributes

What is an attribute?

It’s extra information that goes inside the tag. In paired tags, it goes inside the first pair.

You can have as many attributes as you like inside a tag.

The format of an attribute is: some text, an equal sign, double quotation, text, double quotation eg.  alt =”Sunset at St. Kilda”

Two tags with attributes are the link tag and image tag.

Image tag: self-closing tag

  • <img src=”image.jpg”> or <img src=”http://www.blah.com/images/image.jpg”>
  • Images are not technically inserted into an HTML page. Instead, the location or “source” of the image is referenced.
  • The “source” is either an image located in another folder, or an image located on another website.
  • The <img> tag creates a holding space for the referenced image.
  • The <img> tag has two required attributes:
    • src (source of the image/its location) eg
    • alt (alternative text description/a description of the image in words).
  • Another common attribute is title eg title =”Sunset at St Kilda”. The title displays when the mouse hovers over the image.
  • List of all image attributes

Exercises

  1. Insert and edit image tags
  2. Open Notepad or Notepad++ and insert a link in an existing HTML file
  3. Use an image as a link

Anchor tags: paired tags

  • <a href=”http://www.blahblah.org”>Visit the Blah Blah website</a>
  • Anchor tags instruct the linking of files.
  • The text inside the pair of anchor tags is called the “link text” – it’s what people click on. It could also be an image.
  • The most important attribute of the a tag is the href attribute, which indicates the link’s destination.

By default, browsers display the text or image inside anchor tags as:

  • Unvisited link text is underlined and blue/image has a blue border
  • Visited link text is underlined and purple/image has a purple border
  • Active (clicking on it)  link text is underlined and red/image has a red border

Exercises

  1. Insert and edit links
  2. Open Notepad or Notepad++, open a html file and add a link to the course website

==================

Tute 5

Images in Dreamweaver: summary

  • Insert an image: Insert > Image
  • To create an image as link: Select the image by clicking on it, in the Property Inspector, in the white space next to “Link” type in the file name/web address or browse for a file. Hit Enter.
  • Resize an image: Select the image by clicking on it, drag the corners of the image inwards.
  • Insert a ‘rollover’ image (optional): Insert > Rollover image http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7cb0a.html

=========

Tute 6: Handy Dreamweaver tips for your assignment

Centre background image of a page

  • Select Modify > Page Properties
  • Browse for your background image, choose “no repeat” from the drop-down menu.
  • Click Apply
  • Your background image will display in the top left corner.
  • To centre it, find the “CSS Styles” panel on the right side of your screen.
  • Click on the tab “All“
  • Click on the “+” next to <style> to expand it
  • It will expand to display a tree menu, with “body” below
  • Click on the text “body” and then click the pencil icon in the bottom right corner of the panel
  • A pop-up window displays, called “CSS Rule definition for body“
  • Change the Background Position (X) drop down menu to “center“
  • instructions also here http://www.layersmagazine.com/add-depth-and-dimension-in-dreamweaver-cs4.html

Change the colour of text links (from the default colour of blue)

Remove the blue link border around images that are links

  • Click on the image to select it
  • Information about the image displays in the Property Inspector panel below
  • In Property Inspector > type 0 (zero) next to Border, and hit Enter/Return

Change the colour and style of page headings eg h1, h2 etc

Embed a youtube or other video


Have a background sound that plays when the page opens

  • Make sure you are in Code View or “Split” View. Click your cursor in the Code window, anywhere inside the <body> tags
  • Copy this HTML Code (Ctrl + C) :
  • <p><embed src="http://PASTE YOUR SOUND FILE URL  HERE"  width="0" height="0" autostart="true"></embed></p>
  • and paste it anywhere inside the <body> tags in the Code window
  • Find a background sound in the public domain on The Internet Archive: Audio http://www.archive.org/details/audio or CCMixter http://ccmixter.org
  • Locate the download link for the file on the page: MP3 is preferred.
    Hover over it, right-click and “Copy link location” (Firefox) or “Copy Shortcut” (IE).
  • Paste the “audio file link location” you have just copied into the code above

========================

Tute 7: image editing

Unbelievable pictures:http://www.designdazzling.com/2009/07/34-unbelievable-pictures/

12 worst Photoshop mistakes ever http://www.oddee.com/item_96450.aspx and another 15 more

Photo tampering throughout history

=============================

Tute 8: Digital images and image editing in Fireworks

===========

Week 9: “Sites” in Dreamweaver + working with transparency in Fireworks

  • When you work with more than one page in Dreamweaver, it’s a good idea to use Dreamweaver’s special tools for “managing sites”.
  • These tools help you find and fix broken links, broken images and lost files and basically make managing your collection of files (HTML, images etc) much easier.
  • Before you open Dreamweaver, set up folders, like you would for any media project eg “Project” folder, and then inside that, “images” and maybe “audio”
  • Set up a site in Dreamweaver
  • Troubleshooting links : Dreamweaver tool that finds and fixes any broken links

Transparency tutorials: Fireworks

Use the Marquee Tools and the Eraser Tool in Fireworks to get rid of coloured backgrounds

White backgrounds and transparency shortcut

Save an image with transparency

  • If your image has a transparent background and is ready to be saved, choose File > Image Preview and choose GIF or PNG8/36

==============================

Week 10 & 11: Final Project Tips

Instructions are also in the Final Project outline

Setting up your project: folders

  • Set up a folder called “project” or something similar
  • Inside the “project” folder should be an “images” folder, and maybe other folders like “audio” or “video” if you are using your own audio and video.

Setting up your project: files

  • Inside your “project” folder there should be 11+ HTML files
  • 10 “nodes” /HTML  files of your project
  • 1 of these files must be called “index.html” – it is the home page or first page of your project
  • Name your other files whatever you like. It may be easier to call them something related to the page’s content, like “family-photographs.html”, “facebook.html”
  • 1 HTML file that is your bibliography
  • 1 HTML file that is your Exegesis OR you can submit this as a Word doc: 500 – 700 words.

Setting up your project: Dreamweaver

  • Use the Site > New Site tool in Dreamweaver to set up your site.
  • If you use a university computer, you will have to do this each time you logon – BUT, it only takes 1 minute and it’s worth it. It will prevent you having broken links and broken images.
  • The two most important things to fill in are
    • the location of your Project folder on your computer/USB stick/H: drive
    • the location of your images folder on your computer/USB stick/H: drive

Set up a new site in Dreamweaver

Click the "Advanced" tab to browse to your Project folder & images folder

Click the "Advanced" tab to browse to your Project folder & images folder

Submitting your project: FTP upload OR CD/DVD

  • FTP upload
  • CD/DVD burn
    • burn the complete “project” folder onto a CD, or DVD if you have audio and video
    • burn your Exegesis in Word .doc format (not .docx, please) as well
    • CHECK that your website is working by
      • moving your original project folder to a different place on your computer (this is so your CD files can’t reference it – and broken links will show up)
      • opening your browser (Firefox or IE)
      • File > Open (Browse for IE), finding the index.html file on your CD, and opening it.
      • Your site will load up, off the CD.
      • Click on all links to make sure they work. If they don’t, correct them and burn again.
    • drop it in the Network Literacies mailbox, AS Building, Level 4

================================================

CSS

A HTML file is the “head” and the “body” of a HTML webpage, and the CSS (cascading style sheet) is its “clothes”.

How to edit styles in Dreamweaver

You can edit the default styles for text and headings in Dreamweaver with CSS.

  • Make sure you can see the panel “CSS” on the right. If not, Window > CSS
  • Click on the “+” button at the bottom of the panel to add a new style
  • A pop up window displays.
  • In the top menu choose: Selector type = “Tag”.
  • In the second drop down menu, choose a tag to edit eg “h1” “p”
  • A pop-up window displays, choose the formatting you want (colour, font, bolding etc) and click Ok.
  • Continue for other styles in your document.

Tables and layout in Dreamweaver

  • The example assignment document http://netlit.swinmc.net/example/020_example2.html is laid out using tables and a background image.
  • A table in Dreamweaver works the same as in Word.
  • Create a similar file with tables.
  • Choose a background image. Modify > Page properties.
  • Insert a table Insert > Table
  • Insert text in the table: click inside a table cell (same as in Word).
  • The table will automatically have a border, helping you to see the table cells.
  • At the end, select the table > Property Inspector > Border : 0 (zero)