菜单设计制作网站-使用Dreamweaver软件设计并制作完成个人网站，题目自拟。要求有五个连接的网页文件。

原创：找图网 2023-04-22 20:14:06

网页设计中怎样制作级联菜单

可以找个有级联菜单的网站,把他的代码copy过来,自己在改,或者找人改,网上也有免费的下载

使用Dreamweaver软件设计并制作完成个人网站，题目自拟。要求有五个连接的网页文件。

一、认识Dreamweaver

--网页设计与制作教学案例分析报告

【教材分析】

在学习《网页的设计与制作》之前,学生已初步掌握了网络信息的搜索、浏览和下载,以及电子邮件的使用等内容。因此,学生已经具备了获取信息的能力,但多数学生对网站网页的了解也仅仅只停留在这种简单的操作层面上。本节教学中通过网页、网站基本概念的了解,让学生理解网页的基本元素构成和经常使用的构件,了解超文本标记语言HTML,通过对网页制作工具的比较学习,了解不同常用网页制作工具的特点,为下一节的学习打下基础。

【学情分析】

在学习本单元之前,学生已初步具备获取信息的能力,他们学习了网络基础知识,掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。学生希望自己能制作网页,并将网页发布在Internet上。因此学生对本单元学习的兴趣很大。学生在学习本单元前已经学过Word应用软件的使用方法,并掌握一定的文字输入、图片的编辑、表格的插入等技巧,这对于本单元的学习非常有利。

【教学目标】

1.知识与技能

(1)了解网页、网站的基本概念,理解网页的基本元素。

(2)了解基本的网页制作软件的界面和特点。

(3)了解网站的地址标识――URL,超文本标记语言HTML, 了解超文本传输协议HTTP。

2.过程与方法

(1)通过对一个网站网页的分析,了解网页、网站的基本概念,理解网页的基本元素。

(2)通过教师的演示和讲解,初步了解基本的网页制作工具软件的界面和特点。

3.情感态度与价值观

(1)培养学生严谨求实的学习态度。

(2)培养学生学习中勇于探索、崇尚科学的意志和品德。

【重点难点】

重点:网页的基本元素

难点:网页的基本元素,构件

【设计思想】

同学们喜欢上网,但是有一部分学生不能区分网站和网页,在设计时,我首先与语文学科整合,结合语文教材内容,播放《再别康桥》flash动画朗读版,以此来创设快乐课堂学习情境,进而引入徐志摩文学网,让学生思考网站和网页有什么联系?引出本节课的主题,以提高学生的学习兴趣和求知欲望。当学生对网站与网页有了一定的认识之后,引导同学们自主去探究发现构成网页的基本元素有哪些?有什么作用?接着组织学生继续讨论、交流网页中除了三种基本元素外,还有哪些经常使用的构件?然后引导学生查看网页的源文件,从而顺利引导到对Dreamweaver网页制作软件的了解,为本章后面的知识学习作铺垫。

【教学流程】

教学环节教师活动设计

创设情境,激发学生的学习兴趣引入课题

幻灯显示《再别康桥》flash动画朗读版,指出诗很美,作者笔下的康桥更是让人向往,激发学生的求知欲。

引导学生进入徐志摩文学网

,对URL、http作一定的解释。现在大家看到的是什么?(进入到徐志摩文学网页面让学生回答)引出本节课的主题“网站和网页”,让大家思考网站与网页有什么联系?

1、从美学角度出发,创设快乐课堂学习情境

2、与语文学科整合,结合语文教材《再别康桥》,引入徐志摩文学网

3、学生明确本节课的学习主题内容

自主合作探究网页的基本元素教师提问:在徐志摩文学网中,各位同学是否发现了神往已久的康桥,除此之外,还发现了什么?

学生活动:用发现法去找出有关康桥风景欣赏中的任一张图片,再别康桥的诗和徐志摩简介网页.

网站与网页有什么联系?学生讨论之后,教师总结:网站包含多个网页,通过超链接把不同的页面链接起来。构成网页的基本元素有文字、图形和超链接。网页中常见的图象有jpg和Gif。网站的首页即为主页。

学生活动

在桌面上新建一个以自己号次命名的文件夹,进入徐志摩文学网完成以下任务

课堂任务一,触摸网页的基本三要素:

1、要求下载康桥风景欣赏中的任一张图片,文件名改为kq

2、保存«再别康桥»这首诗,复制,粘贴到word文档中,文件名改为zbkq

3、要求下载徐志摩简介网页

网页揭秘刚才我们了解了网页的基本元素、构件,这些不但美化了网页,还丰富了网页内容,增强了网页功能。下面让我们来看一看网页究竟是怎样组织的。以课堂在线网站为例,选择滚动字幕,点击“查看”菜单中的“源文件”命令。

教师总结:网页中包含的文字、图像、超链接和表格等基本元素及构件是由超文本标记语言(HyperText Markup Language,简称HTML)进行描述的。HTML是一种超文本标记语言,由网络浏览器解释执行,最后将解释结果显示出来。几乎所有的网页都是用超文本标记语言编写的,下面就让我们利用记事本来体验一下。

网页制作工具比较1、用HTML语言制作网页,让学生对照老师的任务提示,观察一下一个简单的HTML网页文件的浏览结果变化。

(提示学生选择“查看”菜单中的“源文件”命令进行修改。)<html>

<head>

<title>我的个人主页</title>

</head>

<body>

欢迎大家光临!</font>

</body>

</html>2、用网页制作工具软件制作网页在“文件”菜单中用使用Frontpage编辑上述网页,比较两者特点。

教师总结:除了Dreamweaver之外,还有比较专业的网页制作工具Frontpage,一般我们使用Dreamweaver进行网页制作。

1、学生听、看老师讲解和演示,并思考。2、学生操作实践学生任务:将size="3"改为size="6",color="#FF0000"改为color="#000000",观察其变化。

学生

练习本节课涉及到的基本概念较多,考虑到前面已经有过文字小结,因此,这里改用选择题的形式来帮助学生整理和巩固。

学生完成“课堂在线――网站和网页”中的“课堂练习”。教师巡回检查,个别辅导有困难的学生。

学生操作练习,完成课堂练习。

“在线批改”可以让学生及时纠错,并据此判断学生是否掌握本节课的内容。

交流与评价每位同学学习完本课,并完成实践过程之后对自己的学习情况进行自我评价,完成“课堂在线――网站和网页”中的“交流评价”。指导学生进行自我评价,并根据反馈的结果适当点评。

学生自评,通过大屏幕实时显示评价结果,教师可以及时地点评学生的学习情况。

本课

小结本节课主要讲了网站和网页的基本内容,网页的基本元素、构件及网页制作工具等。

学生对本节课的内容知识进行回忆小结

根据本节课的学习内容,要求学生设计一幅个人网站的主页。

思考、设计,为下面的课做准备

学习

拓展拓展网页构件的使用,让学生根据表单的信息进行注册,查询,通过输入、查询等功能来激发学生的学习兴趣,让学生更能理解学过的数据库管理有关知识。学生注册信息、查询信息

【小结板书】

网页设计制作详细流程

分析如下:

1、首先下载安装Dreamweaver,打开后,新建一个网页,一般选择“HTML”建立网页。选择“经典”界面,有助于我们更便捷使用这个软件。

2、下面选择这三个界面,代码、拆分、设计,一般默认设计界面,对于新手这个功能具有可视化,能更好的制作网页。

3、下面我们来制作网站站点,在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件,并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件,不会丢失。注意文件命名要用英文。下面我用我建立的(篮球资讯网)来介绍,点击右下方篮球资讯网――下拉点击管理站点――点击高级设置――设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页,先学习添加图片。插入――图像――选择素材添加。点击图片,下面属性可以编辑修改图片大小,添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”,下面属性可以设置文本字体、添加超链接等等,点击页面属性,可以详细编辑文本属性。

7、网页基本就是文字和图片的组合,添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件――保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本,点击页面下方属性――链接――点文件小按钮――选中第一个网页,这样篮球资讯网文本变成蓝色。这是网站内部链接,相反就有外部链接。添加如图,一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件――在浏览器中浏览网页,点击网页中两个链接都能到达指定网页。

扩展资料:

网页设计

设计网站要注意两个要点:整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。

风格(Style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。

网页配色小技巧:

1.用一种色彩:这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感;

2.用两种色彩:先选定一种色彩,然后选择它的对比色;

3.用一个色系:简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:

1.不要将所有颜色都用到,尽量控制在三至五种色彩以内;

2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

参考资料:

找图网:设计