So prob my first and last web post - dont really find time to come on this regularly but luckily have been keeping a real life notebook that I can write up. so here goes...........
First couple of lessons we were taught coding in text edit and how to save a file (.index) so it is viewable in a web browser. Thought this seemed like a long winded way to create a web page but was interested in how all the codes work.
The next week we were introduced to dreamweaver, I really liked this as it seemed really easy and straightforward...... until css!! after a couple of weeks and experiements I finally got my head around css coding, div ids and all the brackets and what place in the code to place things so they show up in the right place.
Some of the notes I made in class for reference :-
Tables in dreamweaver
- Click on layout in on top tab in left drop down menu, then click layout on option that comes up
- Then click green layout table and draw a table in the bottom window
- click blue button to draw as many cells as you want
- click standard
- press apple button and clicka cell
- go back to common mode and your able to edit cells with images and links etc...
tree icon = images/links
modify = page properties, tracing image can bring in images you've hand drawn through photoshop and draw your cells/table around it
CSS (complicated coding to beginners)
How to open an image in image ready -
open Photoshop - create image - open image in image ready
- open animation and layers window (through window tab)
- click on animation window and open new layers
- In layers duplicate layer
-click 1st layers and 1st animation layer
- Then click each animation layer and change opaqueness - Fade out, press play to check it works
- On the animation timeline you can change the speed by clicking the little arrow on right of seconds, underneath your image
- if you import other photos for different images you have to keep to the same dimensions
- use eye tool on layer to get each individual layer visible or non visible
-Save as giff, optimised as. When opening in dream weaver use image (tree) icon as normal.
CSS IN DREAMWEAVER - click css at bottom of html page
open new css in 'css styles' tab in right hand window.
-name '.body'
-save style sheet as "text"
css is made up of 3 components
1. pink bit (.body) = is selector
2. dark blue = property (what it is your changing)
3. light green = value
in css window click new style
copy '.body' text and paste a few spaces below, change title to '.right-header' instead of '.body'
e.g. of html code =
< body >
write a heading here < br/ > (indicates a space)
< / body > (dont inlclude spaces just this blogger wont let me not include em)
go back on text.css, copy and paste text again
(if you want a link instead of a '.' you hav a 'a'then heading)
then you select pink text - delete replace with a:link,a:active (if you double click this in right menu; css folder' all rules you can change, manipulate how it appears)
-then copy and paste change a:link,a : active to a : hover
-repeat but change to visited
the go back to html document that is open and type something in between body types (< body >....< / body >) that you want it to say.
For the css code to work you need to link the page to each of the html pages you want it to have effect pn. The hyper link button looks like a chain and can be found in the menu to the right hand side. Check it works and preview your work in internet browser (globe icon)
Layout CSS
-copy and paste previous css code paragraph in CSS window
-put a '#' instead of an 'a' for layout
-change pink text to #main_panel (one thing I have learnt that a hash is achieved on a mac by holding down 'alt' with '3')
- double click on mainpanel in css styles in right window
- go onto background option (left hand side)
- background colour, image, choose if you want it to repeat, its horizontal position and attachment
makin it work in html
after < body > type < span class="main_panel"> (if the background doesnt show up go back to css styles double click #main_panel and set dimensions in the 'box' option.
.........
< div id="main_panel" >< div/ >
In the last lesson of web, we went through how to upload pages onto a server.
first of all we need to know the servers url which is; http://studwww.leeds-art.ac.uk/~
then you get a username and password, which you will need when your uploading
To upload;
go to files (bottom right)
-computer
-mannage site (new window comes up)
-click on new
_click on basic
-site deffinition - choose the foler all your pages and images are all neatly organised in!
-then it will ask you a question 'how do you connect to your remote server' click on FTP
-'what is your FTP login?' enter your password etc, then check the connectivity.
-then it will go onto say.. 'your site has the following settings'
-then in the files window you will find your root folder.
-click on the connection button to see if the site connects.
-remote view (looking once your connected)
-there will be two arrows one facing down saying 'get files' and one facing up saying 'put files', click on the get files, this will open up your page up on your screen so you can work on it.
In the lessons I helped to develop my skills as a web designer whilst creating a web page for my live project, I went over my scetches and layouts for the site with sophie, talked about how I need to go approach things, like importing type as i giff, site navigation, file sizes.
I was met with a lot of problems when designing the web site for mt live project - Like how to make the page float as the viewer increased and decreased the size of there page. Saving image sizes so they would fill the container.
I had to do independent research to find the code for my drop down menus - I felt it looked better and allowed for more information with the use of a drop down menu.
One problem I couldnt overcome was to get rid of the border around each of the pages of the website; however much I increased/decreased my container size in the css or edited the border size the left border would not go away. With my own personal website I have not used a container in css yet and I seem to be rid of this problem - however I hav not uploaded my background images yet so hope I dont need a container to get these to work efficiently!
For my own personal site I want it to be quite simple, so from a viewers perspective its easy to find out about me, view my work and contact me; they dont have to wait ages for flashing images to show up.
I'll have a index page, displaying my name, a possibly a limited selection of my work. From the index page there will be 5-6 links, one thats will go throught to tell the viewer more about myself; including my cv, and then a page for my kids illustrations, a page linking to my websites, a link to my promotional work and to other work.
