现代教育技术 工业和信息化普通高等教育十二五 规划教材 教学课件 作者 周玉萍 第12章 简单的学习网站设计.ppt

《现代教育技术 工业和信息化普通高等教育十二五 规划教材 教学课件 作者 周玉萍 第12章 简单的学习网站设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第12章简单的学习网站设计海南师范大学信息科学技术学院第12章简单的学习网站设计本章要点12.1实验目标12.2实验要求12.3实验内容12.4实验过程和步骤12.5实验作业12.6自主实验参考题目实验第12章12.1实验目标1．掌握html文件的建立、保存及文件背景的设置方法。2．掌握利用DreamweaverCS4创建站点和网页文件。3．掌握样式表的实现原理。4．掌握div+css网页布局的基础使用。5．学会利用DreamweaverCS4制作简单的作品。6．掌握网页的浏览方法。实验第12章12.2实验要求1．建立html文件并完成简单静态页面制作，学会对DreamweaverCS4工具面

2、板的操作。2．掌握div+css布局的基础知识。实验第12章12.3实验内容本实验完成的主要内容有四项：DreamweaverCS4的基本操作；对html标签的掌握；样式表的编写；div+css布局简单实例。实验第12章12.4实验过程和步骤12.4.1实验制作一个简单的古诗《黄鹤楼》的学习网站1．思路先建立站点，再设计网页布局图（psd格式），然后建立一个html文件，将设计内容以html格式文本写入，加入样式表。最终微调布局，通过快捷键调用系统浏览器预览测试页面，直到符合要求，选择正确文件类型保存文件。实验第12章2．过程和步骤（1）启动DreamweaverCS4，打开Drea

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

4、pCS4设计界面结束目录实验第12章（3）创建html文件①打开DreamWeaverCS4，创建一个初始html文件，以index.html命名另存到站点文件夹，并且插入对应的div。②利用“文件”菜单栏下“新建”选项新建html页面，如图所示。结束目录实验第12章（3）创建html文件③利用“文件”菜单下“保存”选项，将文件以“index.html”命名并且另存到指定位置，如图所示。图12-6保存“index.html”文件结束目录实验第12章（3）创建html文件④在“插入”选项卡中，选择“插入Div标签”选项，填入规划好的Div标签相关信息，如图12-7和图12-8所示。图12-7“插

5、入”选项卡图12-8插入Div标签信息结束目录实验第12章（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容①利用“站点”标签下的“站点管理标签”选项进入站点管理界面，如图所示。结束目录实验第12章（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容①利用“站点”标签下的“站点管理标签”选项进入站点管理界面，如图所示。结束目录实验第12章（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容②将各类文件分别放入站点文件夹下子文件夹中。例如，图片文件统一放入“.img”子文件夹中，如图所示。结束目录实验第12章（4）将提前准备好的文字图像等导入站点文件夹

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

7、链接，其他链接同理插入。结束目录实验第12章（5）通过“文件”菜单“新建”选项新建css样式表，并且和html文件链接操作方法参考（4），如图12-15～图12-18所示。图12-15创建并编写初始化css文件图12-16将创建好的初始样式表嵌入html文件点结束目录实验第12章（5）通过“文件”菜单“新建”选项新建css样式表，并且和html文件链接操作方法参考（4），如图12-15～图12-1