网页设计与制作实验指导一览表
实验名称 实验一 实验二 实验三 实验四 实验五 实验六 实验七 实验八 实验九 实验十 实验十一 实验十二 实验十三
实验1 HTML语言
实训目的:
为了让学生能熟悉学习网页不可避免要接触的HTML语言,达到用该语言可以建立一个简单的网页的目的,同时了解建立站点是做网站必不可少的,要掌握建立站点的方法。 素材准备:
准备制作网页所需的文字素材、图像素材。 实验课时: 2学时 实验内容:
1. 创建站点;
2. 新建网页以及保存,重命名; 3. 输入HTML语言。 实验步骤:
实验内容 HTML语言 初识Dreamweaver 文本操作 图像操作 超级链接 表格布局 多媒体应用 CSS样式 层的布局 框架网页 模板和库 表单网页 网站开发综合实例 备注 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 详细内容 1. 在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。 2. 定义站点:设置 \站点名称\,命名为 \设置本地根文件夹,指定为E盘下的root文件夹;设置 \地址\为localhost。
3. 创建与设置文档的页面属性: 新建一个页面,保存名为“HTML基础”的文档。
4. 切换代码模式下,输入代码。 5. 保存文件,预览文件效果。 实验过程注意事项:
1. 在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径; 2. 所有的图片文件单独放在image文件夹内。 实验思考:
除了用HTML语言来做这个网页,还有没有其它的方法? 书写实验报告要求:
根据最终所作的网页,写出实验报告。 页面效果图:
图1-1
实验2 初识Dreamweaver
实验目的:
为了让学生能熟练掌握Dreamweaver的安装与卸载,启动与退出,基本工作环境和设置,对Dreamweaver操作环境有一定了解。 素材准备:
准备好从网上下载的安装程序。 实验课时: 2学时 实验内容:
1. 安装Dreamweaver:
2. Dreamweaver的启动与退出:
3. 了解工具栏、菜单栏、标题栏等工作环境: 4. 卸载Dreamweaver 实验步骤:
1. 打开从网上下载的Dreamweaver程序,双击安装。 2. 安装完成后输入注册号。
3. 启动Dreamweaver,并查看工具栏、菜单栏、标题栏等工作环境。 4. 退出Dreamweaver。 5. 卸载Dreamweaver 实验过程注意事项:
1. 安装过程完成后,要激活。 实验思考:
从“控制面板”里删除程序与从安装到的目录文件里删除有什么区别? 书写实验报告要求: 写出本次实验报告。
实验3 文本操作
实验目的:
为了让学生能熟练掌握在Dreamweaver mx中如何输入文本,调整设置文本的格式;如何插入特殊字符、文本列表、水平线、时间、注释的方法。 素材准备:
准备制作网页所需的文字素材、图像素材、音乐素材。 实验课时: 2学时 实验内容:
1. 输入文本: 2. 调整文本: 3. 插入特殊字符: 4. 插入文本列表: 5. 插入水平线: 6. 插入时间: 7. 插入注释: 8. 设置文本格式: 实验步骤:
1. 新建一个页面文件; 2. 输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;
3. 输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果; 4. 插入特殊字符、项目符号、水平线、时间、注释等内容; 实验过程注意事项:
1. 在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去,不能全部选取再添加;
2. 当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;
3. 换行的几种方式:自行换行;按ENTER强行换行;按SHIFT+ENTER换行操作; 实验思考:
如何插入版权符号?
如何插入特殊字符“¥”? 书写实验报告要求:
根据调试结果,写出实验报告
实验4 图像操作
实验目的:
为了让学生熟练掌握在Dreamweaver mx中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,掌握图文混排的技巧等操作。 素材准备:
准备制作网页所需的文字素材、图像素材、音乐素材。 实验课时: 2学时 实验内容:
1. 插入图像: 2. 设置图像属性: 3. 插入鼠标经过图像: 4. 插入图像占位符: 5. 图文混排操作: 实验步骤:
1. 打开上次实训所做的页面文件;
2. 插入图像,在属性面板对图像的格式进行设置; 3. 插入鼠标经过图像、图像占位符; 4. 将图片和文字进行混合排版; 5. 保存文件,预览文件效果; 实验过程注意事项:
1. 插入的图像必须放在站点文件夹下的image文件夹内; 2. 设置图片的热点区域可选任意的工具; 实验思考: