网页设计与制作及实训教程 教学课件 杜永红 王冬霞 主编 网页设计与制作实训指导.pdfVIP

网页设计与制作实训指导 第一章 网页设计基础知识 上机实训 1. 背景知识 根据已经掌握的网络知识和本章学习的html语言的知识，编写简单网页的源代码；浏 览网站，分析网站的特点。 2. 实训准备工作 保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、 fireworks、flash、photoshop等。 3. 实训要求 (1) 打开浏览器，浏览某个网页，查看其源代码，了解HTML 代码的含义。 (2) 打开记事本，试用HTML 语言编写一个简单的网页，网页中要包含以下内容：网 页标题、文字、图像、超链接等。 (3) 上网浏览不同的电子商务网站，比如：淘宝、联想等，分析站点结构、站点风格及 网页配色等，写出分析报告。 4. 课时安排：2课时 5. 实训指导 (1)如何查看网页源代码？ 打开浏览器，点击“查看”菜单｜“源文件”命令。 (2)如何编写HTML代码？ 打开记事本，手工编写HTML代码，注意HTML代码的编写顺序及网页元素对应的标签。 保存网页时，网页的后缀名为html或htm。 (3)略。 第二章 创建站点 上机实训 1. 背景知识 根据本章所学的内容，创建站点和创建网页。 2. 实训准备工作 在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。 3. 实训要求 创建站点和创建网页 要求：定义本地站点和新建一个网页并进行编辑。 4. 课时安排：2课时 5. 实训指导 步骤1 定义本地站点，新建若干文件夹，如：images、flash、templates等，有些文件夹 可暂时为空，以备将来存放设定的内容。 步骤2 在定义好的站点下新建一个网页，第一个网页为index.htm或是index.html，输入 文本，插入Flash动画和图像。 第三章 制作页面 上机实训 1. 背景知识 根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等 知识进行网站的创建。 2. 实训准备工作 将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。 3. 实训要求 创建一个以篮球为话题的网站，要求如下： （1）编辑网站首页，效果图如图3.35所示，包括有图像映射、鼠标经过图像、导航条。 （2）编辑其它内容网页并添加超链接，如图3.36所示，其它页面中包括有图像和文本 等，有一个网页中是明星的相册。 图3.35 篮球俱乐部首页 4. 课时安排：4课时，每一项实训要求为2课时 5. 实训指导 （１） 网站首页制作过程 步骤1 启动Dreamweaver ，定义本地站点，新建一个网页，保存为index.htm 。 步骤2 单击“属性”面板中的“页面属性”按钮，选择“常规”选项卡，设置背景图 像为bg.gif ，选择“标题／编码”选项卡，设置网页标题为“篮球俱乐部”。 步骤3 单击“插入”栏｜“常用”选项｜“图像”按钮，插入网站标志图像logo.gif ， 选中图像，单击“属性”面板中的矩形“热点”工具，在NBA 标志图像上绘制矩形区域， 在“属性”面板的链接框中输入链接地址： ，再单击多边形“热点”工 具，在中国篮球标志图像上绘制多边形区域，在“属性”面板的链接框中输入链接地址： ，如图3.37 所示。 图3.36 篮球俱乐部内容页 图3.37 图像映射实例 步骤4 单击“插入”栏｜“常用”选项｜“表格”按钮，插入一个一行两列的表格， 表格的宽度为770 像素，单元格边距和间距为0，边框粗细为0 。把光标放在左边的那个单