DREAMWEAVER WORKSHOP II
Notes from today's workshop session
LAST SESSION
What did we determine has to be identified and analysed before designing our website?
- TARGET AUDIENCE
- THE AUDIENCE NEEDS
- PURPOSE OF THE WEBSITE
List some of the limitations when designing for web...
- COLOURS/WEB SAFE COLOURS
- FONTS/TYPE (WEB SAFE)
- BANDWITH/MEMORY (FILE SIZE)
- RESOLUTION OF THE SCREEN
WISIWYG= "WHAT YOU SEE IS WHAT YOU GET"
Generally, what you see in Dreamweaver is the final resolution that you achieve.
HTML= Hyer Text Mark-up Language
TAGS TO BE AWARE OF...
<head>
OPEN HEAD
CONTENT THAT ISN'T PART OF THE WEBSITE, BUT MAKES IT FUNCTION IN A CERTAIN WAY (MAKES IT VIEWABLE THROUGH SEARCH ENGINES, ETC.)
</head>
CLOSED HEAD
<body>
OPEN BODY
INFORMATION VISIBLE ON THE WEBPAGE
</body>
CLOSED BODY
<title>
OPEN TITLE
THE TITLE OF THE PAGE
</title>
CLOSED TITLE
<html>
OPEN HTML
FROM THIS POINT ONWARDS, WE WORK IN HTML LANGUAGE
</html>
CLOSED HTML
ORDER FOR THE MOST BASIC WEBSITE DESIGN:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
VIEW > VIEW SOURCE > SEEING THE MOST BASIC WEBSITE WE CAN CREATE, AND THE ABILITY TO SEE CODES.
This was the first website ever made.
The internet was invented in Cern, Switzerland- created by a Scientist who was tired of printed design- born from people wanting to communicate with one another. All website basics are formed with this code.
Looking at the sources and coding for websites previously researched that have inspired me, and what content/information can be found in their coding...
POPULAR TAGS (NEW):
link rel
script
div
href
class
content
SCRIPT
Majority of websites are based upon HTML, however, it is reasonably limited. Java Script gives more advanced features. Seen a lot on Flash, early colour mobile phone games were also Java Script. Animated websites are highly likely to use this.
TD HEIGHT/WEIGHT
Table data. This is how you lay information/content out with HTML, though very limited, so we will look at CSS.
META TAG
Key tags, how your website is searchable through Google and other search engines.
DIV
Directly linked to CSS, a division of a website, and how it is laid out.
CSS
Cascading style sheets. Adding fonts, colour, and layout to our website.
When creating a route folder (and subfolders) to save your content for web design, you should save in lowercase letters with no spaces.
Subfolder is called "images"- though any content can be stored here, simply an origin name. All media goes into this folder.
Opening screen from Dreamweaver. We will be using HTML, CSS and JavaScript.
PHP is used for sites such as Amazon, built on an Excel-like spreadsheet, storing information to communicate and translate online. So you don't have to make a separate page for every product- most commonly used for e-commerce.
Opening page/code when a new HTML file is made. We now need to tell Dreamweaver where our source file is based on our computer, a collection of files and assets.
Site > New Site
Page appears to name site, here, the option to also make the site live. Search and save for your source file location.
This now links source folder and 'images' subfolder, as well as local site.
File > Save As... > Automatically goes to route folder.
When you create your website, the first page you want to be seen has to be saved as index.html... all other files and pages can be saved as you like, though 'index' is a universal file name. Click on the globe icon to link to preview on a browser (see below).
Between <title> and </title> change 'Untitled Document' to 'Sophie Wilson', or title of your choice.
Between <body> and <body> add the written content you want to be shown on the web page.
Times font, 18px... default for the internet.
Have to use CSS for specific font details- can be more versatile.
Considering web safe yellows- consider the consistency with my branding, and matching print based design to my web/screen based design as effectively as possible.
Opening a new CSS file, save as "stylesheet" if not directly named, if designing for, eg, Google, it would be, google.css.
To create body, type body, hold down 'shift' and '{' to show all the CSS file attributes. Make your code as easy as possible to understand. Press 'return' key for a new line...
Click semi colon to finish the particular attribute that you are working with.
12 pt is around 14 px.
To change colour type 'color' and choose your hex code. Click another 'Shift' and '}' to close the attributes.
This is a full CSS attribute code. Cmd + S to save.
To translate the CSS code over to HTML, save CSS. Go to HTML page, source link (link icon) to copy over CSS code (link href should be in HTML!). Save this, preview in browser.
Creating a div (wrapper attribute)- height and width, layout of page, background colour.
div id= < div press return and <div id= 'wrapper'> for open div.
Close this automatically by clicking '/' and </div> will automatically be typed in.
Refresh the webpage to reveal the background colour, as coded appropriately.
Working towards the navigation of the page... #navigation {
Working towards a fluid navigation, float left (navigation left bar)
Add navigation to div wrapper in the same process.
Indent separate actions over to make it a little easier to understand, can look and see which divs aren't working if a problem with webpage. Keep everything separate.
You should always make your webpage as low a file size (and the content) as possible. If there's a solid background colour in your image, don't add this, as you can add this in Dreamweaver, and a transparent background will provide a smaller file size.
To make a logo for the site...
Work with PNG- 24 file sizes for transparencies.
Save in images file, logo.png.
Background- images, source your png logo, save over on HMTL code page (within navigation div)
Save and refresh in Safari.
When creating navigation buttons, we need to add margins so that text isn't flush left. Adding a margin and padding (between buttons) will take away from the overall button px height and width.
Go into design and type in your text for your buttons- originally I chose red (I couldn't remember whether or not I'd chosen white text!) but then chose the buttons to white which (although still dire...) looked a lot better.
CLICK FILE > SAVE ALL> QUIT DREAMWEAVER > USER WORK, DRAG ROUTE FOLDER ONTO DESKTOP.
Really looking forward to next week- really exciting seeing work produced so easily and effectively.
No comments:
Post a Comment