One way to gain favour with search engines is to minimise the amount of dead links on your website. You can check them using the W3C Validator Link Checker.
If you want to check your pages offline or on your own computer before sending a page live, use the Firefox Link Checker addon which will highlight all links on a page, colouring them green for valid and red for broken links.
Showing posts with label websites. Show all posts
Showing posts with label websites. Show all posts
Create Myspace HTML code for custom header
Recently I created a Myspace for YHA Australia. The new Myspace 2.0 profile customisation tool is a much improved interface on the old, hack-laden previous version. Using a combination of CSS and HTML, you can create a custom Myspace DIV layout that allows you to keep the functionality (comments, friend lists) while adding your own content (custom image header) and div layout objects.
Part one: Setup and custom header
To start off, you'll want to create the page as normal in the Myspace 2.0 tool while avoiding the use of any templates. This allows you to have complete control of the design. The first thing most people want to know is how to add a custom banner on top of the page. This can be achieved using the following steps:
1) Insert the below code in the "CSS" field of the Myspace profile 2.0 tool. You will need to adjust this to fit your image and website design. Mess with the "margin-left" and "width" until the page lines up, then adjust the height to be the same as your custom image.
2) Now go to the "About me" section of the page and click "Edit Blurbs."
3) At the top of the "About me" field, put the following code:
4) Preview the page. Your image should now appear above the rest of your page, including ads.
[This post is to be continued.. Please comment if you have questions/tips.]
Part one: Setup and custom header
To start off, you'll want to create the page as normal in the Myspace 2.0 tool while avoiding the use of any templates. This allows you to have complete control of the design. The first thing most people want to know is how to add a custom banner on top of the page. This can be achieved using the following steps:
1) Insert the below code in the "CSS" field of the Myspace profile 2.0 tool. You will need to adjust this to fit your image and website design. Mess with the "margin-left" and "width" until the page lines up, then adjust the height to be the same as your custom image.
2) Now go to the "About me" section of the page and click "Edit Blurbs."
3) At the top of the "About me" field, put the following code:
4) Preview the page. Your image should now appear above the rest of your page, including ads.
[This post is to be continued.. Please comment if you have questions/tips.]
Free Dreamweaver templates and how to make your own site
There are many places you can find free Adobe Dreamweaver CS4 templates on the web. The type you pick depends on your HTML/CSS experience. For those interested I have located some WYSIWYG (what you see is what you get) Dreamweaver templates. I also recommend checking out HTML templates. These packages contain simple images, backgrounds and templates for your use.
If you would like a guide for creating your website from PSD to HTML check out the one at PSDTuts. Check out their other tutorials, which usually include a PSD file for you to experiment on.
Those with more experience may prefer to download a free CSS template, which contains all the code needed for a clean, polished website. Make sure to use a reset.css file with any CSS template to ensure maximum compatibility between browsers. I have found an online CSS layout generator which will create a simple layout template based on your specified dimensions.
Make sure to put your finished code through a CSS cleaner to ensure maximum speed and compatibility. A final step in the process is to put your site through the W3C Validator to check for any code that is not valid or cross-browser compatible.
If you would like a guide for creating your website from PSD to HTML check out the one at PSDTuts. Check out their other tutorials, which usually include a PSD file for you to experiment on.
Those with more experience may prefer to download a free CSS template, which contains all the code needed for a clean, polished website. Make sure to use a reset.css file with any CSS template to ensure maximum compatibility between browsers. I have found an online CSS layout generator which will create a simple layout template based on your specified dimensions.
Make sure to put your finished code through a CSS cleaner to ensure maximum speed and compatibility. A final step in the process is to put your site through the W3C Validator to check for any code that is not valid or cross-browser compatible.
Free glass buttons for your website (PNG format)
Sunday, April 12, 2009
Bittbox has an illustrator file with 72 free vector glass buttons that can be coloured and customised for your website.
Free web-based word processor
Zoho is a free web-based word processor that allows you to work online and offline to edit and store documents. Zoho is favouringly compared to Google Docs in this review.
How to add a "Buy me a beer" button to your blog
There's a lot of ways to make money from your website using ads, but some have taken to adding "Buy me a beer" buttons. This is easily achieved by signing up to Paypal and then following the "Merchant services" link to the "Website Payments standard" menu. Follow the links to "Sell single item." Paypal gives you the option to choose your own image, you can use the image below if you want - from there just copy the code into your blog.
Aviary - free online design suite
Friday, April 10, 2009
Aviary is a free online design suite with the following tools:
- Phoenix: an image editor (similar to Adobe Photoshop / Gimp)
- Raven: a vector editor (useful for logos / and clothing design)
- Toucan: a color editor
- Peacock: an effects editor
- Phoenix: an image editor (similar to Adobe Photoshop / Gimp)
- Raven: a vector editor (useful for logos / and clothing design)
- Toucan: a color editor
- Peacock: an effects editor
100 resources for web developers
blog-well.com has put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end.
Push Photoshop to the limit
Noupe has a great list of ways to maximise the effectiveness of Photoshop in your web design work.
Free online Photoshop clone
SumoPaint is a great free online Photoshop interface for you to make simple adjustments to your photos.
Free online photoshop tutorials
100 Photoshop Photo effects is a list of great tutorials to help you improve your photo-editing ability in Photoshop.
Also check the following sites for great tutorials:
Also check the following sites for great tutorials:
Free online tools for evaluating web design
SixRevisions.com has a great article on 7 tools that you can use to measure the effectiveness of your web design.
Free online file conversion
Friday, October 31, 2008
Zamzar is a free service which converts a range of formats and sends them conveniently to your e-mail.
Useful Firefox addons for Web Designers
Thursday, October 30, 2008
- Screengrab Saves entire webpages as images
- Fireshot is a Firefox extension that creates screenshots of web pages. Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers. It's possible to choose whether entire web page or only visible part of this page should be captured. Screenshots can be uploaded to server, saved to disk (PNG, GIF, JPEG, BMP), copied to clipboard, e-mailed and sent to external editor for further processing.
- Link Checker Highlights broken links on the page
- IE Tab Embeds Internet Explorer within Firefox for cross-checking.
- Firebug Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... Firebug 1.2 requires Firefox 3. Firefox 2 users should install the older 1.05 version of Firebug.
- Flash Block Temporarily block Flash to view noscript content or view the page or view the page as someone who doesn’t have Flash (or the latest version) would see it.
- Web Developer Toolbar Useful features for web developers.
- Web Macros Automate repetitive tasks in Firefox.
- GspaceThis extension allows you to use your Gmail Space (4.1 GB and growing) for file storage. It acts as an online drive, so you can upload files from your hard drive and access them from every Internet capable system. The interface will make your..
- Javascript Debugger Venkman is the code name for Mozilla's JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.
- Codetch Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
- MeasureIT Draw out a ruler to get the pixel width and height of any elements on a page.
- AutoFill Forms Autofill Forms enables you to fill out web forms with one click or a keyboard shortcut.
- SeoQuake is a Mozilla Firefox extension aimed primarily at helping web masters who deal with search engine optimization and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet...
- Ook Ook? Video Ook! enables you to download embedded videos from several systems (such as YouTube, Google Video, Metacafe and many more). ...
Freeware HTML Notepad
HTML Notepad is a freeware notepad replacement with syntax highlighting. It also features a range of shortcuts allowing you to quickly update HTML. (PC/Freeware)
There is also a good list of freeawre HTML editors for Mac and PC here.
There is also a good list of freeawre HTML editors for Mac and PC here.
How to download YouTube videos to DVD
Thursday, December 27, 2007
I have had many people ask me how to download video from sites such as YouTube, and the simplest way I have found is to enter them in KeepVid.com. Once entered, right click and choose save as on the link provided (make sure to enter a unique filename and change the extension to .FLV)
The video will then be downloaded in the FLV (Flash Video) format. This is a format of compressed video that is designed for the web. FLV is not the most ideal format to work with as it has been compressed and resized for fast loading on YouTube - meaning it is a last resort if you would like to view the video on DVD. Always search sites such as Google Video to see if there is a higher quality version available (often YouTube videos are appropriated from other sources, so look around!) I would also recommend searching Torrent sites such as ThePirateBay.
Once you have downloaded the video at the best quality you can find, it is now time to convert the video. You have two options here - the first being trial and error with Super(C), which is a freeware tool for PC that will convert most video and sound formats. Try converting the FLV video into an MPEG or AVI file, and test the quality of the conversion. Once the file is converted, you will need a video authoring program such as Roxio MyDVD to burn the file to a DVD disc.
The second option is to consult a site like VideoHelp.com which has many guides detailing step-by-step instructions to convert virtually any format to DVD. Visit the guides section, select the format you wish to convert from and to (ie AVI to DVD) and search. The guide usually will refer to freeware programs to get the job done, and will provide URLs of where to get them.
There are a number of Firefox Addons available to help with the job of downloading the videos, you can peruse the list here to choose one that suits your needs best.
Div Layouts for Myspace
I'm not the biggest Myspace user, but I have had requests to design and build CSS layouts for Myspace before. These initially were a challenging and demeaning task, but then I discovered some helpful sites on the web to assist with this process.
By the way, if you are not familiar with Myspace CSS layouts, they are layouts that use modified CSS code to change the default behaviour and look of a Myspace profile layout. The best starting advice I can give is to learn some of the MySpace custom CSS codes which will help you understand the code you will be generating later on.
Then you should visit Div Overlay Generator which is a graphical generator which will allow you to create the beginning of your customised myspace profile. Once you have the basic parts such as the header image, font and background images set up, you are now free to save and edit the code to adjust the look how you want. Be warned, the CSS is often tricky and confusing, and it is recommended to save often while experimenting with the code.
Here are some other recommended sites in relation to this topic:
Free website templates
Sunday, November 25, 2007
FreeWebsiteTemplates.com has a range of free templates which include the original Photoshop (PSD) files in the package. This means you can use the layout as a start off point for your website, and will give inexperienced Photoshop users a head start. Freelayouts.com also has a selection of HTML layouts for you to peruse.
Subscribe to:
Posts (Atom)
Posts
