Hi everybody its James at DreamweaverTutorial.co.uk and today we gonna be looking to create a CSS tabbed navigation menu. Each link creates an illusion of a new tab when clicked upon. There are also various over rollover effects which is fully customizable and you can also choose the oval tabs, rounded tabs or square tabs. Okay so let’s go in to Dreamweaver, now I have already defined a new sign in Dreamweaver, I have coded the tab menu and I have given a CSS folder and an images folder. And what I am gonna do is take a blank HTML 1.0 transitional web page and I am going to split the screen and I am gonna go in body tag and we are start building a navigation menu. Now I am gonna create a div which is going to wrap around the whole of the menu and this is for you to use to install into your website.

So I am gonna give an id of navbar so div id whose navbar and again we are going to define in CSS folder this navbar div is a width attribute, width property. Okay so inside of navbar we are going to start creating our menu, so I am gonna give div with an id of holder because this is gonna hold and end hold we are going to turn in to horizontal tab navigation menu. Okay lets start creating an unordered list now so I am gonna open and close a UL tag, so I type in bracket UL and closing UL tag. And inside of the unordered list we are gonna put a list item tag such as li tag and inside of the list item tag we are going to place a a href link , so here is the li and closing li we are gonna type a href equals and we are gonna close the link tag and then we are gonna put a hash inside to create a no link.

Okay so we are gonna copy and paste the whole of this list item so you can press ctrl c highlight press ctrl c and then press ctrl d and it will copy and paste it as many times as you like. Okay so pull the screen if you need to but this pretty much the whole of the HTML we are going to use in this tutorial to create our horizontal tab navigation menu. So pull the screen if you need to and I got need exactly what I got here and you should see in design view as well some empty bullets that could be populated with link tag j so I am gonna start it now I am gonna type in home, products, services, ammm have a link to gallery and a link called contact.

So lets click inside the design view or press refresh to see the list items that has being populated in design view and are gonna get work on CSS now covered need to list out bullet links items and the text decoration, so if you got that navbar there and place of cursor in anywhere inside that navbar div there if you go to CSS style panel there will be a buttons clicked to create a new CSS rule. So we are gonna create a new CSS rule defined in a new style file and I have got my folder already set up inside of the tab menu folder in the CSS and the CSS tab menu as well. So we are gonna press save and I should create a CSS document, I am gonna click ok and I am gonna click just beside the source code and go in and hand code the CSS from there. Okay we’ve have the navbar selected I have just created.

This is essentially just gonna have the width attribute at the end of the tutorial. when you copy and paste the menu in the web design this navbar div is for you to position it. You can add the properties you need to get it to the web design package. Now we gonna talk about the unordered list inside of the holder div now I am gonna type in holder ul and the opening closing curly braces. And first thing we go do is take out the list bullet which are inside the unordered list so I am gonna type in list- style: none and semi colon and press refresh and see to make this disappear and we gonna take out divful margins and paddings so we will make the list items go flush to decided to the div. so make the margin:0, padding:0 and insert the semi colons and there we go. Now for absolute beginners you see if I click on CSS rules here it will bring out the definition dialogue box for you and you can see if you click on list category its done exactly what I type there say none and box category padding and margin is 0. if you are an absolute beginner ok lets start styling the links inside the unordered list now. So I am gonna type in pound navbar pound holder ul li a, so that’s a links inside the unordered list which is inside of the div called holder and the holder dive happens to be inside the navbar div.

Okay, so first thing we gonna do is to take out ugly underline so I am gonna type text style decoration:none and that ends with a semicolon. Now you press refresh or click inside the design view to disappear that’s fantastic okay. So next we gonna do is we are gonna flow out the list to the left and that will give a horizontal feel. So they are got to float left and if we set a margin right of 5 pixels that will push the text from each other by 5 pixels. Now I am going to change the font family decoration and I want a nice chunky font, so we can apply text shadow too. So I am gonna drop font family and I am gonna set Arial, black gadgets, sans serif and when you refresh they get big chunky text now you go to alter the size of the font now.

So I am gonna change the color of the text to black and set the div ful link blue color. Okay set some border around of the link so I am gonna do a concatenation of a selector so I am gonna type in border:1 px solid # 000; and you can see the border has being created tool way around and we gonna over write that in the cascade now and we have the border and we are gonna select that to none and so we end with a border all the way around apart from the bottom and see this started to create the tabbed effect already. Okay the border is little bit of to close to the link so we gonna set padding all the way around 20 pixels fantastic and we gonna define the set width for every link so I am gonna make sure they are 75 pixel each and go to is plus 20 pixels from either sides for padding and the 2 pixels on either side and 1 on each side for border.

So I am gonna set the text align to centre and centre order on the text and set of the displayed property to block and that means that when someone rolls over the link just be on the text of the rollover effect takes place on the whole of that 75 pixel ok so background m gonna set to pound 69f which is a same a light blue color ok if you are looking at the side design view now pretty much styling the look of tab we are about start styling the hover effect for the links. So we select the new selector and we type in #navbar #holder ul li ai:hover so this what happens when we hover over the link. Then we set the background color we want background color I am gonna put in a orange color.

However whatever color you want to so I am gonna #F90 and I am gonna set the text color to black. And add the text shadow 1 pixel 1 pixel and set that to black so #000 is the very faint text shadow there and refresh. Ok so that in Firefox now. Ok so what we looking to see now is the rollover effect of working each link change from blue to an orange color so here we are and it is working and hover effect is gonna work and is working correctly ok so lets go back into the dreamweaver and finish styling of the rest of the navigation menu now we need to start creating the illusion of individual tab so if I just click a you see that it starts to collapse. We flocks the long horizontal blue liners so we gonna do to select an individual make that coded encompass themselves #navbar#holder and we gonna give a white attribute. So and if you still see I the design view there so I am gonna give the height colon 65 pixel and press refresh and then you go to it comes to whole links and whole navbar now.
To make that 64 pixels looking nice and here we go fantastic. Okay so lets put in the border so I am typing border dash colon and I set to 1 pixel solid and a black and semi colon at the end press refresh and we put it into the browser

Tags: actinic extension for dreamweaver 8, dreamweaver cs3 serial number, dreamweaver cs3 tutorials, dreamweaver tutorial, dreamweaver tutorial video, dreamweaver cs3 tutorial

Tags

Dreamweaver Tutorials

Hello everyone, in the last tutorial we discussed how to sink the Dreamweaver and get the setup with your website. We also created a sample index which is the first page the users will receive when they come to your website. In this tutorial I would like to elaborate more on the index and show you a way of building the index in it’s entirely. Now the way I am loading it this time would be using a method called tables and that I am gonna get started and you will see that in a moment. So I am gonna select odd index here and just going to do it here. Then I am gonna go to file, new, HTML, and nine and I am just gonna hit create okay. In the first thing I am going to do is gonna change the title from the untitled document and now this will appear on the main title of the tabs of Mozilla fire fox or Google chrome or whatever you use. Also I am gonna come to page properties and I am gonna change the background.

Okay now the table way is where you insert tables and then tables hold whatever content you have, such as pictures, videos, text stuff like that. Ammm so I am going to go to insert table, then make it one row, two columns, 10-40 or 10-24 in width and this is the standard desktop for websites make sure there’s no border and that we these blank, I am just gonna hit okay. Now so the user sees it centered on there screen and I am just gonna go to align and center. And now this has been centered on their screen, so I am going to add a picture. So I am just going go to insert image just to show that this can insert a picture. I am going to go to my desktop and we are just going to my other website and forward this.

And I just wanna me to save this, copy to this website, just say okay. And there is my logo and usually what these logos do is they link directly to your home page. Now you don’t see index.html here and that’s because it hasn’t been saved. So I am gonna come to file, save as, we will save it as index, with a lower case I, it’s saved and you will see it appear right here now. You also see this appear changed index, don’t worry about any of this other stuff itself from other website. Okay so I am gonna drag this link here through the index, now this is a very helpful because its only index but you never know there may be some of the clips in there anyway. You will also notice that this bar is pushed way out here now.

If you wanna content besides your logo you can drag this over here and I am gonna put little bit of text over here okay. You can also a center this to make it perfectly centered this with this line and this line. So now we have content held in by a table and you may be wondering you put no border but you have this starting line. If you would go and look in its live forms, there’s nothing here. So you don’t actually see the table you just see the contents of the tables. Okay so now we wanna add another table, you know we want more to it. Ammm so make sure that this cable right here isn’t could you want the bar to be right after the table and then you do the same thing you did before you just go to insert table.

And just center this table and here you can make it one column or even thirty four however many make sense to you and you know if you have a blog, website or something ammm this would be the place for that. Just put some sample code there. Okay so now we have our sample code in the middle, we have two tables and we have a picture that links to your own index so it will reload the page. So save the last table we may want and like a copy right so we are gonna go to insert table, down here and make it one column yeah here again and here you can just type copyright or Dreamweaver has and special characters, you go to insert HTML special characters and just click the copyright. And you will see the little circle if you see inside it and just put you know whatever as your company name and I will just center this.

So right now we successfully created our index just save all and you can keep doing this you know you can put more pictures here. This will get you started with all the text ammm you know and then you further here and you can move these tables up and down, between each other everything like that. Ammeter tables are good for tabular data, if you are doing a basic websites. However in the next tutorial I will show you how to create the exact same thing on here and then to give div tags. The dive tags are usually what most people use now but I am just gonna show you both ways of doing it. Also styling, navigation boards all of that is coming in a future tutorial. So if you like the videos ammm one two so see then the future tutorials go and subscribe and as always thanks for watching

Tags: macromedia dreamweaver, dreamweaver 2003 tutorial, dreamweaver cs3 or tutorials, dreamweaver navodila, free dreamweaver template, navodila dreamweaver

Tags

Dreamweaver Tutorials

Welcome you guys this is Ze tutorials and today I am gonna be showing you one of type one series that will how to easily create from scratch and upload a website to the internet for free. Know only for free I am assuming that you already own a copy of Adobe Dreamweaver, do not have a one you will need to buy for this series that is what I am going to be using as editor. Now the first things first we are gonna go to freeCSStemplates.org, freeCSStemplates.org. Basically I am just gonna give a template so you won’t have to create your own page from scratch and use all this tags that people don’t really understand. I find it hard enough to understand my self, this way it is was much easier and it this does the same job basically, if not a better one.

See just you got browse CSS and you just look through all to define which one you want and let’s just pick here I click. And let’s say like spontaneous that looks pretty good, doesn’t it? Spontaneous. So if would like to download in doc Zip. No you do need WinRar or may be seven zip. So get that, that will be in description everything is in description, just look at that. I am gonna drop this to desktop and this is it spontaneous. I am gonna right click and click extract here. And as you can see these are the folders that you will get, these are the four basic things that you will get. An images folder will holds all the images, the style folder and index analysis. So what you are gonna do is you are gonna create a new folder and call it your website folder. And you are gonna drop them into it, so everything will in one place.

And we are going to using the index, so what you do is you basically go to Adobe Dreamweaver, open it up. This menu should come up here if it doesn’t just go file and open. And you are gonna click you are gonna open up to save this. So I save it in a test file set up on my desktop, I advice you do the same save it to your desktop so it will always be there. Open it up and open up the index page, the index page okay. So click to open that and here is your ammm template. So where we are gonna start editing we are gonna carry this spontaneous and we are gonna put in may be your you tube name. So put in zetutorials ammm this is meant to be slogan put in what you want I will just put it as you tube. Ammm you look at these that’s your tags and that’s your people get blogs, forums etc.

I will be showing you how to do all that, and create forums with that but later on. Ammm here we are gonna have welcome to my website, ammm write some your self there ammm may be we wanna say, “Hi this is zetutorials” and here I am gonna be showing you bla bla bla bla bla keep going on what you want. Ammm here ones again just write whatever you want, I am really not going to write any thing there, ammm you can all edit that your self and sure. Ammm here write in or if you want I am gonna write in you tube down here just highlight this into there you want it to. And we are just gonna write ammm “click here to check out why you tube channel” ammm, here again you don’t need all this just delete this ammm. So, when you have done all that you wanna go to tab section and you are just customize it basically to your taste or may be you wanna put in what’s new here and then tell all people under websites “what’s new like ammm tutorial on Dreamweaver” ammm etc all that stuff. We can put here videos; you can have shop and whatever you want there.

Now go up here to title right here title and as you can see CSS Spontaneous for free CSS template. Now if was preview to preview it in one of my browsers, save it press yes ammm it’s gonna say right here Spontaneous by free CSS template. Now we don’t that because obviously people know that you just got it free and all, you know you don’t want people to know that. So basically what you just gonna do is you just gonna highlight that and you are just gonna print may be your you tube may be or whatever you want to name your company zetutorials and then we are gonna preview from, sorry first save it. We are gonna save that; for saving “crtl S” and then you are gonna preview from. And as you can see here it says zetutorials stays Spontaneous by Free CSS templates. Now not the good thing about this is some one wanna save your website as a bookmark, then just come up straight away as zetutorials instead of if someone just say this one it will come up Spontaneous by Free CSS templates and you don’t want that. You just want your name or whatever you want and so we will go back to Dreamweaver that‘s just the trick you will guess that and basically what you wanna know is with the you tube, click here to check out your you tube channel. So we are gonna highlight this, you can do this in a much better way and you just gonna click on the link, this where if someone clicks on this it will link them to my you tube channel. So wanna print http:// youtube.com/ user/zetutorials. Just copy whatever you want off your web browser if you don’t wanna put it there like that manually.

So we are gonna save that and we are gonna press F12 to preview in browser and right here it says, it’s underlined and it’s a link so when I click on that it’s gonna load the page and then here we go. This is me zetutorials very very easy. Now if you did not understand if the page is gone I have to go back and I don’t want that I want it to stay it on my website and go to my you tube channel so what you are gonna do there is you gonna back to this highlight where you highlighted again. Now write versus target you just gonna bring that down and click on blank_blank that just basically means that it will open in new tab that’s all you need to know. It will open in a new tab, so we will save that again and we will preview browser now. Now here we all saw that when I clicked on this, it will load this page in this in the card reader perfectly and if I click on this one it will open new tab did you see that this one is still there because I have board my websites open pretty much, it’s very very very handy, make sure you do that if you are linking to different websites to understand your website as well. And you don’t want them to be just have your one stock website and then go in to a next one like nothing better you want them to keep on your website as well.

So that is all what we are gonna do today, you can edit all this out, edit what you want make sure you picked the CSS template you like. And I am gonna bring it to you step by step with a series and in few days I will be posting part 2 which will show you how to make new web pages and personalize it more, put in videos and pictures and things like that. And there will be part three where I will put contact forms and forums etc in short all are coming stuff. So if you want to see the next one, subscribe I will bring you the whole process. At the end will be free upload with a web host and hope to keep you in all that so make sure you stay tune for that. I hope you liked it, you can check out my website that I built in a day, just messing around and it’s zetutorials.tk I will be updating it daily you can check that yourself you will have all your videos tutorials in that as well. Ammm make sure that you comment if you have any problem and I will help you or comment you just tell me how great my tutorial was and I hit the terms up and off course subscribe.

Tags: free dreamweaver templates, dreamweaver mx tutorials, dreamweaver menu tutorial, download a free copy of dreamweaver, free dreamweaver, dreamweaver cs3 layout tutorials

Tags

Dreamweaver Tutorials

Hey guys welcome to a new Dreamweaver tutorials in which I will teach you how to make static backgrounds on your site. So what is static background is when you scroll ammm your web browser the background doesn’t move and it goes along with your scroller. Let me demonstrate, we have our background right here and as we scroll it doesn’t move. Ya so now lets do that in Dreamweaver, as we go here and create a new document.

We will choose HTML and we are gonna get our you can copy paste the code from the description. I don’t know the code, immediately so I will just grab my codes and copy it. And the spaces back you can delete that everything that’s written there and paste it. And don’t change the URL, we are going to change it in a bit. And let’s get back to design, click on a page and go right here to page properties, choose appearance CSS and browse for your image.

I will do the same image apply and it immediately pastes in the code. Now ammm if you want to learn how to make these gradient backgrounds, click on the links that will show up right now. And now so that I prove that everything ammm that the background doesn’t move let’s draw some divs and put some clips into that. Or you can just drag our div right there and preview save and this it the backgrounds always stays.

So thanks for watching this tutorial, hope you like it, hope you enjoyed until next time.

Tags: dreamweaver cs3, free dreamweaver, dreamweaver mx tutorials, dreamweaver tutorials, macromedia dreamweaver 8, dreamweaver 2003 tutorial

Tags

Dreamweaver Tutorials

Hey guys today I am gonna teach you how to get some video into your website like this. Okay lets get started the first thing you need is the Camtasia studio that’s what I have here. Okay in in Camtasia studio you want to go to file and import some media and take your video like I have this raw video from fraps I will use that as an example. And you want to drag to the timeline and edit it whatever and for the dimension just make it smaller than the original video. I am just gonna say one 1000 x 585 okay and I am only going to I am going to cut the rest out to video.

Okay lets put that and move from the timeline, hey what you want to do is press produce and share and what you want to do is go custom production settings, next and choose the top one Mp4/ Flv/ SWF flash outputs. And let’s go to next and for the template make sure this is an expressed shell you can make the theme black or silver. I will just go with default and next oops forget we got to go to flash options and for the format you choose flv format and the bit rate 2268 is pretty good for your website. Because this has lot of motion so low bit is higher okay.

And for the audio I will make it like this one right here ammm one hundred and stereo 128 k one second okay I will apply that and ok. Next and HTML you make sure this is checked, and go next and wherever you want to save it is as where yours in the videos thing on your drop box thing that I told you to make in a earlier tutorial okay I am gonna go to test site and videos folder and name it what you want. I am just going do whatever ammm Pirates online swift foot glitch ok I will save that. And I will press finish I will let it render now pause the video and I will be right back, okay it’ almost done right now and there we go. See now this thing keeps coming ammm close that. And here this the file says its only 9.21 mega bytes but that only for 29 seconds.

Okay now I am gonna exit Camtasia studio and I am gonna save at, just because too lazy. Okay now what we want to do is open up Dreamweaver and make the HTML document. What you want to do id go to insert and then media and then SWF, it already created SWF file. You want to do is going to videos thing and then video folder and what you want to do is double click on the controller SWF. And then the video name and then I will just scroll and ctrl A that’s what we want. And I will call this Pirates online swift foot glitch and there we go and save it save it you know. And press ok and now preview in fire fox and this way it does. And then you click it to play and there we go. We have a video playing on our website. I hope this has helped you and if you if you have any problems then feel free to notify me. Now thanks for watching, see you later you tube.

Tags: dreamweaver free templates, dreamweaver div tags class tutorials, free dreamweaver tutorials, dreamweaver 8 information tutorial, navodila za dreamweaver 8, tutorial for dreamweaver

Tags

Dreamweaver Tutorials

Hello and welcome to this tutorial brought to you by zeforce.com. Today I am going to board a website in 5 minutes. It sounds impossible but to do but it isn’t. And I am going to show how to, so firstly I am going to create a folder and I a m going call it website. Inside this folder I am going to create another folder and I am gonna call it images. I am gonna copy this two images inside one is a picture of cat and second one is just a background image which is just a gradient going from dark to light ammm and that’s my website photo.

Now I going go into Dreamweaver, going to create a html page. Before I do anything I am gonna save it. And I will go to my desktop, I am gonna click website, I am gonna save as index because with some website with the first page they sees index. I am gonna be making a homepage so I am gonna save as index page. Save, I am gonna give a title of homepage or just home. Now I am going to create a table, I will make one column on table width 500, for a thickness 2, so padding 20, so spacing no. okay I am going to highlight this, I am going to my properties panel I am going to set align in center, I am going to make the border to blue color, I am gonna go to I am gonna click away from the table.

Look I wanna click on the page properties I am gonna change my font to Arial, I am gonna make the size 12, I am gonna make the text of white, I am gonna make a background color of 555555 and add a background image. And that’s gonna be my background picture I am gonna make the group be x which means across I am gonna links I am gonna make the link color that same blue is border. Ammm I am gonna just make the roll over a very light blue and I am gonna make the rollover underline. Okay this website is gonna be very similar to the one I did in that tutorial on CS stealer . I am going to select on the border of this table again and I am gonna make the background color very dark grey. Write the hmmm ammm hmmm add some lines so hmmm videos, games, music about contact. I am not accounting time so I don’t know if it’s been five minutes yet. It’s probably been few minutes but hurry up.

Few bla bla bla’s just to fill in some space, okay oops. I am going to make this larger I am gonna add a link to this to set into my website I am going to copy that URL oh yuck that is really bad actually copy and accept that oh at those links. By the way even if the five minutes is up I will still create the website just it doesn’t look very good. Anyway ammm okay and time is really up and you know is F12 to preview the page I have set the page already. Anyways so I have got the website with links, with content, with the title ammm basic layout which is just a table and background, enter. So that is the website I created in five minutes, it’s very easy to do. Now if I want to create other pages what I would do id ctrl N. click HTML, create new I will give it name of like contact or something.

I would just go back to the index page which is homepage I would just go to the code ctrl A, ctrl C and copy all this code. And ctrl A, ctrl V into ammm contacts, then I can just change this name to contact and I have got two pages already. Very easy to do and I could go into my HTML page I could just link contact. I mean ya contact-to-contact.HTMLand save this. I will make this to index.Html save this as contact. And I would have pages. So I will just save index. We get out of Dreamweaver. We are going over to that photo which we created over here. Double click on index, there is my website, contact there is my contact page click on home, contact time, contact time. I created a website ammm. So that’s what I created and did it in 5 minutes. People learned something today ammm make sure you watch my all the tutorials, make sure you go on www.zeforce.com and thank you for watching.

Tags: dreamweaver website templates, adobe dreamweaver cs3 tutorial, dreamweaver portland, dreamweaver mx tutorial, dreamweaver macromedia tutorials, free dreamweaver

Tags

Dreamweaver Tutorials

Now that I finished the task of creating a web page in this web design one folder using CSS and HTML to create a website. Essentially I have created a template that we can take a part and alter a few things to make a much more complex website. I am gonna do the rest of this in Dreamweaver while we had open in Dreamweaver so that you can carry on and do whatever in a web offering program.

A web offering program means you don’t need to know as much of the terminology and the specific codes and scripts that you do when you are writing pure html. It’s a little bit easier because its some of the tasks are replaced by button functionality so what to say what that looks like. So I will close this folder and I will open up Adobe CS4 Dreamweaver. And if doesn’t pop up immediately asking me to manage my sites I will go straight to site button on the top here and I will click manage sites manually. What is want to do is to create a new site and it just asks me what is the name for my site and I am gonna call it template trail for CIS.

It’s now asking me where the root folder is? Where is the folder that contains all the information for my website? I am just gonna place that on to the desktop and on to that webdesign1 folder. And now open that there and I have to select where I am there, it is asking me where my images folders are? So I will click there I will open images folder and I will select there. So it’s confirmed that’s right. It’s selected the webdesign folder and for images it’s selected the inside folder. I want the links relevant, relative to this document. I don’t need to worry about my address or my case so I would just go ok. Ones it’s done I just need to click done and hopefully we are ready to go. If I look here over, here is my index for html I will double click on it and here opens my web page straight into Dreamweaver exactly the same as it was before. I can look at the code which is exactly the same the code we typed in or I can look at it in split view.

I can also look at the CSS by double clicking on that to get an idea what we have done in CSS. If I go back to my index.html and I go purely to the code view rather then the design view. I can now go through and I can start editing this text directly on the screen and it will automatically change my HTML code. So it’s a easier way of doing it but it’s quiet good if you have had the practice to see what actually is happening in the background on the HTML and CSS. From here you can go on and do whatever you want to do in creating a webpage because we have build up a working template from scratch.

Tags: dreamweaver key, dreamweaver forum, free dreamweaver tutorials, dreamweaver navodila, free dreamweaver cs3 tutorial, dreamweaver cs3 tutorial

Tags

Dreamweaver Tutorials

Okay so in this tutorial I am just gonna show you how to create a web form. So a for example contact form on a website that when you type some information such as this one ammm and some message. It will go off to the second page and display the information such creation of dynamic page otherwise the comment, content on this page changes dynamically based on what the user uses on the form. Additionally this is going to have a little script you know that generate some email it seems in a way to the owner of the website. So that what we gonna be look on in the second tutorial.

Today we are gonna do is locate how we go here and create this from. So here we have in Dreamweaver we have ammm page created already put context.html, and I have just cleared a bit of space here where I am going to insert the form. So at the top of the screen most of you will probably see the comment and say menu. What I am gonna do is use the forms, and save that and at the far left there is the first button which is the form. Right click on that one set of form and you can see here is the red dotted line around it. And you just click down the properties now, sorry about it the front window did. So ammm here we are anyway the properties of the form ammm down the bottom here you can see there is an action. Now that what will happen when you click on the submit button.

And now what we are gonna have in we are gonna send the information through to another script which I have called sendmail.php. So it’s written in php scripting and that’s gonna and generate the email for us. Our rules are gonna use the php to dynamically display the information from the form on another page. Also check that using the post method you seen that and that’s all we really need here. So if you click up here instead of the from and it’s gonna type in name and in the top here in the insert bar I am just gonna grab the click on the text field button and I am just gonna ignore all that, click ok. And this is my text field and first select a under properties you can say, by default it is called the text field. Now I need to give it a more largeful name, so I am gonna call this one name. And I think we stick to all lower case no spaces or symbols just make it a simpler while consistent. And do so with while setting width so go 50 completely observing to put any number you want. And also make some character this good idea to avoid having somebody ammm dumping millions characters in your form so I am gonna set the limit of 50. That should be big enough for to know.

Now just add another line and do another field for the email address that we want from it. So repeat again insert another text field okay and select that name it. I can give it a distinct name so email make sense. And wish to go with the same settings 50 and 50 for there. Again now you can put anything you want there. Ammm third field it’s little different, it’s called comment and again it’s a text field. But this time I am gonna select the or give it a name comment. But I want make sure you make it a multi line rather than a single line. So what we are gonna do there I can set the width character width 50 again but this time I am gonna also set the number of lines and say I go for 6 lines. When you press enter you can see you notice the labels, lines and stuff there you can use CS flare and put in a table, I have not put that’s for the another day.

And the last thing possibly we are looking at our radio buttons. So often you see on a website that say, would you like to receive our email newsletter? And there you see little button on the top called radio button and that’s because you are gonna select yes icon you can’t select both. So next to each other, so I will just put yes and now I am here. And I will go to settings. So right now you will select this first one, in the properties you have given the name radio with the checked value of radio. Now there when this one selected ammm then with radio we see through this one for no. Radio 2 then radio 2 actually don’t have the same names what they means is they are not grouped together, so they need to share the same name if I am able to select one together. So I will just change the name again something that makes sense so newsletter.

Now its checked because this is the yes radio button, I want to say yes. So this would come through my email say newsletter equals yes. These wanna be here, I wanted to say newsletter equals no, additionally you can choose to have a initial state checked or unchecked and I think it is probably more polite to have no is the checked state. Little shaky to have yes so is that and last provided that this form is a submit button. And again here at the top here insert ba, insert button there so I am gonna insert there one. And point of fault is come through action submit button. You can change the text on it, the moment want this is submit and then you can come up with then if you want it will appear on the text of the button. So that’s our form and just a recap as I selected you can see the action of the form, which is send it away from the page here called the same amount of php where we generated email and we would also display the content of the from on the page. And that’s all for this tutorial.

Tags: free interactive dreamweaver tutorial, dreamweaver video tutorials, dreamweaver cs3 and tutorial, navodila za dreamweaver 8, dreamweaver macromedia tutorials, adobe dreamweaver

Tags

Dreamweaver Tutorials

Okay like the orange background but I prefer the gradient. So let me show you how to make the background a gradient instead of solid color. This is actually really good, so let’s move in a Photoshop and here I created a document that is 960*1280 and I installed an orange gradient overlay. So what I need to do is slice this gradient up into one thin straight and then we can stretch it out in Dreamweaver. So I have here my gradient overlay layer. But actually what I need to do is merge it with a new layer, we are gonna hit the apple key to merge it. So that it is flattened into a solid layer. Before it had just the gradient overlay effect. What I am gonna do is copy that effect, so I need it like this. And what I need to do is, what happens is this gradient comes down and I want you to look right here.

This is the color, so watch right there. So using my eye dropper I am gonna drag down like this and see other colors is changing. But eventually the gradient will stop, will stop changing, so I put a line, a vertical line where it stops changing. And this what, so using my marquee selection tool I am gonna use this single column. I must get a proper single column selection in there. But I don’t need the whole thing, I just need to where the line goes. So I am gonna hold down option I am gonna come up and I am gonna deselect all the stuff below the line. I am gonna copy, make a new image, paste it and it’s there even if it doesn’t seem like it is.

And I am gonna save this; I am gonna save it in my portfolio folder, in the images folder. I am gonna save it as a JPEG, i am not gonna embed the color profile. I am gonna call this background slice. Okay now I can close that and I need to do one more thing in Photoshop, I need to come here and grab this color. So here is the hexadecimal value for that color, so I am gonna copy that and go back over the Dreamweaver. And I gonna type that number paste it for the background color. So it doesn’t look like a change much, so let’s change this to reflect the entire gradient instead of just one solid color. So let’s change a code a little bit. I am gonna keep the color in there but I am gonna change this to background URL parenthesis images/backgroundslice.jpeg that’s the name of our file.

And I want to have that color in there as well and after the color I wanna have this code it’s called repeatx and what that means is we have one slice, it’s vertical or you want to stretch it horizontally so it fits whole page. So watch what happens now, now we have entire gradient so I am gonna save, and so I am gonna save file, preview in browser, yes the file is fine. Ya save changes. So now we have a page that looks like this, it’s just not orange, it’s a gradient of orange. And that is one slice repeated throughout.

Tags: macromedia dreamweaver, dreamweaver flyout menu, navodila za dreamweaver 8, dreamweaver cs3, dreamweaver tutorial insert multimedia, dreamweaver portland

Tags

Dreamweaver Tutorials

Hey, what’s up guys. In the past tutorials we have gone over some of the basics of Dreamweaver and in this next following series we are gonna be working underneath the whole on learning Dreamweaver’s HTML editing features. We are particularly be working in the code view because we are gonna be checking out what Dreamweaver has to offer us as far as coding, as far as text editing, code editing goes. There’s few ways to view, there is the code view and split view, there’s also a split code view.

In this tutorials we are gonna be checking out the code view, as you simply see everything is going on underneath the whole . And there’s are lot of different formatting, ammm preferences that you can set that are formatting fiction code as you are encoding your webpage. And, as a, as a web designer myself, is very important to understand what is going on underneath, the design view. Because, the design view is it’s limited and it’s ability to allow you to control the code, ahmm sometimes you can type something inside the design view and out exactly as you need it, to be seen on the webpage. So, being able to understand what’s going on the code is very very wide too, being a good designer and programmer. And Dreamweaver really really allows us to make, it makes the coding much easier even for beginners.

Ahmm ,one thing, one thing you notice it’s different from the regular text editor in Dreamweaver, is everything and all this is controllable yourself, whenever I code I use the defaults, but if you do not like the default colors that have been set inside of the text editor here. You can change that inside of the preferences, you have to edit preferences, and you click on color-coding, and you can see not only is Dreamweaver a text editor for HTML but it also handles category of different document types ASP, code fusion, PHP, Action Script, C Sharp, CSS, Java Script, XML all of these document types have different color coding features that you can customize one hundred percent. The way you do that as you go in and you click on whichever document type that you want to control and you click editing colors or edit color scheme and you have a list of all the different tags that you can change. You see, let’s go on change, let’s change the comment color, it is default, is set to grey, we are gonna to change it to light green, say ok. Okay and as you can see, all the comments inside of our, your document here has been changed. We go back and change that to default that it was before, comment change back to grey okay.

As you can see that is how you change the color of the text inside of the code view, you can, you can change all, all the tags that you want. But for now you are, gonna stick to the defaults. Also, on the code view there is something called the coding toolbar, if you work here to the left you can see a lot of different options, up here we have open documents , So look at here making if I have most of the documents open, this will allow you to click, click on the whichever document you prefer to open. There is also the Collapse Full Tag that is useful whenever you have lot of div tags or lot of different elements in your code and you don’t want to see all at ones. You can go here, click on the main content div and we will say collapse full tag. And, as you can see it completely collapse that whole div tag. So, if you just wanna, you wanna look at one, one div tag you can get rid of all this other ones here by using the collapse full tag.
And that allows you to be able to focus in your code on one specific area ammm and if you wanna , you wanna get rid of the collapse you can go back and you can expand everything. You can also do that with a little minus sign right here, you can click on the div and you can highlight it here by clicking on this and then you can minimize it, just like that. Another thing over here in the coding toolbar is the Select Parent Tag, so if you are inside of a div or you are inside of your code and you want to find out what is the Parent Tag of this div that I have selected right here. Go over here and you can say, select parent and it will tell you where the parent is?

And this particular div tag parent looks like this the body. Also, we have the way to apply comments without actually mainly encoding them, for safe reasons we do not want this main content div any more. We go down here and we will click that you select the whole main content div and then we will click on this apply comment, but inside our coding toolbar and will apply HTML comment. That way we have just commented the whole main content div and you can see that everything right here didn’t turn grey, that’s because you already had a comment inside of the main content div. So, what you do is you take out this old comment that we don’t need any more, so it gonna come out of the whole main content div and we will just remove the comment just like that. And now, you can see that everything has been counted out.

So, we are gonna go back and we are going to remove the comment that we just created and then we are going to recommend, it looks like that, now it’s back to exactly as it was before. Ammm also if you are importing HTML from another source, say say you have lot of HTML and it is not formatted well, it is hard damaged and can’t really tell what’s going on. A Dreamweaver has a feature called source formatting and I use this all the time, it is one of my favorite features about Dreamweaver. It is easy as going on and selecting all the tags and going to Comments and Apply Source Formatting and as you can see all of this spaces that I just made, they went away completely and you can also do that inside of our coding toolbar over here, you can see that it allows us to apply source formatting by clicking on to last row bucket down the bottom, apply source formatting and everything that you highlighted it will apply all the source formatting for you.

And that’s all I have for this, intro tutorial to HTML and how it can be edited inside the Dreamweaver. In the next tutorial we will continue to talk about some more best features and some more features that the HTML editor where code view inside the Dreamweaver has to offer for us. So, thanks for watching, and make sure you guys subscribe and continue watch our Dreamweaver CS4 tutorials.

Tags: dreamweaver navodila, dreamweaver software, video tutorial on dreamweaver, dreamweaver drop down menu, actinic extension for dreamweaver 8, macromedia dreamweaver

Tags

Dreamweaver Tutorials