Sorry, first timer, yup im that guy. but anyway I am in highschool and for my IST (Information Software and Technology) assignment I have to make a website, I based it off my school website, the apple website and some subreddits.
I would appreciate any any feedback to make it better and I would Extra appreciate if you could tell me how to make the design using code, the part im having most trouble with is making the sidebar and menu bar
AND it needs to be in HTML and I'm using Dreamweaver if that helps
Here is the photo
GUI Design
You will need a basic understanding of HTML and CSS. You can use JS if you want. I would recommend using Bootstrap library to help with the design. Dreamweaver won't do you any good. Get a text editor like sublime and learn html and css. Setup your project structure. Load bootstrap into your project. Use the bootstrap grid system for positioning elements and the navbar. Nobody on this site will write the code for you. We will review it and make suggestions, but ultimately the work is on you. Happy Coding!
If you're wanting to use dreamweaver, this is the approach to take:
Open up photoshop, and design your site exactly like your drawing. Export your images (logo, slideshow images, etc) and save them to a folder titled "img".
Open dreamweaver and create a new html site. From there, you can use the WYSIWYG to move around your images and text, and that will give you the html/css you need.
That said, if the course is based entirely on knowing HTML/CSS from scratch...this would be cheating. But if it's just a matter of "make it work", then this should work for you. Good luck!
Related
I'm currently developing a website using Joomla. I have problem to make my website responsive. My current solution is adding CSS codes into the HTML, but it does not work. Can someone give me a solution on how make my website responsive without using extension or changing the template. Thank You.
If the template you're using isn't already responsive you're really making things hard for yourself by wanting to stick with it.
The way css is loaded varies according to template, so you need to check yours to see what mechanism(s) it gives you for including your own css. Again, if there isn't one, you're probably best to get a new one, it will make life so much easier.
If they've implemented a mechanism for you to use, that will probably define the file you can use.
There may be an option in the template admin panel to enter css.
Without knowing which template you're using and how it does that, it's pretty hard to give a very useful answer.
Recently I have considered using Photoshop to create website templates, and then convert them into HTML and CSS.
My query is, when working with a PSD you want to convert, what is the best course of action?
Should I craft the main structure first and then work on fine tuning or start at the top and vigorously make my way to the bottom?
use dreamweaver software than make html webpage with css style in one folder than start to top header section than left section middle section than right section lastly footer create with css and attach with html page ona see offline output
It depends on what comes handy for you. For me: first if I have a dashboard which has all the colors and buttons, containers, etc (components) for the websites, than I made the css classes for them. My best friend in this is the Bootstrap , so I don't have to worrie about the responsivity. After that I look up, the main structure of the site design. From the biggest to the smallest. Sometimes I draw them on a paper and made some scetches. So when I'm about to code, I will know exactly what I have to do. It is my workflow, but what and how you wanna do it, is up to you.
There is no best approach to this.
I generally make all the classes in a CSS file for all elements on the page as shown in the PSD template.
Then use that file in HTML, which can be fine tuned using more CSS, JS
enter image description here
I want to design a web page which is in html and css
Depending on your problem, I have two suggestions for you:
If you have no clue on how to get started, I recommend this tutsplus full course in HTML and CSS. It will teach you how to get this project done.
If you already know the basics of web programming, try being more specific with your question and not throwing in this site your homework, because nobody will make it for you.
I googled a lot for design something as the picture in HTML, but couldn't find anything hint. I wonder is it possible to design a web application in what picture show?
It can be easily implemented just using HTML and CSS but if you are pretty much comfortable with these two languages then I suggest you to learn Bootstrap.Using Bootstrap you can make even better than this.It has predefined classes for buttons,icons,header.tables,and lot more.Trust me,You'll love it.Hope this helps!!!!
That doesn't look very advanced to me.
The laptop is an image
Its container uses some shadows and gradients and
The icons are also images.
Regarding the literal question: Since it's already made, it's possible.
All you need is: HTML, CSS, JavaScript and the desire to code.
I have a psd files of my website design, So can i convert it into html template.
Template should contain html,css code.
Basically i am beginner in photoshop so i don't know, it will possible or not.
Please help.
Well the good part is that you have the static design, what means that there is no interaction with a user, of your website ready.
I would suggest you to start with one or another interactive prototyping tool like Marvel. Then you can prototype the functionalities of the website and start working on code writing part. This step will also help you and people, who are going to help you, to get the idea what you want to achieve as a final result.
There are also Adobe solutions like Dreamweaver what gives you an option to migrate the Photoshop layers to webpage. But this solution is not free.
After you finish working with prototyping you can take a really good free course on Udacity about developing solutions with HTML5 and CSS3. Codecademy also has good set of courses on this topic.
Hope this helps to start your journey in learning PSD to HTML techniques and web development in general.