网页设计课程

《网页 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 与制作》课程实习实验指导书实验目录·实验1启动网页三剑客应用程序·实验2站点的建立与管理·实验3利用 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 布局网页·实验4网页中的超级链链·实验5在网页中使用CSS样式·实验6框架技术与模板·实验7在网页中使用CSS样式·实验8页面的交互方式·实验9网站的测试与发布实验1启动网页三剑客应用程序一．实验目的1.熟悉Internet和www2.掌握安装与删除Dreamweaver8、Fireworks和Flash的方法3.熟悉启动和退出Dreamweaver8、Fireworks和Flash4.熟悉Dreamweaver8的桌面环境二．实验内容　　1、启动Dreamweaver8安装了Dreamweaver8之后，按“开始”菜单—>“程序”项——>”MACOMEDIA”项—>”MACOMEDIADreamweaver8”项的顺序找到Dreamweaver8的启动项,单击该项就可以启动Dreamweaver8如果在桌面上已经建立了启动Dreamweaver8的快捷方式图标,有可以通过双击该快捷方式图标来启动Dreamweaver8.SHAPE\*MERGEFORMAT图15.1.3“打开”对话框图15.1.4打开文件（3）选择“文件”→“另存为”命令，在弹出的“另存为”对话框中将当前文件以新的名称保存到原位置，或者以相同名称保存到不同的位置（见图15.1.5），最后单击“保存”按钮。　（4）按“Ctrl+Enter”键，测试动画效果，如图15.1.1所示。以新的名称保存到原位置以相同名称保存到不同的位置图15.1.5保存文件2、以相同的操作方式启动fireworks和flash.实验2站点的建立与管理一．实验目的　　1.熟悉 规划 污水管网监理规划下载职业规划大学生职业规划个人职业规划职业规划论文 站点结构2.掌握建立本地站点3.熟悉站点的基本操作二、实验内容　　利用Ｄreamweaver8建立站点在Dreamweaver中创建站点的方法有两种——通过“站点定义向导”定义站点和直接定义站点，下面通过建立“dqgl”站点来说明这两种创建站点的方法。1．通过“站点定义向导“创建站点〈1〉打开“站点定义向导“在Dreamweaver8的编辑窗口或站点面板选择命令菜单“站点”→“新建站点”，弹出“站点定义”对话框，选择默认的“基本”选项卡。〈2〉输入站点名称和URL地址在对话框中输入要建立的站点名称，这里输入“dgql”，如教材图2-4所示。如果是远程站点还要输入该站点的URL地址，本案中忽略。单击“下一步”按钮，则会打开下一个对话框。〈3〉选择服务器技术如果建立的站点需要使用ASP、JSP、PHP等动态服务器技术，选中“是，我想使用服务器技术”单选项，在出现的选项中选择一种服务器技术。如本案例只使用静态网页技术，选中“否，我不想使用服务器技术”单选项，单击“下一步”按钮。（4）选择文件编辑方式及定位站点文件夹在教材图2-6所示的对话框中，对于2文件的编辑方式，推荐选择“编辑我的计算机上的本地副本，完成后再上传到服务器”选项。本地文件的存储文件夹可以直接输入，本案例输入“d：\dgql”，也可以通过单击输入文本框的文件夹按钮，在打开的“选择站点dgql的本地根文件夹”对话框中进行选择。（5）选择与服务器连接方式在教材图2-7所示的对话框中,用户可以选择如何与服务器连接。如果选择“本地/网络”或“FTP”方式，将会要求用户输入更多的服务器信息，如服务器上的文件夹位置等。本案例只在本地进行网页的编辑练习，所以选择“无”选项。（6）完成站点定义在完成了以上各项设置之后,站点定义向导打开的最后一个对话框如教材图形控制2-8所示。在该对话框中显示了用户设置的信息。如果对所进行的设置不满意，则单击“上一步”按钮，退到相应的步骤重新进行设置，如果对所进行的设置满意则单击“完成”按钮进行确认并关闭该对话框，站点创建完毕。新的Dreamweaver站点显示在“文件”面板。2．直接定义站点（1）打开直接定义站点方式在教材图2-3所示的“站点定义”对话框中选择“高级”选项卡，该对话框变成教材图2-9所示的形式。在此对话框中用户可以分别对站点的各类信息进行定义。（2）进行站点参数定义从“分类“列 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 框中选择”本地信息“选项，在“站点名称”文本框中输入新建站点的名称“dgql”。在“本地文件夹”文本框中输入本地站点根目录的位置“d:\dgql”。勾选“启用缓存”单选区按钮。（3）设置完毕，单击“确定“按钮关闭该对话框。2.3站点的基本操作在Dreamweaver8中创建好了本地站点后，即可对它进行相应操作。选择菜单栏“站点”—“管理站点”命令，就会弹出一个“管理站点”对话框，在这个对话框中，Dreamweaver8提供了对站点的打开、新建、编辑、复制、删除和导出、导入等操作。1．打开站点在Dreamweaver8的“文件”面板中显示了当前站点的文件和文件夹结构。如果要打开另外一个站点，只要在“管理站点”对话框中单击该站点名称，然后单击“完成”按钮，即可打开该站点并显示在“文件”面板中。2．编辑站点在“管理站点”对话框中选择站点，然后单击“编辑”按钮，Dreamweaver8就会弹出“站点定义”对话框中的“高级”选项卡。在此对话框中可以对某站点的参数重新进行编辑。3.复制站点在“管理站点”对话框中选择站点，然后单击“复制”按钮，即可对当前记性复制操作。4.删除站点在Dreamweaver8中删除一个站点非常容易，在“管理站点”对话框中，单击“删除”按钮就可以删除选中的站点。5.导出站点可以将站点导出为包含站点设置的XML文件，并在以后将该站点，Dreamweaver8。这样，用户就可以在计算机和产品各版本之间移动站点，或者与其他用户共享这些设置。6．导入站点在“管理站点”对话框中单击“导入”按钮，出现“导入站点”对话框。浏览并选择要导入的一个或多个具有.ste文件扩展名的文件定义的站点。单击“打开”开始导入站点。Dreamweaver导入该站点之后，站点名会出现在“管理站点”对话框中。实验3利用表格布局网页一．实验目的　　1.熟悉表格的高级应用技巧2.掌握利用表格进行一个简单布局3.熟悉在布局视图中对网页进行布局二．实验内容利用表格进行一个简单页面布局案例三、实现步骤打开Dreamweaver8,在其中新建一站点，创建一个新页面，并以index.html为名保存到所定义Web站点的本地根文件夹中。1.主体页面框架的构建在index.html中插入“上、中、下”三个表格，制作页面的主体框架。首先,插入上表格,具体操作如下：在页面上单击一次，在页面左上角放置插入点。选择“插入”→“表格”，打开“插入表格”对话框,对话框中设置相应参数。单击“确定”完成上表格操作。接着将光标定位到上表格的右端，按上述方法依次插入四行二列中表格和三行一列下表格。2．表格的调整在页面中插入“上、中、下”三个表格后，需要通过对表格属性的重新设置来对各个表格进进一步调整。（1）上表格的调整1表格宽度和高度的调整单击上表格四周的任何地方（即表格的左上角、左下角、上边、右边或底边上任何地方）选中上部表格，此时属性面板即为所选表格的属性面版，如图3-7所示，在属性面板中设置其“宽”为780像素、“高”为175像素。②表格中行高、列宽的调整将上表格第一行的高度设为150像素，操作步骤如下：在上表格第一行中单击选中上表格第一行，此时的属性面板为单元格的属性面板，在属性面板的“高”文本框中输入150；按回车键或在属性面板外单击鼠标确认修改。③表格其他属性的设置选中上表格，在其属性面板中将边框文本框值设为0，“对齐”方式设为“居中对齐”。（2）中表格的调整①表格属性设置选中中表格，设置表格属性如下：表格宽度设置为780像素，边框设为0，对齐方式为“居中对齐”。②表格中行列的调整选中表格第1列第1行在属性面板中设置其宽度为180像素。选中中表格第2列第1、2、3、4行，分别设置其宽度为20像素、164像素。③单元格的合并合并第一列第二、三、四行单元格，具体操作步骤：鼠标在中表格第1列第2、3、4行中按左键拖动并选择此三个单元格。在属性面板上单击属性面板上的合并按钮即可。（3）下表格的调整①设置下表格属性表格宽度设置为780像素，边框设为0，对齐方式为“居中对齐”。②单元格的拆分拆分第二行为四列，具体操作如下：单击需拆分的单元格，此处单击第二行。单击<td>选择光标所在的单元格。在属性面板中单击属性面板中拆分按钮，在弹出的拆分单元格对话框中设置拆分的单元格为四列。若要拆分单元格，请执行以下操作：单击单元格。执行以下操作之一：选择“修改”—>“表格”—“拆分单元格”。在展开的属性检查器（“窗口”—>“属性”）中，单击“拆分单元格”按钮。在“拆分单元格中”对话框中，单击“拆分单元格“3．嵌套表格的加入下面我们来实现这两个嵌套表格的插入。单击中表格第2列第2行单元格，在其中插入五行二列的表格。宽度高为99%，边框粗细高为0。选中新插入表格，合并其第1列1、2、3、4行单元格，并设置其宽度、高度分别为140、110像素。选中新插入表格，按“Ctrl+C”键复制此表格，把光标定位在中表格的第2列第4行单元格内，按“Ctrl+V”键粘贴复制的表格，完成表格的嵌套。4、在表格中插入页面元素（1）在上表格中插入页面元素在上表格的第1行第1列单元格内插入标题图像“banner.jpg”.在上表格的第1行第2列中输入文字内容：“今天天气：晴天转多云，西南风四级左右，空气指数良好。”大小为12像素。（2）在中表格中插入网页元素在第一列第一行插入图像“guanlidenlu.gif”，设置其对齐方式为“居中对齐”。在第一列第二行插入图像“daohanlan.jpg”，在第一行第二列中插入图像“xinwendongtai.jpg”。在第二第二行的嵌套表格中相应单元格依次插入图像“ffimage01.jpg”，输入文字内容（文字“大小”为14像素，“颜色”为“#000099”）。在第二列第三行中插入图像:”zhengcefagi.jpg”在第二列第三行以及第二列第四行的嵌套表格中依次插入网页元素.(3)在下表格中添加网页元素,在下表格第一行中插入一水平线.在下表格第二行四个单元格中分别插入四张图片在下表格第三行中输入文本”技术支持:安徽四维工作室”并设置文字大小为14像素,居中对刘,单元格高充为50像素,背景为”bottom_bg.gif”图像.5.保存网页文件，按F12预览实验4网页中的超级链链一．实验目的1.熟悉超级链接的使用；2.掌握文本超级链接3.熟悉锚点链接的创建4.熟悉电子邮件的创建5.熟悉图像超链接的创建二．实验内容1.超级链接2.文本超级链接3.创建锚点链接4.创建电子邮件5.创建图像超链接　　3．操作步骤　　打开Dreamweaver８新建一个站点，站点根文件设在＂第四章＼案例＼第三节案例＂下．在站点窗口中双击mdlijl,html打开mdlijl.html网页．1.插入命名锚点命名锚点用于在网页中标记和命名连链接的跳转位置，以便引用．在小标题＂希望 工程 路基工程安全技术交底工程项目施工成本控制工程量增项单年度零星工程技术标正投影法基本原理 全国工作会议在成都召开＂前插入命名锚点，操作步骤如下：（1）在“文档：窗口的”设计“视图中，将光标定位在小标题”希望工程全国工作会议在成都召开“文本前。（2）选择“插入“菜单下的”命名锚记“命令或者按下Ctrl+Alt+A快捷键，也可以在工具拦的”常用“类别中，单击”命名锚记“对话框，如图４－９所示：（3）在“锚记名称”文本框中，键入锚记的名称，这里我们输入名称为“btl”并单击“确定”锚记标记将在插入点处出现。如图４－１０所示：2、链接锚点将页首中的“希望工程全国工作会议在成都召开”文本链接到锚点bt1。操作步骤如下：（1）选中页首中的“希望工程全国工作会议在成都召开”文本。（2）执行以下操作将文本链接到锚点bt1.在属性检查器的“链接”文本框中，键入符号“#”和锚记名称“bt1”,用同样的方法将文章中其他三个小标题分别链接到”bt2”,”bt3”,bt4”锚点处。3、保存网页，按F12预览。在浏览器中预览时，单击上面的小标题，便会跳转到页面的相应文章处。实验5在网页中使用CSS样式一．实验目的1.熟悉设置CSS样式和参数2.掌握利用CSS样式改变超级链接3.熟悉外部CSS样式表及样式冲突二．实验内容1.CSS概述2.设置CSS样式3.设置CSS样式参数4.利用CSS样式改变超级链接5.外部CSS样式表及样式冲突　3．操作步骤1.启动Dreamweaver8，创建一个新的网页文件，在其中输入如上图所示的文本内容.2.定义“CSS样式”并用来修饰正文（1）使用“CSS样式”面板创建“zhengwencss”CSS样式1在“CSS样式”面板中，单击面板右下角的“新建CSS规则”按钮打开新“建CSS规则”对话框。2在“新建CSS规则”对话框中进行如下设置：在“选择器类型”域中选择“类（可应用于任何标签）”，在“名称”文本框中输入CSS样式名称“zhengwencss”.3选择新建样式的位置。此处选择“仅对该文档”，表示在当前文档中嵌入样式.④单击”确定”按钮,打开如图5-5所示的”CSS规则定义”对话框,设置相关参数(在”类型”中设置：字体为宋体，大小为12像素，行间距为期不180%，文字颜色为#33CC66；在“区块”中设置文字缩进2字体高（em）)。单击“确定”按钮的“zhengwencss”CSS样式。（2）对正文应用所定义的样式在Dreamweaver8的“设计”视图中，选中要应用样式的正文部分，然后在“属性”面板中“样式”下拉列表中选中要应用的“zhengwencss”CSS样式，CSS样式，就会立刻应用到所选的正文部分。3．重新定义“HTML”标签用来修饰标题（1）使用“CSS样式”面板重新定义“HTML”标签“”①在“CSS样式”面板中，单击面板右下角的“新建CSS规则”按钮，弹出新建“CSS”样式对话框，“选择器类型”选定“标签”选项，“定义在”选择“仅对该文档”。②在“标签“文本框中输入HTML标签，或者从下拉菜单中选择HTML标签（此处选择h2标签）。③单击“确定“按钮打开”CSS规则定义“对话框，设置相关参数（在“类型”中设置：字体为黑体，大小为18像素，粗细为粗体，文字颜色为#FF3366），单击“确定“按钮完成对h2标签的修改。（2）对标题应用”h2”标签在“设计“视图中，选区中标题部分，然后在”属性“面板中”格式“下拉列表中选中标题2。1．保存网页，按F12进行预览　　实验6框架技术与模板一．实验目的　1.熟悉利用框架制作一个网页2.掌握使用模板制作网页二．实验内容　设计一个如下图所示页面。三．操作步骤　　1.创建框架和框架集选择“文件”→“新建”，在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择“上方固定，左侧嵌套”的框架集。点击“创建”按钮会弹出“框架标签辅助功能属性”对话框，在对话框中为每一个框架指定一个标题（一般会选择默认即可），点击“确定”按钮。选择各框架操作如下：在框架面板中单击各框架，就可以选择文档中的相应框架。同时“属性”面板中也显示相关框架的属性。选择整个框架集操作如下：在框架面板中单击外边框，可选择文档中的框架集，同时在属性面板中显示相关框架集的属性。2．框架和框架集的保存选用“文件，保存全部”，保存所有文件。该命令将保存在框架集中打开的所有文档，包括框架集文件和所有带框架的文档。在此例中其框架是由4个网页文件组成，因此在保存文件过程中会先后弹出4个“保存”对话框。依次照下表内容在相应的对话框中输入当前要保存的文件名即可。 顺序 默认文件名 自定义文件名 文件所属的框架 1 Untitledframeset_1.html Departframeset.html 框架集 2 Untitled_1.html Depart_main.html 右下框架mainframe 3 Untitled_3.html Depart_left.html 左上框架leftframe 4 Untitled_2.html Depart_top.html 上框架topframe3．调整框架的大小插入框架后，会发现框架的大小不一定符合要求，因此需要对框架的大小做适当的调整。在此案例中调整上部框架的高为150像素，调整左侧框架宽为300像素。具体操作如下：将鼠标指针移到要调整的上部框架的边框线上，在出现双箭头后，此时打开的属性面板为框架集属性面板。在行文本框中输入150像素，同理将鼠标指针移到要调整的左侧框架的边框线上，在打开的框架集属性面板列文本框输入300像素。4．在框架中添加网页元素（1）将光标插入点置于“topframe”框架内，插入已经准备好的图像，此处为本案例image文件夹下的“banner1.jpg“。(2)将光标插入点置于“leftframe”框架中，然后插入一个“5*1”的表格，适当的设置表格和单元格的属性，然后在单元格中输入相应的链点文字，如图6—9所示。5.在框架中设置连接选中“leftframe”框架中的链点文字“青少年发展基金会”和“希望工程捐助中心”，并设置超级链接，分别链接到本案例目录下的oung_depart.Html、hope_depart.html页面（这两个页面已预先制作完毕），在其属性面板中设置其目标为mainframe。6.通过设置框架（框架集）属性改变网页外观在上案例的基础上设置边框宽度为2，颜色为“#FF9900”，在左边框架设置滚动条。具体操作步骤如下：(1)在“框架”面板（“窗口”—>“框架”）中单击围绕框架集的边框，打开框架集属性面板。(2)在边框下拉列表中选择“是”，确定在浏览器中查看文档时在框架周围显示边框。在边框问本框中输入2，边框颜色文本框中输入“#FF9900”。（3）在“框架”面板中单击框架“leftframe”选取定左边框架，打开框架属性面板（4）在滚动下拉列表中选定“是”，指定在框架中显示滚动条。（5）保存网页，按F12浏览。实验7在网页中使用CSS样式一．实验目的1.熟悉层的使用和时间轴的基本知识2.掌握创建时间轴动画方法；3.熟悉制作交互对象方法4.熟悉插入媒体对象方法二．实验内容　案例如图所示。图布局页面3．操作步骤　　1．创建层启动Dreamweaver８，新建一个HTML文档。选择“插入”面板的“布局”选项，单击“绘制层”按扭，如下图所示。鼠标指针变成十字型，然后在编辑区起始位置拖动鼠标，新建一个层。2.设置层的属性（1）选定层若要在“文档”窗口中选择一个层，请执行以下操作之一：单击一个层的选择柄。如果选择柄不可见，请在该层中的任意位置单击以显示该选择柄单击一个层的边框在一个层中按住ctrl+shift键并单击在层内单击并按ctrl+A以选择层的内容，再次按ctrl+A以选择层。（2）利用属性面板分别对四个图层设置背景颜色，操作步骤如下：①选定图层layer1.②打开属性面板，在属性面板的背景颜色文本框中输入“#ffff00”，③同理，依次对图层layer2、layer3、layer4的背景颜色进行设置，背景颜色分别为“#33CC66、#0099FF、#FF33FF”3．层的操作（1）选中层鼠标单击某个层，在层的四周出现8个控点和1个手柄，表示选中该层，同时属性面板中显示该层的属性设置值。拖动手柄可以改变层的位置，拖动控点可以改变层的大小。按着“Shift”键单击可以选中多个层。（2）激活层激活层与选中层不同。要想往层中添加内容，必须先激活该层。在层中任意位置单击鼠标即可激活层。若层是隐藏的，先选中再激活。（3）对齐层利用层的对齐命令，可以让多个层在某个方向上进行对齐。首先选中要对齐的层，执行“修改|排列顺序”命令，然后选择一个对齐选项。所有的对齐方式都是与最后一个选中的层在某个方向上对齐。（4）移动层若要移动一个或多个选定的层，请执行以下操作：在“设计”视图中，选择一个或多个层。执行下列操作之一：①若要通过拖动来移动，请拖动最后一个选定层的选择柄。②若要一次移动一个像素，请使用箭头键。（5）调整层大小若要调整层的大小，请执行以下操作：在“设计”视图中，选择一具层。执行以下操作之一以调整层的大小：①若要通过拖动来调整大小不一，请拖动该层的大小调整柄。②若要一次调整一个像素的大小，请在按箭头键时按住ctrl键。③在“属性”检查器（“窗口”-）“属性”）中，键入宽度和高度值。（6）层的嵌套在一个层中插入另外一个层称为层的嵌套。层在嵌套的情况下，继承其父层的所有属性而且总是随父层一起移动。操作方法如下：首先激活一个层，单击“绘制层”按钮，在层中拖拽出另一个层从而形成嵌套关系。4.在层中插入对象(1)在图层layer1中单击，在其中输入“层”（2）在属性面板中单击“居中对齐”按钮使文字居中对齐。（3）同理，依次在图层layer2、layer3、layer4中插入“层、叠、叠”三个字。5.保存网页，按F12预览。实验8页面的交互方式一．实验目的　　1.熟悉行为的基本概念2.掌握使用Dreamweaver8内置行为的方法3.熟悉网上捐助表单的使用4.熟悉在表单中使用行为的方法二．实验内容　给整个页面添加一个行为：当打开这个网页时,浏览器会弹出如下图所示的一个窗口。三．操作步骤(1)打开所要添加行为的网页,选中作为行为载体的元素,这里我们将整个网页作为载体。单击文档窗口底部左侧的标签选择器中的<body>标签，选中整个页面。(2)选择“窗口|行为”命令，打开“行为”面板。被选择的网页元素的标签会出现在行为面板的标题栏中。如下图所示。(3)在行为面板中单击添加按钮，就会看到在Dreamweaver8中内置的所有行为列表。在选择一个动作后Dreamweaver8会弹出一个对话框，这里选择“弹出信息”选项。在弹出的对话框中输入文字“谢谢您的捐助，好人一生平安！”。（4）单击“确定”按钮，这时在行为面板上列出给网页添加的一个动作，默认的是OnClick，即鼠标单击时弹出信息框。（5）在事件名称和动作名称之间单击会显示下三角按钮列表，在下拉列表中选中OnLoad，如下图所示。按F12预览页面效果。　　实验9网站的测试与发布一．实验目的　　1.熟悉网站测试的方法2.掌握申请空间和域名的方法3.熟悉站点发布的方法　二．实验内容1.网站测试2.申请空间和域名3.站点发布三．操作步骤　　1设置目标浏览器当用户保存编辑好的网页文件时，Dreamwraver8就会自动检测文档的跨浏览器有效性。用户可以指定何种浏览器为测试用的浏览器，同时Dreamweaver8会自动检测网页中是否用了测试浏览器不支持的标签和CSS结构。要指定对哪些浏览器进行当前页面的兼容性测试，可以在“文档设计”窗口中，单击按钮，弹出下拉菜单，在弹出的下拉菜单中选择“设置”命令，弹出“目标浏览器对话框”，如下图所示。该对话框中列出了各种浏览器，根据需要用户可以选择几种要测试的目标浏览器，在浏览器项的后面，还可以打开下拉列表选择该浏览器的版本。设置完成后，单击“确定”按钮即可。2．检查浏览器的兼容性具体操作如下：在“文档设计”窗口中，单击按钮，在弹出的下拉菜单中选择“检查浏览器支持”命令，进行目标浏览器兼容性测试。或者选择菜单中的“打开时自动检测”命令，在文档打开时进行目标浏览器的兼容性测试。如果页面中存在错误，前面曾经单击过的按钮式就会有变化。单击该图标，在弹出的菜单中选择“显示所有错误”命令，打开检查结果显示面板，显示所有错误列表。在错误中列出了各种目标浏览器中兼容性测试的结果，并在下面对错误进行了详细的说明。还可以将产生的错误报告保存为XML格式的文件，以方便查看。单击结果显示面板左侧的“另存为”图标，打开“另存为”对话框，输入要保存文件的文件名,单击“保存”按钮即可。单击结果显示面板左侧“显示”前的图标，弹出下拉菜单，在弹出的下拉菜单中选择“检查整个当前本地站点的目标浏览器”命令，可以对站点中的所有页面进行兼容性检查。