Todays outcomes
- Web standards and limitations
- Layout
- Setup
- Basic coding
Web standards
Acronyms, abbreviations etc... For example; HTML, XHTML, CSS, API, WYSIWYG, MIME, SQL, MYSQL, SEO, FTP, URL, XML, PHP, ASP, JSP, CGI, AJAX, ASCII, DNS, GIF, HTTP. HTTPS. UI, UX, WWW. All of these are languages used in design for web, it is a language that needs to be formatted correctly to work across all systems, it needs to be a standardised language.
There are loads of limitation in designing for web, you have to design for the lowest common denominator. Some limitations are;
- Size- file size of the website
- Colour- Web safe colours (216 available)
- Fonts- Can only work with web safe fonts
- Size/dimension- 640x480, 800x600, 1024x768, 1920x1080, 2880x1800 (220ppi)
Size/file formats
PNG, GIF, PDF, JPEG are all types of lossy files, this means the file format can be compressed. Images should be 72ppi even though all monitors are at least 96ppi
Dreamweaver
When opening dreamweaver select open HTML, this opens a page the exact same to the image below. In the top left hand corner you can flick between 3 options; Code, Split and Design. These options are pretty much what it says on the tin, so flicking to either split or code will get us to our next step.
Dreamweaver
When opening dreamweaver select open HTML, this opens a page the exact same to the image below. In the top left hand corner you can flick between 3 options; Code, Split and Design. These options are pretty much what it says on the tin, so flicking to either split or code will get us to our next step.
So below is a screenshot of what the split screen looks like, on the left is the coding for the website and on the right is the actual design, what you'll see on the internet. However as time goes on and you use more elaborate codes what you see isn't actually what you get anymore.
Below is a zoomed in screenshot of the coding that appears when you open a new HTML. this is already a website it's just blank. So the first line just declares what the document is. <html> is telling the computer what language we're working in, this will change if we're using CSS. Line 10 there is </html>, this is a close tag, if we use <html> we must always close it. <head> contains something that isn't visible on the website but something that helps the website function such as operations. There was also <meta> in there before we deleted it and this is a search engine optimiser (SEO), it's where key phrases can be added. <title> this also increases the SEO, but it is what appears in the tab in the web browser, a 'favicon' can be added to this title which is basically a little icon or logo that can also appear next to your title. Whatever you want to be visible on your website must be put between the two <body> tabs.
In order for Dreamweaver to run to its full potential, as with any other software, you need to be working from the user work folder on the hard drive. Also, you cannot package when using Dreamweaver and so when you start you need to create a 'root' folder. Everything that you are using within Dreamweaver must be inside this folder in order for it to work; if this were not the case, you would end up with broken links. When naming the root folder, the convention is to never use upper case or spacing.
Once the 'root' folder has been created, you need to create a sub folder within it. Some servers look for a sub folder named 'images', in which should be all of the media files. (must be called images) The rest of the content and information is fine to be left loose within the 'root' folder.
Once you are ready to save, you need to create a site in the root folder in order for Dreamweaver to know where this folder is. To do so, you need to go to the top where it says 'Site' and click 'New Site'.
From here, you can name it whatever you want. The most effective and common thing to call it would be whatever the website was called. You then click on the small folder icon to the right and find the root folder that should be inside the user work folder. Once on the root folder, click 'OK' and then save.
Then you are ready to save. When saving, you need to make sure that you leave the file extension on so that the internet can understand what type of file it is. As this would be the hope page of our website, we need to ensure that we name it correctly so that when online, the internet will know which page to open first. To do so, we have to follow certain conventions. The name of the file needs to be universal and understandable by everyone and so the file must be called 'index.html'. Once saved, you can view how the website will look by clicking on the small globe icon and choosing a search engine.
And this is the website I created previewed on the the internet. To add text simply type in between the 2 body tags and it'll appear on this site once saved.
