制作个人网站教案

第一篇：制作个人网站教案

学科：《信息技术》 课题：《制作个人网站》 课时：1 [教学目标]（1）熟悉Dreamweaver的软件环境，掌握该环境下的文字处理方法；

（2）掌握插入剪贴画的方法，掌握使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。[教学重点与难点] 使用表格定位文字、图片，网站内部的超链接。[课时安排] 1.心课导入与布置任务（用时6～7分钟）2.学生自主学习（用时27分钟）3.教学评价（用时10分钟）4.教学总结（用时1～2分钟）教学过程：

1、导入

首先以学校要建校园网站为引言，校园网站下挂有教师个人网站、班级网站、学生个人网站等，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，要求网站必须有同学们亲手制作的网页，才能真正成为的校园网站，提供大量的制作网页的素材（如图片、声音、动画、视频等），同学们可以自由地发表自己的想法和观点，开阔学生的思路，同时激发学生的创造欲望。

2、教学内容

教师利用多媒体教学网（或大屏幕投影仪）简单分析教学课件的要素，将Office中的Word 2000知识迁移到此，将任务进行分解成为若干个小任务，如制作一个网站，必须制作若干个网页，而一个网页可能由文字、图片、超链接等构成，因而就有要完成插入文字、插入图片、插入超级链接等小任务。具体的任务要求是：文字要有不同的字体、颜色、字号、对齐方式；图片要求大小调节合适、位置摆放合适；表格要有合并与拆分，表格内要有文字、图片；主页与子网页之间要有超级链接并为双向的。然后简单演示一个网站内部的超级链接。引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构。

接下来就是学生开始自主学习的过程。学生带着制作网页这个任务，并由此而产生对网页中的文字处理与图片等知识的需求，由内在的需要促使学生去主动探索、学习相应的知识，并通过自己主动探索来解决问题。在此过程中，教师巡视查看学生的学习过程，了解学生的学习情况、进度，以指导者的身份对个别学生的问题进行单独交流、指导；如：有的学生问网页之间的超级链接如何去做，有的学生问如何利用表格对文字、图片的定位等。学生之间可以互相交流、互相学习、互帮互助、团结协作；对大多数学生的共性问题，教师给予广播式指导解决。对于理解能力、动手能力以及综合应用能力强的同学指导他们进一步学习扩展内容，发展他们的个性，培养他们的积极创新精神。如对某些学的快的学生给予引导如何用表格套表格的再定位方法准确地定位文字、图片。

3、教学评估

在规定的时间内学生基本完成了学习任务，下面是给学生一个展示自我的机会，从学生制作的网页中挑选出有代表性的作品，由学生自己介绍、演示，这样可以锻炼学生的表达能力，然后让学生互相讨论，发表意见、看法，实现相互交流、学习的目的。教师在此过程中以实现预定的教学目标为目的，适当地引导讨论方向。这一个过程是非常重要的过程，是一个再学习再提高的过程。对于知识掌握较好的学生正是表现自我的时候，是最有成就感的时候，对于少数知识掌握不太好的学生，真是一个再学习的过程，完成对知识的意义建构。

4、课堂总结

教师总结本节课的教学内容：掌握文字处理方法、插入剪贴画、使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。对学生的制作成果表扬鼓励，并提出新的问题，留下悬念，激发学生继续学习的兴趣。如要使自己的网页更美观、内容更充实，具有“商业网站”的味道，我们就必须要对网页进行美化进行装饰，如何去才能实现呢？这是我们下一节要完成的任务。

第二篇：个人网站制作说明

我所选的题材关于甜品。

对题材选择的说明

本网站名称为“舞动舌尖甜品”，目的是向浏览者展示甜品。网站的首页设计成引导页，引导页相对简单，下载迅速。“舞动舌尖甜品”网站内容包括四个部分，如下：

主页

关于我们

特色新闻

甜品展示

该站点根目录下一共包括四个文件夹，各目录的名称及作用如下：

“images”文件夹：存放“舞动舌尖甜品”网站的所有用到的图片

“library”文件夹：存放“舞动舌尖甜品”网站的三个库文件。

“other”文件夹：存放“舞动舌尖甜品”网站里用到的word文档。

“Templates”文件夹：存放“舞动舌尖甜品”网站的模板网页。

“index”主页、“gywm”关于我们、“tsxw”特色新闻、“tpzs”甜品展示；产品分类a、b、c、d、e、g；常识介绍wb、wb1、wb2、wb3。

对所用编辑工具的说明

随着网络技术以及网页制作技术方面的日臻成熟人们越来越关注网页的美观性，所以当下网页制作的一个最主要的出发点就是网页的美观和可操作性。Dreamweaver版本，无论是操作性和功能性都有长足的进步这也为我们制作网页提供了强大的工具。古语有云：“工欲善其事，必先利其器。”

首先要注意：各目录名称都不要用中文。以及站点的建立 在制作网页时，首先要建立站点。

对资源来源的说明

做本次个人网站我借鉴了甜心凯特网站和爱芒果甜品网站的甜品图片，还有简单的设计风格。

对制作过程的说明

主页：运用了四个标题栏，一张图片，两张动态图片，以及版权。图片来源：自己搜索、以及一张借鉴图片____<爱芒果甜品网站>。

关于我们：运用了四个标题栏，一张图片，三张动态图片；图片来源：自己搜索、以及一张借鉴图片____<爱芒果甜品网站>。

产品分类：

分成七个系列：

 美饮系列

 甜心妙雪迷

 巧克力舌尖冰

 菠萝酸奶舌尖冰

 西瓜舌尖冰

 香芋舌尖冰

 芒果舌尖冰

每七个系列分别链接了七个页面。

图片借鉴了<甜心凯特网站>的甜品图片。

特色新闻：关于舞动舌尖的新闻新增了四个常识文档，同样的链接了四个网页，在该页面的各标题处链接了可以下载的文档，供浏览者下载查看。常识文档借鉴了<爱芒果甜品网站>的新闻标题栏内的文档。

甜品展示：运用了二十四张甜品图片。图片来源：自己搜索。

对所用技术的说明

网站制作用到了：时间轴，库文件，模板网站，表格布局，动态文字代码，网站超链接，层的运用以及添加行为。

总结和体会

这是第一次用Dreamweaver软件做网页，高中曾简单的学过如何制作网页，但那时用的软件是FrontPage2003。

学了用Dreamweaver软件做网页感觉难度比FrontPage2003大。上课听老师讲解时，跟着老师做步骤时感觉并不是那么的难，相反，反而觉得很简单，只要掌握就并不难了。但是轮到自己设计网页的时候，有些迷茫了。我该怎么做？我该如何去做？

做《舞动舌尖甜品》网站时：最令我觉得繁琐的地方便是给二十四张图片插入层，当我在做这二十四张图片的层的时候最希望的便是有什么快捷的方法可以不用一个一个的去弄。我想过用代码，可是我做不来。于是，我便很有耐心的给这二十四张图片插入层以及对应图片的行为。

其他部分也有渐多渐少修改过，做起来感觉还行。

看到自己完成一个自己设计的小网站时，有大大的欣喜，这居然是自己做出来的网站。原来做网站就是这样啊！

这时，不禁佩服那些做网站的专业人士，原来做一个网站也是要花费这么的耐心啊，想想我们平时浏览的网站，那个做工相比我们自己的个人网站简直就是大巫见小巫。

第三篇：个人网站制作

设计一个个人网站方法

一、要求：

1．使用Dreamweave网页工具制作一个个人网站；

2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。

3．网页中要有图片和文字内容，用表格或框架进行页面布局；

4．添加至少两种行为，并为首页添加背景音乐。

5.在网站中设计一个表单页面。

6.首页必须包含页面标题，动态按钮导航栏。

下面我们大家统一一下软件版本，我用的是网页三剑客cs3版本的，大家可以去迅雷下载，因为我们要用到flash建议大家也按装好flash。

首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图

做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。

选择站点——新建站点。

我们建的文件夹就是站点根文件夹。新建站点后得到这样一个界面

点选高级，得到界面

站点名称与我们建文件夹得名字相同，zs填进去就可以了 本地根文件夹就是我们新建的那个文件夹，http地址为http://localhost/zs沧州网站建设http://www.xiexiebang.com

接下来选择左侧栏里远程信息

点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹

接下来点选左面菜单里的测试服务器，点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。

下面看老师的第一条要求，是要至少四个网页，那我们就做四个

单击新建，然后单击

接下来，选择

然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.heml，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。

站点中已经有了四个文件。接下来，我们开始编辑index.html。

单击index.html，显示为当前页面。

单击拆分，然后我们看这个个网页就叫张三之家了，同样的方法给其他三个网页改名字。A网页标题，这个就是网页名字，我们以张三为例，这，这样老师的第六条我们就完成一半

B网页标题

C网页标题

改好名字之后，一一保存，这个不多说了，接下来操作index.html。

显示首页为当前编辑页面。

首先为index.html页面添加背景音乐。

大家在代码视图里找到，这个是什么意思就不解释了，我也不知道，就是这个了，在后面输入代码，然看见这张图片上，我光标指在哪里了吧，单击空格键，这个时候注意输入法要为美式键盘字母格式，只要不是汉字就行，得到一个菜单，单击src选中，然后单击enter建，这个时候紧跟着src会出现一个浏览，单击浏览，然后出现对话框，选择一首音乐，然后单击确定，会继续弹出一个对话框点击是，保存到自己建好的文件夹里面，注意这里不能用汉字做音乐名字，必须改成字母或者数字

我是以beyond的歌为例，名字改为by，点击保存背景音乐就添加好了。大家可以看一下，在站点目录下，已经有了这首歌曲。

接下来开始设计页面布局 这里用表格布局，这个栏叫设计栏，由于大家都不会代码，所以我们主要在这个栏里操作，下面大家点击常用里面的表格，就是下面这张图片

中的这个图标

得到对话框如图所示数据： 单击确定，得到如下界面

这个插入的表格式可以自动调整大小的，大家可以自己试一下，接下来用这些表格布局，给大家看两个图标，这个图标就像是excel中那个合并和拆分单元格是一个意思，左边那个代表合并单元格，右面那个代表拆分单元格，excel大家都会把，就和那个布局差不错，我做一个简单的布局，为了方便，我把这个表格缩小，这个布局很简单，第二行全部合并，第三行第二三列合并，大家可以根据自己的需要进行拆分合并，还可以在表格里面再次插入表格。

宽度和高度的设置时在代码里找到

height=””>，其中align表示表格位置，height表示表格高度，大家可以根据自己的需要来填数字，默认是以像素为单位的。

接下来制作导航，这是老师第六条中的第二个要求，注意我在这里给了两种方法，大家可以先看一下，再决定选择哪种

我没看懂什么叫动态按钮导航条，不知道是让这个字动呢，还是让这个字动呢？如果大家嫌麻烦，就直接输入汉字，结果就是下面这样的

如果要文字居中显示可以将这四个框同时选中，然后居中

在水平栏里面选择

以后所有的文字格式都可以在这里面选，但是首先要选中自己所要操作的文字。

创建链接，选中首页两个字，然后单击右键——创建链接，选择index.html，然后以同样的方法，给其他三个栏里的文字做链接，创建链接的文字会有下划线，同时改变颜色

如果大家不嫌麻烦，教大家用flsh做一个动态的按钮导航，把光标放在第一行第一个栏里，然后

这个常用栏里的flash按钮，单击后面那个小三角，选择flash按钮。得到对话框

我们可以看到这个按钮的样式是可以自己选择的，大家随意选择一款自己喜欢的按钮，然后在按钮文本栏里，填入首页两个字，字体设置随意，然后链接

这个栏里填入index.html，注意这里的链接就是超级链接，当你点击这个按钮的时候，它就会显示主页，我们设置后面三个按钮的时候，一定要记得，当你文本栏里填入个人简介字的时候，那你的链接就要指向简介那个页面，我们这里就是a.html。其他像什么背景色之类的随意，然后单击确定。这样第一个按钮就做好了，接下来我们自己做剩下的三个按钮，注意链接问题，大家做好后，可以看到自己站点内多了四个swf格式的文件，这四个就是按钮，保存的时候，有一个文件问是否要保存，一定要点击是，不然flash不运行了。

大家可以回到自己的文件夹里，打开首页，测试一下，是不是单击这四个按钮会指向自己所设置的网页，然后我们给第二行设置背景颜色，以有弹出颜色选框，大家随意选择自己喜欢的颜色

单击背景颜色后面那个方框，可

接下来，完成老师的第五个要求，制作表单，这个把光标指向第三行第一个栏

选在表单选项中的。也就是第一个按钮，这时得到界面

我们把光标指向红线里面，输入“用户名：”然后点击表单选项中的第二个按钮弹出对话框，选择确定，得到界面

同样方法换行输入密码

再次换行，单击表单选项中的按钮项输入两个按钮，然后选中第一个按钮，得到以下属性

将值后面栏里的文字改为登录，同样方法，把第二个按钮的值改为注册。

接下来插入文字和图片，在现在的第二行第二列里操作

把光标指向第二行第二列，选择常用栏

选择这个栏里的图像按钮，弹出对话框，这时大家选择自己电脑里的一张图片，单击确定后弹出对话框，问是否保存在站点根目录下，单击确定，这时候需要注意的是，图片名字不能有汉字，图像标签和辅助属性那一栏不用管，单击确定即可。

接下来就是输入汉字了，我们在图片的后面先输入汉字，可以看到这样的显示，上面还空了很大一块地方，似乎不太好，不符合图文混排的规矩，大家单击图片选中，在属性栏里找到找到到对齐那一栏，在后面点选左对齐，得到最终图文效果是这样的。

第四行还有四个栏，大家可以在里面表明作者时间、以及自己的邮箱、QQ等内容，这里我就不写了。

实际上做到这里，我们几乎完成了老师的所有要求了就差添加两种行为了后面还有三个网页没做呢，怎么办啊，后面三个网页大家还没做，教大家一个简单的方法，大家把鼠标指向了。

这个栏的左边，在表格和边框之间，我们可以发现，鼠标斜向右首先单击鼠标左键，选中这个表格然后不要移动鼠标，同时单击右键，单击拷贝，然后这个表格就拷贝好了，打开其他三个页面，分别粘贴过去，图像属性描述不用管，取消，这样做的好处是它的好处非常多。

大家打开a.html，这个是个人简介，就是一个图文混排了，图文混排我们已经讲过了，更何况我们这个页面里已经有了图文混排了，大家可以换一张图片，换一些文字，做一些自我介绍什么的，都可以。，但是我们最好把那个表单删掉，哪个是表单就不用我说了吧，就是这个了。删掉之后，选中第三行三个栏，合并就好了，第二个页面就做好了，接下来我们看第三个页面，b.html，这个页面是个人相册

这里我同样分两种方法给大家讲，第一种方法很简单。就是插入几张图片，现在第三行剩下三个空栏，每个栏里插入一张图片，景色也好，其他也罢，然后加上图片说明，一切搞定，这个我就不写了，第二种方法还是用flash做相册，首先大家合并第三行三个栏。

并将光标指向第三行，然后单击这个图片中的插入记录——媒体——图像查看器，之后得到这样的界面

注意这个是可以调节大小的，看你想要多大的相册了。单击选中，我们会发现右面多出这样一个界面flash元素

在其中找到

然后单击后面的img1那里，会发现后面多出一支笔，单击那个笔，弹出对话框

单击减号，将img1三个删掉，然后再单击加号，会多出一个文件夹标志，单击文件夹标志，然后弹出对话框

在自己电脑里选择一张图片，将图片保存到站点根文件夹下，还是那个问题，名字中不能有汉字，添加好第一张图片之后界面如图

大家可以多添加几张图片，这样一个相册就做好了，单击确定。接下来就剩下第四页了，就是写几行文字的事情了，把表单和图文混排都删除，然后合并三个栏，然后添加一些文字，搞定了。这四个页面都做好了，我们还有一项任务没有完成，那就是给页面添加两个行为

下面我们讲添加行为，打开首页，单击图像选中，然后找到一下命令，看到行为面板下那个醒目的加好了吗 单击加号——交换图像，弹出对话框

单击浏览，在自己电脑中找出一张图片，单击确定，存放到站点根目录下，这样第一个行为就完成了，当我们鼠标滑过这张图片的时候，就会变为另一张图片。下面添加第二个行为，我们将光标指向第二行蓝色背景哪一行，然后单击行为面板下的加号——弹出信息，得到对话框

写上你好，单击确定。这样在我们单击蓝色地带的时候，就会弹出你好信息框。好了到此为止，就差不多了，以上由沧州网站建设徐俊科技提供。

第四篇：个人网站制作过程

个人网站制作过程

随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以刚好的展示自己，而且可以提高自己在计算机应用方面的能力。我使用的软件是Dreamweaver8,它是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。随着互联网(Internet)的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器，两者各有千秋。网页编辑器的优点就是直观性，使用方便，容易上手，在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。

个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。在网页制作中，我借鉴了韩国个人网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用了photoshop和fireworks强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave完成的。、在这次课业中我制作了关于自己的网页，下面介绍下制作过程。首先使用Dreamweaver8来创建站点。打开Dreamweaver8软件，执行站点-站点管理命令，在弹出的站点管理对话框中选择新建，然后创建站点存放到我的文档，然后设置地址为?retcode=0 3.http://junehuang111.blog.163.com/blog/static/***222144/ 4.《网页制作与网站建设设计大全》徐磊，清华大学出版社，2008.9

第五篇：精美个人网站制作

【摘要】

这篇论文是关于我的一个个人网站的设计，首先我先从网

站设计的方向和目的、网站设计的整个流程出发，然后通过自己设 计的这个个人网站作品来说明并演示一个完整的网站制作过程。本 论文详细的介绍了整个网站设计的全过程。本论文的每一章都是网 站建设的一个步骤，理论和实践相结合。既有理论、又有实例，把 每一章的实例合在一起，就构成一个大实例。当然，一个好网站的 整个设计过程是不能用短短的几十页纸就可以说清楚，所以，在我 的这篇论文中，我详细的介绍了整个网站中最重要的部分，其中包 括主页的设计和一部分链接页面的设计。

下载制作个人网站教案.doc

将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。

点此处下载文档

文档为doc格式