The destination for your PDF and who you are creating it for are two of the main considerations that govern why you use different settings for your PDF. Formats for Print ScreenSave the InDesign document provided in the following formats:
Organization is Essential.
To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS.
Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place.For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.
Images for web have specific file formats depending on the kind of image. The formats all have adjustments that you can make when saving them in order to achieve the highest quality with the smallest file size. This process is called Optimization. You will want to optimize all of your web images before you use them in a website. The most common file formats developed for the web are:
STYLES SHEET: Start a new page and Save it as 'styles.css'.
Add rules sets for the headings and paragraphs
as seen in the connections-stylesheet screenshot:
Now we will create rule sets for the text links.
Remember that links have four states:
We are going to continue using our 'connections' site from last week's exercises (X04).Copy your 'connections' root folder to your desktop.Now, add the images you found to represent your own past, present and future to your images folder. Make sure your images are named to reflect the content. (If needed you can use the provided placeholder images.)
Using Images in the Background
Just like changing the background color of an HTML element, we can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page.
Set the background with CSS
Open your styles.css page and locate the style for your body element.
In order to indicate an image we need to tell the browser to find the address of that image,
and in this case, the address is inside the images folder which is inside our root folder.
Since we are already inside the css folder, we need to tell the browser to back out of this folder, then go into the images folder. The signal to the browser is by using two periods in front of the slash. So the code looks like this:
Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.
padding is like the packing peanuts inside the box,
border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.), and margin equates to spacers or bumpers attached to the outside of a box.
Width and Height The last two properties that we can change on our box is the width and the height. It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well.
Text Alignment We have already discussed controlling the space inside and outside of the box using padding and margin. We can also control how the content is situated inside the box.Default alignment for all elements in HTML is left. It makes sense that browser use this as a default because we know that left aligned text is easiest to read. That's why novels, textbooks, and almost all other longer form text is always left aligned.Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that. The CSS declaration we use to do this is text-align: and the acceptable values are left, right, and center.
Anchored LinksAn anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two requires that we learn a new HTML attribute, the id= attribute. This particular attribute is used to identify (id) the HTML element being anchored to. Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best.
For an anchored link the address is very simple. You use a # (hashtag, pound sign, or another weird name is the octothorpe symbol) and then 'call it' by name. The # indicates an id= attribute and the name specifies which one.
Responsive Design Mode In order to work properly on our mobile first design, we’ll need to change our browser settings so we can easily preview our site using the correct dimensions for a small mobile device. In Chrome go to View > Developer > Developer Tools. There are lot's of settings to choose from. Experiment to view the different options.
Dealing with Images There are many techniques out there for handling images, some more technologically advanced than others. We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. It doesn’t matter the screen size or if it is ever changing, the image will take on an elastic personality
The most specific we can get is to use the element as the selector coupled with it’s id attribute. Remember when we added the id attribute to our h2s? We discussed adding this for anchored navigation but it has a second use, which is even more powerful. Giving an element and id attribute (id=), means you are giving it a name, but not just any name… an absolutely unique name. You should not ever repeat an id. Think of them like social security numbers, every person has one of their own. Classes can be reused on multiple elements, but id’s are all unique and should not be reused for any reason.Because the id is unique, then if you use the element and it’s id in the CSS, there can be no other element that has that in common and you can style just that single element if you so choose. A good example of an element that might need to be uniquely styled would be the logo of our website. It seems to be sitting awfully close to our hamburger button. It might be better to give it just a little bit of breathing room by setting it to have some margin on the left.Now, we wouldn’t want to do this to all images, so using img as a CSS selector doesn’t seem appropriate. We could use a class, but there is only one logo image so that doesn’t seem appropriate either. Instead, we will use an id – because id’s are for elements that only appear once one the page.
USING an ID When we use the element or HTML tag, along with an id attribute, we can target an element very specifically. A while ago when we added the id attribute to our h3s, we used this process to make them anchored links. Most recently we used the id attribute to specify our mobilenav. Giving an element and id attribute (id=), means you are giving it a name. Most importantly, a name for an id is an absolutely unique name. Once the id name is used on a page, it should not ever be repeated. You can think of the id like a license plate or a VIN number, because every car has one that is unique to itself.
USING a CLASS While, the id attribute should only be used for one thing on a page, the class attribute, on the other hand, can be reused for multiple elements. We created and applied classes for several different parts of our text (.when for the days, dates and times; .where for the locations; .event for the kinds of events) so we could style these in a similar way.
Over the semester we had an APP project, each of us were in charge of creating our own original app idea. Once we had our idea figured out. we sketched thumbnails for what we would want our wireframes to look like. All together, we made a user journey, wireframes, an icon, a logo, and coded our own website based on the app.
Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.
Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand.Favicons used to be typically 16 x 16 pixels square, though now they can be up to 48px square. They are saved with the name: favicon.ico and are stored in the root folder of your website
Creating a Favicon
Favicons can be created using online services or any image editing software that allows the saving of .ico files. (Photoshop needs an extension).
The image you use should be a graphic with very little detail and designed to match your site's identity. It will take some work to strike the right balance of detail and communication.
All comments are written with opening and closing characters and are used to demarcate a category or an area of similar things. Earlier we looked at using comments in our HTML to identify areas in the code. Today we are going to add comments to our CSS to help us organize our growing lists of styles. In HTML Comments are written with an angle bracket and an exclamation point. Comments in CSS are written starting with a forward slash followed by an asterisk and a space. To close the comment, the characters are reversed.It looks like this: /* LAYOUT & GRID */