河北版信息技术七年级下册《设计网站与制作首页》教学设计
有何不可歌词-高林生的歌
设计网站与制作首页
本单元安排的是使用Dreamweaver制作个人网站,展现自我风采。
本课主要介绍网
站、网页等概念,网站设计制作流程,认识Dreamweaver工作界面,设计、
制作个人网站的首
页。
b5E2RGbCAP
本课首先让学生了解什么是网站,什么是网页,网站和网页的关系
。明确网站主题、名称、
栏目结构、网页版面等在网页中的作用,了解常见的几种网页版面布局。
p1EanqFDPw
建议2个课时完成。第1课时学习制作网站前需要了解的内容和熟悉网页制作
工具——
Dreamweaver的使用。第2课时学习设设计个人网站并制作网站的首页。
D
XDiTa9E3d
设计个人网站首页
网页设计包括内容设计和布局结构设计。在制作网页
前需要搜集、整理网页中需要的素材,
包括文字、图片等形式。确定首页的页面布局方式,合理安排首页
中的栏目。
RTCrpUDGiT
教材在设计个人网站前先介绍了网站和网页的关系,让学生
首先对网站和网页两个概念有
一个了解和界定,知道网站是由网页通过超连接非线性组成的。设计制作网
站,就要明确网站
的主题,名称及栏目结构等,还需要准备相应的素材。这些工作可以是同时进行的,也
可以分
步进行,相互补充。
5PCzVD7HxA
对于本课,在正式设计制作网站前
,需要了解的东西很多,学生可以根据教材的介绍,也
可以自己上网搜集想了解的更多内容。充分发挥自
己的想像力和主动性,设计制作出具有自己
个性的网站。
jLBHrnAILg
教材
为个人网站设计了“我的小传”、“我的相册”、“小喇叭”、“我的作品”等六个栏目,
学生还可以根
据自己的爱好、特点自行设计其他栏目,教师不必统一约束。
xHAQX74J0X
熟悉Dreamweaver
学生能自主认识Dreamweaver工作界面,教师指导学
生观察整个界面的组成,动手尝试使
用各个菜单,了解Dreamweaver的各种工具。在这里,避
免教师演示各个工具的位置,讲解各
个工具的作用,让学生活动中亲自体会,不断尝试使用,在使用的过
程中了解工具,掌握工具
的使用方法和作用。
LDAYtRyKfE
定义本地站点
定义本地站点是制作网站前的准备工作。所谓本地站点,就是指本地硬盘中存放远程网站
所有文
档的文件夹。通常建立网站时,在本地硬盘建立一个文件夹,用来存放网站的所有文件,
以后就在该文件夹中创建和编辑文档。待网页制作和测试好后,使用远程上传工具把它们上传
(发布)到
服务器上,供浏览者查询浏览。对于站点文件夹的理解,教师可以举例学生平时经
常浏览的网站来介绍,
介绍中说明我们平常看到的网页只是整个网站中的一页,制作时需要把
网页归到网站中去,这时就需要建
立网站文件夹来容纳网页以形成网站。学生对站点的理解以
及如何建站点,需要在反复练习中掌握,本课
教材提供了定义本地站点的详细步骤和必要提示,
教师可指导学生按此步骤,完成定义站点。
Z
zz6ZB2Ltk
定义站点之前,要做好站点结构规划,如果制作之前没有对整个站点的结构进行认
真的研
究,日后的维护工作将会很大。因此,一开始就要精心规划好整个站点,把站点资源分门别类,<
br>存于不同的文件夹中,便于日后的维护与管理。下图是一个简单的站点结构:
dvzfvkwMI
1
在站点结构中,文件夹一般用自己便于记忆的英文单词或缩写来命名,如image文件
夹用
来存放与网页设计有关的图形图像,Webpage文件夹用来存放与网页设计有关的网页,dat
a文
件夹则存放数据库方面的内容,这样便于查找和管理,在需要的情况下,还可以创建子文件夹。rqyn14ZNXI
用表格布局首页
教师要让学生明白,网页上丰富内容的自如排列
其实是被许多隐藏着的“虚线”所束缚,
这些“虚线”就是表格线。表格在网页制作中起着对内容对象进
行排版的重要作用。教师指导
学生按照教材的指导插入表格,表格中插入表格被称为表格的嵌套,如教材
中在“导航区”插
入5行1列表格等。使用表格嵌套时层次要尽量少,因为表格嵌套层次越多,下载速度
越慢。
表格布局完成后,教师指导学生通过“属性”面板设置表格属性,根据内容,调整表格大小,设置网页背景等,美化网页。
EmxvxOtOco
添加首页内容
在页面中适
当地添加图片会使网页丰富多彩,但过多地加入图片会降低页面的下载速度,
特别是对通过调制解调器访
问网页的用户。大多数图片都是采用压缩格式,有的调制解调器不
具有压缩功能,这种调
制解调器速度更慢。因此在插入图片时,应认真选择和进行规划,应适
度使用较少颜色,缩小高度和宽度
或裁剪图形、降低图形的分辨率,尽可能地减少图形文件大
小,如用压缩格式的文件类型。
SixE2yXPq5
注意图片文件要保存到image文件夹中,否则不能正常显示。学生
可以事先把准备的图片
素材就保存在image文件夹中。
6ewMyirQFL
实践与探索
为班级设计一个主题网页。教师可以组织学生根据本班实际情况,讨论网页所需包
括的栏
目、内容,学生可以分别按照自己的布局规划完成网页。
kavU42VRUs
【文本资源】
什么是Dreamweaver
Dreamweaver
是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得
网页编辑器,它是第
一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻
而易举地制作出跨越平台限制和
跨越浏览器限制的充满动感的网页。
y6v3ALoS89
DREAMWEAVER、FLA
SH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS,
三者被M
ACROMEDIA公司称为DREAMTEAM(梦之队),足见市场的反响和MACROMEDIA公司对它
们
的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程,随着互联网(Int
ernet)
的家喻户晓,HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编
辑器基
本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器),两者各有千秋。所见则所得网页编辑器的优点就是直观性,使用方便,容易上手,您在所见即所
得网页
编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在
着致命的弱点:
M2ub6vSTnP
一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见
即所得网页编辑器
中制作的网页放到浏览器中是很难完全达到您真正想要的效果,这一点在结构复杂一些
的网页
(如分帧结构、动态网页结构)中便可以体现出来;
0YujCfmUCw
二、 页面原始代码的难以控制性,比如您在所见即所得编辑器中制作一张表格也要几分
钟,但
您要它完全符合您要求可能需要几十分钟,甚至更多时间。而相比之下,非所见则所得
的网页编辑器,就
不存在这个问题,因为所有的HTML代码都在您的监控下产生,但是由于非
所见则所得编辑器的先天条
件就注定了它的工作低效率。如何实现两者的完美结合,则既产生
干净、准确的HTML
代码,又具备则见则所得的高效率、直观性,一直是网页设计师梦想。在
DREAMWEAVER之前,
FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器,但是它同
样继承了所见即所得
的种种劣性。但是我说过这是在DREAMWEAVER之前,现在我无意说
DREAMWEAVER已
经实现网页设计师的梦想,但我觉得DREAMWEAVER正在努力向这个梦想一步步
走去。
eUts8ZQVRd
DREAMWEAVER特点:
1.最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks,Free
Hand,或Photoshop等档案移至网
页上。使用检色吸管工具选择荧幕上的颜色可设定最接近
的网页安全色。对于选单,快捷键与
格式控制,都只要一个简单步骤便可完成。Dremweaver能
与您喜爱的设计工具,如Playback
Flash,Shockwave和外挂模组等搭配,不需
离开Dremweaver便可完成,整体运用流程自然顺
畅。除此之外,只要单击便可使Dreamw
eaver自动开启Firework或Photoshop来进行编辑与
设定图档的最佳化。
sQsAEJkW5T
2.网站管理
使用网站地图可以快速制作网站雏形
、设计、更新和重组网页。改变网页位置或档案名
称,Dreamweaver 会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一般语法
的搜寻及置换功能使得复杂的网站更新变得迅
速又简单。
GMsIasNXkA
3.无可比拟的控制能力
Dreamweaver是惟一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的
令您无法想
象。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式
化表格群组,Dreamweaver
支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进
行版面配置。所见即所得 Dream
weaver成功整合动态式出版视觉编辑及电子商务功能,提供
超强的支援能力给Third-
party厂商,包含ASP, Apache,BroadVision, Cold
Fusion,iCAT,
Tango与自行发展的应用软体。当您正使用Dreamweaver在
设计动态网页时,所见即所得的功
能,让您不需要透过浏览器就能预览网页。梦幻样版和XML Dre
amweaver将内容与设计分开,
应用于快速网页更新和团队合作网页编辑。建立网页外观的样版,
指定可编辑或不可编辑的部
份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样
版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页
,可以全方位的呈
现在任何平台的热门浏览器上。对于cascading style sheets
的动态HTML支援和鼠标换图效
果,声音和动画的DHTML效果资料库可在Nets
cape和Microsoft浏览器上执行。使用不同浏
览器检示功能,Dreamweaver可以
告知您在不同浏览器上执行的成效如何。当有新的浏览器上
市时,只要从Dreamweaver的网站
再下载它的描述档,便可得知详尽的成效报告。
TIrRGchYzg