html和css静态网页制作学生简单(html5静态网页设计)

http://www.itjxue.com  2023-01-31 15:27  来源:未知  点击次数: 

学完了html和css怎么做静态网页啊,没有头绪,初学者都是这样的么,感觉手拿筷子,不知道怎么用?

静态的网页其实就是2部分组成,一个我们的底层结构html,另外一个就是负责修饰结构的css,其实书写静态网页就像是我们小时候在过家家一个样子的,你首先得把你需要的过家家的家庭成员找齐了,而我们这个找家庭成员就像是我们书写页面网页的时候,那个最底层的结构html,你在玩过家家的时候脑海里肯定已经有了一个简单的家庭成员和故事情节了。

而我们在写页面的时候是有剧本的,这个剧本就是你看到的设计图,或者是你看到的某个网页,个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能,把整个页面完整的截取下来,QQ浏览器,360浏览器都可以做到的,这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为,并且做到了页面数据的精准度,而不是随意的给数据,或者是利用浏览器的F12功能查看原网页的数据。

首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看,其次利用浏览器的F12查看功能,这样子做你就会不小心的看到了原代码,你的思维跟原来的编程人员思路有些时候是不一样的,这样就限制了你的思路,最后你翻找的过程真的是很需要时间的,同时还会影响你的思路。

按照设计好的剧本然后我就可以对应这找人员了,比如说爸爸、妈妈、孩子、锅、饭碗、筷子,菜等等,我们写页面也是的。比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字,相对来说页面的整体布局是比较简单的,当然还有很多不同的类型的页面,布局上比这边要复杂一些,具体的可以看下面的图。

这个是我们看到一个图的时候,大致在脑海当中对页面进行一个简单的扫描,进行初步认识看看页面当中都有哪些,如果把页面当成一张纸,那么在一点点撕碎的过程中要怎么样从大到小一点点的分割,当我们有了初步的认识之后,就可以把这些东西转化成我们的html结构,所有画的这些不同颜色的框框我们在写的时候用的都是div。

从上往下,从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后,在往里面放一些小的东西,比如图片img、表单form input,文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积,不是把整个页面都堆积出来,而是一个模块一个模块的来,比如头部的、中间左边的、尾部的。

接下来我们需要做的就是把写好的结构进行美化,不然你就会看到如下图一样的场面。

难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮,妈妈要穿上高跟鞋呀,需要涂抹口红呀,爷爷是需要有胡子的而且还是要白色的才会更像一些,最好是要弯腰驼背的。

而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心,涉及到的东西很多,同时也会伴随着很多的问题,毕竟想要某个人形态外貌上和剧本人物一致,不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄,比如:

百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float:right;红色盒子里面的文字的字号大小,字体,字体颜色,水平间距,垂直间距这些都需要一点点的写,如果在写的过程中遇见了问题,我们可以借助Chrome浏览器的调试功能,哪里错了用箭头点哪里,结构看左边,css看右边,看看css属性有没有显示,有没有划掉,有没有黄色报错等等。

这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么,就好像你穿衣服的时候肯定是拿上衣,而不是拿裤子穿在上面,如果有人这么做你会告诉他这样是错的,这个裤子要穿在下面一样。

最后就是总结和举一反三了,一个页面写完之后,不是就是完了,更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题,是怎么解决的,为什么这样子解决,更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现,做到举一反三。

这些总结可以记录到网上一些博客上,比如博客园、CSDN、51CTO。这样既可以作为自己的一个整理也可以方便了其他人同样查看。

用html和css做一个网页?

1,打开记事本,并在其中输入必要信息,完整代码如下:

!DOCTYPE htmlhtmlhead meta charset="utf-8" title/title

bodyheaderimg src="molihua.jpg"width="412" height="291"/header article header h2茉莉花/h2 p作者:宋 · 刘克庄 /p /header hr/ p曾与瑶姬约。恍相逢、翠裳摇曳,珠韝联络。风露青冥非人世,揽结玉龙骖鹤。

爱万朵、千条纤弱。

祷祝花神怜惜取,问开时、晴雨须斟酌。枝上雪,莫消却。

恼人匹似中狂药。

凭危栏、烛光交映,乐声遥作。身上春衫香薰透,看到参横月落。

算茉莉、犹低一著。坐有缑山王郎子,倚玉箫、度曲难为酢。君不饮,铸成错。/ph3清平乐/h3p冰轮万里。云卷天如洗。先向海山生大士。却诞卯金之子。冰盆荔子堪尝。胆瓶茉莉尤香。震旦人人炎热,补陀夜夜清凉。/pdldt《浣溪沙》/dtdd南国幽花比并香。直从初夏到秋凉/dddt《鹧鸪天》/dtdd携靓侣,泛轻航。棹歌惊起野鸳鸯/dddt《真珠帘》/dtdd茉莉芰荷香,拍满笙箫院。/dd

/dl/article footer2019.9.6/footer /body/html

启动浏览器运行后,大家会发现界面并不美观,文字看着也比较乱。

为了解决这个问题,可以在界面添加css规则,让界面更好看,更标准化,将下面的代码块添加到记事本中,位置在head和head/也就是头部之间:

style type="text/css"body{ background:gray;} h2{ text-align:center;} header{ text-align:center; } article p{ text-indent:2em; } footer{ font-size:12px; font-align:center; } /style

如何用html编写一个简单的网页

简单的html网页可以直接利用文本编写的,无需下载特定编辑器。

1、在我们的windows操作系统中,桌面上鼠标右键新建一个txt文本,并命名为"最简单网页",只是便于标识,实际上并不影响我们的操作。注意我们需要提前在文件属性中把扩展名显示出来。

2、我们打开文件夹属性设置,将文件扩展名显示出来,后面我们需要对文件扩展名进行操作,不同操作系统的设置位置不太一样,我们可以直接搜索"文件夹属性"来进行查找修改。

3、然后输入最简单的HTML文本语言。

代码如下:

html

body

最简单的网页

/body

/html

4、保存并关闭txt文本,然后修改我们txt文本的扩展名为html,此时会弹出警告框,提示我们修改后可能会导致文件不能使用,这是操作系统的一个处理逻辑,为了防止无意或恶意的损坏文件的行为。

5、无需担心,因为这在我们自己的掌控之下,确认警告,点击"是",然后双击打开我们自己的第一个html网页,就可以看到一个最简单的html网页了。

学生html静态页面该如何做?(很容易哦)

对于刚开始学习网页开发的童鞋们来说,掌握了比较简单的HTML语言基础后,会迫不及待地想着手制作自己的第一个网页,然而DW等软件的安装却不尽人意。今天小编为饱受心灵摧残的童鞋们带来了福音,为大家讲解一下如何不用安装软件也能轻松建立一个HTML文件。

(下图是成品)

向左转|向右转

工具/原料

一台电脑

方法/步骤

向左转|向右转

向左转|向右转

向左转|向右转

首先,在电脑桌面新建一个记事本文件,然后打开。

向左转|向右转

接着,在里面输入HTML语言,记得开头第一行要加上!DOCTYPE HTML,缩进以一个“tab键”为标准,加上html/htmlhead/head这些基本标签,在里面输入内容即可。

向左转|向右转

向左转|向右转

输入完成后,点击左上角的“文件”“另存为”,在“保存类型”中选择“所有文件”。

向左转|向右转

向左转|向右转

然后将文件名更改成“XXXX.html”的格式,选择好保存的地址,点击保存。接着就生成了我们开始看到的文件。(在这里小编要说一下,之所以文件会有“360浏览器”的标志是因为小编已经默认用该浏览器打开此类文件了,这并非是固定的,可根据个人喜好设置)

向左转|向右转

打开文件后,一个最简单的网页就出现了,有标签还有内容。

向左转|向右转

最后,小编跟大家说一下,这个HTML文件是可以持续性更改的。先选中文件,然后右键,在“打开方式”里选择“记事本”。

向左转|向右转

向左转|向右转

向左转|向右转

打开记事本之后,你就可以在里面进行编辑了。修改完成之后直接点击“文件” “保存“ 就行了。最后打开文件,你会发现网页内容已经更改了。

实在不行,中国不是有某宝吗,我以前也是被搞的焦头烂额,只能找被人帮忙咯,唉,没办法。尽量找个技术行,便宜的,只能这样:网页链接

用html如何制作一个简单的网页代码?

1、首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。

2、然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。

3、单击“另存为”的功能选项,显示默认保存为编码为ANSI。

4、我们将更改编码和文件名,将其更改为如图所示的图像并保存。

5、然后返回到新创建的文件夹,发现有一个额外的html文件。

6、最后,使用浏览器打开html文件,效果如图所示,简单的网页被成功编写。

(责任编辑:IT教学网)

更多

推荐Frontpage教程文章