Project 01 Notes
- Project Intro
a. no info
- Setting up the Workspace
a. you can split view horizontally and vertically.
- HTML5 Page Structure
a. / in a tag means its a closing tag
b. dont use spaces in folder names
- Adding Text Content
c. <h1>-6: header tags | <p>: paragraph | <blockquote>: indent | <em>: italics | <strong>: bold
- Adding Images
a. root folder is the top folder in the file system
b.copyright pictures are not to be used if youre making profit from your website.
c. Attribution: you must give credit to the original copyright owner | Share Alike: You can only share your new project under the same license permissions as the original work | Non-Commercial: The work may not be used for commercial purposes | No Derivitives: You may not change the work in any way.
d. JPG, GIF, PNG, and SVG are the best image types to use on websites.
- Creating Lists
a.UL stands for Unordered List
b. OL stands for ordered lists
c. How to combine ordered and unordered lists into one flowing list.
- Creating Tables
a. putting in a table quickly
b. live view doesnt let you modify the table size
- Adding Hyperlinks
a.Absolute Hyperlink: Goes directly to a full URL adress beginning with https://www
b.Mailto: A protocol that opens the user's email client and creates a new message to the given adress.
- More about Images
a.tables have percentages that can be changed
b.always click yes if the image youre using is not in your root folder
c.if your image is not in your root folder it is on your computer, and your computer is not a server therefore the image will not work once you put up the website.
d. large image file size = longer loading time
- Copyright and Hotlinking
a.Hotlinking: the unprofessional practice of displaying an image using the link to a file on a different websites server.
b. Hotlinked images are still subject to copyright claims.
- Introducing CSS
a. HTML creates the content and structure of your webpage
b. CSS stands for Cascading Style Sheets
c. Selectors indicate which HTML element the rule will apply to
d. Stick to default system fonts, your visitors wont have all the same fonts installed that you do
e. Choose fonts that are easy to read, paragraphs displayed on a digital screen
are best set with sans-serif fonts.
- Styling body and text
a. Alpha is the level of opacity in decimals (1.00 is 100% and 0.50 is 50%)
b. CSS boarders require a width, a style, and a color
- Styling lists, tables, and hyperlinks
a. Dreamweaver doesnt tell you whether or not a piece of code will work or not (for example a font style tag on an image) but it will let you do it.
b. The order that the "padding" code goes in is as follows: top, right, bottom, left
c. list-style-type sets the style for the bullet points in an ordered or unordered list
- Project Planner (Super Fan Page)
a. <th> designates a table header
b. CSS lets you easily manage the appearance of HTML elements throughout your entire page. Whenever possible, use CSS instead of HTML to create your page's appearance and layout.
c. text decoration creates underlines. Hyperlinks always have an underline by default. To turn it off, use text-decoration: none.
d. Real Time Preview opens your project in a browser; updates
in real time as you continue to make changes in dreamweaver.