web design software for sale
hey guys, welcome to the first in a new seriesof asp.net tutorials apparently a lot of you guys really enjoyed myprevious asp.net tutorials so i figured.hey, whynot do a new one? new and improved. so that's where this seriescomes from. welcome to 'build your ownwebshop with asp.net' in this series, i will show you how you canbuild your own webshop, like the one you seein front of you. this site contains static (e.g. non-changing)pages and dynamic pages, such as this webshop. since we're going to work a lot with databasedata, you will also learn how to build arelational database and you will also build your own cms orcontent management system.
a content management system is a systemthat allows you to manipulate the data base, from within an application or website. for example. let's say this website owner ishaving a sale. currently, brake discs cost 150 pounds. (รข£) if i want, i can change this price from within mywebsite as you can see, the data has been updatedwithout having to update the database directly. in addition, this site also features login andregistration functionality so that users can create their own accounts. once a user is logged in, he can use thataccount to purchase items from the store.
i'm going to purchase 5 shock absorbers, and then i can review my current and previousorders in my shopping cart. and if i so desire, i can also delete items or modify the amount of ordered items in myshopping cart before checking out. that's enough for introductions i'm sure you're eager to get going.so.let's.start. with lesson 1 in this tutorial, i am going to show you how tobuild a master page. a master page isessentially a design template for a website. you basically create a single master page, addsome html and css style to it and then link itto other pages. these pages will have the exact same designas your master page
there are certain advantages to using a masterpage such as maintainability if you would need to update something you need it to update it only on one place there is also less need for code or content in linked pages the only code/content that you need to write inlinked pages is the data in the content area is the content in this white area, known as the 'content' area so there's no need to design each pageindividually. you can just link a page to amasterpage and then type in seperate content for eachpage. in short: masterpages provide the design, linked pages provide the content. before we get designing, let's have a look atthe design that we're going to be building. if you have a keen eye for webdesign, you'llnotice that this design consists of 3 areas
the banner up top. the navigation bar below it. and the content pane below it. you can also add a footer or sidebar. for theselessons, we'll stick to these 3 areas. one important thing to notice is that this grayarea is outside of a 'wrapper'. everything in colour isinside the 'wrapper'. a wrapper is basically acontainer that contains your actual webdesign.everything outside of it is just 'filler'. modern browsers make smart use of wrappersby removing the gray area when a user resizes his or her's browserwindow
the browser automatically focuses on theitems within the wrapper the same is true for mobile devices such assmartphones and/or tablets these automatically crop out everything that isnot within a wrapper i made an abstract drawing of the website inms paint...please don't laugh to sum up: banner : top blue box navigation bar: second blue box content pane: red box remember: the gray areas get cropped outwhenever a browser window cannot display thewhole screen that's the theory. now let's go and put it inaction
let's get started. open up visual studio and select menu -> new -> website make sure that you select visual c# in the installed templates and select an asp.net empty website, and give it a fitting name. i'll call mine 'garage manager'. this will generate an empty website project for us with a web.config file. ignore it for now and right-click your solution and select add new item and then look for the masterpage object
and just leave its name to masterpage.master this will generate an empty html webpage in which we can define the structure of our masterpage first, let's clean up a little bit remove everything after 'doctype html' it is no longer needed. it used to be a standard once but no longer. between the html tags, delete everything but 'html' now we're going to create the four elements; wrapper, navigation bar, banner and content. using html
so that we can place our
'navigation' and 'content' make sure to place the ' so that's why we need to place the content placeholders between the content and the last one to 'management'. we will create these pages over the course of future lessons. today, we'll create the 'about page'. if you click the design button in the bottom left corner of the screen you will see a preview of your masterpage. as you can see it doesn't look like much yet that's because we haven't added any style with css yet, nor have we added any images let's add a bit of colour by adding an image. if you want to use the same images as the ones that i used in this project look for the 'starterpack' download in the description below this video. download and extract the folder in the .zip, then add the folder by dragging and dropping it on your solution explorer. you can use your own images if you want. next, drag and drop an image control between the banner tags expand its properties (f4) and look for the 'imageurl' property open it by clicking the 3 ellipses (...) and select the image 'images/bannercar.jpg' this is the bare-bones structure of your website. now look for the width property and set it to '100%' this'll make sure that the image takes up the full width of the browser window, no matter how large or small the window is. let's give it a bit of style by using css. right-click your solution and select new folder and call it 'styles'. in this folder, we're going to keep our css or 'cascading style sheets' which will be responsible for adding style to our website. style: stuff like element width and height, borders, background colors, padding and margins etc... right-click the styles folder, select 'add new item' and look for the stylesheet object, leave its name to 'stylesheet.css' we can give some style to the make sure to copy everything that i write. don't worry if there is something which you do not understand i will explain the most important lines in a few minutes that should do it. make sure to pause and rewind the video as often as is necessary to make sure that you have the same lines as i do. i'll briefly explain the most important lines. let's start at the top:the lines between body set the font family, size and colour for all text in the website.. as well as set the background for the whole page to 'lavender' (line 6) line 11: width: 1100px;gives the wrapper a width of 1100 pixels. margin: auto (line 12) centres an element in the centre of a parent container (the whole browser window in this case) in human language: margin: auto sets the wrapper in the center of the screen padding-bottom: 20px (line 13).this puts 20 pixels between the last line of content in a container and its border. november which makes sure that the entire beach is love and the court background-color: white (line 14)this provides a white content area on top of a lavender (body) background gradient colour (line 25)let's you display smooth transitions between two or more specified colours. display: block (line 30)makes links appear as squares (like ) instead of lines (line 41) float: left makes the links float sideways of each other, starting from the left a float: right is also available, if you so desire. (line 44) text-transform: uppercase: set all links to uppercase last but not least, i added a small white border to the left of each link. as you have probably noticed, clicked links tend to have a different design than unclicked links we don't want that in this website. these lines make sure that clicked links retain their default design. this line will provide a white background for the link that a user is currently hovering their mouse cursor over min-height:400 px. this makes sure that there is always a white wrapper visible, even if there is no content on the page. one last css trick which i'd like to show you is the use of rounded corners as you can see in my example, the corners of my wrapper appear to be rounded instead of rectangular to get this effect, head back to your .css file and add the following lines to your wrapper class. these 3 lines basically each do the same thing: they round off the corners of a container. (html 5) the more pixels you add to these css elements, the more pronounced the curving will be. the reason why we write down the same thing 3 times is becouse some browsers...looking at you internet explorer... are not familiar with these lines yet. in order to get the highest probability on success, we add three lines instead of one. area of entity that the beach to test his years as the nets at the turn of the physically sure you that if you were to open up to the currency is to link a css file to a master page open up your master page and add a tag between the it will replace the contentplaceholders with the data present in the linked webpage. add a new folder to your solution and call it 'pages' and within that folder, create a new web form call it about.aspx and make sure the 'select masterpage' checkbox is checked. in the masterpage, click the 'about' link and in its properties set the navigate url to your newly created 'about' page you'll notice that this page has the same design as the masterpage but you can't edit anything outside of the contentplaceholders. to sum up: masterpages provide the design, linked pages provide the content. try typing in some random content. i'll type in one of my favorite quotes. to test it out: right-click your about page and select 'set as start page'. this will make the about page the home page when we run this project. and as you can see, everything is working we have built a basic masterpage with a basic design by now, you should have learned how to build your own masterpages and link them to webpages. so i guess that concludes our lesson for today.as always, thank you for watching.if you have any questions feel free to ask me them in the comment section or discuss them on the forums. a link to the forums can be found in the description below this video. so once again, thank you for watching and i hope to see you again in our next lesson in which i will show you how to build a relational sql database. ), set its id to 'nav' add 4 list elements (
tags place an asp:hyperlink control betwean each
Tidak ada komentar:
Posting Komentar