iWeb Tutorial - Creating Unique Templataes

[DJdeathBulleT]

Seems alot faster than writing html and css from scratch. Can u make .php pages with iWeb?

[melanieberry]

You are a wonderfully engaging and suscint trainer. As a trainer for 30 years, please consider joining the professon. Thank you.

[melanieberry]

Wonderful.  Several questions: 1. How/What program or methodology did you use to record yourself while creating the tutorial? 2.How did you make the boarder around the HTML YouTube? Where on YouTube do you find that code?3. What Apple software could you use to do what you did in PhotoShop, as I learn PhotoShop? 4. You continually referred to "What ever your design calls for"... Is the somewhere where one could go to to find out the layersed steps wo creating a website design or layout?

[yleitner]

WoW! Dude your my hero!

[Kuddybear]

lukejohndesigns, this is an awesome tutorial, thank you for taking the time. I know this is a lot to ask but could you post your png or jpeg images somewhere, or at least empty files of that size? Not that I want to rip off your graphics but I would like to use them as size templates. If I could just lay my images over yours it would save a lot of time figuring out what is the correct size to make everything. Thank you once again for a GREAT tutorial.

[monkeymethods]

is there a way to make a liquid design on iweb???

[BigidyBooh]

how did you create the logo and other stuff because thats really good

[iamEMARC]

is iweb included in every new macbook pro 13?

[langall77]

@iamEMARC

yes mate it is

[oboeliz]

Thank you, very helpful and easy to follow.

[56Ronin56]

Brilliant tutorial! Excellent design. Thank you

[mattherd1]

That was exactly what I was looking for in iWeb, amaing tutorial. Thank you! Youve saved my new business hundreds of pounds!

[davidamills]

Thank you for a superb tutorial. You accomplish more in ten minutes -- and it looks far better -- than I accomplish in days of uninformed tweaking. You already helped me tremendously.

David Mills

Huntington, WV

[LesTousTube]

just what i needed. building an amateur site for a family business. does anybody know how i can make an iWeb site have a better name than the long one it provides? ideally i want the company name with a .com. have a transfer an iWeb site to a host/server?

[Maxico22fly]

Great video. Thanks alot. Just a question. I'm creating this one website on Iweb which requires people to upload a video to the site. Does anybody know how to do this? Is it actually possible with Iweb.

[plannettable]

how would i do something like your header in photoshop?

[mohammedrajpar]

great tutorial, keep uploading!

[vapostol]

great man !!

[grapemartini]

Thank you VERY much.

Your video really helped me open my mind to start creating unique websites!!!

[investinliving]

hi. great vid thx. Can you make the width size of iweb larger (wider) thx

[advancenut]

I used your directions and saved a lot of time. I have always just winged all my sites and now with these directions I understand a lot more. The only issue I have come across is I can't change the color for the names of the pages in the header. I know how to do it, but using your system I can't get the names to hilight to have color or rollover color. Can you make a suggestion? Great video you made, its clear and concise.

[Flobbies]

You should make templates for free and a website where people can download them for free :D

[Flobbies]

Cool, the only hard part is creating that sexy background...

[alexilaiho1st]

@Flobbies I agree lol It's not hard, but if you want to make something good and done 100% by you, it will take some hour, and a bit of creativity :P

[ODWJNauwdsSRTHNAF]

Web'

[ODWJNauwdsSRTHNAF]

Plz make more tut to make wb lages with iWeb like logg in

[abdulpossocarmen]

you sound like jonathan budd

[nate64311]

How did you make your photoshop images



[kojobolazy1]

how do you make your footer...well the way it is? I mean how do you make that shape in photoshop. Can you give me a link or tell me what its called?

[kamp727]

Kool

[NicoleWongTV]

how do u put a html in iweb?

[PCoop23]

Thank you so much. I just finished my site.

[FutureInventions]

THANKS SOOOOOO MUCH! I have been trying to figure out how to make the site wider for a long time!!! THANKS SO MUCH! YOU DESERVE A SUB!

[TRANCEMONKYE]

This video was so good it made me laugh.

[Applaren]

@TRANCEMONKYE lmao..how

[MrDen555]

A very good (no BS) tutorial. In 10 minutes a bunch of info that I did not get from a 10 part very, very long tutorials from other people. Thanks!!!

[timplaster]

This is a great tutorial man! Thanks!

[ronnierascal12]

Ok I get all this, but I've got a problem: Im trying to make a tutorial website. I could spend ages putting all the lits of tutorials in order and getting them right. But what about when I want to update it? How can i get everything to move down and leave space to update? hmmph

[maggs1624]

you're amazing, thanks!

[knewamericannerd]

wait with the new icloud will we be able to do this stuff but now we dont have to pay for mobleme????

[TheSk8teKid]

/nicoschott/Website/Über_mich.­html

[binny301]

hello



[xfabiosoft]

can you save this template? or you can use it only duplicating these pages?thx

[pilotoqurdi]

This Tutorial is so GOOD that I have to click the dislike button

[mmglisci]

Thank you for this tutorial it is very good. I have a couple of questions:

Can you attach a third party photo gallery in iWeb?

And can you attach a password protection pdf as well?

thanks

[LuluCorleone]

Thank you so much for this tutorial.

[Merluso0822]

Thank you!

[maximaluvr]

Totally great, I've gone through so many videos, but this by far is the very best!

Thanks!

[maximaluvr]

Totally great, I've gone through so videos, but this by far is the very best!

Thanks!

[CrispMoneyz]

☢ Ha! You got nuked

[angrydingo]

Excellent tutorial. Thanks mate! Will you do one for the contact form?

[iTzzTucker]

qwerty

[iTzzTucker]

what version of iWeb are you using??

[jennykempe]

This is just brilliant. Thank you.

[jennykempe]

This is just brilliant. Thank you.

[JRSTEF]

THAT WAS A GREAT TUTORIAL BUT I WOULD LIKE TO KNOW HOW DID YOU DO A CONTACT FORM IN IWEB

[lukejohndesign]

@JRSTEF google forms. Hope this helps.

[MKNwebsolutions]

@lukejohndesign Hi John, check out myestoreapp . com, we provide a free ecommerce solution for iWeb publishers / developers.

[Groovyliciouss]

@JRSTEF

go to jotform dot com

i got mine from them.

[rockhopper123452]

@JRSTEF u can uyse wufoo

[BARSandBATTLES]

How did you create that contact form inside iweb?

[jenahilton]

can you connect a blog page after creating this template and can you host on mobileme and have advertising? this is a great tutorial...

[lukejohndesign]

@jenahilton you can duplicate the page and it will copy over all the design you did.

[Turk1983]

Great tut! Very helpful! How did you create the contact form?

Thanks

[lukejohndesign]

@Turk1983 google forms

[rockhopper123452]

@Turk1983 wufoo

[KevinA1092]

That is by far the best custom iWeb tutorial I have seen. Thanks so much for sharing.

[dkessler5280]

This is a tutorial on how to build a website, not how to make a template. I was expecting the video to tell me how to customize iWeb's themes.

[lukejohndesign]

@dkessler5280 I guess it depends on your definition of template. My hope was to help people create a theme (template) that could be copied into pages of the website. My intention was to help people not confuse. Sorry if you felt confused by this or did not find what you were looking for.

[FinancialBondage]

lost me on the photoshop header thing. talked too fast. and wth are you talking about? create my own header using photoshop? what size? jpg or png? lost me already

[lukejohndesign]

@FinancialBondage sorry about that. It does take a basic knowledge of Photoshop. There are great tutorials out there on this subject to help you along. Sorry if you felt lost, I was just trying to help people if I could.

[PauloTheWarrior]

Thank you so much! You and a great for this! One of the best tutorials I saw so far!

God bless bro!

[EspeshallyWittyTV]

nevermind I answered my own question!

[EspeshallyWittyTV]

i typically fear 5min+ tutorials, but you are actually very captivating and helpful. Might I ask what dimensions you used for your layout in photoshop?

[bghoo8313]

Very very nice tutorial!!!

[GaMeOvErRules]

very nice tut dont even had a mac just wanted to take a look but actually sat there for that 10 mins.

[snoopy4lb]

Really nice tutorial, By far one of my favorites and best i had seen, thanks a lot.

[MetallicaLuv]

lol sliver! this is an amazing video. and web site.

[x1MissWorld1x]

What an awesome tutorial! thank you so much! This helps me a great deal :)

[jtb04a]

Very impressive.  I saw this site last summer when I was trying to build a website for a church. I love your graphics and logos

[rickyhurtado]

@jtb04a can I see your site?

[jennallyssa]

how do i import a template that i downloaded from the internet?

please reply!

[lukejohndesign]

@jennallyssa what platform is the template for?

[jennallyssa]

@lukejohndesign iweb

[RoXLLXas]

It this for free or cost this Programm

[korgpadude]

@RoXLLXas its in ur apple mac

[trashymac]

EXCELLENT video! Very informative and to-the-point without a lot of fluff.

Thank you!

[TheTKFilm]

looks awesome! thanks for the tips! do you happen to know of a way to shorten the final url?

[alexsheridan]

this is exactly exactly what I was looking for. Outstanding.

[biggahbounceent]

How did you make the Contact page??? It looks great!

[lukejohndesign]

@biggahbounceent Google Forms.

[Frapo888]

Thank you! :)

[JakiBent]

Great video - can you tell me is it possible to add pages to your site that are 'invisible' - in otherwords that people can only get to if they have the link, for example a Thank you page after they have chosen to opt in to a mailing list, or one that hold extra content as a Thank you for signing up - In Gratitude - Jaki :)

[thegoat4life]

what are the size requirements when designing using photo shop.

[Tamino14]

I am new to iWeb and I thank you for explaining to me how simple it is to customise this powerful programme.

5* from me!!! Cheers

[SmashUIn2]

i have no idea how to make the pictures like you said around 0:55 can u plz help me?

[evangelistmatt]

Wow! Super helpful! Thanks for taking the time to make this.

[evangelistmatt]

Wow! Super helpful! Thanks for taking the time to make this.

[RyanWCrozier]

you are a genius!

[girlwithme]

Thanks for this tutorial, I am so pleased you can do this in iweb as I like the software and how easy it is to use yet create good looking websites.

In your tutorial you showed you had added a contact form in your website, can I ask how you did this? as its something I would love to do and don't know where to start/look.

Thank you and hope to hear from you soon :)

[lukejohndesign]

@girlwithme I created the form through Google docs. If you sign up for a gmail account you will get access to Google docs where you can create a form. After you enter the fields you want just choose the option to embed the form and copy the code over to iWeb. Hope this helps!

[Fresh0razoR]

nice video, but iWeb sucks

[eaglnest]

sweet

[lukejohndesign]

@eaglnest thank you kind sir:)

[rachelkam1]

Can you make a tutorial for learning to make your designs, they are really great and I would love to learn more about them. Do you use illustrator?

[lukejohndesign]

@rachelkam1 I will consider this for sure. I have been thinking along these lines but have not done it yet. Thanks for the suggestion!

[tuncbilek]

Thanks for the great tut, I want to ask a question: When I add html widget with youtube code and try to view on firefox or other browser it gives me this message "adobe flash player has stopped a potentially unsafe operation" do you have any idea to solve this? Thank you.

[lukejohndesign]

@tuncbilek Interesting.  What version of iWeb are you using?

[WORKOUT66]

Definitely not for beginners.

[lukejohndesign]

@WORKOUT66 every mountain climbed begins with the first step:) You can definitely do this!

[WORKOUT66]

@lukejohndesign Do U Know HOW MUCH ENCOURAGEMENT U JUST GAVE ME FROM READING THIS MESSAGE?

U just Push ME EVEN FURTHER.

THANK U

[lukejohndesign]

@WORKOUT66 Ha! We all encourage each other. That is what community is all about. Here are two resources which will help you further. lynda(com) & creativelive(com). Both have free resources to them as well as paid. Creative Live has free classes continually if you can catch them at their scheduled time. Cheers!

[realtyphotosNW]

Good tutorial, very god design. Question, why build the header as a .PNG file, nearly 1/2 meg in size, instead of a compressed JPEG which would be considerably smaller? Photoshop's 'Save for Web and Devices' feature can cram an image file down to a very small size, and compression is selectable, and can be previewed in advance.

[lukejohndesign]

@realtyphotosNW thats always great practice. From what I understand with the older versions of iWeb, it cuts it into png before uploading it to the directories on your server. This could be wrong though. I am also a fan of png because of the layering you can do with website design. This design did not need this necessarily. Great comment.

[JustinCritzMusic]

Wonderful tutorial and great design!

What are the pixel settings you used for the header and footer?

[lukejohndesign]

@JustinCritzMusic 1120px.  Hope this is helpful!

[PaddiesPub]

great design, I'm assuming you use iWeb to get your domain name

for my iweb site I use drop box and Tk domain service for free hosting and domain naming

[lennartjuhh]

please help! Ive created a template for a website, infront of the navigation bar? I have the normal iweb, how i move it?!

[lennartjuhh]

jesus i wish i could do this :(

[ryce4lyfe]

Great vid :D

How do i make a replica to the page?

My web page has been set to 1120 px by 700 px

do i just set my photoshop doc to those dimensions, import, do what u say in the vid and every thing will just fall in place?

[lukejohndesign]

@ryce4lyfe I always set up the Photoshop file to the exact size of my website design. Make sure to include 200-300px border for the BG. Once you have designed your webpage in PS you will use the File>Save for web option and set it to a JPG or PNG, depending on what your design calls for. Hope this helps.

[ryce4lyfe]

@lukejohndesign sick thanks :D

[deyanzhekov]

Haha love the design, tho is their a way you can create you'r banners in iWeb? Or do you have to use Photoshop :?

[lukejohndesign]

@deyanzhekov From my understanding you cannot create the design in iWeb. The design I made was in Photoshop, however I have had friends who used Keynote (another great Apple product) to do light design with. It allows you to stack images like layers, similar to PSD and adjust opacity, stroke, fill and shadows. After they are done designing it they will take a screenshot (Apples can do this by command+shift+4). I would not recommend it, but it could get you by. Hope this helps!

[lukejohndesign]

@deyanzhekov There are other cost effective if not free applications which can do this as well.

[GMAArtistAgency]

This was awesome man!!! Thank you so much for posting this. I'm about to start my own website on iWeb and this has been the best video I've come across.

[H1P2S]

Excellent stuff.

[lukejohndesign]

@fandabidozieify to clarify. You created a header image and brought it over to iWeb as a jpg, you then brought it into the header section of iWeb and resized the width to the exact width of your new image?

[brinnoo]

Hi. I really like your tutorial nice way to make a great template. Could you pass me those images of wood but whit out that paint and logo on it. PLS. THNX a lot.

[iJasonTube]

This is not a template, it's simply you creating a design in iWeb. Your title is very misleading. A template involves opening the the package contents in the iWeb app itself and duplicating or creating the template as xml to tie into the actual templates offered in iWeb. Those are templates, this is not. I'd advise you change your video title to "designing a webpage in iWeb".

[lukejohndesign]

@iJasonTube I am sorry you fell so frustrated and angry. I can see your point of view. Sorry you feel I am miss leading you. My intention is only to help people find a solution for creating their own websites. Once again I am sorry you are so angry and frustrated.

[DiegoAce08]

what is the photoshop resolution to make an iWeb page?

[lukejohndesign]

@DiegoAce08 72 dpi

[EmpEntTV]

Luke, thanks for the video, it is very helpful

[lukejohndesign]

@EmpEntTV Your very welcome!

[racingalfred]

Wow, this is so cool. I have a website and was sad cause I thought it was limited, but you walked me to the light!! :) great tutorial. Thanks so much.

[lukejohndesign]

@racingalfred Im glad you feel this video is helpful! I hope it helps you create a beautiful website!

[siditom]

Great tutorial!

Thanks

[ElloManoto]

Can you do a photoshop tutorial? on how to make the header, footer etc.?

[thetechall]

wish i had a mac now... lol

[themattandalecshow]

You can change the nav bar...just un-click the display navigation bar check box in the page section of the inspector...then you can make custom buttons and do custom font and just link the text to the page and copy it to all the other pages. Go check out my vid "beep bop banana bop" plz its funny and subcribe!

[themattandalecshow]

You can change the nav bar...just un-click the display navigation bar check box in the page section of the inspector...then you can make custom buttons and do custom font and just link the text to the page and copy it to all the other pages. Go check out my vid "beep bop banana bop" plz its funny and subcribe!

[bubbleitupinc]

great video!

does this technique apply for the blogs?

[Reitoufication]

I'm getting a mac in december or whenever I can make some sufficient money I'm very fond of iLife and all that because I have used it for years at school. I want to update my site that I made with expression-web and that's an ftp thing right? I would really appreciate if you gave an answer because my website has a serious issue and I want to know how I can update it. Go to my channel and click on my site link thing and you'll see what I mean

[lukejohndesign]

Not sure what you are asking. Clarify a bit more for me and I will try to help.

[Reitoufication]

Well you see I have a site up and it's live on the web and I made it with microsoft expressionweb so if I remade it with iWeb would I be able to publish it? because it says publish through ftp or Mobile me so if i chose to publish through ftp would it work?

[lukejohndesign]

Yep. You will just connect to your FTP through iWeb and upload the new files. iWeb should do the rest.

[Reitoufication]

Alright thanks

[graystaz11]

@lukejohndesign After you create a template how can you add the formatting of the album or blog pages?

[TheAppleGeniuses]

u can create a navigation i have one on my website

[lukejohndesign]

Please explain more. I am very interested. Maybe some links to forums.

[TheAppleGeniuses]

i will make a video on it ok? and if you would like to see my navigation bar then please go to theapplegeniuses . tk (dont space)

[TheAppleGeniuses]

you never responded..do you want me to make a video on it?

[lukejohndesign]

You can if you want. I figured out a work around for creating navigation through image links. Is this what you had in mind?

[TheAppleGeniuses]

well you can take any imge..text..etc then goto your inspecter.click the object..go to hyperlink and select enable hyper link then pick "one of my pages" in the menu then select the page

[lukejohndesign]

It is around 1240

[blink182sk8punk]

thanks this was the best iweb tutorial on youtube thank you!

[MagicPinebananas]

@lukejohndesign how did you create the images?? (header, footer, main content background img...)

[blink182sk8punk]

hey what are your measurements for your header?