×

学生个人网页制作素材

初学者怎么制造自己的网页?简单网页制作

admin admin 发表于2022-06-01 11:02:26 浏览101 评论0

抢沙发发表评论

初学者怎么制造自己的网页


网站设计八步骤

由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

五、制作网页

材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

六、上传测试

网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。

七、推广宣传

网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者
★要想学做网页,首先得了解制作网页的工具。

制作网页主要有以下一些工具

Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地,我不太喜欢。

Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。

另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。

此外还有一些网络编程工具,javascript、java编辑器等。

网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。

大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。

总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了!

祝你成功。
★你可以结合 Dreamwaver 和 Photoshop 来制作网页。

Dreamwaver 可以到这里下 30天试用版,不过要先登记一个免费帐号,http://www.macromedia.com/cfusion/tdrc/index.cfm?product=dreamweaver
★在网上有这方面的教程
教程
http://www.nease.net/xhelp/
http://school.jz173.com/(中国建站专家)
主页和个人空间
http://home4u.china.com/(中华网)
http://www.35.com/yumingzc/yumingzc.asp
建议使用网页制作三剑客Dreamweawer+Firework+Flash 或使用Frontpage

简单网页制作


一、FrontPage 2003简介

FrontPage 2003是由Microsoft公司推出的Office 2003组件之一。FrontPage 2003的启动与退出、文件的打开与保存与Office系列中其他软件相同。FrontPage 2003启动后,主窗口如图6-61所示,菜单部分外貌与Office中的其他软件相似。-学生个人网页制作素材

与以往的版本相比,FrontPage 2003有以下几个新功能:

(1)自定义浏览器分辨率预览检查;

(2)描摹图像;

(3)层功能;

(4)插入交互式按钮;

(5)行为的应用;

(6)使用网页重定向;

图6-61 FrontPage 2003启动界面

图6-62“新建”任务窗格

(7)检查网页错误;

(8)优化HTML代码;

(9)规划页面布局。

二、制作简单网页

我们在前面已经学会了用Word进行排版,其实你已经会制作一个简单网页了,只需将原来排好的Word文档,另存时选择保存类型为“Web页(*.htm;*.html)”就可保存为一个网页文件。

下面我们用FrontPage 2003制作一个简单网页。步骤如下:

1.启动FrontPage 2003

选择“开始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令,打开如图6-61所示的界面。

图6-63 新的空白的网页

图6-64“网页模板”对话框

2.建立新网页

选择“文件”/“新建…”菜单命令,打开“新建”任务窗格,如图6-62所示。单击“空白网页”,也可以通过工具栏上的“新建”按钮建立一个新的空白的网页。如图6-63所示。

如果要根据 Microsoft FrontPage 的模板创建网页,单击“其他网页模板”,打开如图6-64所示的“网页模板”对话框,再单击所需模板类型的选项卡,然后单击某个模板。

3.输入如下内容

图6-65

4.编辑操作

网页中的文本编辑操作与Word的编辑操作类似。

本例中,将“我的第一个网页”应用“标题一”样式,并设为隶书,水平居中;将“你好!欢迎光临”应用“标题二”样式,将其余内容应用“普通”样式,并将行距设为“1.5倍行距”,设置完成后效果如图6-65所示。-学生个人网页制作素材

5.保存网页文件

选择“文件”/“保存”命令,弹出“另存为”对话框,指定保存位置和文件名,然后单击“保存”按钮即可完成操作。

三、制作多媒体个人主页

我们以制作一个简易的个人网站为例,进一步学习使用FrontPage 2003。

1.规划

网站规划包括规划网站的风格、网站的结构和网站的配色等,是对网站的整体定位。本例设置了6个栏目,包括首页、自荐信、个人简历、荣誉证书、才艺展示、联系方式,链接的文件名分别为index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。当然也可以结合自己情况进行修改。页面布局如图6-66所示。-学生个人网页制作素材

2.建立网站

在FrontPage 2003中,所谓网站,就是一些网页和程序的集合,各个网页之间通过超链接联系在一起,所有的网页和文件保存在一个文件夹中,通过网站把这些文件和网页统一起来。本地网站是指本地硬盘上用来存放整个网站的所有文档的文件夹。远程网站是指网络服务器上的网站,供用户浏览。-学生个人网页制作素材

建立一个新网站,事实上就是建立一个单独的文件夹,然后在这个文件夹中建立各个网页文件,并且把它们链接在一起。

网页制作可以在新建网站中完成,也可以像前面那样单独新建一个网页。建议用新建网站的方法来制作网页。

下面我们首先创建新的FrontPage网站:

(1)在“文件”菜单上,单击“新建”,出现如图 6-66 所示的“新建”任务窗格。

图6-66

(2)在“新建”任务窗格中,单击“由一个网页组成的网站”。

(3)在“网站模板”对话框中,在“常规”选项卡下,单击需要的网站模板,本例选择“只有一个网页的网站”,并在指定新网的位置栏中,键入或选择新网的路径及名称,这里我们将默认的mysite改为myhome,如图6-67所示,然后单击“确定”按钮,出现创建新网站对话框,完成站点创建,完成后如图6-68所示。左边一列是文件夹列表,可以通过右键快捷菜单新建文件夹,对文件或文件夹进行复制、删除、重命名等操作。-学生个人网页制作素材

图6-67“网站模板”对话框

图6-68

3.准备素材

将本例所需的图片动画素材复制到网站内的images文件夹下。

4.制作主页页眉

在“网页”视图中的文档窗口底部,单击“设计”

在文件夹列表中双击index.htm,打开该网页并进入编辑状态,开始首页制作。

(1)设置网页大小 在“视图”菜单上,指向“网页大小”,单击 设置网页大小。

(2)设置网页背景在“网页”视图中的文档窗口底部,单击“设计” ,右击网页编辑区,在弹出菜单中单击“网页属性”项,弹出“网页属性”对话框,在标题框内输入“欢迎访问小慧的个人电子简历”;单击“格式”选中格式选项卡,选中背景栏下的“背景图片”,并单击“浏览”按钮选择背景图片。如图6-69所示。单击“确定”按钮完成网页背景设置。也可在“格式”菜单上单击“背景”来设置。-学生个人网页制作素材

(3)插入一个一行两列的表格 方法与在Word中插入表格相同。

在显示设计视图模式下,通过常用工具栏的“插入表格”按钮,或在“插入”菜单上,指向“插入”,在级联菜单中单击“表格”;右击插入的表格,在弹出菜单中单击“表格属性”,并将单元格衬距、单元格间距和粗细栏均设为0,如图6-70所示,单击“确定”按钮。-学生个人网页制作素材

图6-69 网页属性

图6-70 表格属性

(4)在第一个单元格内插入图片 将插入点放在第一个单元格,在“插入”菜单上,指向“图片”,再单击“来自文件”。找到要添加的文件(网站下images文件夹下的logo.gif),如图6-71所示,然后单击“插入”。-学生个人网页制作素材

更简单的方法是从文件夹列表拖动图片文件到编辑区指定的位置即可。

(5)在第二个单元格内插入Flash动画 单击第二个单元格,在“插入”菜单上,指向“图片”,再单击“Flash影片”。弹出与图6-71相似的“选择文件”对话框,找到要添加的文件(网站下images文件夹下的banner_007.swf),然后单击“插入”。-学生个人网页制作素材

(6)在第一个表格下插入一个1行1列的表格 同样将单元格衬距、单元格间距和粗细栏均设为0,设置好背景颜色,本例是选的其他颜色,如图6-72所示,在“值”文本框中输入Hex={C1,E8,C9}。

(7)制作滚动字幕 在第二个表格的单元格内单击,在“插入”菜单上,单击“Web组件”,弹出插入Web组件对话框,默认选中的是字幕,因此单击“完成”按钮,弹出字幕属性对话框,在“文本”框内输入:衷心感谢您垂阅我的简历,单击“确定”按钮。如图6-73所示。-学生个人网页制作素材

图6-71 插入图片对话框

图6-72“其他颜色”对话框

5.制作正文和页脚

(1)在第二个表格下插入一个1行2列的表格,同样将单元格衬距、单元格间距设为0,但粗细设为1,暗边框设为白色,亮边框则设为其他颜色,在如图6-72所示的“值”文本框中输入Hex={99,CC,FF}。-学生个人网页制作素材

(2)设置单元格背色。右击此表格的第一个单元格,在弹出菜单中单击“单元格属性”,弹出如图6-74所示的对话框,背景设为其他颜色,在如图6-72所示的“值”文本框中输入Hex={F1,F5,FC}。同样方法将第二个单元格设为白色。-学生个人网页制作素材

图6-73 字幕属性对话框

图6-74 单元格属性

(3)调整单元格宽度,使之与第一个表格相同。

(4)在第一个单元格内插入一个8行1列的表格,并将单元格衬距、单元格间距和粗细栏均设为0。在单元格属性中将单元格对齐属性设为水平居中,垂直居中,行高调整为40。

在刚插入的表格第二行内插入图片homepage.gif,并在其后输入“首 页”;在第三行内插入图片sub_dot.gif,并在其后输入“自 荐信”,后面四行插入的图片均为sub_dot.gif,输入的文字依次为“个人简历”、“荣誉证书”、“才艺展示”、“联系方式”。-学生个人网页制作素材

(5)在表格三的第二个单元格内插入一个3行3列的表格,并将单元格衬距、单元格间距和粗细栏均设为0。将中间一列调宽一些。

在该表格第一行第二列中输入“自荐信”,在第二行第二列输入自荐信的内容。设为1.5倍行距。

(6)在表格三后面插入一个2行1列的表格,并将单元格衬距、单元格间距和粗细栏均设为0;并且第一个单元格背景色设为与表格二背景色相同,在第二个单元格内输入“联系电话:023-683568XX E-mail:xiaohui@163.com”并设为居中。-学生个人网页制作素材

6.链接网站文件

选中要建立超链接的文字或图像,单击常用工具栏中的“插入超链接”按钮或在“插入”菜单上单击“超链接”,或者是右击选中区域并单击“超链接”,均可打开“插入超链接”对话框。如图6-75所示。

图6-75“插入超链接”对话框

(1)选中“首页”,单击常用工具栏中的 按钮,在打开的如图6-75所示的“插入超链接”对话框中,在“地址”框内输入index.htm,并单击“确定”按钮。

(2)用同样的方法将“自荐信”链接到zijian.htm、“个人简历”链接到jianli.htm、“荣誉证书”链接到zhengshu.htm、“才艺展示”链接到zhanshi.htm、“联系方式”链接到lianxi.htm。-学生个人网页制作素材

7.保存文件,按F12键预览网页

四、制作本网站内其他页面

首先在文件夹列表中将 index.htm 复制 5个,分别重命名为 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需将每个文件中自荐信部分修改为相应内容即可,页眉、超链接栏和页脚均不变。-学生个人网页制作素材

五、网站发布

当我们完成上述内容后,需将制作的网页发布到Internet上的Web服务器中,才能供网上的访问者浏览。首先要到Internet服务提供商(ISP)那里申请购买存放网页的空间和域名,以前有很多网站(如网易等)都提供免费的个人主页存放空间,现在相对较少了,中国学生网仍在提供50M免费空间服务,大家可到-学生个人网页制作素材

图6-78

图6-79


关于网页设计模版


1、 经典韩国网站模版下载21款
http://www.sooogl.com/html/2006/11/28/1625-0.htm
IDC类Flash超酷模版,LG韩国公司网站模版,爱的归宿主题模板,超级女生服饰赞选购_韩国模板,超级女性化妆品销售模板,超可爱的韩国网站,超酷Flash动物园模版,超酷Flash设计公司模版,出行酒店预订_韩国模板,春天情侣游玩版_韩国娱乐模板,度假村客房,别墅等服务介绍_韩国网站模板,房地产商务型网站_韩国网页模板
2、 经典韩国网页模版下载(2)19款
http://www.sooogl.com/html/2006/11/28/1629-0.htm
公园式的企业交友网站_韩国模板,FLASH旅游景点画廊网站模板,韩国某网娱公司首页模板,音乐唱片公司网页模板,新盈设计个人主页模欧洲某公司网站模板板三,欧洲某公司网站模板,清风型模板二,白色主题模板,美国博士集团公司首页模板,建筑艺术设计_韩国模板,绿色背景孩子主题_韩国商务模板,韩国婚纱摄影类网站模版
3、 经典韩国网页模板25款,(3)
http://www.sooogl.com/html/2006/11/29/1635-0.htm
周末娱乐消遣_韩国网页模板,幼儿园网站_韩国模板,儿童假日休闲娱乐_韩国模板,韩国儿童教育类网站模版三,女性健身服饰销售_韩国女性模板,清风型模板一,新盈设计个人主页模板二,新盈设计个人主页模板五,韩国黑色主题门户网站模板,超酷时尚服装
4、 经典韩国网页模板17款(4)
http://www.sooogl.com/html/2006/11/30/1641-0.htm
5、 经典韩国网页模板49款(5)
http://www.sooogl.com/html/2006/12/02/1658-0.htm
6、 经典韩国网站模版49款,经典韩国网页模板49款(6)
http://www.sooogl.com/html/2006/12/02/1659-0.htm
-学生个人网页制作素材