现代教育技术第12章--简单的学习网站设计课件.ppt

《现代教育技术第12章--简单的学习网站设计课件.ppt》由会员分享，可在线阅读，更多相关《现代教育技术第12章--简单的学习网站设计课件.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验第第1212章章 简单的学习网站设计简单的学习网站设计结束结束目录目录第第2页页 第12章 简单的学习网站设计本章要点12.1 实验目标12.2 实验要求12.3 实验内容12.4 实验过程和步骤12.5 实验作业12.6 自主实验参考题目 实验实验 第第12章章结束结束目录目录第第3页页12.1 实验目标1掌握html文件的建立、保存及文件背景的设置方法。2掌握利用Dreamweaver CS4创建站点和网页文件。3掌握样式表的实现原理。4掌握div+css网页布局的基础使用。5学会利用Dreamweaver CS4制作简单的作品。6掌握网页的浏览方法。实验实验 第第12章章结束结束目录

2、目录第第4页页12.2 实验要求1建立html文件并完成简单静态页面制作，学会对Dreamweaver CS4工具面板的操作。2掌握div+css布局的基础知识。实验实验 第第12章章结束结束目录目录第第5页页结束结束目录目录第第6页页12.4 实验过程和步骤12.4.1 实验 制作一个简单的古诗黄鹤楼的学习网站1思路先建立站点，再设计网页布局图（psd格式），然后建立一个html文件，将设计内容以html格式文本写入，加入样式表。最终微调布局，通过快捷键调用系统浏览器预览测试页面，直到符合要求，选择正确文件类型保存文件。实验实验 第第12章章2过程和步骤（1）启动Dreamweaver CS

3、4，打开Dreamweaver CS4欢迎界面，如图12-1所示，选择欢迎界面下方的“不再显示”，则再启动时不会显示欢迎界面。选择“Dreamweaver站点”项。为站点设置名字，如“zhou”，按向导将站点定义在“F：”盘，如图12-2所示。图12-1 Dreamweaver CS4欢迎界面 图12-2定义站点结束结束目录目录 实验实验 第第12章章（2）设计网页布局启动PhotoShop CS4建立一个新文件，如图12-3所示，进入Photoshop CS4设计界面，如图12-4所示。设计好的图片请注意保存，此图片将作为网页布局的参照，即要求网页最终效果与设计图片一致。图12-3 Phot

4、oShop CS4启动界面 图12-4 Photoshop CS4设计界面结束结束目录目录 实验实验 第第12章章（3）创建html文件 利用“文件”菜单下“保存”选项，将文件以“index.html”命名并且另存到指定位置，如图所示。图12-6 保存“index.html”文件结束结束目录目录 实验实验 第第12章章（3）创建html文件 在“插入”选项卡中，选择“插入Div标签”选项，填入规划好的Div标签相关信息，如图12-7和图12-8所示。图12-7“插入”选项卡 图12-8 插入Div标签信息结束结束目录目录 实验实验 第第12章章（4）将提前准备好的文字图像等导入站点文件夹，分类

5、放好，并添加内容 利用“站点”标签下的“站点管理标签”选项进入站点管理界面，如图所示。结束结束目录目录 实验实验 第第12章章（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容 单击“格式”菜单，选择“css样式”下的“附加样式表”选项。进入链接外部样式表界面，如图12-11所示。链接成功后html语言显示如图12-12所示。图12-11 链接外部样式表 图12-12 成功后html语言显示结束结束目录目录 实验实验 第第12章章（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容 将光标移至对应位置，单击“插入”“图片”，插入名为“bg.jpg”，即背景图片，如

6、图下所示，其他素材同理导入结束结束目录目录 实验实验 第第12章章（5）通过“文件”菜单“新建”选项新建css样式表，并且和html文件链接操作方法参考（4），如图12-15图12-18所示。图12-15 创建并编写初始化css文件 图12-16 将创建好的初始样式表嵌入html文件点结束结束目录目录 实验实验 第第12章章（5）通过“文件”菜单“新建”选项新建css样式表，并且和html文件链接操作方法参考（4），如图12-15图12-18所示。图12-18 css文件编写完成图12-17 编写各个结构的css样式结束结束目录目录 实验实验 第第12章章（6）利用“文件”菜单下“在浏览器下预

7、览”选项，任选一款浏览器（依个人计算机安装浏览器情况定），进行网页预览（见图12-19）。可利用该步骤发现布局的不合理处，并进行修改（预览网页可按键）。设计好的网页页面如图12-20所示。图12-19 选择预览网页的选项 图12-20 设计好的页面结束结束目录目录 实验实验 第第12章章（7）微调css布局。对预览中发现的不完善的细节问题进行微调。（8）保存文件。将制作的网页进行保存，可利用菜单或按快捷键+，在弹出的“另存为”对话框中选择相应的选项完成保存工作，如图所示。结束结束目录目录 实验实验 第第12章章结束结束目录目录第第22页页12.5 实验作业制作一个介绍种子发芽过程的小型网站，要求自行收集资料，网站内容清晰、准确，图文并茂。实验实验 第第12章章结束结束目录目录第第23页页结束结束目录目录第第24页页 实验实验 第第12章章