html个人主页网页设计作业分析（网页设计与制作个人主页）

qiaoqingyi 2023-03-22 705

默认

本篇文章给大家谈谈html个人主页网页设计作业分析，以及网页设计与制作个人主页对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、需要一份html教程的网页制作，主题是我的个人网页，
2、怎么做一个网页(网页设计作业)
3、谁能帮我用HTML语言做一个简单的网页?代码就行
4、怎样用HTML制作个人介绍网页？
5、怎么用html5制作个人主页

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

这是我在大学学的知识

给你借鉴一下，希望对你有帮助

网页设计教程

html文字操作（一）

1、段落 p……/p

在dreamweaver设计界面中，enter（回车）即为另起一段。

2、换行 br/

在dreamweaver设计界面中，shift+enter即为另起一段。

3、标题1~6 h1……/h1

标题1最大，依次变小。

4、空格:

Dreamweaver 只允许一次空格，如果需要使用连续空格，则需要设置，或使用nbsp；

或使用快捷键：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

liCSS教程/li

liDOM教程/li

liXML教程/li

liFlash教程/li

/ul

2、有序列表

有序列表有两个标签ol和li

liCSS教程/li

liDOM教程/li

liXML教程/li

liFlash教程/li

/ol

图片

一、如何获取图像

最好的途径是通过互联网

二、使用设计界面插入图像

1、菜单（一个图片属性：替换文字）

2、工具栏

3、拖曳

三、图像格式扩展阅读：

JPEG图像、GIF图像、PNG图像

四、代码

img src=" " width=" " height=" " alt=" "/

一、超级链接的基本知识

1、含义：实现网页之间的跳转和联系

2、分类：

绝对链接

相对链接在同一站点不同位置之间的链接

二、三种常见的超级链接

1、文字链接a href=""百度/a

2、图像链接

3、图像热点链接

===============

还有不是太常用的链接

1、空连接 a href="#"空连接/a

2、锚链接:在同一页面的不同位置跳转

三、链接的属性

链接目标 a href="" 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"

!--

p {

font-family: "楷体_GB2312";

font-size: 18px;

}

/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：

怎么做一个网页(网页设计作业)

jsp+美工+编程

当人们访问你的站点时,他们都会立即下意识地判断:这个站点怎么样？值不值的当回事儿？是否值的把他加入到我的bookmark中去，要知道，在网络信息的虚拟世界里，互联网提供了天下大同的机会，同时也让这个虚拟世界充斥着数不清的商业站点、垃圾站点，大多数站点缺乏灵魂、主旨，东一榔头西一棒子，松散、混乱，原因就在于缺乏策划设计。因此要想使你的网站从那些数不清的站点中脱颖而出，就必须对整个站点作好统筹安排，规划，对所有的内容进行细意斟酌，把所有的意念合情合理的组织起来设计一个合理的页面样式。下面我们就具体的来探讨一下网站策划设计.

一、首先确定web站点的营销目标:

1）、市场调查阶段

了解一下目前internet的发展状况以及同类站点的发展、经营状况，吸取他们的长处，找出自己的优势，对市场作个调查，明确自己网站的主题，寻找一个好的出发点。

2）、你设想中的网站规模有多大？

作网站并不是盲目的想做多大就作多大，而要根据自身的现阶段能力，以及企业的规模大小，确定你的网站是小型、中型、大规模的网站，还是从小规模的开始，然后逐步发展。这主要的是关系到网站的后期维护以及网站的发展方向来考虑的。

3）、确定网站的类别，你希望网站有怎样的设计特色

根据主题、形式以及本身企业的特点，网站的设计也有不同的类别，大概可分为：以内容为主，设计为辅，注重速度这种大型的专业网站，它一般体现在专业的 icp，isp供应商制作的网站，在设计这类网站时不要太花哨，应注重信息量；第二种大多数企业为了更好的宣传自己的产品，扩大销路，使自己的产品走向世界，提高自己企业的形象而制作的网站，这种网站制作应结合本身产品特点而制作的特色网站，相对来说比较注重产品的营销；第三种是形象类的网站，一般这种网站相对体现在政府部门，作为对外一个窗口，相对来说这种网站设计比较严肃；第四种是个人主页网站，这种网站相对比较自由，不受什么约束，可以根据每个人自己的特长自由发挥。因此我们在制作主页时先明确自己的定位方向，设计出适合自己的站点。

4）、你的主要目标受众是谁？

根据网站的类别不同，目标受众也不一样，有工商业者、专业人士、学生；女性，男性；儿童，青少年，中年人，老人；还是所有的人，比如教育类的网站相对来说是目标受众是院校的老师和学生。化装类、护肤产品类的网站相对来说是女性等。

5）、确定整个网站的整体风格

其实，这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，都要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。

举个简单例子。如果你在列示一二三四若干条的情况下，在每条前面用黑圆点加强视觉效果，那么其他类似地方，也应该用保持同样的风格。色彩斑斓的站点，尤其要注意风格的统一。颜色可以变，不过字体、主体文本对齐风格、标题、背景效果以及特殊图像效果等等都应保持统一。

很多缺乏编辑、出版背景的网友，很容易忽视这点，特别是网页一多，更容易忘。

6）、你准备投入多少资金、如何经营这个网站？

对所作的网站大概的作个估价，需要多少资金，你准备投入多少资金来运营这个网站，假设网站制作好以后如何经营这个网站，是全部由自己来做，还是委托专业服务来做，自己定期指导，还是设定要求、目标完全由别人代劳。这是不可忽略的问题，如果一个网站前期作的再好，后期没人维护也是空的，就好比一条刚建好的街道，干干净净的，人们也比较喜欢来这里逛街，日久了，人走的人多了，垃圾多了这时没人来管里，这样垃圾越堆越多，走的人肯定也越来越少了。日久了也逐渐被人遗忘了。网站经营也是这个原理。

7）、根据目标框架整理出站点的内容框架以及逻辑结构图

①把目标细化以整理出站点内容框架

基本确定的目标，您就应该把目标细化，并初步整理出为达到这些目的，站点所需要包含的所有内容了。例如，站点应该发布什么信息，站点需要提供什么应用程序，等等。然后，你应该把初步定下的内容纲要写下来，交给上级或业务人员审核批准。这实际上就形成了站点设计的需求报告。在你的内容纲要里，还应该注明这些内容的信息来源，哪个部门应该提供哪方面的信息。把这些罗列下来，会使得上级以及各个相关部门清楚"谁应该为这些内容负责"。

②进一步整理出站点逻辑结构图

定下内容纲要后，你应该能够大致画出站点的结构图了。结构图也有很多种，顺序结构，网状结构，继承结构，WEB结构等，应依据你的内容而定。例如，如果你是在编一个教程，那么可能用表示顺序的流程图就比较合适。多数复杂的网站会综合应用到几种不同的结构图。画出结构图的目的，主要是便于有逻辑地组织站点和链接，同时，将来你会用这个图去分配工作和任务。例如:

你可以告诉某个开发人员，让他完成结构图中某个分支的内容；

你可以把这个图递交给业务人员，告诉他们哪些页面，需要他们进一步提供内容或资料；

你可以把结构图给专业美工看，让美工人员考虑以什么样的形式来表现你要表达的内容等等。

简而言之，这个框架图，将为你下一步进行工作分配，人员安排提供依据。

二、网站制作过程中把握的几点

1）、重点信息放在突出醒目的位置，整个网站空间排序适当

一个网站很重要的就是标题，标题就像路牌一样，人家在你的网站上逛来逛去，全靠它指路了。给人的第一印象是否能够马上注意到标题，标题要意义清晰、描述性强，把最吸引人的地方放在突出显眼的位置，然后再慢慢展开。或者说，把你的独特内容包裹成一个悬念，吸引人家注意。读者看一篇文章，前三段注意力最集中，如果这“寸土寸金”的前三段用不好，人家就要和你拜拜喽！

留出可调整的位置，用于满足临时性或短期营销活动的宣传需要。如，福州电信局12月11日举办的“福建省首届信息网络展示会”展览，需要在网页中放在最突出的位置。这就需要调整原有的结构，既让新的内容有突出的体现，还要不至于淹没其他重点。

在每屏中的文字与图形的布局既要考虑到重点的突出，还要给人以和谐的感觉。不能让图形淹没文字，也不能图形太少而让人觉得单调。视觉的吸引和诱惑力是不能低估的。文字内容和图片搭配要和谐。

2）、网页应该易懂，控制没个模块的信息量。网页要易读、易懂。

网站设计最重要的诀窍，恐怕就是你的网页要易读。花时间和心思来规划文字和背景颜色的搭配方案。勿使背景冲淡了文字的视觉效果。

这就意味着，你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起你的网页来很费劲。一般来说，浅色背景下的深色

这个原则也意味着，你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。

另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。

网页的内容最好能够开门见山，让浏览者在最短的时间内了解你的网页的内容。在内容上着笔尽量要细致，让人家能在最短的时间内，了解你想呈现给人家什么。给人家一幅清晰的画卷，别云山雾罩的。开门见山，直接了当。大家都知道，网友的耐心尤其少。你能提供的信息或许对他们有裨益，但如果要人家没完没了地翻下去才能找到，恐怕极少有人有这份耐心。

立体规划内容。将所有的结构按照一定的框架结构分别纳入不同的页面。

立体规划内容，将所有部分按一定的构架各就其位、分别纳入不同层次的页面。注意先要把最重要的内容放到首页上，其他的依次就绪。

然后，你就可以勾划页面蓝图、编HTML了。就文本内容的表现而言，记住尽量别让其一行文字的宽度，横跨整个屏幕。段落一多，这样子看起来很费劲，而且别人的浏览器还可能和你的差别很大。最好别超过屏幕宽度的一半。

文字的宽度，最好别超过屏幕宽度的一半。

3）、网页页面越小越好，最好别超过50k，尽量精简

上网的人追求的是速度。所以页面的大小是非常重要的，如果你的网站主要是为了提供消息内容，那么在最短的时间内呈现出来你的内容，别人会更加舒心的查看你的网站。

别使速度影响了你的效率，要知道，很多人是没有耐心的。网页的速度最好控制在十秒以内。或者更快。

有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。当然，也有例外，比如内容实在太精彩，人家不去不行。再像视觉艺术类站点，也不能以“快”为唯一设计标准。不过，即使这类站点，也该在加个导引页，给读者一个提示，别不理睬人家的心情。但是大多数网站还是以内容为主，大部分人感兴趣的还是信息量，追求的是速度。

要限定页面的大小，就得从各个角度考虑节省。最大的一头是图像，有的好东西，只得割爱了。想想看，在创意表达、品牌形象、挣钱几个目标之中，哪个最重要？

4）、网站导航要清晰，容易查找，

所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。所有的导航条都要非常清晰明确的让浏览者看出来。

链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗体？加字号？两侧加竖标？或者几者兼用。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向。

链接文字要重点突出；

清晰导航还要求：读者进入目的页的点击次数，不能超过三次。如果三次以上还找不到，人家可就没有耐心陪你玩了！

三、网站推广

网上世界黑漆无边，你怎么让人家找到你？很多有些经验的网友知道这个问题的份量，不过对于一波一波兴奋上网的新手，他们脑中的概念大多是：“有了网站，自然有人来”。不怪他们，商家们的欺骗宣传太成功了，他们哪里知道，网上有数不清的网站像“无人区”一样死寂。因此我们在作好网站以后，后期的推广宣传工作也不可忽略，主要的可以从以下几个方面来宣传。

1）、传统媒体：广播、报纸、电视都是很好的方法。现在我们已经看到很多在传统媒体中的商家广告，就是以网址为广告内容的主体。同时，商家所有的印刷品，包括名片，都是宣传网址的良好介质。

2）、因特网本身的方法：诸如导航台、新闻组、电子邮件群组、图标广告、分类广告等等，都是宣传网址的好方法。提高你网站在导航站点的排名、Banner广告、有技巧得利用传统媒体、BBS、新闻组都是获取潜在用户注意力的手段。充分利用网页的交互性，增强与客户之间的联系，及时得到客户的反馈信息，了解客户的需求，不断的改进网站，提高整个网站的信誉。

孙子曰：“夫未战而庙算胜者，得算多也；未战而庙算少者，得算少也。多算胜，少算不胜，而况无算乎？“这里的庙算就是我们讲的谋略，也就是今天所讲的策划。

策划是一种能力，是一种谋略，一种技巧，一种手段，一个计划，一次革命！

策划就是设计。人们称邓小平为“改革开放的总设计师”，实际上也就是对策划、策划实践的一次历史性确认。

真正的策划人是一个复合型人才，必须掌握：经济学、哲学、心理学、传播学、营销学、管理学等，以及具体的如战略、竞争、策略、计划、市场调查、市场渠道设计、品牌经营、企业规划，甚至人力资源以及整个国家和世界的动态和发展趋势。

谁能帮我用HTML语言做一个简单的网页?代码就行

html

head

title第一个html网页/title

metacharset="utf-8"

/head

body

/body

/html

html

head

title第一个html网页/title

metacharset="utf-8"

/head

body

table

td第一行第一列/td

td第一行第二列/td

/tr

td第二行第一列/td

td第二行第二列/td

/tr

/table

/body

/html

扩展资料

HTML语言特点

1、HTML语法较弱。

在w3c制定的HTML5规范中，对于HTML5在语法结构上的规格限制是较松散的，如、或在浏览器中具有同样的功能，是不区分大小写的。另外，也没有严格要求每个控制标记都要有相对应的结束控制标记。

2、HTML5编写简单。

即使用户没有任何编程经验，也可以轻易使用HTML来设计网页，HTML5的使用只需将文本加上一些标记(Tags)即可。

3、HTML标记数目有限。

在w3C所建议使用的HTML5规范中，所有控制标记都是固定的且数目是有限的。固定是指控制标记的名称固定不变，且每个控制标记都已被定义过，其所提供的功能与相关属性的设置都是固定的。

怎样用HTML制作个人介绍网页？

你无须去记复杂的HTML语言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选Edit

Page,便可以制作了.文字的处理基本跟Word没什么两样,关键是插入图片和产生链接.我们先做关于你自我介绍的一页，你先写上“大家好，我是superboy，下面是我的照片：”这时要放图片了，只须点击Insert菜单，选取Image,在Choosefile里选取你的图象文件即可，然后把这个文件保存为myself.html文件，放在myself的目录下。好，现在必须做封面了，你在封面写：“欢迎来到superboy的主页”以下是“自我介绍，我的爱好，我的工作”。你的自我介绍要链接到下一页去，你只须用鼠标选“自我介绍”后按鼠标右键

，再选create

link，然后再选你myself目录下的myself.html，就将“自我介绍”链接到下一页了，以后在浏览器中一按，就可以跳到镶有你靓照的页面啦。

在你的封面做好了所有链接和图片后，记住你必须将这一页保存为index.htm(有的主机要求必须为index.html),因为网页默认的主页名称是index.制作主页其实很简单，只要多实际制作，工多艺熟。还可以拿来主义，在网上看到什么好的主页，用另存为功能保存为.html格式的文件，细细研究人家是如何做的。还可以借用网页模版来搞，我的就是~~~~~~

网页制作网址大全

参考资料：

怎么用html5制作个人主页

总体把页面一分为二，header是包含在article里面的，页脚部分是单独的一块儿。大致结构获悉了后再从局部入手，header部分，有主标题、副标题、还有作者署名，前面我们讲过，如果除了主标题，还有一个副标题，那可以把这两个标题写在一个hgroup元素中。如果除了主标题之外，还有其他内容，比如内容摘要、发表时间、作者、图片或者小标题链接等，那就应该把他们放在一个 header元素中。

header

hgroup

h1给个人博客增加色彩元素提升网站用户体验/h1

h2网页的色彩——决定用户是否驻足停留的关键/h2

/hgroup

p class="Byline"design by DanceSmile/p

/header

接下来是文章正文部分：

部分代码：

div class="Content"

p第一眼看到杨青个人博客网站的时候，如果你喜欢.../p

...