Wednesday 24th Feb 2016
- Introduction to Dreamweaver, the industry standard on Mac and Windows to design professional sites.
- Setting up your site + ftp for www.totton.org/e/yourfoldername and downloading existing site to your local site root folder.
- Create a Web page from scratch using File>New and page properties (Ctrl-J), the toolbox and properties inspector.
- View source code in Dreamweaver using the 'Split' button at the top left of your window
or in a browser - tweaking the code you are creating with Dreamweaver can be helpful when resolving problems. - Creating more pages, saving them with simple names with no spaces. Adding links.
- Previewing
your Web site in a browser by pressing F12 or choosing File > Preview in Browser > Firefox or click and choose a browser from the little globe symbol to the right of the title box:
- You can add additional browsers by choosing File > Preview in Browser > Edit Browser List...
- Experimenting with editing layout colours and sizes in the header, sidebar and container.
- understanding-css-positioning-part-1
- CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com & cssloggia.com
is a great site full of CSS experiments.
- Using more than one CSS for your page(s).
- See the buttons at the bottom of this example page (and steal the code).
- Using Dreamweaver's media queries to serve up a different CSS for a smaller screen size.
- Download free fully-working 30 Day trial versions from Adobe (click the 'try' link)
Alternative free open source software for Windows, Mac and Linux:
BlueGriffon supports HTML5 and CSS3 for Web design | GIMP alternative to Adobe Photoshop
- Graphic file formats jpeg, gif ('jif') & portable network graphic png ('ping!').
In Dreamweaver insert your image using the tree icon on the 'Common' Insert panel. You may want to set the Border value to zero in the Properties Palette, especially if you link from the image. - 5 alternatives to Photoshop see the comments below the article for more, including Aviary from worth1000.com Apple's free iPhoto or Photos are good alternatives for most purposes but Mac-only
- History of the internet and World Wide Web
- Copyright is automatic unless waived. If you'd like people to be able to use your images or music in their own projects (or want to use other's work for your project) consider a Creative Commons License. Free or cheap licensed music from Jamendo.
Digital Millenium Copyright Act. DRM (Digital Rights Management) issues. Peer to peer filesharing rights, wrongs & risks of using the likes of Pirate Bay & BitTorrent. BBC discussion of copyright. Some take a more enlightened view on copyright - Nickelodeon targetted their ads under pirated content on YouTube suggesteing that for more of the same, in better quality, visit their site. Musician Gotye learned to edit video so he could create a mash-up of fans' versions of his hit Somebody That I Used to Know.
Copyright © facts. On Windows you can get the © symbol by holding down Alt and typing 0169 on the numeric keypad, or Alt g on a Mac. no right click
- Creating buttons and rollovers in Adobe Photoshop.
- Using Photoshop's fx Styles, adjusting Bevel & Emboss, Drop Shadows, Colour Overlays etc.
- Creating animated gif graphics and buttons in Adobe Photoshop.
- Image map hot spots to create links on specific areas of a picture. Using a Named Anchor to link within a long page to content lower down (or back to the top).
- GRsites for creating buttons and tiled background textures. Other Dreamweaver links.
- Using Webfonts to enhance your Websites
- Using tables for layout was common but now discouraged in favour of CSS. Inserting a table. Tables still have their uses and you may need to edit an existing site or use tables for an html-styled email. Dreamweaver can convert layers to tables or tables to layers (AP divs - Absolute Position divs).
- iFrames are now established as the standard way to include a movie clip from YouTube or a map from Google.
- Using Cascading Style Sheets (CSS) for default text, to set link styles and to control background images. Designing for your readers at a suitable size. CSS for positioning or using supplied layouts to speed production. Introduction to CSS
- Dreamweaver uses javascript for buttons and rollovers
- Meeting the 'success criteria' for W3C Web Content Accessibility Guidelines 2.0
- Search engine optimisation to boost the numbers who find your site, including META tags, alt text and title tags.
- Introduction to WordPress CMS.
- Monetizing your Site: Adding advertising to your site helps pay for hosting and your time and effort in creating your site. An hour or so setting up some ads can repay you many times over for years to come... As a bonus most advertisers give you access to lots of analytic tools and having a well-known brand advertise on your site can lend some extra credibility to your content (since most advertisers will inspect your site before granting their approval). A good general source of advertisers is tradedoubler.com but you may find it better to find advertisers directly through their affiliate schemes eg Daz3D.com who use CJ Affiliate by Conversant (formerly Commission Junction). Amazon are also worth considering.
- When it comes to advertising your own site, try Google AdWords and Facebook advertising...
Assessment criteria
Is the site working live? Without errors? Have you evidence of testing?
Do the page titles make sense?
Is there a favicon?
Images of reasonable quality, file type and size.
Example of a rollover/button.
Example of an imagemap.
Example of embedded video(s).
Example of embedded page (yours or external site).
Is there an alternative CSS theme, and does it work with a javascript button or a media query?
Is the site coherent in its overall look? Does it look professional or personal without being a mess.
