Home » Posts Tagged "HTML"

HTML & CSS Cheat Sheet

Download the HTML & CSS Cheat Sheet for FREE! The Digital Workshop Center provides free cheat sheets on many popular software applications. If you are looking for a quick HTML and CSS reference sheet, then we’ve got just the thing for you! The HTML5 & CSS3 cheat sheet includes basic concepts and common elements to help you be more efficient and confident while working in code. Several of these concepts and elements are included in our hands-on Web Design with HTML and CSS training class, so if you need more HTML & CSS help please contact the Digital Workshop office.  Stay tuned for more cheat sheets coming soon! Click the link to download the cheat sheet in PDF format: HTML & CSS Cheat Sheet...

read more

Slice Tool to Blend Photoshop and Web Projects

A project in Adobe Photoshop can be finished in print or on the web. For each, there are many considerations to make including a color model, file size, and the overall layout design. However, the Slice tool in Photoshop empowers you to transition a Photoshop project to the web easily. The Slice tool allows you to create unique sections (or Slices) of your project. The actual Slice can be created by using the Slice tool and drawing it manually, or you can use existing guides and create your slices from the guide intersections by clicking the ‘Slices from Guides’ option in the toolbar. After a Slice is created with the Slice tool, you can use the Slice Select tool to control and manipulate it. Each Slice has options and can be named and controlled independently as needed. In addition, you can set a background type, exact dimensions, URL, Target, Message Text, and Alt tag property in the Slice options dialog box. When you have finished fine-tuning all of your Slice options and are ready to export to the web, you are ready to use the ‘Save for Web and Devices’ command. This feature of Photoshop allows you to prepare every Slice individually or all of them as a whole for the best optimized web file type and performance. Lastly, when you click ‘Save’ from this screen, the next dialog box will give you two additional options than normal: ‘Settings’ and ‘Slices’. Settings will allow you to choose between different output styles for your Photoshop project including an HTML table or HTML/CSS ‘div’ tags. You should always use the div tag option if this project is an entire layout for a web page. The ‘Slices’ option of the ‘Save’ dialog box will allow you to save all slices or individually selected slices. This gives you the flexibility to update one section of your design and re-output it, while not having to completely start from scratch. In the end, Photoshop will save each Slice as a separate image file and generate the necessary HTML/CSS to get your web page started. For simple web pages, this may be all you need. However, more complex pages may require additional work to complete the web design. I always try to start a web design in Photoshop as a wireframe and then convert it to a web page. The Slice tool allows me the freedom to do this with no additional effort or web programming necessary. The next time you are using Photoshop, try out the slice tool for yourself and see if it helps you as well. [Originally posted in the Coloradoan on...

read more

WordPress: Why You Should Consider Using a Child Theme

It is estimated that 1 in 5 websites use WordPress as a framework. No, that is not a typo. It is a staggering number to think about when you consider how many millions of sites are added each day. Every WordPress site’s design is governed by a theme, which controls the appearance, layout and functionality. There are free themes available, but to get a custom theme design for your website, you may hire a developer to create your theme. No matter which direction you decide to go, it has been my experience that, at some point, everyone wants some additional control of the design of their site. In this situation, you can pay for a developer to make changes to your site or you can attempt to do it yourself. This is when a “child” theme becomes important. A child theme is a feature of WordPress that allows the user to create custom styles in your theme. A WordPress child theme is a theme that inherits the functionality of another theme, called the “parent” theme, as defined by WordPress.org. In other words, you can make dynamic, style changes to your site without effecting the original code. According to a popular theme provider, “85 percent of our customers customize their themes, and only 35 percent use a child theme when doing so. This may be due to a lack of understanding as to what a child theme is, or due to the perceived difficulty of creating one.” With that in mind, if you are ready to make simple design changes to your site, don’t be afraid to dive in and try a child theme. What is one of the best features of using a child theme? Even if you make a mess with the child theme, you can always fall back to the original parent theme without consequence. That should help give you some confidence to get started! While creating a child theme is actually very easy in practice, it may not be for everyone. You need some basic knowledge of cascading style sheets, or CSS, and information on how you will connect to your web server to upload the child theme file. However, CSS is an intuitive language to learn, and connecting to a web server is as simple as finding the credentials that your host provides for you. How important do I think child themes have become? In the web design class I teach at the Digital Workshop Center, I have begun incorporating some lessons about how CSS can be used for child themes and beyond. It has become an essential topic for any WordPress web designer, and I hope that you use child themes properly when you decide you need to update the design on your WordPress site as well. [Orginally published in the Coloradoan on...

read more

Web Development: No Better Substitute for Learning HTML

[Originally published in The Coloradoan on 8/31/12] When prospective students approach me about enrolling in some of my beginner web design classes, they often ask if they should learn HTML or purchase Adobe Dreamweaver to edit their website. Everyone’s needs are different, but I always give the same answer. HTML, or Hyper-Text Markup Language, is the fundamental language of the Internet, while Adobe Dreamweaver is a tool to help you write that language better. The analogy I typically use is that of a learning any foreign language. Let’s pretend for a moment that you’re interested in learning Russian. You could study books, talk to other people who speak the language, and purchase an electronic translator. When you use the translator, it will understand what you are trying to say in Russian the majority of the time. However, there will be times where the language just won’t be interpreted properly. You may ask it to teach you how to ask “where is the nearest Internet cafe?” When you say it to a native Russian speaker, you may get some strange looks because the phrase you’re given doesn’t exist. Now, use the same analogy for learning the language of the Internet. Today, HTML is a vast, evolving language with many twists and turns, depending on what you want to do with it. The large number of scripting languages that have branched off of HTML could be thought of as different dialects. When you use Adobe Dreamweaver or a similar HTML editor, it’s similar to using an electronic translator. Dreamweaver will get it right most of the time. But, when it translates wrong, you need to understand how to actually read the code and speak the language to fix it properly. The program can only interpret what you tell it to do, and, therefore, it will inevitably translate something wrong. Dreamweaver offers a design view, which is a what-you-see–is-what-you-get editor. This is fantastic for novice developers who need to make simple changes, like editing plain text or adding an image. However, when the page won’t format correctly and additional code is needed, there’s a code view that becomes a necessity. Each view has its advantages, but any coder would tell you that staying in code view becomes the only way to go to over time. Why? Because the program can’t translate what you want to say with your code properly. The top thing to remember when jumping into any web design is to not get discouraged, and be sure to add as many tools to your tool belt as possible. Only then will you know if Dreamweaver is right for you. Stu Crair is the owner and lead trainer at The Digital Workshop Center, providing digital arts and computer training instruction in Fort Collins. Reach him at (970) 980-8091 or...

read more

CSS3 Features Add New Level of Excitement to Web Work

[Originally published in The Coloradoan on 3/9/12] The ability to create interesting web pages today continues to advance as the specifications of the Internet languages we use evolves as well. The foundational language of all web pages is HTML, or Hyper-Text Markup Language, and CSS, or Cascading style sheets. As I wrote last week on the latest in HTML, it seems appropriate to mention why the new features of CSS3 are so exciting. CSS3 is the latest specification of the CSS language from the Worldwide Web Consortium, or W3C. This new version of CSS allows for many design elements to be coded through style sheets as never done before. For example, in the past, the only way to create rounded corners of any division of your site was to use some image techniques, and trick users into letting them think the corners of a box were rounded. Now, with CSS3, there is a property available to handle this popular design element. No additional images are needed, which improves the site’s download speeds and makes for an easier page development. In addition to rounded corners, there are other popular design features available in CSS3 such as shadows, gradients, opacity and much more. What is an even better advantage of the use of these new properties is that CSS3 allows certain design elements, that would have had to have been created as an image in the past to display properly, to now be displayable as plain text. And plain text is searchable for search engines such as Google or Bing, which means your page will have a higher ranking. This is a huge bonus for any person or business interested in improving their Search Engine Optimization. The only disadvantage to these new CSS3 rules is that some older browsers, most notably Internet Explorer, will not understand the new rules and, therefore, cannot display them as intended. But, as long as you use techniques for graceful degradation, which means allowing the CSS code to degrade to older properties while still looking good in a browser, then your page will not suffer. For examples of how to use these new CSS properties, you can visit www.css3please.com to test the properties in real time. As with HTML5, the new features of CSS3 have added a whole new level of excitement to the web development world. I am always amazed at what people can do with CSS coding on the web, and this new set of tools will allow all web designers to show off their creative talents that much more. Stu Crair is the owner and lead trainer at The Digital Workshop Center, providing digital arts and computer training instruction in Fort Collins. Call him at (970) 980-8091 or emai...

read more
Find Your Class