网页设计基础实验指导书.doc

《网页设计基础实验指导书.doc》由会员分享，可在线阅读，更多相关《网页设计基础实验指导书.doc（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

3、语法结构二 实验原理：1.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“头”部分（外语：Head）、与“主体”部分（外语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。三 实验仪器与材料计算机，windows 7与Dreamweaver软件四 实验步骤：“记事本”或“写字板”输入文本2、输入 淮南师范学院欢迎你 这里是淮南师范学院校园网，欢迎您来到淮南师范学院。五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验二 实验名称-Fireworks基本操作（1）一 实验目的：1.了解Fireworks的工作环境。2. 熟悉Fir

4、eworks的操作界面操作。3. 掌握Fireworks的画布操作。二 实验原理1. Adobe Fireworks是Adobe推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像与快速构建网站与 Web 界面原型的理想工具。2. Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver与 Adobe Flash软件省时集成。三 实验仪器与材料计算机，windows 7、Fireworks与Dreamwea

5、ver软件四 实验步骤：打开素材操作一 修改画布画布大小五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验三 实验名称-Fireworks基本操作（2）一 实验目的：1.掌握Fireworks的图层操作。2.掌握Fireworks的选择对象操作。3.掌握Fireworks的修饰画布。4.掌握Fireworks制作矢量图形。5.掌握Fireworks的文本特效与蒙版操作。6.掌握Fireworks图形的导出与批处理操作。二 实验原理1. Fireworks导入 Photoshop (PSD) 文件，导入时可保持分层的图层、图层效果与混合模式。将 Fireworks (PNG) 文

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

7、 掌握Fireworks交换图形制作4. 掌握Fireworks元件制作。5. 掌握Fireworks按钮制作与网页导航栏制作。6. 掌握Fireworks的Gif动画制作。二 实验原理1. 切片不是图像，而是一种网页对象2. 切片的优点（1）便于实现动态效果（2）提高下载速度（3）优化图像（4）创建灵活的超级链接三 实验仪器与材料计算机，windows 7、Fireworks与Dreamweaver软件四 实验步骤：3. 绘制自动形状自动形状除了具有对象组手柄外，还具有菱形控制点。拖动某个控制点只会改变与其关联的可视化属性。4.绘制自由变形形状 用“钢笔”工具绘制直线与多边形。用“钢笔”工具

8、拖动出曲线。5. 矢量路径的组合组合路径常见的操作包括有：接合、联合、交集、打孔、裁切等操作，可以通过“修改”“组合路径”命令实现这些操作。6. 创建切片2. 打开多个图像法（1）选择“文件”“打开”命令，在“打开”对话框中同时选取多个图像文档。（2）选中“以动画方式打开”复选框，并单击“确定”按钮。（3）预览并以“GIF动画”格式导出动画。（4）保存操作结果。7. 动画元件法（1）选择“编辑”“插入”“新建元件”命令，（2）在弹出的对话框中输入元件名称并选取元件类型为“动画”，（3）最后单击“确定”按钮可直接创建动画元件。（4）右击已有对象，选择快捷菜单的“转换成元件”命令，（5）再在弹出的

9、对话框中输入元件名并选取元件类型为“动画”，（6）最后单击“确定”按钮可间接创建动画元件。五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验五 实验名称-Dreamweaver网页制作基本操作实验目的：熟悉Dreamweaver的操作环境。掌握Dreamweaver的站点设置。掌握Dreamweaver网页制作中的文本处理与链接制作。三 实验仪器与材料计算机，windows 7、Fireworks与Dreamweaver软件四 实验步骤：1. 启动Dreamweaver CS4，选择“站点”“新建站点”命令，弹出“站点定义为”对话框，在对话框中输入站点名称，然后单击“下一步”按

10、钮2. 出现向导的下一个页面，询问是否要使用服务器技术。选中“否，我不想使用服务器技术”单选按钮，然后单击“下一步”按钮3. 出现向导的下一个页面，询问要如何使用文件。在提示工作方式的界面中有两个选项，分别为“编辑我的计算机上的本地副本，完成后再上传到服务器”与“使用本地网络直接在服务器上进行编辑”，这里选择前者。4. 如果是从头建设一个新站点，需要为站点设置好一个文件夹位置，就是网站的根目录，单击浏览文件图标，在弹出的对话框中选择设置网站本地根文件夹的位置。本例在D盘根目录创建一个“xinjiangweb”文件夹并将它作为网站根文件夹，单击“下一步”按钮。5. 在选择远处服务器连接方式的页面

11、里，在下拉列表中选择“无”选项。6. 出现确认信息页面，显示前面已经设置完成的内容，单击“完成”按钮。7.本地站点创建完成在后，“文件”面板中的“本地文件”栏中会显示该站点的根目录 五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验六 实验名称-Dreamweaver网页制作高级应用（1）实验目的：1. 掌握Dreamweaver多媒体元素的插入。2. 掌握Dreamweaver的视音频文件使用。3. 掌握Dreamweaver网页布局。二 实验原理直接按Enter键进行分段，按Shift+Enter组合键进行分行；分段行距较大，适合主题内容相差比较大的文本划分；分行行间距较小

12、，常见于诗歌等格式比较工整的内容的划分。插入文字后，为了让页面风格统一，具有层次感，需要使用CSS样式设置与修改文字字体与格式。三 实验仪器与材料计算机，windows 7、Fireworks与Dreamweaver软件四 实验步骤：1. 启动Dreamweaver CS4，新建站点2. 文本的插入与编辑3. 网页文本的编辑排版4. 插入图像5. 插入鼠标经过图像6. 插入链接7. 创建锚记链接8. 创建下载链接9. 插入音频、视频、 SWF动画、FLV视频五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验七 实验名称-Dreamweaver网页制作高级应用（2）一 实验目的：

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

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

15、：打开一个框架集。将光标插入要创建子嵌套框架集的某个框架中，选择“插入HTML框架”命令，即可在选中框架中插入子嵌套框架集。框架的拆分选择“查看”“可视化助理”“框架边框”命令，显示框架边线。将指针移至所需分割的框架中，按住Alt键，将指针移至框架边框为止，当指针显示为双向箭头时，拖动至合适位置后，即可将一个框架拆分为两个框架。 5. 建立网站相册五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获实验八 实验名称-网站制作综合实例（1）实验目的：1 综合Fireworks与Dreamweaver进行网站制作。2 网站建设3. 为网站添加多媒体元素4. 网站维护。三 实验仪器与材料计

16、算机，windows 7、Fireworks与Dreamweaver软件四 实验步骤：1. 创建模板文档（1）在站点文件夹中创建模板文件夹与文档。（2）在模板文档中绘制4行1列表格。（3）在表格的各个单元格中插入相应的素材。（4）修饰表格第三行单元格（可编辑区域）。（5）设置模板文档中大表格的对齐方式与修饰边框线。（6）选择“文件”“另存为模板”命令，将“”文档存为模板文件“”。（7）设置导航栏中的各按钮的链接目标页面。（8）设置可编辑区域。2. 模板的应用（1）一种方法是利用模板来从新建立一个新的网页。“文件”“新建”命令 （2）另一种方法是将模板应用到已有的网页上。打开欲应用模板的页选择“修改”“模板”“应用模板到页”命令，在弹出的“选择模板”对话框中选中欲应用的模板“”3网站建设（1）. 建立文件如Mysite，在Mysite文件夹下新建images，media与Scripts文件夹，把收集到的素材分别放到images，media文件夹（2）. 创建新站点根目录选择Mysite文件夹（4. ）设置文档属性（5.） 文本的插入与编辑（6.） 使用CSS样式美化与修饰文字（7）. 插入图片与多媒体元素（8. ）创建链接（9）. 保存文件（10）.为网站创建其它页面五 实验结果与讨论 理论联系实际，写出实验者的见解、体会与收获第 15 页