PPD ~ Group Workshop ~ Web

Notes from the web sessions workshop with Lorraine:

What could the pages for the website be and what would the content on these pages be?

1. Home //

- News feed, few images of work, name and what you do

2. About //

- Info about education, basic skills summary, services I offer, a downloadable CV

- Be careful not to repeat yourself!

3. Portfolio //

- Clients you have worked with, images of work, information about collaborations

- Could be in categories e.g. digital / print or type / image, but at the moment we probably don't have enough work to put it into categories as we don't want bare pages

4. Contact //

- Phone, email, studio address, links to social media for news (twitter, tumblr, Facebook)

5. Shop //

- Buy prints, stationery etc. - State if available for commissions

Then we had 15 minutes to design a scamp for our website, then we got some anonymous feedback from others which was really useful as there were some bits I was unsure about if I needed them or not.

Feedback

1.

- Simple and effective

- Centre align the images and take out the news feed

- Maybe use less images

2.

- Too many images!

- Would be useful to have your name as well as the logo

- Centre align page images

3.

- Maybe lower the amount of images

- 1 or 2 key pieces of work

- Other than that, nice layout can see it looking nice

4.

- Simple and clear

- Straight to the point

- Maybe have just one image on display

5.

- Consider margins

- Maybe liven up images and news feed with buttons

PPD ~ Tech Sessions

These are my notes from the tech sessions with Lorraine that we had after the workshops with Simon.

Lecture 1

Why make a website?

Purpose - promotion, point of contact, sales, persuade, inform

Audience - industry professionals (networking), other creatives (collaboration), interested individuals/companies, educational purposes

Essential content - style of work, capabilities (portfolio), contact information, about, whatever the audience wants/expects to see

Content on homepage - simple navigation on each page, personal branding, work, news, basic about (name!)

Consider:

Functionality - does it work?

Usability - does it work well?

Aesthetics - is it well designed?

How do you use a website? You look for anything that is interesting and resembles what you are looking for. People only wait a few seconds for the website to load before giving up, so need to make sure images are small file sizes so load quicker.

Look at book - Steve Krug - Don't make me think

Web Design

1. Make a storyboard

2. Write the body text

3. Gather images

4. Then start designing in dreamweaver

Photoshop

- Use the slice tool (behind the crop tool), to slice the image and save the images separately. Save for web and devices (the crops are highlighted in blue) at 72dpi, with the quality about 60 or 70, and rename the images after you save them as they will just be saved as image slice.

- You can do this for your rollover links to make sure they are the same size, but you will need to hide the other layers, and save again

As an example, I've sliced up an image for a website design that I made for the YCN brief. I wish I had known about this tool sooner as it could have saved me so much time on previous things! But I'm sure I'll make good use of it now.

Lecture 2

First we looked through an example of a brief which is an example of what not to accept to do. The brief was asking for a lot of work, that would have to be done by about three people, expecting one person to do all this for free. We are designers, not web developers.

Photoshop

We looked again at the slice tool that we looked at last week and some more functions with this.

This shows you how long a selected image will take to load. [1 sec for this example]

You can select just the slices you want rather than them all. Go save - slices - selected slices. Can select more than one.

Can save as a HTML file as well but uses table code rather than divs, so it is recommend not to do this, as div's are more modern and work better.

The files are then saved to their own images file.

Dreamweaver

This is an example of a comment. The coloured code is for the computers benefit, the greyed out bits are the comments, which the computer ignores, so you can write notes to remind you what each bit is for. They are made with this code

<!-- comment -->

 

 This is the button on dreamweaver to apply the comment. To remove the comment use the button underneath.

You can choose to ignore a bit of html, to show you what a certain part of the page would look like without a bit of coding. This can be useful if you are unsure about a bit of code but you don't want to delete it and lose it.

This is the collapse full tag button. It folds up a piece of code that you know you don't want to change, a bit like locking a layer on illustrator that you know you don't want to accidentally mess with. 

 

This is what the tag looks like when it has been collapsed. If you hover over it you can see what the code is. To expand it back to normal code, either double click it or click on the expand all button.

Remember HTML is for content, CSS is for design style.

---

These are useful tips, and I am also reading the Web Standardistas book.

I am learning how to create my own website following the Dreamweaver workshops, so I have been reading this book that has been recommended to us. I have also started doing a lot of research in to website design and found that this is something that I am interested in that I didn't really think about before. Hopefully in Summer I will build my own website and buy my domain to get it all live!

Things I have learnt from the book so far:

- History of the world wide web and what XHTML is

PPD ~ Making my website

Based on this scamp, I am going to try and create my own website from scratch using Dreamweaver based on what I have learnt from the workshops.

I'm trying to create a really basic page with my banner on, just to put in to practice what I have learnt so I don't forget! I'm making sure the banner fits to the web standards.

Here is a really basic example of a template, with a link under it. It took me a while to figure everything out, but I think with a bit of practice I can be designing websites! This is definitely something I want to consider for some of next years projects.

Next, I made and saved the other pages for the site (index, about, contact, portfolio), and applied the template to them. I'm just trying to sort out my hosting registration, and then I need to gather some content to put on the site. I need to get this done soon as I've put claudiagriffin.com on my business cards!

PPD ~ Dreamweaver Workshop III

To open

- Root folder means you can work on website on any computer if you download the folder

- Manage sites -> click site -> edit -> local site folder -> navigate to your user work folder and select your folder -> ok -> done

Rollover buttons - be creative!

- Scamp would have measurements on to help work out measurements

- The padding and margin take in to account when working out the size of the button, we are making them width 130px and height 40px

- Photoshop - New document (web) - transparent background

- Try to keep file sizes as small as possible so website will load instantly so viewers don't get bored

- If having a solid background colour in an image, set the image as transparent and add the colour in dreamweaver

- File - save for web and devices - choose PNG24 as transparent background - save in to root folder

- When saving, all lowercase, no spaces, commas dashes etc, make it as short as possible

- Same image, underline, save in to save folder but with a different name

- Insert rollover images (they use javascript)

- Click at end of > of first button

- Alternate text (searchable by google, this is there so the web page is useable by everyone - the screen reader reads the alternate text for blind people when they rollover image) so type what the button is

- Makes the website quite complicated in terms of code

- Put all the buttons in

- Remove the background colour of the buttons on the style sheet to remove the boxes, save and refresh to see the changes....e.g..

[on photoshop should align the text to the left not in the middle!]

Creating new documents

- Use a dreamweaver template so only have to design the page once

- We are going to convert what we have in to a template (.dwt)

- Create 4 html pages from this dreamweaver template, so if we change something on the original dreamweaver template it will change all four pages at the same time

- We are making the area on the right an editable region, click area and then

- Give the region a name

- We don't want it to be HTML, we want it to be DWT so go file - save as template - save as [type template]

- New sub folder where templates are saved

- Need to recreate the index page as it wasn't created from template

- Go file - new - page from template - create

- Save over old index page

- Create the html pages for the other pages

- Put some different text on each page to differ

- Go on to template page

- Delete the padding on the stylesheet page of the buttons and make the width and height the same size as the image

- HTML pages are locked so if you need to edit them you do it on the template

- The properties bar at the bottom displays the specifics for each button and a space for the link, click the folder icon next to the link tab, e.g.

- This updates all the file from the template at once when you save

- File - save all

Making it live

[copy from Sophies blog]

MAKING A NEW DESIGN (STARTING FROM SCRATCH)

New > Blank Template > HTML > (None)

HOW DO YOU MAKE A PAGE LIVE?

FINISH WEBPAGE > Site > Manage site > Servers > + > Site set up (server name can be blank, doesn't matter) > FTP: sophiewilson.com (All other information from One.com) > Save> Save> DONE> 

* Sometimes need to put in ftp. before name, e.g. ftp.sophiewilsondesign (usually at college) *

> Click ^ arrow in files > Click expand button to connect for local files (to update) > Drag the local files over, now live.

HOW DO YOU REFER OVER DOMAIN NAMES? (.CO.UK - .COM)

Check emails from 1-2-3 reg, IPS tag to transfer over to one.com, paste over IPS tag, 24 hour confirmation.

Web forwarding, click forward

HOW DO YOU CHANGE YOUR TEXT PREFERENCES? ARIAL/HELVETICA/SANS SERIF TO HELVETICA/ARIAL/SANS SERIF

Manually in CSS (type in, change order of type preference).

Now that I know the basics, I'm going to have a go at creating a basic web page from scratch. [see blog post]

PPD ~ Dreamweaver Workshop II

Before designing a website we need to identify:

- target audience

- what does the audience need to see

- the overall purpose of the website

Limitations:

- web safe colours

- web safe fonts

- screen sizes

Dreamweaver - what you see is what you get

HTML - hyper text mark up language

Main tags

<html>

everything under this is html

<head>

anything that isn't part of the design of the website, but may be searchable by google

<title>

the title of the page

</title>

</head>

<body>

what is visible in design of the page

</body>

</html>

To view coding for a website right click and view source.

Other tags

We looked at the source for a number of websites we had already looked at, and looked for tags that kept popping up on the different websites so we could see what these mean.

There are other languages, such as javascript and css (cascading style sheets). And PHP's, which are spreadsheets such as how amazon shows all of its products without creating a page for each individual product. 

- meta (how search engines pick up your website through key words)

- different sizes for ipad

- script

- div (linked to css - division of a website)

- a href (links)

- img (images)

- h (headers)

- p (paragraph)

- li id

- span

- google analytics

- td (table data) tr (table rows)

Making a website

- Create a new root folder to put everything in, needs to have no spaces and all letters lowercase

- Create a subfolder inside the root folder which has to be called images

- Open dreamweaver, choice of languages to open, new html 

- Different views, can see code and design at the same time 

- Need to tell dreamweaver to use our root folder. Site - new site - and locate dreamweaver to your file

- In the bottom right hand corner of the screen the files tab appears

- File - save as - (saves web page in root folder) homepage always saved as index.html (now appears in files tab)

- Click this button on dreamweaver to see what it looks like as a webpage.

- Content for webpage needs to be in between body open and body close

CSS

- Dreamweaver - file - new - blank page - css - file - save as - stylesheet.css

- Make generic overall settings, apply to the body tag, just type in body {

- Gives list of all the css attributes you can apply to the body, put the attributes on a new line

- Specify font, just type font and choose from font family

- Need to close the attribute with a semi-colon, go on to the next line and specify the font size (font sizes are in pixels on the web instead of pt sizes)

- To change the colour just write color the american way, and it brings up a palette of the web safe colours

- Need to close the tab with another semi colon and a bracket on the next line }

- Then save the CSS sheet

- Back in the html document, the CSS sheet goes in the head tags, we don't need to type it in, but go the the CSS styles tab and click the attach style sheet button, now appears as html

- To create a div id , new line, enter a # (Alt + 3) wrapper

- Create width and a height for the box we are creating, and a background colour

- Go back to html document, put tag for div in body section

- Close div

- Back to css, new navigation section, decide on position (going for relative), float: left (because navigation is on left), width, height, background colour

- Go back to html, and put the navigation bar inside the wrapper, close div. Align codes at same spacing for each code, to make it obvious what is for what

- Always try and make your website as small as possible in file size

Adding logo

- Open photoshop, using web settings, to create a logo that is a smaller file size as possible

- Needs to be saved in a specific way, best quality Jpg or Png24 (for transparent)

- Save it to the images folder in your root file, go back to dreamweaver, create a div id specifically for the logo

- The logo goes in the navigation section in the html sheet

Buttons

- Create new tag, need to add padding and margin so its not just right at the side of the page, margin is from the side and padding from the top/ bottom. If you wanted the box's width 150px, but with 10px margin, the width would only be written as 110px as you need to take off the margin and the padding.

E.g.