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

（4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容 ④ 将光标移至对应位置，单击“插入”→“图片”，插入名为“bg.jpg”，即背景图片，如图下所示，其他素材同理导入 结束 目录 实验 第12章 （4）将提前准备好的文字图像等导入站点文件夹，分类放好，并添加内容 ⑤ 将光标移至对应位置，单击“插入”→“超链接”，如图所示，单击“确定”按钮，插入超链接，其他链接同理插入。 结束 目录 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 结束 目录 第*页 实验 第12章 第12章 简单的学习网站设计 海南师范大学 信息科学技术学院 第12章 简单的学习网站设计 本章要点 12.1 实验目标 12.2 实验要求 12.3 实验内容 12.4 实验过程和步骤 12.5 实验作业 12.6 自主实验参考题目 实验 第12章 12.1 实验目标 1．掌握html文件的建立、保存及文件背景的设置方法。 2．掌握利用Dreamweaver CS4创建站点和网页文件。 3．掌握样式表的实现原理。 4．掌握div+css网页布局的基础使用。 5．学会利用Dreamweaver CS4制作简单的作品。 6．掌握网页的浏览方法。 实验 第12章 12.2 实验要求 1．建立html文件并完成简单静态页面制作，学会对Dreamweaver CS4工具面板的操作。 2．掌握div+css布局的基础知识。 实验 第12章 12.3 实验内容 本实验完成的主要内容有四项： Dreamweaver CS4的基本操作； 对html标签的掌握； 样式表的编写； div+css布局简单实例。 实验 第12章 12.4 实验过程和步骤 12.4.1 实验 制作一个简单的古诗《黄鹤楼》 的学习网站 1．思路 先建立站点，再设计网页布局图（psd格式），然后建立一个html文件，将设计内容以html格式文本写入，加入样式表。最终微调布局，通过快捷键F12调用系统浏览器预览测试页面，直到符合要求，选择正确文件类型保存文件。 实验 第12章 2．过程和步骤 （1）启动Dreamweaver CS4，打开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 PhotoShop CS4启动界面 图12-4 Photoshop CS4设计界面 结束 目录 实验 第12章 （3）创建html文件 ① 打开DreamWeaver CS4，创建一个初始html文件，以index.html命名另存到站点文件夹，并且插入对应的div。 ② 利用“文件”菜单栏下“新建”选项新建html页面，如图所示。 结束 目录 实验 第12章 （3）创建html文件 ③ 利用“文件”菜单下“保存”选项，将文件以“index.html”命名并且另存到指定位置，如图所示。 图12-6 保存“index.html”文件 结束 目录 实验 第12章 （3）创建html文件 ④ 在“插入”选项卡中，选择“插入Div标签”选项，填入规划好的Div标签相关信息，如图12-7和图12-8所示。 图12