网页设计与制作实验指导书

网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。(1)打开DreamWeaverMX，熟悉整个界面，尝试打开、关闭各种面板、视图、工具栏。使用参数设置把常用的快捷图标添加到状态栏。(2)规划站点（导航结构请遵循本实验的要求），然后新建站点，将站点所在文件夹命名为自己名字的汉语拼音，设计站点的结构。(3)在站点中添加若干个网页，将其中的一个命名为index.htm并设置为主页。(4)打开站点管理器，熟悉站点管理的界面，了解网站地图。(5)将各个网页依次打开，进行编辑，页面中要有文字、图片、背景等网页元素。(6)浏览各个网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点文件夹上传到教师机D:\zuoye目录下实验三创建简单网页实例一（4学时）一、实验目的：(1)熟悉基本网元素及其操作(2)熟悉使用页面属性二、实验内容本实验的内容主要是制作一个“长春悠游网”网站的主页文件，它包括文本、图像、水平线以及日期和时间，效果如下图所示。三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。(1)建立一个本地站点(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)输入书中全部的文字内容。(4)将“长春欢迎你”设置滚动效果的文字。(5)对文字进行排版。(6)插入水平线，并设置水平线的颜色。(7)插入导航条(8)插入图片(9)插入日期和时间(10)打开页面属性对话框(11)设置网页的背景图像。(12)浏览各个网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点进行备份留下节课使用3、将站点文件夹上传到教师机D:\zuoye目录下实验四创建网页超链接（2学时）一、实验目的：(1)超链接的基本定义及基各种超链接的创建和编辑操作二、实验内容本实验的内容主要是利用上次实验的内容制作超级链接，包括文本、图像、热区以及锚点链接。三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。(1)在上一次建立的站点中添加网页文件jingyuetan.htm网页文件。(2)打开jingyuetan.htm文件利用以前学过的知识进行编辑，制作一个网页备用。(3)在index.htm文件中选择“净月潭国家森林公园”，利用属性面板将其链接到jingyuetan.htm上。(4)浏览各个网页的实际效果。(5)在jingyuetan.htm文件中顶部插入一个锚点top。(6)在jingyuetan.htm文件最下部输入“返回页首”在属性面板上设置成锚点链接。(7)浏览各个网页的实际效果。(8)选择index.htm中的图片，利用热区工具画出热区，并设置超链接到jingyuetan.htm文件。(9)浏览各个网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点文件夹上传到教师机D:\zuoye目录下实验五利用表格布局页（4学时）一、实验目的：(1)利用表格进行文本的整齐排列和自由的图文混排(2)在整个表格内使用背景图像和色彩。二、实验内容本实验的内容主要是利用表格进行网页的定位练习1.建立一个本地站点,包括2-3个网页2.制作两个利用表格定位的网页其中一个为下图中的网页，另一个可以自由发挥3.设置超链接将站点中的网页链接起来。三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果。(1)建立一个本地站点(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)最外层的表格宽度为700像素，嵌套的表格宽度为100%，整体上分为上下两个表格。(4)上表格为2行1列的表格如图一所示。图一布局表格一（5）下表格为4行3列的表格如图二所示。图二布局表格二（6）将下表格的单元格进行合并，调整为如图三所示图三布局表格三（7）在下表格的左侧嵌套7行1列的表格，在下表格的右侧上边单元格内嵌套1行1列的表格，在右侧下边单元格嵌套2行4列的表格。如图四所示。图四布局表格四（8）在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并如图五所示。图五布局表格五（9）上表格的第二行和下表格右侧第二行制作水平线，将单元格的高度设为“2”；下表第二列制作垂直线，宽度值勤为“2。”（10）向表格内添加图像和文字，将所有表格的边框值设置为“0”。(11)浏览网页的实际效果。(12)设计另一个自由发挥的网页。(13)用超链接将两者链接起来(14)浏览网页的实际效果，并测试超链接的有效性。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点进行备份留下节课使用3、将站点文件夹上传到教师机D:\zuoye目录下实验六框架网页的创建（2学时）一、实验目的：(1)框架网页的创建和编辑操作(2)目标框架的设定二、实验内容本实验的内容主要是利用框架结构来建立网页，并设置目标框架。1.建立一个本地站点,包括2-3个网页2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥.3.设置网页间的超链接,并设置目标框架.三、实验步骤与要求实验前认真预习，熟练掌握有关框架网页的基础概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。(1)新建一个空白文档，创建一个“上方及左侧嵌套”，右侧下方框架为主框架（mainFrame）。(2)保存框架及框架集(3)在顶部框架中插入图像(4)左侧框架中设置页面属性背景图像。(5)在左侧框架中插入7行1列无边框架和背景表格。(6)在表格中插入导航图像按钮。(7)在右侧框架中插入文字、图像等网页元素。(8)制作两个网页分别命名为dianyin.html和jingyue.html，保存在同一站点内。(9)为左侧导航按钮制作超链接，设置链接目标为“mainFrame”。(10)单击菜单栏“文件”|“保存全部”(11)预览网页并检测超链接是否在指定框架内打开。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点文件夹上传到教师机D：\zuoye目录下实验七表单网页的创建（2学时）一、实验目的：(1)熟悉表单的各元素(2)创建表单网页实例二、实验内容本实验的内容主要是熟练表单的基本操作，并制作表单网页。1.建立一个本地站点,包括2-3个网页2.其中一个网页为表单网如下图,其他网页为中含中表单项目自由发挥制作.3.设置超链接将站点中的网页链接起来。表单网页一表单网页二三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。(1)建立一个本地站点(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)绘制布局表格(4)在表格中插入相应的表单元素。(5)对网页内容进行排版。(6)浏览网页的实际效果。(7)在站点中建立一个网页文件liuyan.htm并打开进行编辑。(8)绘制布局表格(9)在表格中插入相应的表单元素。(10)对网页内容进行排版。(11)浏览网页的实际效果。四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。2、将站点文件夹上传到教师机D：\zuoye目录下实验八简单的CSS样式使用（4学时）一、实验目的：(1)利用CSS定义鼠标的形状。(2)利用CSS滤镜增加页面效果。二、实验内容利用CSS定义鼠标的形状，利用CSS滤镜增加页面效果。三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。（一）鼠标样式的设置(1)建立一个本地站点(2)在站点中建立一个网页文件index.htm并打开进行编辑。(3)新建一个网页并在网页中插入一幅图像，如图8.1所示，保存文档。图8.1网页示例一2．在CSS样式面板中，单击按钮，打开“新建CSS规则”对话框，如图8.2所示。图8.2新建样式表对话框3．输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。4．点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类，如图8.3。图8.3CSS规则定义对话框5．在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。6．选中图像，执行以下操作之一：·在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。·在“属性检查器”的“类”的下拉列表中选择“shubiao”。7．保存网页，在浏览器中鼠标指向图像测试效果如图8.4所示。图8.4改变鼠标效果示例（二）ＣＳＳ滤镜的使用1．新建一个网页并在网页中插入两幅相同的图像，如图8.5所示，保存文档。图8.5网页示例2．在CSS样式面板中，单击按钮，打开“新建CSS规则”对话框。如图8.6所示。图8.6新建CSS规则对话框3．名称中输入“.blur”，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。4．设置完成后，单击“确定”按钮，打开“.blur的CSS规则定义”对话框，切换到“扩展”分类，如图8.7所示。5．在“滤镜”中选择Blur滤镜，参数设置如下：Blur(Add=true,Direction=135,Strength=20)。Add：设置图片是否被改变成印象派的模糊效果。有两个值：true（默认）和false。Direction：指定模糊方向。0——垂直向下；45——垂直向右；90——向右；135——