1 / 20
文档名称:

网页制作教学案例.doc

格式:doc   大小:5,830KB   页数:20页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

网页制作教学案例.doc

上传人:liwenfei1314 2018/5/26 文件大小:5.69 MB

下载得到文件列表

网页制作教学案例.doc

文档介绍

文档介绍:网页制作培训教程
一、参考教材
《网页制作Dreamweaver》NIT证书考试指定教材以及本教程所附的实验案例。
二、培训目标
掌握网页制作的基本概念、操作步骤和Web服务器的简单配置,能按要求制作出一个简单的网站,且发布到网上。
三、培训学时与方式
8-10个学时,机房上课,以案例贯穿基本概念与操作步骤,教师一边教,学生一边练。
四、培训大纲(范围)
熟悉Dreamweaver MX 2004的工作环境。
掌握网站创建的方法和学****制作一个简单网页。
掌握使用表格布局网页的方法。
掌握在网页中编辑文本、插入特殊元素、设置网页背景音乐的方法。
掌握在网页中插入图像并设置图像格式的方法。
掌握网页中超链接的设置方法。
掌握掌握利用Web服务器IIS在局域网中发布网站和在互联网上发布网站的方法。
五、使用的软件
网页制作采用Dreamweaver MX 2004中文版,网站的发布采用IIS ( Information Server,互联网信息服务)。培训前须安装好这两个工具。
案例一:创建网站及制作一个网页
实验目的:掌握网站创建的方法和学****制作一个简单网页
实验要求:按要求创建“园林建筑艺术”,并制作简单网页
实验学时:2。
任务1 创建“园林建筑艺术”网站
任务说明:创建“园林建筑艺术”网站,网站结构如图1所示:
园林建筑艺术

皇家园林—颐和园

园林的特点

园林的定义

私家园林图片

私家园林—拙政园

图1 园林建筑艺术网站结构
步骤1:启动Dreamweaver MX
在本地磁盘中新建一个文件夹,如E:\yuanlin;
启动Dreamweaver MX。
步骤2:创建本地站点
执行“站点|管理站点”命令,打开“管理站点”对话框,选择“新建”按钮中的“站点”命令,弹出“站点定义”窗口;
图2 站点总结
输入站点名称“园林建筑艺术”;
单击“下一步”按钮进入“站点定义的第2个窗口,设置服务器技术,选择“否,我不想使用服务器技术”单选按钮;
单击“下一步”按钮进入“站点定义”的第3个窗口,设置站点文件位置。选择“编辑我的计算机上的本地副本,完成后再上伟到服务器”单选按钮,设置文件存储位置为E盘“yuanlin”
单击“下一步”按钮进入“站点定义”的第4个窗口,设置远程服务器的连接方式。单击“您如何连接到远程服务器”文本框右侧的下箭头,从下拉列表中选择“无”。
单击“下一步”按钮进入“站点定义”的最后一个窗口:“总结”窗口,如图2所示。
步骤3:创建网页文件和素材文件夹
创建主页
图3 站点中的网页和素材文件夹
在主窗口右侧的“文件”选项卡中选中“园林建筑艺术”站点, 鼠标右键单击,从弹出的捷菜单中选择“新建文件”命令,在当前站点中新建了一个网页文件,。
用同样的方法创建其余5个网页文件:、、、
创建图片素材文件夹。仍然选中“园林建筑艺术”站点,单击鼠标右键,从弹出的捷菜单中选择“新建文件夹”命令,在当前站点中新建了一个文件夹,并重命名为images,完成后的效果见图3。
步骤4:创建站点结构
。单击“文件”面板中“文件”选项卡中的“展开/折叠”按钮,把“文件”面板展开为独立窗口,,执行“站点|设成首页”命令,;
在此窗口中单击“站点地图”按钮,从弹出的快捷菜单中选择“地图和文件”命令;
制作网站的导航结构。,出现该文件的连接标记,将连接标记拖拽到右侧“本地文件”,松开鼠标,,并显示在“站点地图”;
、、,,最终效果如图4。
图4 站点地图中创建了站点的导航结构
任务2 制作简单的网页
任务说明:,效果如图5所示。
图5 网页效果
步骤1:设置页面属性