个人网页设计教程_怎样制作个人网页有教程简单点

1、需要一份html教程的网页制作，主题是我的个人网页，

这是我在大学学的知识
给你借鉴一下，希望对你有帮助
网页设计教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver设计界面中，enter（回车）即为另起一段。
2、换行 <br/>
在dreamweaver设计界面中，shift+enter即为另起一段。
3、标题1~6 <h1>……</h1>
标题1最大，依次变小。
4、空格:
Dreamweaver 只允许一次空格，如果需要使用连续空格，则需要设置，或使用；
或使用快捷键：ctrl+shift+space（空格键）
5、水平线 <hr>
size:水平线的粗细
width:长度
align:对齐方式
<htlm>文字操作（二）
一、几个文字特殊效果
1、加粗<b></b> <strong></strong>
2、倾斜<i></i> <em></em>
3、上标<sup></sup>（适合用代码来实现，设计中无法完成）
4、下标<sub></sub>（适合用代码来实现，设计中无法完成）
随着css的逐渐普及，文字的效果都更多的通过css来实现，以上的几个标签作为了解即可。
二、文字列表
1、无序列表
无序列表有两个标签<ul>和<li>
<ul>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ul>
2、有序列表
有序列表有两个标签<ol>和<li>
<ol>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ol>
图片
一、如何获取图像
最好的途径是通过互联网
二、使用设计界面插入图像
1、菜单（一个图片属性：替换文字）
2、工具栏
3、拖曳
三、图像格式扩展阅读：
http://blog.sina.com.cn/s/blog_45ac0d0a010005d8.html
JPEG图像、GIF图像、PNG图像

四、代码
<img src=" " width=" " height=" " alt=" "/>

一、超级链接的基本知识
1、含义：实现网页之间的跳转和联系
2、分类：
绝对链接 http://www.baidu.com
相对链接在同一站点不同位置之间的链接
二、三种常见的超级链接
1、文字链接<a href="http://www.baidu.com">百度</a>
2、图像链接
3、图像热点链接
===============
还有不是太常用的链接
1、空连接 <a href="#">空连接</a>
2、锚链接:在同一页面的不同位置跳转
三、链接的属性
链接目标 <a href="http://www.baidu.com" target="_blank">百度</a>

表单设计
一、设计界面
1、单元格间距
2、单元格边距
二、代码
1、从属关系：表格由行组成，行由单元格组成。
表格：<table>……</table>
行：<tr>……</tr>
单元格：<td>……</td>
2、<table>标签的属性
bgcolor:背景色
cellspacing:表格的单元格间距（间距）
cellpadding:表格的单元格边距（填充）
文字占据一行<div></div>
文字不占据一行<span></span>
、html引入css的几种方法
1、链接式
将css代码写在一个独立的文件中，文件的扩展名为.css。然后在html网页中使用<link/>标签将外部css文件放在<head></head>之间。举例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tp.css" rel="stylesheet" type="text/css">
</head>
2、嵌入式
将Css代码写在<head></head>之间，并且用<style></style>包含起来，如果考虑到兼容性，可以再使用 将css代码包含其中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
1．标签选择器：
就是网页元素本身，所有的XHTML框架中的标签都可以作为CSS样式的选择器，如定义段落样式，我们可以选择P标签的名称，即把P作为选择器。P{/*定义段落属性*/}。如果定义了标签样式，则整个网页中使用了该标签都会应用这个样式。一般应用在统一文档的某个元素的显示样式中。
2．ID选择器：
它是唯一的，网页中不同的元素它的ID是不一样的。而且一个元素它只能应用一个ID。因为如果我们使用Javascript来控制网页元素的时候它是通过ID来实现的，在这种情况下就无法正常工作了。它在定义的时候用#开始，它在应用的时候用id=””。它的名称由设计者来确定。
3．类选择：
它的名称也是由设计者来确定的，它在定义的时候用点号开始，应用的时候用class=“”；它与ID选择器所不同的是它具有一对多的特性而ID是一对一的特性。也就是说一个类选择器它可以应用到多个网页元素中而且一个元素可以应用多个类，一个元素也可以应用两个类样式，中间用空格分开，但不能是三个或者更多。在同等条件下，ID具有比class更高的优先权。
1、复杂类选择器
p.one{color:red}
实例：
<style>
.one{color:red;}
p.two{color:blue;}
</style>
.one可以用于各种标签；而。two只能用于p标签。
2、后代选择器
div p{color:#00FF00}
例子：
<div>
<h1>这是一个标题。</h1>
<p>我是一个兵。</p>
</div>
3、组合选择器（集体声明）
p，h1，.one{color:red}
4、通用选择器
对html文档的所有元素进行控制。
*{color：red；}
5、伪类选择器
a:link;hover;visited;active
或者：a.one:link;a#two:link
当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。
一、属性
1.大小 font-size
大小就是字号，可以直接填入数字，然后选择单位。
2.样式
font-style
设置文字的外观，包括正常、斜体、偏斜体。
3.行高 line-height
这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。
4.修饰 font-decoration
文本的特殊样式：上下划线、删除线、闪烁（IE不支持此效果）
5.粗细 font-weight
设置文字的加粗还是变细的效果。
6.颜色 color
设置文字的色彩。
颜色的表示方法常见的有RGB模式、十六进制模式和名称模式。
7.字体 font-family
设置文字的字体，注意多个字体的选择。
8.文本对齐 text-align
设置文本的水平对齐方式。这里也不仅仅局限于文字，泛指所包含的内容。
9.文字缩进 text-indent
这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。
二、属性值：css中的单位
1、大小单位：px和em
2、颜色单位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景图片：background-image:url(^);（5-3）
3、背景图片的重复方式：background-repeat：（5-5）
4、背景图片的位置：background-position：top right；（30% 70%;水平位置垂直位置）(300px 30px;)（5-8）
5、背景图片的固定与否：background-attachment：scroll；（fixed；）背景是否与网页内容一起滚动。（5-10）
fixed：背景不动，内容动；scroll：背景和内容一起滚动
6、背景图片的综合样式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表样式：list-style：

2、求个人网页现成模板，制作教程

不建议使用FrontPage，这个软件是很多年以前的，微软都已经停止开发和支持这个软件了

建议使用Dreamweaver，这个是现在最流行的网页设计软件，几乎都用的这个软件来做网页的

关于您要的个人网页模板，这个网上和多，您可以到站长站去下载，或者直接百度网页搜索html模板。

下载模板后倒入Dreamweaver，点击窗口拆分，就可以所见所得修改学习了

例如这样的模板，您可以直接在dw里面进行编辑哦

Dreamweaver的相关图文或视频教程也很多的，您搜索关键词就可以找到很多

梦客吧织梦模板为您解答

望采纳谢谢

3、怎么制作网页教程

先从最简单的 HTML 网页入手；选择 Dreamweaver 4.0MX Fireworks 4.0 MX Flash 5.0 MX 俗称三剑客网页工具。图象还须 Photoshop 等作为你的网页制作工具；制作前，粗略地阅读 Dreamweaver Fireworks 及 Photoshop 教程，了解这几个软件到底能做些什么；制作你的第一个实验性的网站。资料网上也有的是，如果遇到问题难以解决，请将问题提出，让更多高手为你解答。

初级阶段：应初步掌握三剑客网页工具的基本操作：策划和制作你的第一个网站；不断为你的网站增加内容与功能（例如尝试将一些 Java Script 小程序添加到你的网页中）。如果对网页代码建站这些知识不太懂，系统的了解跟学习的话，来这个群一起来学习。这个的第一组数字为431，第二组数字为011，第三组数字为879。就是这三组结合起来就可以找到我们了。来到这里每天都有网页建站方面的课程。互联网社会，懂技术才是王道，走到哪里都不用怕。

进阶阶段：具有一定的网页制作经验，制作一般的网页已经不在话下：根据个人喜好及实际需要，网页制作的方向，你可以学习一些美术方面的知识；锻炼自己在网站策划及信息采辑的技能；尝试制作其他不同类型的网站，从模仿别人开始，逐渐形成自己的设计风格；熟练操作三剑客网页工具，并至少能读懂 HTML 及 JavaScript的简单语言。好了！这样，你的网页制作水平就离高手就不远了。祝你成功！

然后下面跟你说一下建站的知识。
一、首先，你要为你的网站想一个网址，这个网址必须是未被注册的。这个网址就是你的网站的入口，最好便于记忆，越短越好。或者以与网站有对应意义的拼音全称或者简写。网站的域名后缀也是我们自己可选的（只要没有被注册），常见的域名后缀有.com 、.cn、.com.cn 、.org等。一般建议选择实力较强的域名提供商。这些知名服务商虽然收费稍微贵一点，但是很稳定。

二、空间服务器。空间是用来放网站程序文件的，就跟电脑上的磁盘没什么两样，只不过是放在空间商那里，24小时联网。你自己电脑都可以做服务器，这个没有什么神奇的。买空间要根据建站需要，包括使用什么语言，是否需要数据库等。建议购买前咨询空间商客服。

三、网站程序。网站程序是实现网站所有功能的编程语言的集合。目前比较流行的php+mysql ，也有用java、.net 开发的。
大型的商城或门户需要团队开发。个人建论坛可以用腾讯的DISCUZ！论坛程序，建博客可以用wordpress或者Z-blog程序。这些开源的建站程序让做网站就像装程序一样简单。

四、把程序上传到空间服务器。程序编写完成经过调试后，用FTP工具上传到空间。FTP工具有flashfpt ,8ufpt 。上传之前你必须已经买好空间了（知道FTP用户、密码信息）

五、程序上传完成后。把域名解析，空间域名绑定，就可以通过网站访问了。

网页建站其实是不难的，不过很多新手一开始就有很多具体明确的，有难度的设想，所以才显得难了。
你首先要明白自己能做什么，做不了什么。建议从纯静态的网页制作学起，这样压力不会太大。当你对网页的HTML代码都差不多了解的时候，就会感觉轻松很多。不需要程序，建站都有很多开源的程序。不管学什么都需要用心，都需要执行力。如果你都有，学起来很快。

4、新手建网站教程网站建立怎样自己制作网页简单的

新手建网站，可以是静态网站，也可以是wordpress之类的动态网站。

一般搭建wordpress网站比较多，搭建过程也不难。

先买好域名和云服务器，然后把域名解析到云服务器。

再通过手动配置服务器环境安装wordpress，或者通过一键安装宝塔面板，再在宝塔后台一键部署wordpress就可以了。

参见新手教程：云服务器建立个人网站（宝塔面板+wordpress）

5、怎样制作个人网页，有教程，简单点。

具体步骤如下：

1、打开服务器中网站文件的目录，假设为D:abcd。

2、新建一个txt文件，文件名改为index.htm。index.htm文件是网站首页的链接，进入你的网站后第一个显示的就是这个文件上的内容。然后右键index.htm—>打开方式—>记事本。

3、现在可以添加html代码，使得网页显示文本。<p></p>是html中段落的标签，<p>是开始符，</p>是结束符，两个符号之间的字会显示在网页上。在index.htm中添加一行：<p>声明：这是一个个人网站，网页里的内容均为站主原创，请勿用于违法行为。</p>；下图为效果截图。

4、还可以为网页添加图片，图片的标签是<img>。假设图片文件的路径为D:abcdpic123.jpg，则在index.htm中添加一行：<img src=pic/123.jpg>。下图为效果截图。

5、添加链接的标签是<a></a>。在index.htm中添加一行：<a href="https://www.baidu.com">百度，前面是链接，这里是显示的字。</a>下图为效果截图，点开蓝字，则会跳转到"百度一下"。

6、完成上述步骤后，即可制作个人网页。

6、求几个适合刚从事工作的新手看的网页设计教程网站或者交流网站

其实网页设计最重要的是练习设计感，而练习之前首要的任务就是多看一些优秀的作品来引导你的设计思路，站酷中其实也并非全部都是好作品，这只是一个设计师的交流网站，好的坏的作品都会有人上传，所以你就尽量多看一些好的作品呗，开始就先以模仿为主，而模仿的过程中重点是多做，只有你多多制作才能达到练习的目的；
而学习网页设计代码方面（div+css），从我个人角度来说，新手从基础开始学习并没有什么不好，反而基础会更扎实，但是学习周期会比较长，我个人比较推荐新手了解了一些基本知识之后就直接去看优秀的网页代码，而不是自己学一点做一点，我以前自己学习的时候就是直接找一些好的网页模板进行修改成我设计的界面，前提是我设计的界面布局要跟模板差不多，这样我就通过各个部分的修改来了解之前各个布局及样式的意思和作用，有一些不懂的地方就去百度找答案，当把一个模板完全改成自己的界面的时候，网页设计估计也能初步掌握了，然后自己再半参考性的自己独立写代码，这样学习的速度是比较快的；
很多人都说学习东西兴趣比较重要，但是要有兴趣的前提是你必须要搞明白那是什么东西，很多人搞不懂才会觉得没兴趣，脑子里没有一个认知思维当然学不会，小时候我们上学也就是这样一个道理；
我给你推荐一个自学网站和设计网站，希望能帮到你
http://www.divcss5.com/
http://www.uimaker.com/
http://www.lanrentuku.com/

最后给你一个建议，你学习设计的风格建议你往欧美风格走，像网上的一些韩国模板虽然可以参考，但是我个人觉得大部分的韩国模板都不太实用，姑且看看就好，如果你觉得有地方可以借鉴也行，当然，我这里只是建议，别被我的话束缚了思维

导航:首页 > 万维百科 > 个人网页设计教程

个人网页设计教程

与个人网页设计教程相关的知识