Table of Contents
回复内容:
Home Web Front-end H5 Tutorial 如何系统的学习做网站?

如何系统的学习做网站?

Jun 07, 2016 am 08:42 AM
cms css div html web

作为计算机专业学生,做网站方面只是略懂,在校学生会时改过一些校网站的代码,但从未从无到有的系统的做出一个网站,略懂HTML略懂css div略懂php 略懂cms,但还是想要系统的学一下web开发以达到以下水平:1.自己可以从无到有搭建出一个简单静态网站 2.可以通过给小公司做网站赚一些零花钱 3.做出自己的可以达到创业目的的网站 4.让同学觉得我很NB

回复内容:

在我看来LZ需要的不是“系统的知识”,而是“面对与解决问题的能力”。顺便一提,前端开发不见得有完整的知识体系,大家都在野蛮生长。

前端也不会像JAVA什么的会有如此多的“系统”的知识,在我看来那不过是由大公司和培训机构定义的标准,目的是为了更多的人流入他们的体系,而不是为了技术界的繁荣和知识的整理与开放。

## 后端部分:

PHP+MYSQL要学好。不得不说,PHP仍然是最好入门的WEB开发语言,没有之一。语言本身简单直接,直接跟页面文件对应,文档和社区也完善。

如果打算自己整服务器的话,APACHE和LINUX的一些基础也是需要学习的,这个对于计算机专业学生来说也是必备技能之一。

## 前端部分:

首先,看《精通CSS》,jQuery多研究官方的非官方的教程和书籍,JS也找些书读读。

然后,就可以开始边实战边找资料填补了。刚开始会很痛苦,没关系,慢慢折腾。

## 实战

几乎我所知道的所有的做网站开发的童鞋最开始都是从个人页面开始做,偏前端的比较多是静态个人主页,而偏SERVER端的比较多是折腾博客、Wordpress开发之类。

这几乎算是最好的方向了。从经营自己的品牌开始,然后再慢慢做些自己想到的有意思的点子。

加油。 1.如果你只是想做纯静态的网站,HTML+CSS+Javascript基本就可以应付了,加一点photoshop的应用会让网站看上去比较漂亮。
2.但现在纯静态网站已经很少了,多少都会和数据库打交道,因此你得熟悉最基本的网站三层架构和SQL语句,另外JAVA WEB方向的SSH和.NET方向的MVC也是推荐掌握的。这些知识可以让你开发出一个可行的网站。
3.如果需要对网站做进一步的优化,例如面向大客户群,大数据等,还有许多更加深入的技术,这些可以作为补充,如果你掌握了上面的技术并想进一步深入的话可以去研究。
以上三点做到第一点你同学会觉得你NB,做到第二点你的客户会觉得你NB,做到第三点真正懂行的人会觉得你NB。 直接上手一个项目,最好是商业项目。有问题就google,现学现用。
有deadline逼着你,你会学的快些。
在开发过程中,会遇到各种困难,自己试着解决,向大牛请教。
这个阶段是学习的密集时期,很痛苦,但也因此快速学到了技能,几个月后,你会明白自己可以回答这些问题。

——————————————————————————————

最后,我做开发一年了,从做项目得到一点感触,与君共勉:

学习编程技术往往不是我们一开始想得很明白才动手的!很多时候,恰恰是因为我们的犹豫和思考使我们徘徊不前,那样只会错失最佳学习时间。 就是让你害怕的一个人(比如你的领导) 逼着你制作一个网站(必须XX时间交) 然后你就会了

起码 我是这样会的 从你的经历看,你目前是是属于能读懂代码,真正要独立开发一个web软件,你还需要沉下心来,首先从最基础的html和css标签学起,因为很多时候我们会改代码是因为别人给你一些标签,你只需要对应着标签去找一个替换,但是自己从空白页开始布局整个页面就大脑一片空白,因为你学的标签都很零散,不足以连贯起来,html和css标签很多,互相都有关联的,需要组合搭配使用,所以建议你从头开始对每一个标签的用法再过一遍,然后模仿别的网站先用div css布局一个网页,这个过程你会用到很多以前没用过的标签,也会对已知的知识有一个新的了解。后台开发语言这一块,你需要着重一门语言来系统学习,如果是建站,有CMS就可以满足了,它只需要你懂一些前端布局和基础的开发语言,有的甚至不需要会开发语言。按照你想做的网站选择合适量级的CMS,例如大型网站选用帝国、织梦、phpcms等,简单的可以用通王、WordPress等,选中一个着重学习。个人的一点经验,一样对你有帮助。 我感觉你的标题和你的目标实在是不搭。

我的回答从你的问题,和你的目标“1.自己可以从无到有搭建出一个简单静态网站”出发。其他目标忽略掉了。

首先,你需要明白一个页面从浏览器输入地址后到展现发生了什么事情。直接去搜索以下,有很多相关的网页,我记得我看过一篇特别好的,想帮你找出来结果找不到了……

在你了解发生了什么事情的过程中,你会了解到如下一些相关知识:
1、DNS协议
2、HTTP协议
3、服务器如何处理请求
4、浏览器如何渲染

鉴于你的234目标,以上需要有一些基本了解即可,也不需要太深入。

然后,你要明白一个网页主要包含了三个基本内容:
1、文档结构
2、视觉显示
3、行为交互

分别对应如下语言:
1、文档结构:HTML
2、视觉展示:CSS
3、行为交互:javascript

再然后,依次去找标准教程或者好一点的教程学习就可以了。如果英文足够好的话,去 World Wide Web Consortium (W3C) 网站上直接看教程。要看中文的话到 w3school 在线教程 去看相关的内容。

学习是一个持续且迭代的过程,但任何冠以“系统学习”这个大帽子的学习方式我认为主要是要掌握根本的理念、原理。其他细枝末节的东西在实践中都会因为一次一次的碰到问题google百度而得到提高。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to insert pictures on bootstrap How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to remove the default style in Bootstrap list? How to remove the default style in Bootstrap list? Apr 07, 2025 am 10:18 AM

The default style of the Bootstrap list can be removed with CSS override. Use more specific CSS rules and selectors, follow the "proximity principle" and "weight principle", overriding the Bootstrap default style. To avoid style conflicts, more targeted selectors can be used. If the override is unsuccessful, adjust the weight of the custom CSS. At the same time, pay attention to performance optimization, avoid overuse of !important, and write concise and efficient CSS code.

How to use bootstrap button How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to resize bootstrap How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to build a bootstrap framework How to build a bootstrap framework Apr 07, 2025 pm 12:57 PM

To create a Bootstrap framework, follow these steps: Install Bootstrap via CDN or install a local copy. Create an HTML document and link Bootstrap CSS to the <head> section. Add Bootstrap JavaScript file to the <body> section. Use the Bootstrap component and customize the stylesheet to suit your needs.

How to layout bootstrap How to layout bootstrap Apr 07, 2025 pm 02:24 PM

To use Bootstrap to layout a website, you need to use a grid system to divide the page into containers, rows, and columns. First add the container, then add the rows in it, add the columns within the row, and finally add the content in the column. Bootstrap's responsive layout function automatically adjusts the layout according to breakpoints (xs, sm, md, lg, xl). Different layouts under different screen sizes can be achieved by using responsive classes.

How to verify bootstrap date How to verify bootstrap date Apr 07, 2025 pm 03:06 PM

To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.

How to set the bootstrap navigation bar How to set the bootstrap navigation bar Apr 07, 2025 pm 01:51 PM

Bootstrap provides a simple guide to setting up navigation bars: Introducing the Bootstrap library to create navigation bar containers Add brand identity Create navigation links Add other elements (optional) Adjust styles (optional)

See all articles