网站设计教程自学制作网站的方法和步骤?

网站设计教程时间:2021-01-20 阅读:()

网页怎么设计，纯新手！高手指点下！

制作网页全部步骤有哪些？

主要内容介绍：一、构成网页的基本要素二、制作及美化的基本工具三、网页制作的基本步骤四、界面设计及交互研究探讨五、实例制作演示一.构成网页的基本要素 1.文字（标题、字号、字型...） 2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...） 3.交互功能（菜单按钮、链接、表单、数据交换...） ... 超文本标识语言（HTML） HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。

在HTML中，所有的标记符都用尖括号括起来。

例如，<HTML>表示HTML标记符。

绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。

如：<HTML>…<／HTML> . HTML文档的基本结构一个典型的HTML文本的基本结构形式如下： <HTML> <HEAD> <TITLE>网站制作流程及界面交互设计研究探讨<／TITLE> <／HEAD> <BODY>文本内容：<／BODY> <／HTML> 二.制作及美化的基本工具 1．超文本标识语言（HTML）编辑工具：editplus、dreamweaver、记事本、FrontPage、 2．页面设计及美化工具使用工具：所有可制作平面的软件推荐使用Photoshop、FireWorks、Flash 三、网页制作的基本步骤 1、整体规划需要完成的规划：网站主题、风格、页面元素、逻辑结构等 2、资料收集收集内容： a、跟主题相关的文字图片资料 b、一些优秀的页面风格 c、下载一些你喜欢的交互页面 d、开放的源代码 3、伪界面设计根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素 4、代码转换及交互添加把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。

5、测试网页兼容性你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。

6、发布站点测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。

四.界面设计及交互研究探讨 a、导航栏设计导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。

b、网页布局网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。

PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果网页布局--主要构成原则醒目性：指用户把注意力集中到你诱导起浏览的部分和内容可读性：指网站的内容让人容易读懂明快性：指准确、快速转达网站的构成内容造型性：维持整体外型上的稳定感和均衡性创造性：有鲜明个性，创意是必不可少的布局的构成原则上是:统一、协调、流动、强调、均衡 c、交互研究我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。

五、实例制作演示(略） 1、页面制作整体规划对象：一个打印商业宣传主页格调:活泼，色彩，简单，大方 2、资料收集 a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息 b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点 c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片 d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码 3、伪界面设计 a、在PS设计伪界面 b、切片工具对整体进行合理的分割注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。

c、导成WEB格式-直接导成HTML格式—步骤: 1、.点击文件存储为WEB文件格式 2、在界面里面调整理想参数 3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工 d、在Dreamweave里面进行代码加工具体步骤： 1、先修改标题 2、修改页面属性：背景颜色、背景图片..... 3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型） 4、把要添加文字的图片转化为背景形式　 a、找到对应图片路径　 b、拷贝路径后删除图片　 c、转化为标准形式　 d、把路径粘贴到背景属性上　 e、回到布局界面 5、添加具体文字连接设置等操作 6、CSS设置 7、修整代码，发布预览按F12即可预览效果 4、测试网页兼容性按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS\VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠 5、发布站点购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP

详细教材：

Dreamweaver入门基础与HTML视频教程

/eschool/zhuanti//

ASP互动视频教程

/eschool/zhuanti/asp/

asp快速入门

/eschool/zhuanti/jyasp/

/eschool

这里的教程整理的挺好的

ASP互动视频教程

/Soft/Special/sqjc/Index.htm

/2008/0331/video_42.html

HTML视频教程

/tests/shipinjiaocheng/236/456236.shtml

/Article/pc/web/200703/5492.html

怎么样才能制作一个网站？

关于网页制作的教程和实例很多，不知道这位兄弟需要学习哪方面的，想从哪方面发展。

从的来说，如今网页设计有“软件设计”（多为静态）和“网络编程”（动态）两大方向。

软件方面相对简单一点，有“所见即所得”的特点，你不必懂任何语言或着代码，只要利用软件自身所带的强大功能，即可制作出内容丰富的网页，甚至是网站来。

网页设计，软件方面常用的软件有FrontPage、三剑客（Dreamweaver、Fireworks、flash）等。

编程方面常用ASP。

另外，做为超文本标志（标记）语言的HTML，对于初学者也很重要。

HTML并不是严格意义上的程序语言，基本上只要懂HTML各标记的含义，就懂了HTML，但是不管是对于传统的静态网页，还是对于ASP类的动态网页，HTML都至关重要。

另外，现在多数网页设计爱好者，在最初接触或学习编程的时候，都常用别人的源码来修改、学习。

这也是一种很好的学习方法。

在这里想强调一点是，我目前也只是一个爱好者，之所以还罗嗦了这么多，一是是不知道你现在处于一个什么样的阶段，一是想让你少走些弯路。

最后，介绍你几个经典的站点。

站长学习站： 1、中国站长站站长学院：网页特效站： 1、网页特效集锦： 2、javascript网页特效： /javascript 源码站： 1、源码之家： 2、ASP300： 3、搜源码： 4、源码网： 5、中国源码：综合站： 1、中国站长站： 2、中国建站专家： 3、网页制作大宝库：以上是我简单整理后的网页设计相关站点，需要对你有所帮助，以后我有时间会继续整理的。

至于你需要的网页制作的教程，网上很多，现提供网页制作大宝库的给你。

/jiaocheng

自学制作网站的方法和步骤?

你学习网站制作走弯路了。

首先dreamweaver或fontpage都是很好的工具，都是所见既所得的，你只要学习好这个工具的所有内容，也就是每个按纽的作用等，就基本可以开始制作HTML方式的网站了。

网站制作分2部分，第一部分是页面的设计、排版；第2部分是程序的设计例如ASP，这个是对动态网站的，HTML方式的站点不需要这个部分。

我从事网站制作多年，可以告诉你的是，你要想学好网站制作，必须的条件是： 1 学会和熟悉使用dreamweaver或fontpage软件的所有功能 2 学会和熟悉使用photoshop 3 熟悉HTML的所有标签 4 收集一定的制作素材的，包括图标、BANNER、控制文字的CSS脚本、特效JS脚本可选条件是：学会和熟悉JS、VS、ASP、PHP编程，但这个不是1~2天能学会的，需要刻苦和大量的时间来学习。

如果对C不熟悉建议学习VS和ASP，命令比较能理解。

展开全文