《网页设计基础》实验指导书

《《网页设计基础》实验指导书》由会员分享，可在线阅读，更多相关《《网页设计基础》实验指导书（11页珍藏版）》请在金锄头文库上搜索。

1、 网页设计基础网页设计基础实验指导书实验指导书网页设计制作是网络工程专业的一门重要的专业选修课，是计算机网络技术专业 的专业核心课程。通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网 页制作软件及 HTML 语言和，掌握运用 Dreamweaver 网页制作软件制作网页、特别是制作 动态网页的方法，掌握运用 Fireworks 图像处理软件进行网页中图形制作和运用 flash 动画 制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作 任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践 中重点培养团队协作、沟通交流能力，培养自

2、主学习能力和探索创新能力。 （1） 熟练掌握运用 Dreamweaver 网页制作软件制作网页、特别是制作动态网页的方 法，掌握运用 Fireworks 图像处理软件进行网页中图形制作和运用 flash 动画制作软件设计 网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。 （2） 具备网页设计、图形设计、动画设计的基本能力，能独立设计一个内容完整、 图文并茂、技术运用得当的网站；具备初步的网站开发、维护和管理能力；具备独立撰写 网站制作说明等科技文件的基本能力；培养分析问题、解决问题的能力；培养协作、交流 的能力，培养创新能力和团队意识。实验一实验一 实验名称实验名

3、称-HTML 语言基本知识语言基本知识一 实验目的： 1. 熟悉 HTML 语言； 2. 掌握 HTML 语言的基本语法结构 3.掌握 HTML 语言的编写方法 二 实验原理：1.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 2.超文本标记语言的结构包括“头”部分（外语：Head） 、和“主体”部分（外语：Body） ， 其中“头”部提供关于网页的信息， “主体”部分提供网页的具体内容。 三 实验仪器与材料 计算机，windows 7 和 Dreamweaver 软件 四 实验步骤： 1.打开“记事本”或“写字板”输入文本 2、输入淮南师范学院欢迎你 这里是淮南师范学

4、院校园网，欢迎您来到淮南师范学院。3.另存为 myfirstpage.html 4.在 IE 浏览器中浏览 五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获实验二实验二 实验名称实验名称-Fireworks 基本操作（基本操作（1）一 实验目的： 1.了解 Fireworks 的工作环境。 2. 熟悉 Fireworks 的操作界面操作。 3. 掌握 Fireworks 的画布操作。 二 实验原理 1. Adobe Fireworks 是 Adobe 推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工

5、具。 2. Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的 公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver 和 Adobe Flash 软件省时集成。 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 四 实验步骤： 1.打开 FireworksCS4 2.打开界面 3.更改画布大小 打开素材 操作一 修改画布画布大小 4.更改画布颜色 5.更改图像大小 6.保存文件 五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获

6、实验三实验三 实验名称实验名称-Fireworks 基本操作（基本操作（2）一 实验目的： 1.掌握 Fireworks 的图层操作。 2.掌握 Fireworks 的选择对象操作。 3.掌握 Fireworks 的修饰画布。 4.掌握 Fireworks 制作矢量图形。 5.掌握 Fireworks 的文本特效及蒙版操作。 6.掌握 Fireworks 图形的导出与批处理操作。 二 实验原理 1. Fireworks 导入 Photoshop (PSD) 文件，导入时可保持分层的图层、图层效果和混合模式。 将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。

7、 2. 导入 Illustrator (AI) 文件，导入时可保持包括图层、组和颜色信息在内的图形完整性。 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 四 实验步骤： 1.打开 FireworksCS4 2. 打开素材 使用层面板 （1）添加层 （2）删除层 （3）复制层和对象 （4）复制对象 3.参照素材“蝴蝶.png” 使用矢量工具绘制蝴蝶 4.保存文件 5.打开素材，为素材添加滤镜 五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获实验四实验四 实验名称实验名称-Fireworks 高级应用高级应用一 实验目的： 1.

8、掌握 Fireworks 网页模板设计制作。 2. 掌握 Fireworks 图形切片的制作。 3. 掌握 Fireworks 交换图形制作 4. 掌握 Fireworks 元件制作。 5. 掌握 Fireworks 按钮制作与网页导航栏制作。 6. 掌握 Fireworks 的 Gif 动画制作。二 实验原理 1. 切片不是图像，而是一种网页对象 2. 切片的优点 （1）便于实现动态效果 （2）提高下载速度 （3）优化图像 （4）创建灵活的超级链接 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 四 实验步骤： 1.打开 Firework

9、sCS4 2.打开界面 3. 绘制自动形状 自动形状除了具有对象组手柄外，还具有菱形控制点。拖动某个控制点只会改变与其关联 的可视化属性。4.绘制自由变形形状 用“钢笔”工具绘制直线与多边形。 用“钢笔”工具拖动出曲线。 5. 矢量路径的组合 组合路径常见的操作包括有： 接合、联合、交集、打孔、裁切等操作， 可以通过“修改”“组合路径”命令实现这些操作。 6. 创建切片 2. 打开多个图像法 （1）选择“文件”“打开”命令， 在“打开”对话框中同时选取多个图像文档。（2）选中“以动画方式打开”复选框，并单击“确定”按钮。 （3）预览并以“GIF 动画”格式导出动画。 （4）保存操作结果。 7.

10、 动画元件法 （1）选择“编辑”“插入”“新建元件”命令， （2）在弹出的对话框中输入元件名称并选取元件类型为“动画” ， （3）最后单击“确定”按钮可直接创建动画元件。 （4）右击已有对象，选择快捷菜单的“转换成元件”命令， （5）再在弹出的对话框中输入元件名并选取元件类型为“动画” ， （6）最后单击“确定”按钮可间接创建动画元件。五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获实验五实验五 实验名称实验名称-Dreamweaver 网页制作基本操作网页制作基本操作实验目的： 熟悉 Dreamweaver 的操作环境。 掌握 Dreamweaver 的站点设置。 掌握 Drea

11、mweaver 网页制作中的文本处理及链接制作。 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 四 实验步骤： 1. 启动 Dreamweaver CS4，选择“站点”“新建站点”命令，弹出“站点定义为”对话 框，在对话框中输入站点名称，然后单击“下一步”按钮 2. 出现向导的下一个页面，询问是否要使用服务器技术。选中“否，我不想使用服务器技 术”单选按钮，然后单击“下一步”按钮 3. 出现向导的下一个页面，询问要如何使用文件。在提示工作方式的界面中有两个选项， 分别为“编辑我的计算机上的本地副本，完成后再上传到服务器”和“使用本地网络直

12、接 在服务器上进行编辑” ，这里选择前者。 4. 如果是从头建设一个新站点，需要为站点设置好一个文件夹位置，就是网站的根目录， 单击浏览文件图标，在弹出的对话框中选择设置网站本地根文件夹的位置。本例在 D 盘根 目录创建一个“xinjiangweb”文件夹并将它作为网站根文件夹，单击“下一步”按钮。 5. 在选择远处服务器连接方式的页面里，在下拉列表中选择“无”选项。 6. 出现确认信息页面，显示前面已经设置完成的内容，单击“完成”按钮。 7.本地站点创建完成在后， “文件”面板中的“本地文件”栏中会显示该站点的根目录 8.打开站点 9.编辑站点 10.删除站点 11.复制站点 12.站点迁移

13、五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获实验六实验六 实验名称实验名称-Dreamweaver 网页制作高级应用（网页制作高级应用（1）实验目的： 1. 掌握 Dreamweaver 多媒体元素的插入。 2. 掌握 Dreamweaver 的视音频文件使用。 3. 掌握 Dreamweaver 网页布局。 二 实验原理 直接按 Enter 键进行分段，按 Shift+Enter 组合键进行分行；分段行距较大，适合主题内容 相差比较大的文本划分；分行行间距较小，常见于诗歌等格式比较工整的内容的划分。 插入文字后，为了让页面风格统一，具有层次感，需要使用 CSS 样式设置和修改

14、文字字体 和格式。 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 四 实验步骤： 1. 启动 Dreamweaver CS4，新建站点 2. 文本的插入与编辑 3. 网页文本的编辑排版 4. 插入图像 5. 插入鼠标经过图像 6. 插入链接 7. 创建锚记链接 8. 创建下载链接 9. 插入音频、视频、 SWF 动画、FLV 视频 五 实验结果与讨论理论联系实际，写出实验者的见解、体会和收获实验七实验七 实验名称实验名称-Dreamweaver 网页制作高级应用（网页制作高级应用（2）一 实验目的： 1. 掌握 Dreamweaver 建

15、立网站相册方法。 2. 掌握 Dreamweaver 模板的使用。 3. 掌握 DreamweaverCSS 样式表的使用。 三 实验仪器与材料 计算机，windows 7、Fireworks 和 Dreamweaver 软件 实验步骤 1. 启动 Dreamweaver CS4，新建站点 2. 选择“插入” “表格”,在表格对话框中进行设置。 3. 给表格或单元格加上背景图片 （1）建立 CSS 样式“.tablebk” ，选择某图片作为背景图片。 （2）可选择套用至整表或某些单元格区域。 4. 利用框架进行网页布局 （1）选择“文件”“新建”命令，选中“示例中的页” ，并选中“框架页” ，

16、选择需 要的框架类型。 （2）选择“文件”“框架集另存为” ，保存上步新建的框架网页。 系统会自动打开“框架标签辅助功能属性”对话框,为每个框输入名称。 （3）设置框架的宽和高。 此步需要使用到“框架面板” 。 （4）为各框架指定内部需要放置的网页文件。 （5）为框架做好链接。 链接目标中的 mainframe、topframe 和 leftframe 指代的是当前页面上的各个框架名称。 （6）保存框架 在“框架”面板中单击框架集的最外端边框，以选取框架集，选择“文件”“保存全部” 命令，框架集文件和各个框架页的修改都会被保存。 （7）框架的嵌套 嵌套框架是在已经存在的框架中插入一个框架。一个框架集文件可以包含多个嵌套框架集。具体方法是：打开一个框架集。将光标插入要创建子嵌套框架集的某个框架中，选择“插 入HTML框架”命令，即可在选中框架中插入子嵌套框架集。 框架的拆分 选择“查看”“可