您的位置：360文档中心› 第四章 制作简单网页

第四章 制作简单网页

第四章 制作简单网页
第四章 制作简单网页

第四章制作简单网页（文本和图像在网页中的使用）

本章要点：

●网页中插入文本

●编辑文本

●网页中插入图像

●编辑图像

●创建网页导航条

一、在网页中插入文本

1、插入文本

（1）直接输入文本：

注意分段的两种方式Enter，Shift+Enter

（2）复制和粘贴文本：

例：复制记事本中的一段文本内容

注意尽量减少使用快捷键，有些内容只能通过菜单命令进行操作

（3）导入文本：

【命令】文件-导入-Word/Excel文档

例4-1：新建一个网页文档，导入一个Excel文档到网页文档中，添加文本内容（标题：收入比较表，表格背景色天蓝，居中对齐）

（4）输入特殊字符：

版权符号，货币符号，注册商标号及直线等

【命令】插入-文本-字符：标点类（不换行空格，换行符），货币类，版权类，其他字符

（5）复制和粘贴HTML代码：

如制作鼠标特效

●在代码视图中制作鼠标特效

【命令】查看-代码/代码视图在标记前输入鼠标特效代码

例：紧随鼠标的流动彩色字串

●使用记事本制作鼠标特效

【命令】记事本-另存为-保存类型（所有文件）-文件名.html

例：跟随鼠标的时钟

2、插入水平线和日期

（1）插入水平线

水平线：对信息的组织很有用，可使用水平线来分隔文本和对象，比使用段落更加分明，具有层次感

插入记录-HTML-水平线

例：导入word文件（目录），在每章节分隔处添加水平线（

）

（2）插入日期

插入-常用-日期

例4-2：打开一个网页文档，在文档中插入日期和时间

1、应用标准格式：段落，标题

2、设置文本字体：编辑字体列表

3、设置文本字号：

4、设置文本颜色：改变网页文本默认颜色（修改-页面属性）

5、设置文本对齐方式

例4-3：新建一个网页文档，在文档中插入文本内容，设置文本内容属性

标题：大小24像素，蓝色，粗体，华文行楷，居中对齐

正文：楷体，18像素，缩进

三、在网页中插入图像

1、图像格式：

●Gif：256色，适合显示色调不连续或具有大面积单一颜色的图像（导航条，按钮，

图标等具有统一色彩的图像）

●JPEG：用于摄影或连续色调的图像。

●PNG：具备对索引色，灰度，真彩色图像及alpha通道透明的支持。

2、插入图像

（1）插入图像

（2）插入图像占位符：

在网页制作过程中，如果所需插入的图像未制作完成，可以使用图像占位符的方式来插入图像。

常用-图像-图像占位符

●名称：字母和数字

●宽度，高度，颜色

●替换文本：描述该图像的文本

替换图像占位符的方法：

●双击-【打开图像源文件】

●属性面板中【源文件】

例4-4：打开一个网页（index.htm），在网页中插入大小为720*143像素的图像占位符（LOGO），并在网页中替换图像占位符。

（3）设置网页背景图像：

属性面板中【页面属性】-分类-外观

例：设置上述网页背景图片为bg.gif

（4）插入鼠标经过图像：当鼠标经过时，原始图像会变成另一张图像，两张图像必须大小相同（如不相同，系统会自动将第二张图像调整为第一张大小）

常用-图像-鼠标经过图像

●图像名称，原始图像，鼠标经过图像

●预载鼠标经过图像：预先加载图像到浏览器缓存中，加快图像显示速度

●替换文本：当鼠标经过时显示的文本内容

●按下时，前往的URL：链接地址

例4-5：打开一个网页文档，在文档中插入鼠标经过图像

1、设置图像属性

（1）基本属性：属性面板

●图像：名称

●宽高：数值加粗，恢复按钮

●源文件：浏览；在文件面板中将图像文件拖入到该文本框

●链接：浏览；在文件面板中将要链接的文档拖入到该文本框

●类：CSS样式

●替换：图像说明

●地图和热点工具：标注和创建客户端图像地图

●边距：为图像边缘添加边距

●目标：链接页面的位置

●对齐按钮：设置图像的水平对齐方式

●对齐列表框：设置相对于同一段落中其他元素的对齐方式

●边框：默认0

●编辑：裁剪，亮度和对比度，锐化等

（2）对齐图像

●默认值：通常指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所

不同。）

●基线和底部：将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。

●顶端：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。

●居中：将图像的中部与当前行的基线对齐。

●文本上方：将图像的顶端与文本行中最高字符的顶端对齐。

●绝对居中：将图像的中部与当前行中文本的中部对齐。

●绝对底部：将图像的底部与文本行（这包括字母下部，例如在字母g中）的底部对

齐。

●左对齐：将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上

处于对象之前，它通常强制左对齐对象换到一个新行。

●右对齐：将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于

对象之前，它通常强制右对齐对象换到一个新行。

（3）调整大小：3个控制点

例4-6：新建一个网页文档，插入图像，设置图像属性并添加相应的文本说明。

2、使用图像编辑器

（1）使用内部编辑器

●优化

●裁剪

●重新取样

●亮度和对比度

●锐化

（2）使用外部编辑器

编辑-首选参数-分类-文件类型/编辑器

右击正在编辑的图像，在快捷菜单中可显示指定的编辑器名称（右键-编辑以…）

使用外部图像编辑器编辑图像的方法：

●右键-编辑以…

●属性面板-编辑按钮

●文件面板-双击需编辑的图像

例4-7：插入一个图像文件，设置外部编辑器为Photoshop，在外部编辑器中修改图像

图文混排，为图像添加注释，图像热区，图像占位符

五、创建网页导航条

导航条由一个或多个图像组成，它的显示随着动作的改变而改变，因此，在使用导航条命令前，应首先创建一个用于导航条的图像集。根据鼠标的动作，导航条的图像通常有以下4种状态：

【一般】：尚未单击时所显示的初始图像

【滑过】：当指针从图像上经过时出现的图像。

【按下】：单击导航条图像时显示的图像。

【按下时鼠标经过】：单击图像后，当指针滑过按下该图像时显示的图像。

1、插入导航条

【插入】-常用-图像-导航条

【+】、【-】按钮：在导航条元件文本框中添加/删除一个导航条元件，使用箭头键可以在列表中上移或下移元件。

项目名称：输入导航条项目的名称。

状态图像：最初显示的图像（此项必填，其他图像状态可选填）

鼠标经过图像：当指针从图像上经过时出现的图像

按下图像：单击导航条图像时显示的图像

按下时鼠标经过图像：鼠标点击后当鼠标再次移动到这个部位上的图像

替换文本：输入导航条项目的描述性特征。

按下时前往的URL：链接地址

预先载入图像：载入页面时就下载全部图像

页面载入时就显示“鼠标按下图像”：在显示页面时，以“按下”状态显示初始图像。

插入：水平或垂直

使用表格：是否使用表格规划导航条

在：设置导航条项目链接的URL地址在主窗口中显示。

一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。

2、编辑导航条

【修改】-导航条

例4-8：制作一个导航条

六、本章综合练习：制作简单网页

例4-11

PS：第一次作业要求

简单网页制作实验总结报告

《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日

目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)

第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”，包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句，色彩缤纷，十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐，影视，购物等非常热门的东西，本站设计的主题是花，能让人们在闲下来的时候看看花，品品诗歌，所以做有关花的网页是个不错的选择。同时，让人们分清楚春夏秋冬都各有什么典型的花。

第二章网站内容设计 1.1链接1标题：春の花 春天是生命的季节，在这个季节里，万物复苏。所以就找了虞美人，桃花，牡丹，以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题：夏の花 夏天充满了激情与阳光，我找了兰花，荷花，百合花等来代表这个季节，色彩艳丽，十分醒目夺人。 1.3 链接3标题：秋の花 大丽花，菊花，月季和牡丹花都竞相出现在本网页，色彩缤纷，赏心悦目。 1.4 链接4标题：冬の花 蝴蝶兰，水仙，迎春花，梅花是冬季的代表，他们刻画了一副傲立冬天的坚强的姿态。

制作一个简单的网页

制作一个简单的网页 教学目标: 1、知识目标:了解网页的基本概念以及建立网站的一般方法,学习制作只有文字的网页. 2、能力目标：让学生通过学习掌握建立网站的方法,学生通过学习能够建立只有文字网页. 3、情感目标：培养学生主动实践，勇于实践的勇气，和敢与参与的意识。教学重点: 建立网站制作网页 教学难点: 建立网站制作网页 教法、学法分析: 由于本节课作为制作网页的基础知识,学生可以根据所学知识自己进行操作,教师在此过程中进行适当的指导既可。为了让学生能够充分了解网页的概念，采用教师讲解的教学方法，为了培养学生主动实践的勇气与参与意识，采用学生自主学习的方法。 教学过程: 引入： 我们已经学习过因特网的基础知识和应用，实际体验了“网上冲浪”的滋味，网上世界的确很精彩！但是我们有什么方法能让更多的人了解自己或者自己的学校或家乡呢？最好的方法就是制作一个关于自己或家乡的网页并把它发布到网上。通过了今天的学习我们就能够做到了。

一、网页的概念： {通过多媒体展示“我的家乡”网页，向学生介绍网页的组成，让学生了解网页的概念，并做出总结} 网页就是把用文字、图形、声音、影视等多媒体形式表达的信息，以及分布在因特网上的相关信息，相互链接起来而构成的一种信息表达方式。 二、制作网页前的准备工作 1、认识网页制作工具FrontPage {学生打开FrontPage软件，通过以前学习过的知识认识该软件的窗口，并了解各栏中按钮的作用。} 2、准备好网页素材 [学生在因特网上查找关于“我的家乡”的相关资料，并保存在自己的文件夹中，以便在制作网页时作用。] 三、建立“我的家乡”网站 [根据“做一做”建立一个自己的网站“命名为”我的家乡。] 布置作业: 构思自己的网站，并在小组中进行讨论。 [学生思考问题，并进行操作。] {建立网站后，我们还需要在网站中加入网页，这样我们的网站才能充实起来。} [学生在自己的文件夹中建立一个站点命名为“我的家乡” 根据“做一做”中的提示制自己作主页并保存。然后分别建立其他几网页陕西风景欣赏、陕西古诗文欣赏、自我介绍。]

网页制作基础教程

网页制作基础教程 一、什么是HTML HTML（超文本标记语言）是网页中使用的语言，他能被网页浏览器（IE或Netscape）解释，从而显示出丰富多彩的信息（图片、文字、声音、影象、动画等）。 制作网页前首先要弄懂什么是HTML。 在IE中点击"查看"→"源文档"，就能看到该网页的HTML代码。下面是个网页文档（model.htm）的HTML代码： 这里是标题

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码，命名为test1.htm，存于D盘，然后双击打开看看。 标记一般是成对出现的，#FFFFFF表示使用的颜色是白色。 ...

... ...之间是该网页的标题 charset=gb2312表示语言字符集信息是中文简体，如big5则是中文繁体。 ...之间是网页的正文内容 表示网页的背景色是白色，默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字 ...之间的文字为红色 HTML是一套国际标准，其标记有几百种，您并无需全部了解他们，只要记住其中常用的十几种，就能够做出很漂亮的网页来。 常用的标记举例：

最简单的网页

六年级信息技术上册 《最简单的网页》 四课时 一、教学目标： 利用多媒体计算机和互联网络环境，为学生们创设一个开放的学习空间，让学生自主地利用双向互动的教学辅助软件了解、掌握和巩固所学的知识，进一步探究网页的制作方法及技巧，培养学生的计算机综合应用能力、想象力、创造力、自学能力和综合审美能力，为学生深入地掌握FrontPage软件并运用到实际生活打下坚实的基础。 二、教学对象分析： 小学六年级学生的观察、分析、比较、想象等能力逐渐成熟，在性格上表现好奇、大胆，追求自己的个性，比较喜欢开放、自由的学习环境，主观意识较强。并具有了一定的自学能力和模仿能力，但学生还多以感性表象来掌握概念，形象思维仍是学生掌握知识的主要思维方式，学生对知识的吸收绝大部分都是建在感性认识的基础上，兴趣爱好仍然是学习最好的动力。因此，这节课利用Internet 网络教学，激发他们的热情，很好地发挥了学生主观能动性和创造性，使学生成为学习的主人，有利于培养学生的创新思维。 三、教学重点、难点： 掌握FrontPage的打开、保存、退出以及在FrontPage中编辑文字。 四、教学策略及教法设计： 根据教材的目标，以及学生的特点，教学的辅助课件是用FrontPage制作的网页，目的是建立一个双向互动的教学环境，使学生在网络的环境下，进行学生之间互相合作学习，与教师互动学习，充分发挥学生的主体作用，老师的主导作用，培养学生协作能力。根据学生的不同层次，建立“三位一体”的教学编排，既照顾全体学生，又照顾不同层次的提高，在“基础层次”中让学生初步按照教材的示范初步制作出文字网页：“练习层次”，强化练习，制作出完全并有一定水平的文字网页：三是“拓展层次”，拓展FrontPage的应用，插入三维艺术字、图片等。 在教法上，教师主要使用了直观演示法、主动尝试法、协作学习法、成功体

frontpage2000网页制作教程(完全版)

第一课从一个网页开始 Frontpage2000教程第二课编辑网页 Frontpage2000教程第三课使用图形 Frontpage2000教程第四课超链接 Frontpage2000教程第五课使用表格 Frontpage2000教程第六课组件的使用 Frontpage2000教程七课使用框架 Frontpage2000教程第八课使用多媒体 Frontpage2000教程第九课站点操作 Frontpage2000教程第十课表单设计 Frontpage2000教程第十一课创建讨论组 Frontpage2000教程第十二课站点的发布 frontpage2000教程第一课从一个网页开始 作者：未知阅读人次：5527 文章来源：未知发布时间：2004-11-20 网 友评论(7)条 认识Frontpage2000 你是否紧跟时代的潮流上了网？你在聊天室里是否听过别人聊起自己的个人主页，你会不会觉得自己没有个人主页就落伍了？有没有想过自己也要做一个主页？想过？那你还瞎呆在那里干什么？赶快阅读本教程，你就该学会制作自己的主页了。 本教程教你学会使用微软公司的Frontpage2000，学会干什么？当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作，需要懂得大量的计算机知识。我现在要告诉你，你错了。在这个流行图形操作系统的今天，制作主页不再需要你去学习复杂，烦躁的HTML语言了，你只需要知道一个概念：主页（也称网页，怎么样称呼都无所谓）就象一张白纸，你可以在上面写字，画画等等，通过自己的设计，那张白纸可以变成很漂亮。做主页时就是这个概念，只不过我们写字，画画是用笔和白纸，而做主页我们是用鼠标，键盘和Frontpage

简单的网页制作教程-设计一个个人网站

题目：设计一个个人网站 一、要求： 1．使用Dreamweave网页工具制作一个个人网站； 2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。 3．网页中要有图片和文字内容，用表格进行页面布局； 4．添加至少两种行为，并为首页添加背景音乐。 5. 在网站中设计一个表单页面。 6. 首页必须包含页面标题，动态按钮导航栏。 首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字， 不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图 打开Dreamweaver软件，得到图 做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。 选择站点——新建站点。 我们建的文件夹就是站点根文件夹。

新建站点后得到这样一个界面 点选高级，得到界面 站点名称与我们建文件夹得名字相同，zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs， http地址为http://localhost/zs

接下来选择左侧栏里远程信息 点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹 接下来点选左面菜单里的测试服务器， 点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。 下面看老师的第一条要求，是要至少四个网页，那我们就做四个 单击新建，然后单击 接下来，选择 然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，

怎样制作网页制作网页详细操作步骤

怎样制作网页制作网页详细操作步骤 怎样制作网页制作网页详细操作步骤 制作网页主要有以下一些工具 Frontpage：office自带的一个工具，操作简单，实用，学起来 比较轻松，功能不咋地，我不太喜欢。 Dreamweaver：这是网页三剑客之一，专门制作网页的工具，可 以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具，例如写字本、EditPlus等， 这些工具主要编辑asp等动态网页。 大型的网站往往还需要数据库的支持，所以还得懂数据库。sql、甲骨文等。 总之，掌握好网页制作，能独立完成一个网站的制作工作，那就不要考虑吃饭问题。随便混就好了! 网站设计八步骤 由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一 行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为 什么呢?常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢 大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵 循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站

那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的 特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要 是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围 内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸 引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站 就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可 以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为 自己制作网页的素材。 三、规划网站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座 漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只 有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有 吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。四、选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制 作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民 选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等;动画制作工具，如Flash、Cool3d、GifAnimator等;还有网页特效 工具，如有声有色等，网上有许多这方面的软件，你可以根据需要 灵活运用。

怎样制作自己的网页

和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具：字体：大中小 一 首先，可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样，是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次，要清楚学习它是用来做什么。 建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，对网页设计感兴趣，有较充足的学习时间，熟悉office办公软件。当然，这些不是一定必须的。 第一阶段：开始时最好是学些网页编辑软件，如：FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学，结合教程边学习边制作。 第二阶段：会用网页制作软件后，已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美，还是学习网页的核心技术吧！网页编辑语言（包括:html、css、javascript、asp、xml等）。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站，可以开发出别人给你定义的目标网站。到了这个时候，你就成为真正的网站开发者了。 怎样制作网页，不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要，希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到大的网站如新浪、网易去先买一个个人空间，大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版，这个软件最大的特点就是“所见即所得”，也即是制作过程中看到的，便是到时发布到网络上的。 二、教程

会考专题之网页制作操作题

会考专题之网页操作题 上机前准备：请同学们们下载天安门的图片、一张蛋糕图片到c:\windows文件夹下，并分别取名为“天安门.jpg”和“蛋糕.jpg”以备后面操作使用。 用Frongtpage（网页制作软件）实现下列操作： 1、设置网页背景、插入超链接 C:\ata_mso\testing\154752-566\frongtpage_bo3\国庆.htm页面进行以下操作： （1）将网页的背景颜色改为红色。 （2）在网页上输入文本“天安门”，并把天安门建立超链接，链接到图片天安门.jpg （3）将该网页另存为“中华.htm”仍保存在： C:\ATA_MSO\testing\154752-566\frongtpage_bo3\文件夹下。操作步骤： ①点击屏幕左下角的图标启动frontpage。 ②设置网页背景：右单击网页空白处，执行“网页属性…”,打开格式标签，设置背景颜色为红色。 ③插入超链接：输入文本“天安门”→选中“天安门”→单击“插入”菜单→选择“超链接”→在左边选择“原有文件或网页”→然后在查找范围中按照给定的位置找到并选择“天安门.jpg”→确定。 ④保存：“文件”菜单→“另存为”→找到保存位置→文件名为“中华.htm”→保存。

2、设置网页标题、输入文字、插入图片 用Frontpage创建空白页面并进行以下操作：（1）将网页标题设为“爱我中华”。（2）在网页中输入文字“隆重庆祝新中国成立60周年”并将字体设置为黑体、24磅、居中，颜色为红色。（3）在文字下放插入一张名为天安门.jpg的图片 （4）将该网页命名为“index”，保存在C:\windows文件夹下。操作步骤： ①点击屏幕左下角的图标启动frontpage。 ②设置网页标题：右单击鼠标，执行“网页属性…”,在常规标签的标题栏中输入标题，“爱我中华”→确定。 ③在网页中输入：隆重庆祝新中国成立60周年—选中文字—格式—字体—依次设置字体为黑体、字号为24磅—确定，利用“格式工具栏”设置：对齐方式为居中、字体颜色为红色。 ④插入图片：“插入”菜单→图片→来自文件→选定“天安门.jpg”→插入。 ⑤保存。“文件”菜单→保存→找到保存位置→文件名为“index.htm”,保存类型选“网页”→保存。 3、设置网页背景、插入表格、插入图片 用Frontpage对d: \birthday.htm页面进行以下操作： （1）将图片d:\图片\背景.jpg 设置为该网页的背景

简单网页制作教学设计

《简单网页制作》教学设计 一、设计意图： 目前网络对学生的吸引力很大，学生上网都会浏览网页内容，对网页的制作也有很大的兴趣，想知道一个网页是怎样制作成功的。但是网页的制作相对复杂，对于一些的代码的编辑学生也较难理解，因此本课选择了FrontPage网页制作工具，引导学生简单的了解网页制作的过程，采用了所见即所得的形式避开代码的繁琐，调动学生自行设计的积极性，对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 （1）理解网页制作的简单步骤。 （2）学会用FrontPage的制作简单网页。 2、技能目标 （1）掌握的FrontPage的背景添加的操作。 （2）掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 （3）知道HTML的简单编码。 3、情感目标 （1）培养学生的口头表达能力、操作和分析概括能力。 （2）培养学生展示自我、表现自我的能力。 （3）培养学生独立思考问题、解决问题的能力和团结协作精神。 （4）在网页制作的过程中，提高学生对FrontPage的认识。三、重难点、问题预测及对策

1、重难点 （1）重点：FrontPage的基本操作。 （2）难点：HTML的理解。 2、问题预测 本节课是网页制作的第一节内容，需要学生掌握的技能并不困难。由于在学习网页制作的过程中，需要培养学生的制作网页的积极性，才能引发学生对网页制作的兴趣，实现自主学习，自主开发。 3、对策 以制作班级自己的主页引起学生注意，引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具，通过作品展示激发学生的动力。 在教学过程的设计上，通过自主设计自己的个人主页来达到解决一个个知识点的目的，同时通过学生自己创作，引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入：通过优秀班级主页欣赏，引发学生兴趣，跃跃欲试。 2、自主学习：引导学生做自己班级的主页。 3、示范教学：学生归纳总结，老师帮助、提醒，使学生掌握正确的操作步骤。

实验一做一个简单的html网页

实验报告 学生姓名：学号： 一、实验室名称：软件大楼302 二、实验项目名称：用HTML语言制作简单的网页 三、实验原理： 1.网页 （1）网页就是在浏览器上看到的一页，网页也称为Web页。 （2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内 容的作用。 （3）超链接是网页中的特殊标记。它指向了WWW中的其他资源，如其他 网页、网页的另一个段落、声音文件等。这些资源可以位于自己的计算机上，也可以位于其他计算机上。用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。 2.HTML语言 （1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。 （2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microso ft Word等。保存时要将脚本保存成纯文本格式，扩展名必须是.htm。 （3）HTML脚本的基本结构。HTML脚本总是以标记开头，标记结尾，在和标记之间是HTML的所有内容， 一般情况下它分为两部分：头部和主体。头部总是由和标记定义

的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以作为起始标记，作为结束标记，其中所包含的就是在 浏览器中所看到的内容，包括文字、图片、动画等。 3.FrontPage，dreamwerver，notepad 以FrontPage为例，它是一种简单易学的Web管理和网页制作的软件。Front Page2000的窗口，如图1.1所示。 在窗口工作区的左下方是网页视图模式的3个状态按钮：“普通”、“HTM L”和“预览”。网页视图模式的默认状态是“普通”，用于以所见即所得的方式编辑网页。“HTML”网页视图模式用于以HTML语言的方式编辑网页。 制作网页过程中，想查看网页的制作效果，切换到“预览”网页视图模式即可。 切换网页视图使用鼠标单击相应的状态按钮即可。 图1.1 FrontPage 2000的窗口 选用其他网页开发工具也是可以的这里没有限制 四、实验目的： 1.简单了解HTML语言。 2.认识网页以及网页的结构。 3.掌握用HTML语言制作简单网页的方法。 五、实验内容：

制作一个简单的电子商务网站

电子商务大作业

作业要求 制作一个简单的电子商务网站，具有以下功能： 1) 能进行用户注册、登录。用户信息保存在数据库中。 2) 能对商品信息进行维护：增加、删除、修改。商品信息保存在数据库中。 3) 实现简单的购物车功能，能对所选择的商品进行列表显示，并对价格进行统计。 纸质报告要求： 1) 实现过程说明 2) 数据库设计说明 3) 运行效果 4) 主要源代码

一、创建用户注册、登录。用户信息保存在数据库中 1) 创建数据库表 在MySQL 中创建一个名为homeworks 的数据库，并在该数据库中创建一张名为User的表格。字段名数据类型 2) 安装所需的第三方软件包 在testapp/WEB-INF 新建lib 目录，并将以下需要的第三方软件包拷贝到lib 目录下：jstl.jar、standard.jar、mysql-connector-java-5.0.7-bin.jar。 3) 配置 JDBC 数据源 web.xml页面类容如下： javax.servlet.jsp.jstl.sql.dataSource jdbc:mysql://localhost:3306/homeworks?user=root&password=root,com.mysql.jdbc.D river Servlet and JSP Examples. Servlet and JSP Examples Test Test A test Servlet test.ServletTest Test /Test

网页制作教程指导

第一章网页设计基础 教学目的： 本章将带领用户认识Dreamweaver MX，了解其新增功能。在开始学习该软件之前，了解一下Dreamweaver MX 的工作界面的一些简单设置。通过本章的学习，用户能熟悉Dreamweaver MX的工作界面，并能自行设置具有独特的个性化的工作环境。理解DW站点的作用，并掌握建立站点的方法及站点维护的方法。 教学重点： 1、认识Dreamweaver MX。 2、新增功能。 3、Dreamweaver MX主窗口。 4、自定义工作环境。 5、利用Dreamweaver建立站点的方法 教学难点： 1、认识Dreamweaver MX。 2、新增功能。 3、自定义工作环境。 教学方法：讲演法 教学课时：2课时

教学内容与教学过程： 一、介绍网页制作这门课程 1．学习这门课程的目的：让学生掌握HTML语言、以及利用相关网页制作工具制作网页的基本方法与技能。学生通过这门课程的学习，能够具备综合运用专业软件进行小型网站开发和静态网页页面设计的能力，同时积累一定的实践经验，为今后从事相应的网站设计制作工作打下良好基础。 2．这门课程的教学内容：在制作软件上：以网页制作软件DreamWeaver MX为主干进行网页制作教学，同时选择了Flash MX版本来制作网页中的动画素材，选择了图形图像工具Photoshop 7.0版本软件来处理和制作网页中的图片。教学内容安排上按照学生学习网页的渐进规律划以及学校制订的计划主要学习第1、2、3、5、6、9章，主要包括网页制作的基础知识、Dreamweaver MX软件的使用，初学者利用现有的素材设计制作出一个简单的网页；利用Photoshop7和Flash MX软件来美化网页，以及网页布局和用色方面的美术知识，如何设计网页的版面和结构，还要能对供给的素材按照网站的特点进行适当的美化处理；还能掌握中小型网站的建立方法。 3．这门课程的教学和学习方法：教学上以一个个案例为基础，采用项目教学的方法，由浅入深的介绍网页制作的各个知识点；教学中以学生会操作为目的，重视学生动手能力和自学能力的培养同学们学习时除了要掌握相应的操作技能以外，更要重视操作技能的使用，要努力完成每章教学案例的制作以及课后素材案例。在不断的练习过程中熟悉和升华所学的操作技能。同时，要学会学习，即要学会与老师或同学之间技术心得的交流，要学会能自主的依靠其他资源（网络、报纸杂志等）来扩展所学的知识体系。 课前思考： 1、Dreamweaver软件是干什么用的？ 2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？ 3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？ 4、双击网页文件，会自动打开Dreamweaver软件吗？这点上与Word软件相同吗？ 1.1 Dreamweaver的基本概念 1、了解Dreamweaver与IE有什么区别？ Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。 2、做网页只能使用Dreamweaver一种工具吗？ 常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。 3、Dreamweaver最新版是多少？ Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。 4、Dreamweaver与Firework、Flash有何关系？ 它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。 1.2认识DreamWeaver 1.DreamWeaver的作用和特色 2.DreamWeaver功能界面的分解 3.DreamWeaver工作流程 4. DreamWeaver 的版本、安装、打开、保存等操作演示：练习制作第一张网页——作业一在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。

制作一个简单的网页

制作一个简单的网页 教学目的：1、使学生初步认识Frontpage 2000中文字的添加。 2、使学生初步利用Frontpage 2000制作简单的网页。 教学软件：Frontpage 2000。 教学过程： 一、复习导入新课： 上一课同学们已经学会了如何启动Frontpage 2000，并且知道Frontpage 2000是用来制作网页的工具，但是有了好的工具我们还要学会如何来利用它做出好的网页来。今天我们就来学习如何制作一个简单的网页。 二、新授课程 1、启动Frontpage 2000。 2、根据下列步骤进行。 （1）请同学们单击工具栏上的“新建”按钮，建立一个新的网页。注意讲解这个时候看不到任何东西。 （2）请同学们利用键盘输入文字：“欢迎进入星星网！” （3）请同学们按照要求设置字体和对齐方式。选择字体大小为7号字，并选择对齐方式为居中方式进行。 （4）通过键盘自己调节文字在页面中的位置。 （5）完成后可以请同学们在“编辑区”点击“预览”方式看看作完后在网页的显示效果，如有不满意及时调整。 （6）完成后教师可以选折先做好的同学演示给没有完成的同学看。 三、课堂练习 1、在网页中输入文字“欢迎你的光临！”注意文字设置为7号，并居中显示。 2、请同学们自主练习输入一个自我介绍的网页内容，教师可以指定文字内容和设置的格式，也可以由学生自己设置。要求保存到（D:\班级名\自己名字）为以后的课做准备。 修饰网页中的文字和背景教案 【教材使用】宁教厅审定山东教育出版社出版软件FrontPage2000 【适用年级】初二年级 【适用单元】网页制作第2节 【教学目的】 1．知识目标 （1）掌握用网页编辑软件打开网站和修改网页的基本方法。 （2）学会对网页中的文字进行各种修饰。 （3）学会为网页设置背景图片。 （4）学会使用水平线美化网页。 2．技能目标 通过学生探究学习过程中，掌握美化网页的基本操作。 3．情感目标 （1）通过动手实践，培养学生的审美情趣。 （2）培养学生在学习过程中自主探究、对比、举一反三的学习能力。 （3）利用知识的迁移，培养学生的综合信息素养能力。 【课时安排】1课时

网页制作操作一

网页制作操作一 一、实验范例 1．在C:\创建站点FL19。 2．打开网页index.htm，将jxydjs.txt中标题和前三段文本复制到index.htm中。 3．将标题文字“极限运动（Extreme--Sports）介绍”放置在独立的一个段落中，并设置格式为华文行楷、24像素、#000066、居中；设置正文首行缩进2个汉字的位置；在标题上方插入一条高为3像素的蓝色水平线。 4．在网页的开头水平线上方采用默认对齐方式插入一张图片logo.gif，在图片下方增加左右交替滚动的文字“极限运动风靡全球”，字体为幼圆、14像素，文字在蓝色(#6699FF)背景上滚动，滚动延迟时间为300毫秒。 5．在滚动文字的下方依次插入图片n01.gif、n02.gif、n03.gif、n04.gif；利用站点中的Applet程序文件fprotate.class，逐张播放图像t1.jpg、t2.jpg、t3.jpg和t4.jpg，大小为高70、宽180；在logo.gif右边插入falsh播放文件1.swf。查看并测试网页。 二、实验内容 1．利用实验素材创建站点SY19。 2．在站点SY19新建网页index.htm，设置网页标题为：蔬菜；将lssc.txt中的文本复制到index.htm。 3．将网页index.htm标题文字“绿色蔬菜”的格式设置为华文新魏、24像素、#6633CC、居中；将标题文字“绿色蔬菜”下面的一段正文首行缩进2个汉字的位置；把原来的数字编号的段落修改成默认项目列表的段落。 4．在index.htm网页的开头(标题文字“绿色蔬菜”上面)采用默认对齐方式插入图片logo.gif，在文档末尾增加左右交替滚动的文字“环境保护，人人有责”，字体为隶书、16像素，文字在绿色背景(#00FFFF)上滚动，滚动延迟时间为100毫秒。 5．为index.htm网页增加循环播放的背景音乐can.mid；将网页中文字“食用菌类”修改成华文行楷、16像素、转滚颜色为#000066的Flash文本；将网页中文字“海藻类植物”修改成Flash按钮，按钮样式：Beveled-Rect-Green，字体为华文楷体、大小为16像素。 6．把index.htm网页滚动的文字“环境保护，人人有责”下方输入自己的完整学号、姓名，并设置自行选择适当的格式（例如文字格式、字幕、Flash文本等）。 7．在网页index.htm的设计窗口首行输入文字：绿色建筑，并在代码窗口对该行作如下

初学者如何做一个最简单的网页.

怎么样做网页一、制作网站前的准备可以使用一种汉字输入方法，快慢不拘。会用IE点击上网并浏览网页知道一些最最基本的术语，例如说超级链接你知道点一下就能到别的网页去，这个相信你也会吧。你会使用office 软件——没听说过？WORD知道吧？就是你打字的东东。你肯定打过什么文稿之类的东东吧，那就得用到WORD，要不WPS也行，反正一定得会使用这样的软件，不然你就没办法实现制作网页的那些功能。 OK，假设你上面这些东东你全都会的话，那就可以制作网页啦。二、制作网页前必须了解的东东为了使我们这个教材真正实现谁都学得会，谁都看得懂，我决定不在这个教材里说任何专业的东东，我们是想做网页而不是想当网络管理员，更不需要为考什么等级而努力。所以我将这教材定位在最最简单明了的基础上，有些地方写得恐怕你看了也会说一声“弱智”，不过请相信，网上一定还有比你还弱智的朋友等着这些提示呢。呵呵，那么，开始制作啦！首先，我们需要有必要的软件来制作网页。我推荐你使用 Frontpage2003（没听说过吗？那我给你解释一下，你去街角的卖盗版盘的老板那问问，有FRONTPAGE2000全版的没有？老扳就会热心的给你一套OFFCE2003，说这就是了，然后要你买下），这个软件同 WORD，EXCEL之类软件一样，是OFFICE系列的一员，安装OFFICE的时候将它也装上，你就能做网页啦，别担心你不会用，我会手把手教你做的。如果你不会装OFFICE，那就请你哪位哥哥帮你个小忙，请他为你装上，其实一点也不难装。好，假设你安装好了FRONTPAGE2003（FRONTPAGE2000也可，不过使用起来没有FRONTPAGE2003顺手），我就是用的FRONTPAGE2003，所以教材上也以此为准。喂，你先别得意，有了这个FRONTPAGE2003是可以做网页，不过还得有其它一大堆软件你才能做得和我的馨香小憩站一样呢，你要学的东东多着呢，千万别得意哦。三、正式开始啦好，打开FRONTPAGE2003，第一次进入左边会有个烦人的什么视图窗，这东东用不着，关掉它！怎么关？记好了，方法如下：点击上面那菜单条——选查看——在菜单上那个标有“视图栏”的小勾上点一下，呵呵！会了吧，为了简明起见，这个操作我将写为菜单——查看——视图栏记住了吗？这样你看着省心我打着省事，皆大欢喜 :- 现在出现在我们面前的是一个空白的页面。 1、给这个网面起个名字，怎么起？请看方法：菜单——文件——另存为……——（选择你想保存的文件名、

制作一个简单的网页 教学案例

制作一个简单的网页教学案例 【课时安排】1课时 【教学内容分析】 本节课的主题：让学生了解网页概念并利用FrontPage软件制作简单的网页，学会建立网站的制作流程并建立一个只有文字的网页，本课是用该软件创建以“诗文荟萃”为主题的网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理念，增强学生的动手能力，提高学生的综合素质。 以教材为基石，作为构建知识的桥梁，依据《课程标准》，创造性、合理的对教材进行二次开发与重组。如：导入新课时，利用学生对美好事物的向往，激发学生的求知欲和学习兴趣；采用任务驱动教学，增强学生自学能力；充分采用教材资源，使学生学会自学，并有的放矢；对学生的评价方式，采用学生作品展示，是学生学习的一个延续，对学生学习起到一种推进的作用。 【分析教学对象】 1、学生的年龄特点和认知特点 八年级的学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于FrontPage的知识了解不多；对网站兴趣较大，但制作知识几乎为零。本节课给学生提出一个初步的任务：创建一网站，并制作一个简单网页，让学生体验初步的成功，这对于今后的学习有很大帮助。初二的学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生自学意识与自学能力。 2、学习者对即将学习的内容应该具备的水平 本课是学生初次认识FrontPage并能应用它制作简单的网页，培养学生综合运用知识解决问题的能力，以及各方面素质的一次综合评价。 【教学目标的设计】 1.知识目标

（1）了解网页的概念； （2）了解建立网站的一般流程； （3）初识FrontPage2003并学会建立网站； （4）学习制作一个只有文字的简单网页。 2.技能目标 学生通过探究学习过程中，掌握网站的建立方法与创建简单网页的操作。 3.情感目标 培养学生在学习过程，自主探究能力和分类汇总知识的能力。 【教学重点与难点】 （1）重点：建立网站、保存网页的方法。 （2）难点：网站与网页的区别，网页文件名与文件标题的区别。 【教学策略设计】 1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握FrontPage的基本知识和技能。 2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在学习过程中，提倡某些问题的分组协作与自主探究。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。 3、是在网络教室中完成的，利用多媒体局域网络，实现教师演示、个别指导、网上交流、作品提交及作品展示评比。在出现共性问题与个别错误时教师可以利用网络教室软件演示和个别指导，在创作作品的同时，生生可以进行网上交流。体现教师的指导、组织作用，学生主体、探究协作地位。 【教学评价设计】

网页制作操作步骤之一

国家职业资格鉴定 《网页设计制作员》（中级/四级）试卷 注意事项： 1、在R盘新建一个考生文件夹，其文件夹名为：机号+网页设计制作员+考生准考证号最 后五位（例：01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。 考试过程中应注意经常保存文件。 2、考试所需素材在S盘：\网页设计制作员素材文件夹内。 3、答题以试题文字要求为准，样张仅供参考。 4、试卷不得带走，否则考试成绩做无效处理。 一、设计制作网页内容文字和图表效果：共20分。（题库1.1.1试题单） 1. 在R:\ 01网页设计制作员90001目录下新建1.1.1文件夹。 2. 把素材库文件夹“网页设计制作员素材\1.1.1”内的“1.1.1.2文件夹”中的zc.htm和images文件夹复制到R:\ 01网页设计制作员90001文件夹中。打开素材库文件夹“网页设计制作员素材\1.1.1”内的样张“1.1.1.1.bmp”。 3. 用Dreamweaver8.0打开R盘（考生目录1.1.1文件夹下）的zc.htm文件， 2种打开文件的方式：1）打开Dreamwaever8.0软件，菜单里选择打开，选择zc.htm文件。 2）右击zc.htm文件，“使用Dreamweaver 8编辑”。 4. 在适当位置插入图片zc-1.gif,并在“替换”中键入“用户注册”（添加注释）；如下图： 5. 在用户注册后的两列中设置背景图片为zc-4.gif，如下图： 6. 在CSS浮动面板中新建CSS规则，名称自定（如ziti），单选按钮选“仅对该文档”（内部标签）；如下图：

在类型中选择 a）大小：12像素；b)行高：2倍行高； 7. 按样张填入表单对象、文字，并设置CSS样式。 8. 布局表格内适当位置添置按钮对象，值为“检查会员名是否…”，并设置表单对象的动作属性为无；如下图： 9. 布局表格内适当位置添置按钮对象，值为“同意以下服务条款…”，表单对象的动作属性为“提交”；如下图:

相关主题
相关文档
最新文档