Upload
trinhcong
View
215
Download
1
Embed Size (px)
Citation preview
1
WEB DESIGN Cheat Sheet 1 First steps: Identify what resources you have and determine the kind of web site you are to setup
1. Domain and Hosting services: a. Do you have a domain name registered?
i. One can register a domain name from an Internet Service Provider (ISP). Example of ISP: hostmonster.com, bluehost.com, godaddy.com.
b. What hosting services do you have? Hosting service can be bought from most ISPs that offer domain name registration. You can buy a complete service that comprise of domain name and hosting from the same ISP.
i. If you are using an institutional service or account you will need to know how to activate your account and obtain your domain name and user information like username and password.
c. After the activation of web hosting account and domain name
registration you will have a unique URL: http://www.domain_name.com d. You can then logged on to your server account using your URL using an
FTP (File Transfer Protocol client) FileZilla. That gave us access to our public_html or www or htdocs folder that is our remote root folder for our web site.
e. Below is the FileZilla interface. FileZilla is the FTP (File Transfer Protocol) client we are using to connect to our server account and will use to transfer our web site files to the Internet for user access.
2
f. Local site = your computer Remote site= web server
2. Local site files are files on your computer and Remote site files are files on the
server. 3. FileZilla is an open source FTP client downloadable for free from the Internet at
this URL: http://filezilla-‐project.org/download.php?type=client 4. To use an FTP system to log on to a hosting account on a server requires the
following details: a. Host: www.domain_name.com b. Usersername: Usesername c. Passoword: your password
5. After using FTP to transfer your files online, you will need to clear the Quickconnect bar and history to ensure your hosting remains secure especially if you are working on a public computer. If you are working on your private personal computer, you can leave leave the connection history intact.
a. To clear the Quickconnect Bar and History do the following: b. Click on the Quickconnect twirl down tool > choose >Clear Qucikconnect
bar
3
c. Click it again and choose > Clear History d. After that Exit FTP clicking on the
Fresh Tool Disconnection Tool Quickconnect Tool
1. Dreamweaver Workspace interface:
This image is taken from the Dreamweaver virtual help resources online. Understanding the Dreamweaver user interface and knowing how to use the various tools is very important. Some of the key areas of the interface are the:
2. Panels a. CSS Cascading Style Sheet – allows the user to access the details of
existing sheet and check the rules or create or edit them. It has an All and Current tabs used for displaying and inspecting All the CSS and those currently selected in the document area using the cursor.
b. Files – Gives the designer access to all the files being used in the design of a web site. It helps the designer to keep track of all the files used in the design of the web site.
4
c. Properties -‐ Can be used to inspect the properties of various objects or text selected in a document.
3. Workspace Layout – Windows on the Application bar allow you to access the workspace layout tool to either reset you workspace or switch to a specific workspace layout.
4. Window – This tool on the Application bar allows the user to open various panels that may not be seen in the workspace for instance the files and CSS panel.
5. Application Toolbar – It is key to accessing the various tools in Dreamweaver. Defining a Site in Dreamweaver. Performing this task in Dreamweaver before beginning the designing of a site is absolutely important. This task is important if you want to work hassle free in Dreamweaver. To define a site you will have to follow these steps.
1. Create a Root folder some where on your computer, for instance, My Documents on a PC or Documents on a Mac. Do not forget to give it a name.
2. Next power up the Dreamweaver software and click Site in the Application Bar a. Choose New Site and fill in the dialog box that pops up.
Advance Setting Site Name Local Site Folder
b. Type in the site name in the Site Name field and for the Local Site Folder, click on the folder icon to set the folder you created as the Root folder (Local Site Folder). You can either proceed to save and complete the process or you can click on the Advance Settings option and define a default Images folder as illustrated in this picture.
5
Advance Setting
c. This completes the site definition process and your Root Folder appears
in the Files Panel in Dreamweaver. If you have files (html, css or images) in the Root folder and the Images Folder those will appear in the files panel. A CSS file will also appear in the CSS Panel as illustrates in the images.
Files Panel CSS Panel
d. These two panels are very important in the to the management of files in the web design process. After a site has been defined in Dreamweaver. You should always ensure that all file management is done in the Files Panels, especially the name of files.
i. To rename a file right click > choose edit to change a name or Cntrl click on both PC and MC to edit the name of a file.
e. File naming convention is simple: i. Use lower cases all the time, for instance, index.html, about.html
6
ii. No spaces between the names, use underscore or dashes e.g. contact_us.html, my-‐resume.html
iii. Do not use other symbols like ~, *,? , > etc. HTML AND CSS FILES
1. All most all web pages have two sets of formatting that organize the content on the pages and give the page its layout. The content on a web page is organized with HTML (Hypertext Markup Language) tags, and its layout is managed with CSS (Cascading Style Sheet) rules.
2. HMTL tags come in pairs eg. <>tag name </>. There are numerous tags. The most commonly used ones are: <p> </p> and <h1></h1> (h1 to h6), <head></head>, <body></body>, <html></html>.
3. In most web authoring tools including Dreamweaver, the most common and easy file to create is an HTML file.
4. A basic HTML file has the following format:
a. xHTML or HTML4 <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" /> <title>Untitled Document</title> </head> <body> </body> </html>
b. HTML 5 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-‐8"> <title>Untitled Document</title> </head> <body> </body> </html>
5. DOCTYPE a. xHTML or HTML 4
i. <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">
b. HTML 5 i. <!DOCTYPE HTML>
7
c. It makes sure a browser sees an HTML page correctly. 6. HTML Tag for xHTML or HTML 4 and HTML 5
a. xHTML or HTML 4 : <html xmlns="http://www.w3.org/1999/xhtml"></html>
b. HTML 5: <html></html> i. All content on a page must be between the open and close tags of
the HTML on a page. Any content outside of the tag may not show up on the page and is a recipe for disaster.
7. Some of the content of the HEAD tags are visible on a page, while search engines and other web crawlers use others.
a. Visible contents are usually: title of a page and favicon. b. None visible content are the author of a page, link to external sheet,
Meta tags used by Search Engine Optimization (SEO), etc. 8. Body tags: all visible contents of the page must be between the open and close
body tags.
9. Some of the most common and often used HTML tags are listed below. TAG DESCRIPTION
<!DOCTYPE>, Defines the document <html> Defines the root of an HTML document <head> Defines information about the document <body> Defines the Document body <p>, Defines a paragraph <h1> to <h6> Defines HTML headings <li> Defines a list item <img> Defines an image <link> Defines the relationship between a document and
other resource. <a> Defines a hyperlink <br> Defines a link break
A comprehensive list of HTML Tags can be found on the w3c web site at these URLs:
a. HTML (5) http://www.w3schools.com/tags/default.asp
10. What is HTML? a. HTML consists of Tags and content (text, images, video, audio etc) – The tags are
used to apply structure to the content on a web page. i. For instance <p>Test</p> is for a paragraph. The common misuse of this
tag is to hit enter or return on the keypad multiple times to create space/s.
ii. <strong>Text</strong> Used for bold. iii. <em>Text</em> Used for italics iv. Good HTML allows for:
1. Ease of use – Loads up fast and exactly the way it is formatted. 2. Accessibility – Allow for all kinds of use by all users, especially
those who use assistive devices to access and read web pages.
8
3. Search Engine Optimization – Can be easily identified and displayed as part of Internet search.
4. Repurposing of the content on a web site – for delivery on all kinds of devices.
b. Why HTML 5? It is all about the HTML semantics -‐ that is making the HTML behind a web site more simple and meaningful.
i. It is aimed at making HTML more meaningful to the designer, and especially to the browsers that will use it to display the content on a web site.
ii. The goal in designing a web site is to make your HTML right for browsing. CASCADING STYLE SHEET (CSS)
1. What is CSS? Cascading style sheet (CSS) is a way to add styling elements to a web page – that is the .html files of a web site. It allows a web designer to apply styling properties to HTML tags. For instance when you define an HTLM tag the Heading <h1> My Life</h1> you can use CSS to determine the font type and size, background color, the boarder around it etc.
2. Most well designed web pages get their layout properties from CSS (Cascading Style Sheet). CSS are rules that are determined by the designer based on his or her creative goals and the intended platform (PC, Tablet or Cell phone) on which the web site will be viewed.
3. BOX model – The box model is important for understanding how CSS works in relation to an HTML file. The basic understanding is that all HTML elements are to be considered as boxes that get their properties from CSS rules. In CSS, the "box model" is used when trying to understand how to structure a web page. So the CSS rules determine the nature of the box or boxes that wrap around the HTML elements, Header, container, sidebar, footer etc.
a. The key to doing this effectively is to understand that every box has the following structure and content: margins, borders, padding, and the actual content as illustrated in the image below. This image is taken from the w3c at this URL http://www.w3schools.com/css/css_boxmodel.asp.
b. An illustration of the box model.
9
“The box model allows us to place a border around elements and space elements in relation to other elements.”1
a. Box is a Block element: Margin, boarder, padding and content. b. The width of a box is determined not by the margin but by the border and
padding of the box. c. Margins can be used for positioning.
4. CSS is a collection of rules. There are 3 ways of creating these rules:
i. Inline style – They are rules created on an HTML file to style the tags. They are usually limited to that page and override any other existing form of CSS (overrides the embedded or external style if they exist).
ii. Embedded style – They are rules defined at the top of an HTML files with the following tags:
<style type="text/css"> Rules </style>
On a specific page, embedded rules override external rules if they exist. iii. External style – Can be used for multiple pages. They are rules usually defined
in a separate file named with a .css file extension for instance, styles.css. It is considered the best approach to defining CSS rules and for designing web sites. The following CSS sample is the CSS external rules in an external style sheet taken from a Dreamweaver starter layout for a three column fixed header and footer design.
1 http://www.w3schools.com/css/css_boxmodel.asp
10
Sample of CSS external rules in a .css file
1. body { 2. font: 100%/1.4 Verdana, Arial, Helvetica, sans-‐serif; 3. background: #42413C; 4. margin: 0; 5. padding: 0; 6. color: #000; 7. } 8. 9. ul, ol, dl { 10. padding: 0; 11. margin: 0; 12. } 13. h1, h2, h3, h4, h5, h6, p { 14. margin-‐top: 0; 15. padding-‐right: 15px; 16. padding-‐left: 15px; 17. } 18. a img { 19. border: none; 20. } 21. 22. .container { 23. width: 960px; 24. background: #FFFFFF; 25. margin: 0 auto; 26. } 27. 28. header { 29. background: #ADB96E; 30. } 31. 32. 33. .sidebar1 { 34. float: left; 35. width: 180px; 36. background: #EADCAE; 37. padding-‐bottom: 10px; 38. } 39. .content { 40. padding: 10px 0; 41. width: 600px; 42. float: left; 43. } 44. aside { 45. float: left; 46. width: 180px; 47. background: #EADCAE; 48. padding: 10px 0; 49. } 50. 51. footer {
11
52.
CREATE HTML AND CSS FILES IN DREAMWEAVER 1. Create a basic HMTL file attached to a CSS file as a basic design using
Dreamweaver’s Starter layouts by doing the following: a. Process: In Dreamweaver click on the File option in the Application Bar b. Choose New > click on Blank page c. Page Type > Choose HTML d. Layout >(Choose a layout)
This image illustrates the dialog box that pops up when we click on File in the Application bar and choose New. Blank Page Page Type Layout out DocType Layout CSS Create
e. DocType > choose HTML 5 or XHTML 1.0 Transitional f. Layout CSS > choose Create New File g. Click Create. h. The first File to save is the CSS file.
i. Give it a name like styles.css. Save and make sure it is saved into you root folder on your computer.
ii. Next Dreamweaver will open your HTML page with the layout you chose as an untitled page. Save the page as layout.html.
12
i. Layout page is a layout created with a Dreamweaver starter layout, for instance 1 column, header and footer
i. Make sure there are 2 separate files showing up in your Files Panel in Dreamweaver for example – layout.html and styles.css files.
CREAT ADDITIONAL FOLDERS
1. Create additional folders in the root folder using Dreamweaver, for instance,
images, docs, photos, video, audio etc. a. Process: Right Click or Cntrl Click the Root folder in the files panel
>Menu Pops up> Click New Folder> Folder created> Name folder.
2. Determine the width of your container in both designs by checking the Selector properties of the container. You may also want to determine the width of the main content area and the sidebars if you have any.
a. To check the width of the container do the following: i. Click the All tab in the CSS panel ii. Click the edit rule tool iii. Dialog Box pops up iv. Click on the box field the details of the container show up.
b. Can do the same for Main Content and sidebars and write the information down.
13
CREATE A GRAPHIC
1. Create your graphic elements, especially the banner, logo or header graphic depending on what you want to call it.
a. Graphic elements can be created in an image editing software like Photoshop. To create a banner or logo do the following:
b. Power up Click on the File menu in the Application Bar. i. Choose >New> Dialog box pops up> Choose custom in the preset
field ii. Put in the details of the images iii. Make sure unit of measurement is pixels iv. Color mode is RGB v. Background Color, white or transparent (You may use Background
color or transparent unless you want your banner/header/logo to have a color background).
c. The width of your container should help you decide the dimensions of the banner, logo or header graphic.
14
PLACING AN IMAGE ON AN HTML PAGE 2. The banner or logo graphic of a web site may be placed in the Header section of
the web site. Also you can create a graphic and set it as the background graphic in the CSS rules that determine how the background of the web site looks.
a. There are different ways of placing an image on an HTML page. For instance you can drag and drop the image to where you want to place it, or we can use the Insert tool in the Application Bar to place it on the page.
b. Whichever option is used may require some tweaking of the CSS rules in the CSS files for that HTML tag to ensure the image displays properly.
c. To Drag and drop, click where you want the image to go in the Design view of the HTML page.
i. Locate the image in your Files Panel, click once and hold down your mouse, Drag the image to where you want the image placed.
d. To insert the image click where you want to place the image. i. Click on Insert in the Applications Bar ii. Choose Images > A dialog box pops up > Browse and look for the
image to be inserted. Type in the Alternate text in the Image Tag Accessibility Attributes dialog box and click OK.
Image Tag Accessibility Attributes dialog box