当前位置:文档之家› Dreamweaver制作网站实例教程

Dreamweaver制作网站实例教程

Dreamweaver制作网站实例教程
Dreamweaver制作网站实例教程

Dreamweaver制作网站实例教程(超实用)

一、定义站点

1、在任意一个根目录下创建好一个文件夹(我们这里假设为E盘),如取名为MyWeb。

***备注:网站中所用的文件都要用英文名。

2、打开Dreamweaver,选择“站点—新建站点”,打开对话框。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(E:web)。然后确定即可。

***备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。

二、创建页面

1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。

***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。

2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。

3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。

4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。

***在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再使用。

***在网页上打入空格的办法是:把输入法调为全角。

***在网页上换行的办法是:shift+Enter。只按Enter则为换段。

三、为页面添加图片

1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以。

2、用菜单“窗口/对象”打开对象面板,点击“插入图像”,在对话框里选要插入的图片。如果会出现对话框:“你愿意将该文件复制到根文件夹中吗?”,必须选“是”,然后将它保存到刚建好的文件夹里。

3、选中该图片,打开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变大小。按住shift键,再拖动角上的点,可以使图片保持宽高比例拉伸。如要恢复这原始大小,则单击右下角的“重设大小”按钮。

4、“链接”可以直接在这里输入地址。“替代”是图片的说明,即鼠标指向图片所显示的文字;“边框”是图片边框宽度,“对齐”是对齐方式。

四、添加超级链接

1、为文字添加链接。

比如,在页面上输入“我的文章”,然后将其选中,打开属性面板,在“链接”一格中,选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了现开的窗口;或是选择blank即打开新窗口。

2、为图片添加链接

与上面文字的链接同理,插入图片,然后在属性面板中的链接一格中选择即可。

****图片可以创建不同的多个链接。方法如下:

在属性面板中的“地图”一项下面有一些图形,比如点击方形,光标变成十字,在图片上画一个蓝色矩形的热区,此时在属性面板上可以为这个热区设置链接地址,鼠标指向会显示。同样,再用圆形设置一个热区,就可以再为该图片设置其他链接了。

3、添加E-mail链接

选中需要添加E-mail链接的文字或图片,打开属性面板,在“链接”一格中输入填写邮件地址。格式如下:mailto:邮件地址。注意中间不空格。

4、如果链接到浏览器无法打开的文件,例如exe、Zip等文件,那么浏览者在点击这个链接的时候,就会实现文件下载、或是在线播放的功能。

五、表格的使用

1、点击插入/表格,打开表格面板进行设置。行数、列数、宽度、边框等,“单元格填充”为单元格内侧与内容的距离;“单元格间距”为单元格之间的距离,单位均为像素。

2、插入表格后,在表格的边框上点击一下,可以全选整个表格。然后在下面的属性面板里可以进行各种设置。

3、把光标移到其中一个单元格,此时看到的属性面板,就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。

六、关于表格的其他操作

一制作细线表格原理:

1、选中整个表格,设置其背景为黑色(该颜色即表格线的颜色)。

2、选中所有单元格,设置其背景为白色。

二自动格式化表格

1、先制作好一张表格,然后选中。

2、选菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。

三一像素分割条

1、插入一个1行1列,宽为200像素,边框边距均为0的表格。

2、选中表格,设置表格高为1像素,并设置一个背景色(即所要的线条颜色)。

3、切换到代码和设计窗口,将代码 删除。

七、用表格构建完整的页面

一网页顶部(一般包括图标、广告、导航菜单)

1、创建一个1行2列,宽为760像素,边框及边距均为0的表格。

2、选中表格,设置排列方式为居中对齐,背景色为#3366CC。

3、将光标置于左边单元格中,设置其水平排列为左对齐,垂直排列为顶端对齐,然后插入一张图像,一般在此插入的是网站的图标,即logo。

4、将光标置于右边单元格中,设置其宽度为500,水平排列为居中对齐,垂直排列为中间,然后插入图像,一般是网页广告,即banner。

5、将光标置于刚完成的表格之后,插入/表格,创建一个1行1列,宽为760像素,边框及边距均为0的表格。

6、选中刚创建的表格,设置排列方式为居中对齐,背景色为#005173。

7、在该表格中依次插入多个图像,作为导航条菜单。

二网页中部(左边栏目列表、中间网站新闻、右边栏目列表)

1、在导航条表格后面,插入/表格,创建一个1行3列,宽为760像素,边框及边距均为0的表格。并设置排列方式为居中对齐,背景色为#FFFFFFF。

2、将光标置于左边单元格中,设置其宽度为18%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入一张图像,插入一个导航条。

3、将光标置于刚插入的图片后,插入/表格,插入一个12行1列,宽为90%的表格。设置其单元格间距为1,背景色为#CCCCCC。

4、将光标放在表格第一个单元中,设置其高为20,背景色为#FFFFFF。插入/图像,插入一个导航文字前面的小点。同样设置其他11个单元格,这样左边的栏目分类列表就完成了。

5、将光标置于主体表格的中间单元格中,设置其宽度为66%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入/图像,插入一个导航条。

6、将光标置于图像后,插入/表格,插入一个4行1列,宽为95%的表格。设置其单元格间距为1,背景色为#CCCCCC。

7、将光标置于表格的第一个单元格中,拖动鼠标,将4个单元格都选中,设置高为60,背景色为#FFFFFF。

8、将光标置于主体表格右边的单元格中,设置其宽度为16%,水平排列为居中对齐,垂直排列为顶端对齐,插入/图像,插入一个导航条。

9、将光标置于图像后,插入/表格,插入一个7行一列,宽为90%的表格。设置其间距为1,背景色为#CCCCCC。

10、按住Ctrl键,用鼠标点击刚插入的表格的第1、3、5、7单元格,然后设置它们的高为55,背景色为#FFFFFF。

11、选中第2、4、6单元格,设置其高为6,背景色为#FFFFFF。

12、切换到源代码窗口,将第2、4、6单元格中的空格符号“ ”删除。

三网页底部(一般包括版权信息及其他相关内容)

1、将光标置于主体表格后,插入/表格,创建一个2行2列,宽为760像素,边框及边距均为0的表格。

2、选中表格,设置排列方式为居中对齐,背景色为#3366CC。

3、将光标置于表格第1行的左边单元格中,设置其宽度为50%,水平排列为默认,垂直排列为基线,背景色为#FFFFFF,然后输入版权信息,内容颜色随便。

4、将光标置于表格第1行右边单元格中,插入/图像,插入一个圆角图像,在它后面输入Email字样,设置其大小和颜色为1和#FFFFFF。

5、插入/表单对象/文本域,插入一个文本域,宽度可以随意。

6、插入/图像,插入一个GO的图像。

7、设置页属性。点击菜单修改/页面属性,在标题一栏中输入标题,并选择背景图像,将顶部边界设为0。***将整个网页分部分放到不同的表格中组合而成,还可以加快浏览器读取页面的时间。;因为浏览器是读完整个表格后才显示内容的,所以最好不要框在整个一个表格中。

八、用布局表格构建完整的页面

1、单击插入/布局,里面的布局视图按钮,就切换到布局视图状态(默认为标准视图)。也可以用菜单里的查看/表格视图/布局视图来进入。

2、先单击绘制布局表格按钮,然后在页面中像绘图一样创建出布局表格。

3、就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的大表格。

4、再单击绘制布局单元格按钮,然后在已经绘制好的布局表格中,再绘制布局单元格。

5、返回到标准视图,在已经划分好的表格里,再插入嵌套的小的表格,把页面再细化,就可以完成整个页面的设计了。

****注意把整个页面都放在一个大的布局表格中,因为这样的网页浏览速度会很慢。应该按照页面的版面和内容划分出几个布局表格,然后在其中分别插入布局单元格。

九、层的使用

1、点击插入/层。也可以点击图标,然后拖动鼠标创建出一个层。

3、选中创建的层,看属性面板。“层编号”和“标签”都使用默认即可。“层编号”是编程时需要用的,我们现在一般不用。“上”即距页面上边界的距离;“左”是距左边界的距离。“z轴”是层的顺序,数字大的叠加在数字小的上面。

****如不设置颜色时,层是透明的。

4、点中层左上角的小方框可以随意拖动层,大小也可以调节。

5、“溢出”一栏中,当文字多于层的大小时,visible(超出的部分照样显示)、hidden(超出部分隐藏)、scroll(不管有否超出,都显示滚动条)、auto(有超出时才出现滚动条)。

6、点击菜单窗口/其他/层,此时将出现层管理窗口。可以在其中修改层的名称和Z轴值,也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。

7、层的对齐。按住shift键,同时选中几个层。然后用修改/对齐,用这里的选项。

8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内,然后继续插入一个层,就得到了嵌套层。

⑶里面的叫子层,外面的父层。它们的Z轴顺序是一样的。拖动父层时,子层也会相对移动。移动子层时,父层不会随之移动。

十、了解时间轴

1、点击菜单中的插入/层,插入一个层。

2、在层中插入图片,如一张飞机的图片。(这里的图片也可以是一张小动画的.gif图像)

3、点击菜单中的窗口/其他/时间轴,打开时间轴窗口。

4、选中页面上创建的层,用鼠标按住层左上角的小方框图标,将层拖放到时间轴的第1帧中。这时自动创建了一个长度为15帧的时间轴。

5、选中时间轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置。

6、选中时间轴上第15帧,可以拖动该帧至任意长度,如30帧。

7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)

8、可以点中第15帧,右键选“增加关键帧”,在选中第15帧的状态下,拖动层到页面中下方。

9、勾选“自动播放”项。

十一、制作滚动公告牌

1、在页面上插入一个层,然后为层设置一个背景,作为公告版的框架。

2、然后在创建的层中插入嵌套层,将嵌套层移动到父层的下方。

3、在嵌套层中输入文本,并将其居中排列。

4、打开时间轴面板,将子层作为对象添加到面板中。

5、为子层创建一个向上移动的路径,将其移动到父层的上方。

6、拖动最后一关键帧,增长动画时间,然后勾选“自动播放”和“循环”两项。

7、选定父层,在其属性面板中将“溢出”属性设置为“hidden”。

十二、在页面中运用flash动画

1、点击插入中的Flash按钮,即可为页面插入一个动画。也可以选菜单插入/媒体/Flash来完成这一步。

2、选中已插入的动画,看属性面板。这里可以设置它的宽、高,也可以通过拖动来改变大小。

3、可以在这里点击“播放”来预览动画。

十三、让插入的flash动画变透明

1、当网页上已经有背景,或是想要在一张图片上再插入flash动画,而flash动画本身也有背景色,所以会影响美观,这时我们要把它做成透明动画。

2、如在页面上插入一张图像。

3、在图像上插入一个层,在层中插入好所需要的flash动画。

4、选中flash动画,在属性面板中点击“参数”按钮。

5、在“参数”的左面一格输入“wmode”。在右面“值”一格输入“transparent”。

十四、在页面中播放声音

1、在完成全页面以后,如果要为该页添加背景音乐,注意背景音乐一般是*.midi文件,这样的声音文件十分小,易于快速下载,其他格式不适合作为背景音乐。

2、在页面中所有表格之外,(注意此时编辑窗口左下方的标签选择栏中仅显示这一项,或是在左下角点一下,这样才能保证这个行为是添加在整个页面上的)。点击行为窗口上的“+”按钮,(或用菜单窗口/行为,打开行为窗口。)

3、从弹出菜单中选择“播放声音”。打开一个对话框。

4、在这个对话框里用“浏览”选择要播放的声音,并确定。

5、这时行为面板上自动显示了事件为onload,动作为播放声音。点击这一行,中间出现一个按钮。点击按钮,可以设置这个声音在什么事件下播放。可以选择“显示事件”/“IE5.0。

6、我们常用的如Onload(当页面载入时)、OnClick(单击鼠标)、OnMouseOver(鼠标移到对象上)、OnUnload(当关闭页面时)等。

7、该行为也可以设置在图片上、文字链接上。在文字链接上播放声音之前,先为文字添加一个空链接,即选中文字,在链接一格里输入一个“#”符号。

十五、弹出窗口

1、首先制作一个准备在小窗口中显示的页面(比如a.htm),由于这个弹出窗口不能太大,所以内容要少一些。

2、打开一个制作好的页面,把光标移到页面中所有我表格以外,点击行为窗口上的“+”按钮,从弹出菜单中选择“打开浏览器窗口”一项。

3、在对话框中里输入相应的设置。要显示的URL即a.htm,窗口宽度和高度自己定,单位为像素。属性中的各项参数需要就打勾。

4、设置完毕后,点“确定”。此时行为窗口中将显示打开浏览窗口这个行为,触发条件为Onload,如果不是要这项,就自己设置。

5、该行为也可以设置在图片上、文字链接上。。

6、可以用这个方法来表示对浏览者的打开时的欢迎、网站公告、离开时的告别语等。

十六、控制状态栏信息

1、打开页面,选中一张图片。

2、点击行为窗口上的“+”号按钮,选择设置文本/设置状态条文本。

3、在对话框里的“消息”一栏里,输入需要显示的话,如对这张图片的介绍。

4、可以设置行为的触发条件为OnMouseOver(鼠标移到对象上),这样当鼠标经过这张图片的时候,状态栏将出现相关的信息。

5、如果需要鼠标在移开后,这个信息消失,那么再次使用这个行为,在“消息”一栏里什么都不写,然后把触发条件改为OnMouseOut(鼠标移开)。

6、同样可以在一段文字上设置该行为。或是设置在整个页面上也可以。

十七、弹出信息

1、打开一个制作好的页面,点左下角项。点击行为窗口上的“+”按钮,从弹出菜单中选择“弹出信息”一项。

2、在设置窗口中“消息”一栏里输入想显示的消息即可。

3、触发条件设置为Onload(当页面载入时),就可以用来作为打开页面的欢迎信息。如设为OnUnload(当关闭页面时),就可以作为用户关闭页面时送别信息。

4、也可以在某一段文字上设置弹出信息。比如一段文字不愿让人复制,就选中整段文字,注意此时左下角显示〈P〉,即段落。

5、然后同样操作,消息可以输入版权之类的语句。只是设置触发条件为OnBeforeCopy(按右键时触发),或OnCopy(按右键选复制时触发)。

十八、动态图片按钮

1、准备好两张同样大小的图片,常用的方法是如一张为灰度照片,一张为彩色照片。或一张是按钮凹下的样式,一张是按钮凸起的样式。

2、举例:插入一个3行1列的表格,设置宽度为180像素。

3、将光标置于第一行,插入一张灰度的图片。

4、在属性面板中“链接”一栏里输入需要链接的地址,并给图片加上名称,如tu1.

5、点击行为窗口上的“+”按钮,从弹出菜单中选择“交换图像”。

6、此时在“图像”一栏中已显示要交换的图像,然后在“庙宇原始档为”一栏里选择好交换后的那张图。

7、下面有两个参数,“预先载入图像”和“鼠标滑开时恢复图像”,都要选中。

8、同样方法创建另外两个动态按钮。

十九、用框架布局页面

框架由两个主要部分组成——框架集和单个框架。

1、点击插入中的框架,即显示出已定义的13种框架的样式。我们上—中—下结构为例。

2、点击“上—中—下”框架结构的图标,此时在页上插入上下两个框架,将整个页面分割成了3部分。我们分别在上面输入“上”,在中间输入“中”,在下面输入“下”。

3、先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件,可以自己修改名字,如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候,该部分会以虚线框起来,这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。

4、至此,我们保存了四个页面,分别是框架集,和组成框架集的上、中、下三个页面。所以,其实这个框架是由四个页面组成的,所以用框架会降低一点用户浏览的速度。

5、点击窗口/其他/框架,打开框架的面板。在这里单击某个框架,即可选中该框架。当框架被选中时,编辑窗口中对应的框架出现虚线。

6、如:选中上面topframe,此时属性面板上显示的是上面这个框架的属性。同样选中中间框架和下面框架,也可以分别设置它们的属性。

7、在编辑窗口中,将鼠标放在两框架之间的边框上,光标将变成上下箭头形,此时点击边框,选中的是整个框架集。

8、此时属性面板上出现的是整个框架组的属性。可以在此设置框架集是否有边框、宽度及颜色等。不过最为重要的是可以在这里设置框架集中各个框架的大小。

9、在属性面板的右面的图示上选中上面框架,设置它的行为80像素,边框为0。

10、选中下面框架,设置行高为30像素,边框为0。

11、选中中间框架,设置行高为1,单位为相对。(相对的意思是:当前行相对于其他行所占的比例。设为1就是指占据除上和下以后的所有浏览窗口剩余空间。

12、举例:将光标置于上面框架topFrame上,右键选页面属性,设置背景色为#FF6600。然后插入/表格,插入一个1行2列,边框边距都为0的表格。设置第1个单元格的宽度为116像素,然后插入一张图片。将第2个单元格设置为水平对齐方式为居中,垂直排列方式为底部,然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。

13、将光标置于中部框架mainFrame中,右键选页面属性,设置背景色为#FFFFCC。然后插入一张大图像。

14、将光标置于下面框架bottomFrame中,右键选页面属性,设置一个背景图像。

15、另外做好三个页面,作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。

16、选中“狮子座”,在属性中为它设置好要链接的页面,然后在“目标”里选“mainframe”,即该内容在中间那个框架中显示。

17、同样设置“魔蝎座”、“双子座”的链接。

二十、跳转菜单

1、点击主菜单中的插入/表单对象/跳转菜单,也可以用插入/表单,中的跳转菜单图标,来调出跳转菜单设置窗口。

2、首先在“文本”一栏里输入“请选择相关网站”字样。然后点击窗口上的“+”号按钮。这时菜单里多了一个选项,这个选项没有链接,仅作为跳转菜单的说明文字。

3、在文一栏里输入需要的网站,如“新浪”,然后在“选择时,前往URL”一栏里输入网站链接地址

https://www.doczj.com/doc/aa6150739.html,,此时,菜单项一栏里又多了一个选项,这个选项对应一个网的链接地址。

4、使用同样方法,在菜单中添加其他一些选项及对应的链接。还可以用“上”“下”的按钮,来调整它们的顺序。

5、设置窗口的“菜单之后插入前往按钮”一项先不要选择。选中“更改URL后选择第一个项目”一项,这样当使用跳转菜单到某个页面后,如果返回到跳转菜单页面,此时页面中的跳转菜单默认显示的依旧是第1项内容。

6、设置完毕后点击“确定”即可。

****因为跳转菜单是一个表单,所以其实是先插入了表单(红色虚线区域),然后在表单中再插入了下拉菜单。

7、想修改选项,可以选中页面上的下拦菜单,此时点击属性面板中的“列表值”,即可修改各项内容了。

8、当选中跳转菜单时,行为窗口中也出现行为。双击该行为,也可以进入设置窗口,可以重新对其进行设置。

9、如果“菜单项”里的第一项就是链接,而不是上面所说的一句提示的话,那么就要选中“选项“中的“菜单之后插入前往按钮”。添加一个“前往”按钮。

二十一、运用插件(Dreamweaver功能扩展)

1、首先下载好需要的插件,此处举例用的是Animate Browser Window。这是一个动态改变窗口的大小的插件。打开Dreamweaver Extension Manager,安装下载好的插件。

2、启动Dreamweaver,在做好的页面上,右击左下角〈body>,然后点击行为窗口中的“+”号按钮,在其中选择“Animate Browser Window”,然后在其中做相应的设置。这里设置窗口打开之前高宽均为0,打开后为填满屏幕。触发条件为onLoad。

二十二、滚动字幕

1、把光标插入点放在需要插入滚动字幕的地方。

2、点击插入面板的“标签选择器”。

3、选择marquee标签,点击“插入”按钮。然后关闭“标签选择器”。

4、转换到代码视图。把光标插入点放在两个marquee标签之间。

5、选择“窗口”/“标签检查器”。可以在“标签检查器”中设置标签的各种用法。

6、点击behavior设置项右边的下拉箭头,选择滚动字幕内容的运动方式。其中三个选项意思分别是:Alternate:内容在相反两个方向滚来滚去。Scroll:内容向同一个方向滚动。Slide:内容接触到字幕边框就停止滚动。

7、direction属性设置字幕内容的滚动方向。四个选项意思为:down:向下运动。Left:向左运动。Right:向右运动。Up:向上运动。

8、scrollamount属性设置字幕滚动的速度。一般设为1。

9、scrolldelay属性设置字幕内容滚动时停顿的时间,单位为毫秒。如果要让滚动看起来流畅,数值应该尽量小。实例中设置为1毫秒。

10、width属性设置滚动字幕的宽度。这个任意,比如设置为300。

11、onMouseOver事件设置鼠标移动到滚动字幕时的动作,常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作,常设置为开始滚动。这个两项不能选,只能手工输入。在onMouseOver后面输入“this.stop();” 在onMouseOut后面输入“this.start();”

12、style属性设置字幕内容的样式。实例中设置字幕文字大小,也要手工输入“font:12px;”。

13、loop属性设置字幕内容滚动次数,默认值为无限。“-1”也为无限。

14、全部代码:https://www.doczj.com/doc/aa6150739.html, )一般它都包括两个文件:一个是index.htm,另一个一般是命名为images的文件夹,即我们所说的用来放置图片的。

3、定义好站点,然后将这两个文件(夹)复制到站点文件夹下。

4、双击index.htm文件,即进入首页的编辑状态。然后就可以修改这个页面让它符合自己的需要。这样即可完成首页。

三十一、将已有的网页保存为模板

****用于在一个网站中有大量重复出现的页面时。(在新建和使用模板之前一定要定义好站点)

1、选择某一页,点击文件/另存为模板,将当前页面保存为一个模板。此时打开了“另存模板”窗口,为该模板取名,然后保存。

2、此时可以发现在站点中自动创建了一个名为Templates的文件夹,在该目录中存有我们保存的模板。其扩展名为.dwt

3、这个模板目前在被运用时,是无法修改的。所以要设定模板的可编辑区域。

4、比如,在当前模板页面中,需要让页面中间部分可编辑,这样使用模板时就可以在其中添加内容了。选中页面中间部分的表格单元格(按住CTRL键在单元格里单击),点击主菜单中的插入/模板对象/可编辑区域。此时会打开对话框,在其中为模板取名,然后确定。

5、此时所定义的可编辑区域被浅蓝色线条框起来,并且左上角还有该区域的名称。将模板文件保存并关闭。

6、点击主菜单中的文件/新建,在新建页面窗口中点击上方的“模板”选项。

7、此时在“模板用于”一栏中列出了当前定义的站点,选中某个站点,在窗口中间一栏中显示的是该站点拥有的模板文件。选中某个模板,在“预览”一栏中可以预览该模板。然后点“创建”按钮,就新建了一个页面。

8、在出现的新页中,除可编辑区域外,其他部分是不能进行修改的。

三十二、上传自己的网站

1、申请网站空间,然后将它上传到网上。目前基本上没有免费空间,免费空间也都需要放置广告,或是申请一个收费空间,它都会提供十天左右的试用期,可以作为网站测试来用一下。

2、在点击申请后,会出现要求注册的表格,一般包括用户名、密码、邮箱、联系电话、省份、主页的名称、主页的类别、主页的简介等。

3、全部填完之后,即可得到以下几项:①用户名(刚才填写)②密码(刚才填写)③FTP上传地址④主页地址(有时是将以上几项发送到所填写的邮箱)

4、下载并安装FTP上传软件,可以用CuteFtp(昆山视窗/软件可以下载,免费)

5、打开CuteFtp软件,点击主菜单中的文件/站点管理器。

6、在打开的对话框中填写好FTP上传地址、FTP站点用户名称、FTP站点密码,然后点击连接,就可以连接到站点服务器。(第二次打开就自动连接,不用再填写了)

7、连接好以后,在页面上出现框架,左边为本地计算机上的文件,右边为远程计算机,只要将左边的文件(即做好的网站文件)一个个拖动到右边,即完成了上传。

三十三、宣传自己的网站

如何让网站地址让别人知道,方法有二:

1、用专门的软件,可以将网站登录到各大搜索引擎。

2、手工登录。如打开百度(https://www.doczj.com/doc/aa6150739.html,),在下面有个链接“网站登录”,点击后会被要求填写网站地址、名称、内容等,然后就被收入百度的搜索引擎了,这样别人就可以搜索到你的网站了。其他网站登录同理。

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B

二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式

《网页制作——美化网页》教学案例

《网页制作——美化网页》教学案例 一、概述 本课是《信息技术——美化网页》课时的内容。学生已经学习了制作简单网页的基本方法,这部分的主要内容是,网页中共享边框、导航栏的设置和主题的应用。如果采用传统的教学模式(即教师示范──学生模仿操作)也能完成教学任务,但对学生来说,他们只学会了计算机的操作,而对信息素养并没有得到提升。所以,本着学生自主探究学习意示、创新水平的培养,以综合提升学生的信息素养为目的,作者在教学时将本课中原来让“做中学”的方式改为了自主探究的学习方式,将课堂交给学生,让学生自主探究学习,教师在课堂中主要起到引导作用。 二、教学目标分析 1.认知目标:学会简单的对网页实行美化的方法。 2.技能目标: (1)掌握美化网页的几种操作方法;(2)能够应用主题,来改变网页的整体布局;(3)能够灵活地对几种操作方法实行综合使用。 3.情感目标:(1)通过师生协作和学生互相配合,培养学生合作团结的精神;(2)培养学生热爱美的情感,激发学生表现美的欲望,使学生的审美水平得到提升。 三、学习者特征分析 从八年级学生的认知特点来看,他们爱问好动、求知欲强、想象力丰富,对实际操作活动有着浓厚的兴趣,对直观事物感知较强,正处在形象思维向抽象思维逐步过渡的阶段。所以,在学习过程中,应鼓励学生自己观察,亲自动手操作,实行学生讨论和交流,师生共同归纳总结,体验学习。 在讲此内容之前,学生已经学过如何制作一个简单的网页,并且已对网页实行简单的修饰,这为学生进一步对美化网页作好了充分准备。 基于以上学生情况的分析,作者对教学过程大胆采用让学生为主体,教师为主导为教学思路实行设计。 四、教学策略选择与设计 在讲此内容之前,学生已经学过如何制作一个简单的网页,并且已对网页实行简单的修饰,这为学生进一步对美化网页作好了充分准备。 基于以上学生情况的分析,作者对教学过程大胆采用让学生为主体,教师为主导为教学思路实行设计。

网页设计与开发HTML、CSS、JavaScript实例教程 (郑娅峰 著) 清华大学出版社课后习题1-10章答案

第一章习题 1.HTML指的是( A )。 A超文本标记语言(Hyper Text Markup Language) B家庭工具标记语言(Home Tool Markup Language) C超链接和文本标记语言(Hyperlinks and Text Markup Language) 2.web标准的制定者是( B )。 A 微软B万维网联盟(W3C)C网景公司(Netscape) 3.用HTML标记语言编写一个简单的网页,网页最基本的结构是( D )。 A … … B … C … D … … 4.从IE浏览器菜单中选择____查看 源文件______命令,可以在打开的记事本中查看到网页的源代码。 5.实现网页交互性的核心技术是_______ JavaScript _______________。 6.CSS的全称是________ Cascading Style Sheet __________ ______。 7.写出你了解的专业网页编辑制作工具_____Dreamweaver_,_ EditPlus ___________。8.URL的全称是____Uniform Resource Locator _____________________________。 第二章习题 1.以下标记符中,用于设置页面标题的是( A )。 A B <caption> C <head> D <html> 2.以下标记符中,没有对应的结束标记的是( B )。 A <body> B <br> C <html> D <title> 3.文件头标记也就是通常所见到的____<head>…</head>_____标记。 4.创建一个HTML文档的开始标记符是___<html>______,结束标记符是 ____</html>_____。 5.标记是HTML中的主要语法,分____单_____标记和____双_____标记两种。大多 数标记是____成对_____出现的,由____开始_____标记和_____结束____标记组成。 6.把HTML文档分为__头部_______和______主体___两部分。___主体______部分就 是在Web浏览器窗口的用户区内看到的内容,而__头部_______部分用来设置该文 档的标题(出现在Web 浏览器窗口的标题栏中)和文档的一些属性。 7.HTML4或XHTML1.0的三种文档风格是__严格型、过渡型____、框架型_____。 8.简述一个HTML文档的基本结构。 一个完整的HTML文件包含头部和主体两个部分的内容,在头部内容里,可定义标题、样式等,文档的主体内容就是要显示的信息。<html>标记通常会作为HTML 文档的开始代码,出现在文档的第一句,而</html>标记通常作为HTML文档的结束代码,出现在文档的尾部,其他的所有的HTML代码都位于这两个标记之间,该标记用于告知浏览器或其他程序,这是一个Web文档,应该按照HTML语言规则对文档内容的标记进行解释;<head>…</head>是HTML文档的头部标记;<body>… </body>标记之间的文本是在浏览器中要显示的页面内容。</p><h2>《网页设计与制作》教学计划</h2><p>《网页设计与制作》教学计划 一、课程的性质与任务 课程的性质:本课程是为培养高职广告专业学生对网页设计与制作的基础知识而设置的一门专业必修实训课程。由于网页设计与制作所涉及的软件和相关知识十分广泛,针对设计艺术专业学生的专业方向和专业基础,本课程侧重于网页视觉效果和版式布局的设计与制作,对大中型网站制作中的所涉及到的动态程序编写等较复杂技术手段作了回避或仅作简单介绍。 课程的任务:通过本课程学习,使学生了解网页制作的基础知识、基本流程,并能熟练使用Macromedia Dreamweaver进行个人网站和中小型商业网站的设计、制作与维护更新,为培养高级网页设计专业人才打下坚实的基础。 二、教学基本要求 通过课程的教学,在理论知识教学和技能培养两方面要求学生达到下列目标。(一)理论知识方面主要达到: 1.了解互联网、网页、网站、超级连接、HTML语言、FTP、HTTP等基础网络知识; 2.了解网站设计制作的常用工具与基本流程 3.了解html语言的一般规律 4.了解不同网站类型不同的设计与制作要求 5.了解网站的整体结构规划 (二)能力方面主要达到: 1.熟练掌握Macromedia Dremweave的基本操作; 2.掌握photoshop中网页设计稿文件的切片与优化输出; 3.掌握网页图像的优化技巧; 4.了解网站的测试、发布、推广与维护; 三、教学条件 内部网络连接稳定的多媒体教室;保障每个学生都能单独使用一台电脑,每台电脑都配备Dreamweaver、photoshop等设计软件。 四、教学内容及学时安排</p><p>五、教法说明 1、本课程是一门专业技能训练课程,以学生的实践操作为主,注重设计与制作能力的培养、经验与技巧的积累。课程中引导学生在练习中解决具体的问题,使学生能灵活地、熟练地应用所学的理论知识。 2、教学练习中,以优秀实际案例为参照,增强教学的趣味性、实用性和针对性。 3、课程末要求设计制作一个完整的小型网站,并上传、发布和推广,以综合运</p><h2>网页设计与制作课程教学大纲</h2><p>《网页设计与制作》课程教学大纲 课程名称:网页设计与制作 学分及学时:4学分总学时72学时,理论36学时 适用专业:网络工程 开课学期:第四学期 开课部门:计算机与互联网学院 先修课程:计算机文化基础计算机网络 考核要求:考试 使用教材及主要参考书: 向知礼主编:《网页设计与制作》航空工业出版社2017年 杨松主编:《网页设计案例教程》航空工业出版社2015年 一·课程性质和任务: 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章,分为3大部分。前5章为第1部分,主要介绍网页制作的基本理论——HTML,同时穿插介绍Fireworks,Flash,Anfy等软件在网页制作过程中的应用;第6章~第8章为第2部分,主要介绍网页制作技术,包括CSS技术、客户端脚本技术(DHTML)以及XML技术;第9章~第10章为第3部分,主要介绍当前最流行的网页制作工具——Dreamweaver,通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论,而且强调网页制作的具体应用,使读者既能打下坚实的理论基础,又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线,介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的</p><p>基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布; 要求:教学过程中,须注重学生实践操作能力的培养,采取“面向实践、能力为先”的教学思路,教学内容应结合当前WEB技术的发展趋势,把握未来企业级WEB页面开发的发展方向,兼顾各行各业的需求变化,力争面向社会,服务于企业“互联网+”战略。 三、课程学时分配 四·课程教学中应注意的问题 理论课讲解WEB页面开发的原理及方法,并在多媒体教师机上进行演示操作;</p><h2>《网页制作案例教程》试题库</h2><p>第1大题(Dreamweaver单选题共27分) 第1小题(Dreamweaver单选题(1分) Dreamweaver是哪家公司的产品?(_______) A IBM B Corel C Microsoft D Adobe 第2小题(Dreamweaver单选题(1分) ()是网页与网页之间联系的纽带,也是网页的重要特色。 A 超 B 框架 C 表格 D 导航条 第3小题(Dreamweaver单选题(1分) 下面哪些不是网页编辑软件?(_______) A Dreamweaver B CuteFTP C Word D Flash</p><p>第4小题(Dreamweaver单选题(1分) 想将文字“2”设置为上标文字,在HTML5代码中应如何编写( ) A <ups>2</ups> B <ubs>2</ubs> C <sup>2</sup> D <sub>2</sub> 第5小题(Dreamweaver单选题(1分) <img>标记符中连接图片的参数是(_______)。 A href B src C type D align 第6小题(Dreamweaver单选题(1分) 下列的HTML标记中,定义表格的单元格是(_______)。 A tr B dr C br D td 第7小题(Dreamweaver单选题(1分)</p><p>如何去掉文本超级的下划线?( ) A a {text-decoration:none} B a {decoration:no underline} C a {underline:none} D a {text-decoration:no underline} 第8小题(Dreamweaver单选题(1分) 当有多个AP层时,可以对它们进行对齐操作。对齐结果都以(_______)的边框位置为标准对齐。 A 最先选定AP层 B 最后选定AP层 C 最左选定AP层 D 最右选定AP层 第9小题(Dreamweaver单选题(1分) 若想将一个DIV盒子设置为相对于父容器的绝对定位盒子,则其父容器的“Position”属性值应为() A 只能为absolute B 只能为relative C 除了static,其它都可以 D 只能为static</p><h2>《制作一个简单的网页》教学案例</h2><p>《制作一个简单的网页》教学案例 【课时安排】1课时 【教学内容分析】 本节课的主题:让学生认识网页概念并利用FrontPage软件制作简单的网页,学会建立网站的制作流程并建立一个只有文字的网页,本课是用该软件创建以“诗文荟萃”为主题的网站,也就是用所掌握的信息技术知识解决生活中的实际问题,使学生能够学以致用。发挥信息技术学科的优势,以素质教育的新理念,增强学生的动手能力,提高学生的综合素质。 以教材为基石,作为构建知识的桥梁,依据《课程标准》,创造性、合理的对教材进行二次开发与重组。如:导入新课时,利用学生对美好事物的向往,激发学生的求知欲和学习兴趣;采用任务驱动教学,增强学生自学能力;充分采用教材资源,使学生学会自学,并有的放矢;对学生的评价方式,采用学生作品展示,是学生学习的一个延续,对学生学习起到一种推进的作用。【分析教学对象】 1、学生的年龄特点和认知特点: 初二的学生对周围的一切充满了好奇,他们急于表现自己,对于教师布置的任务能够认真对待。对于FrontPage的知识了解不多;对网站兴趣较大,但制作知识几乎为零。本节课给学生提出一个初步的任务:创建一网站,并制作一简单网页,让学生体验初步的成功,这对于今后的学习有很大帮助。初二的学生创作欲强,因此本节课中,提倡、鼓励独立完成作品,培养学生自学意识与自学能力。 2、学习者对即将学习的内容应该具备的水平:</p><p>本课是学生初次认识FrontPage并能应用它制作简单的网页,培养学生综合运用知识解决问题的能力,以及各方面素质的一次综合评价。 【教学目标的设计】 1.知识目标: (1)了解网页的概念; (2)了解建立网站的一般流程; (3)初识FrontPage2003并学会建立网站; (4)学习制作一只有文字的简单网页。 2.技能目标: 学生通过探究学习过程中,掌握网站的建立方法与创建简单网页的操作。3.情感目标: 培养学生在学习过程,自主探究能力和分类汇总知识的能力。 【教学重点与难点】 (1)重点:建立网站、保存网页的方法。 (2)难点:网站与网页的区别,网页文件名与文件标题的区别。 【教学策略设计】 1、根据教材内容和学生的实际情况,本课采用“任务驱动”、“问题──探究”等教学方法,创设一个板报展览的情境(创设情境),以逐个任务和问题驱动学生多动手、多思考、多实践,从而了解和掌握FrontPage的基本知识和技能。 2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在学习过程中,提倡某些问题的分组协作与自主探究。建构主义学习理论强调以学生为中心,要求学生由知识的灌输对象转变为信</p><h2>网页制作教学案例</h2><p>《网页制作》教学案例分析 【课时安排】1课时 【教学内容分析】 本节课的主题:让学生认识并利用Dreamweaver软件制作简单的网页,学会建立站点和设计有一定主题思想的主页,本课是用该软件创建环保网站,也就是用所掌握的信息技术知识解决生活中的实际问题,使学生能够学以致用。发挥信息技术学科的优势,以素质教育的新理念,增强学生的动手能力,提高学生的综合素质。 1、以教材为基石,作为构建知识的桥梁,依据《课程标准》,创造性、合理的对教材进行二次开发与重组。如:导入新课时,利用学生对美好事物的向往,激发学生的求知欲和学习兴趣;采用任务驱动教学,增强学生自学能力;对学生的评价方式,采用学生作品展示,是学生学习的一个延续,对学生学习起到一种推进的作用。 2、对教材内容进行引申与组合,让学生利用网络强大的功能搜集资料,分组搜集不同内容,包括图片与文章,采用任务驱动,协作互助的授课模式,发挥教师的主导作用,增强学生的主体地位。通过创建环保网站增强学生的审美意识与想象力,提高学生的综合能力。 【分析教学对象】 1、学生的年龄特点和认知特点: 学生对周围的一切充满了好奇,他们急于表现自己,对于教师布置的任务能够认真对待。对于Dreamweaver的知识掌握的较好,但综合运用能力尚有欠缺;能够上网搜集资料,但速度与技巧还有待提高。本节课给学生提出一个总的任务:创建环保网站,此项任务的设置合理、艺术,对于学生各项能力的提高有很大帮助。 学生创作欲强,因此本节课中,提倡、鼓励独立完成作品,培养学生热爱自然热爱环境的情感,以增强学生的保护地球、保护环境的意识。 2、在学习本节课之前学生应具备的基本知识和技能: 能掌握基本的文字修饰与排版功能并能查找指定地点的文件,会浏览网页与下载资料。 3、学习者对即将学习的内容应该具备的水平: 本课是学生初次认识Dreamweaver并能应用它制作简单的网页,培养学生综合运用知识解决问题的能力,以及各方面素质的一次综合评价。 【教学目标的设计】 1.知识目标: (1)了解网页的概念; (2)初识FrontPage2000并学会简单地应用; (3)了解建立网站的一般方法; (4)学习制作包含文字、图片和声音的网页。 2.技能目标: 学生通过探究学习过程中,掌握网站的建立方法与创建简单网页的操作。</p><h2>网页制作案例教程 清华大学出版社习题答案</h2><p>第1章网页制作基础 一、填空题 1、index.html或者index.htm 2、有独立的域名和独立的存储空间。 3、超文本标记语言、简单标记语言 4、EXtensible HyperText Markup Language、可扩展超文本标签语言 5、个人类网站、信息类网站、机构类网站、电子商务类网站、娱乐休闲类网站、购物 类网站 6、基于对象和事件驱动 二、选择题 1、A 2、B 3、B 4、C 三、简答题 略 四、完成下面的实训题目 略 第2章网站设计与开发流程 一、填空题 1、网站需求分析、网站系统规划设计、网站开发、网站测试、网站部署和推广 2、网站建站目标设计、网站站点内容结构组织、网站建站素材收集 3、网站功能模块页面实现、网站功能模块页面测试 4、确定栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计 5、更好的宣传推广网站 二、选择题 1、A 2、A 3、A 4、A 三、简答题 略 四、完成下面的实训题目 略 第3章HTML基础 一、填空题 1、<hi> 2、标题标签、段落标签、格式化标签 3、有序列表(Ordered List),无序列表(Unordered List) 4、窗体和控件 二、选择题 1、 D 2、D 3、C 4、A 三、简答题 略 四、完成下面的实训题目 略</p><p>第4章网页基本元素设计 一、填空题 1、文本 2、编辑、选择性粘贴 3、左对齐、居中对齐、右对齐和两端对齐 4、有序列表和无序列表 5、透明的图像 6、绝对路径、相对路径和根目录相对路径 二、选择题 1、 A 2、C 3、C 4、B 5、C 三、简答题 1、在Dreamweaver中超链接的路径有哪些?网页制作的首选为哪种? ①绝对路径。是提供所链接文档的完整路径,且包含其应用协议(如http://)。主要用 于创建站外具有固定地址的链接,如要建立到中央电视台的链接就可以使用https://www.doczj.com/doc/aa6150739.html,。 ②文档相对路径。是以当前文档所在位置为起点到被链接文档经由的路径,省略对于当 前文档和所链接的文档都相同的绝对路径部分,而只提供不同的路径部分,如:gerenwenjian/jiangli.html。具有可移植性,是网页制作的首选。 2、根据你的理解,简述水平线在网页中的作用。 水平线可以分割网页的版面,对于网页的布局及信息的组织都能起到画龙点睛的作用。 3、什么叫命名锚记?在网页中有什么作用? 可以创建一种指向文档中指定位置的链接,这种链接被称为命名锚记链接或锚点链接。文档的指定位置是用命名锚记来标识的,创建命名锚记链接,首先需要在目标文档中插入命名锚记,然后再创建链接。 四、完成下面的实训题目 略 第5章网页布局规划设计 一、填空题 1、行、列、单元格 2、边距和间距 3、单元格、行或列两个或更多单元格 4、3、标准、布局和扩展 5、框架集、框架 二、选择题 1、 B 2、A 3、A 4、A 5、B 三、简答题 略 四、完成下面的实训题目 略</p><h2>《网页制作 案例教程》题库2</h2><p>第1小题(Dreamweaver单选题(1分) 下述关于图像对象的设置错误的是(_______)。 A 按住shift键后用鼠标拉动图像控制柄可保持图片宽高比例不变 B 直接在属性面板输入图像的宽高像素,也能改变图像的显示大小 C 图像属性面板中的“对齐方式”指的是调整图像与同一行中文本的相对对齐 D 对图像进行重新取样,不会影响图像品质 第2小题(Dreamweaver单选题(1分) 下列哪种软件是用于网页排版的?(_______) A Flash B Photoshop C Dreamweaver D CuteFTP 第3小题(Dreamweaver单选题(1分) Dreamweaver是哪家公司的产品?(_______) A IBM B Corel C Microsoft D Adobe 第4小题(Dreamweaver单选题(1分) 下列的HTML标记中,定义表格的单元格是(_______)。 A tr B dr C br D td 第5小题(Dreamweaver单选题(1分) 想将文字“2”设置为上标文字,在HTML5代码中应如何编写( ) A <ups>2</ups> B <ubs>2</ubs> C <sup>2</sup> D <sub>2</sub> 第6小题(Dreamweaver单选题(1分) <img>标记符中连接图片的参数是(_______)。 A href B src</p><p>C type D align 第7小题(Dreamweaver单选题(1分) 要隐藏一个ap层(设置了绝对定位DIV盒子),需要把它的可见性设置为(_______)。 A default B inherit C visible D hidden 第8小题(Dreamweaver单选题(1分) 如何去掉文本超级链接的下划线?( ) A a {text-decoration:none} B a {decoration:no underline} C a {underline:none} D a {text-decoration:no underline} 第9小题(Dreamweaver单选题(1分) (1)在CSS中下列哪一项是“右边框”的语法() A border-right<值> B border-top:<值> C border-right-width: <值> D border-top-width:<值> 第10小题(Dreamweaver单选题(1分) 以下哪一种选择器是标签选择器() A #newbox br B table C #newtext D .newtext 第11小题(Dreamweaver单选题(1分) 下列(_______)可能是自定义样式的名字。 A body B .pic C text D c</p><h2>《网页制作案例教程》题库</h2><p>第 1 大题Dreamweaver 单选题(共27 分)得分:4 第 1 小题Dreamweaver 单选题(1 分)得分:0 下面不是Web 网页常使用的图像格式是(___d _________________________ ) A GIF 格式 B JPEG格式 C PNG格式 D RAW 格式 第 2 小题Dreamweaver 单选题(1 分)得分:1 在复制带有格式的文本时,可以先将容粘贴到(___c ___ ),再将其中没 有格式的文本复制到剪贴板上,最后再粘贴到Dreamweaver 编辑窗口中。 A 文件夹 B 记事本 C Word 文档 D Excel文档 第3小题Dreamweaver单选题(1分)得分:1 下面哪些不是网页编辑软件?(_____________________________________ ) A Dreamweaver B CuteFTP C Word D Flash 第4小题Dreamweaver单选题(1分)得分:1</p><p>关于HTML5 的描述,以下哪一个是错误的() A HTML5 版本中, W3C规定标记的规写法是小写格式 B HTML5 的最基本语法是 <标记符 > ...... </标记符 > C V!DOCT YPE htm 是 HTML5的标准网页声明 D 当 HTML5标记用错时,浏览器会给出出错信息 第5小题Dreamweaver单选题(1分)得分:1 在下列的HTML中,哪个可以插入折行?() A B<break> C<br> D<lb> 第6小题Dreamweaver单选题(1分)得分:0 下列的HTML标记中,定义表格的单元格是(_______ )A tr</p><h2>网页设计与制作实例教程习题答案.doc</h2><p>网页设计与制作实例教程<br>习题答案<br>第 1 章 网页与网站基础<br>一、选择题<br>1.A 2.B<br>二、判断题<br>1.√ 2.×<br>三、问答题<br>略<br>3.C 3.√<br>4.C 4.×<br>5.A 5.√<br>第 2 章 网页规划设计<br>一、选择题<br>1.D 2.A 3.C 4.A 5.C<br>二、判断题<br>1.× 2.× 3.× 4.√ 5.√<br>三、问答题<br>1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体 需求分析。(每个阶段可再详细描述。)<br>2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容<br>3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的 诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个 色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略)<br>第 3 章 初识网页制作软件<br>一、选择题<br>1.C 2.C<br>3.B<br><br></p><p>二、填空题<br>1.代码、拆分、设计 2.文件、资源、规则 3.超级链接<br>三、操作题<br>略<br>第 4 章 制作网页内容<br>一、选择题<br>1.D 2.B<br>二、判断题<br>1.√ 2.√<br>三、操作题<br>略<br>3.A 4.D 5.ABD 6.D 3.× 4.√ 5.√ 6.√<br>7.B 8.D 9.A 10.A 7.√ 8.√ 9.× 10.√<br>第 5 章 设置网页超级链接<br>一、选择题<br>1.D 2.D<br>二、判断题<br>1.× 2.×<br>3.A 4. D 5. C 3.× 4.√ 5.×<br>第 6 章 使用 CSS 样式美化网页<br>一、选择题<br>1.B 2.C 11.A 12.A<br>3.C 13.C<br>4.B 14.D<br>5.A 6.D 7.D 15.D 16.A 17.A<br>8.D 9.B 10.C 18.B 19.D 20.D<br>二、简答题<br>1.× 2.× 3.× 4.× 5.× 6.× 7.√ 11.× 12.× 13.× 14.√ 15.√ 16.√<br>8.× 9.√ 10.√<br>第 7 章 规划布局网页<br>一、选择题<br>1.B 2.A<br>二、简答题<br>3.B<br>4.B 5.D<br><br></p><h2>《网页制作案例教程》题库</h2><p>第1大题Dreamweaver单选题(共27分) 得分:4 第1小题D r e a m w e a v e r单选题(1分)得分:0 下面不是Web网页常使用的图像格式是(___d____) A GIF格式 B JPEG格式 C PNG格式 D RAW格式 第2小题D r e a m w e a v e r单选题(1分)得分:1 在复制带有格式的文本时,可以先将容粘贴到(___c____),再将其中没有格式的文本复制到剪贴板上,最后再粘贴到Dreamweaver编辑窗口中。 A 文件夹 B 记事本 C Word文档 D Excel文档 第3小题D r e a m w e a v e r单选题(1分)得分:1 下面哪些不是网页编辑软件?(_______) A Dreamweaver B CuteFTP C Word D Flash 第4小题D r e a m w e a v e r单选题(1分)得分:1 关于HTML5的描述,以下哪一个是错误的() A HTML5版本中,W3C规定标记的规写法是小写格式 B HTML5的最基本语法是<标记符>……</标记符> C <!DOCTYPE html>是HTML5的标准网页声明 D 当HTML5标记用错时,浏览器会给出出错信息</p><p>第5小题D r e a m w e a v e r单选题(1分)得分:1 在下列的H T M L中,哪个可以插入折行?() A B<b r e a k> C<b r> D<l b> 第6小题D r e a m w e a v e r单选题(1分)得分:0 下列的HTML标记中,定义表格的单元格是(_______)。 A tr B dr C br D td 第7小题D r e a m w e a v e r单选题(1分)得分:0 下面哪个CSS属性是用来更改背景颜色的() A text: B color: C bgcolor: D background-color: 第8小题D r e a m w e a v e r单选题(1分)得分:0 关于层和表格的关系,以下说法错误的是(_______)。 A 表格和层可以互相转换 B 表格可以转换成层 C 只有不与其它层交叠的层才可以转换成表格 D 表格和层不能互相转换 第9小题D r e a m w e a v e r单选题(1分)得分:0 当有多个AP层时,可以对它们进行对齐操作。对齐结果都以(_______)的边框位置为标准对齐。</p><h2>网页设计与制作课程教学案例</h2><p>《网页设计与制作》课程教学案例 项目名称——淮阴师范学院本科教学评建网建设 项目目标: 1.知识目标:运用所学的网页设计与制作知识解决实际问题。 2.能力目标:通过教师、同学及网络的帮助,感受实际工作中网站设计的一般工作流程,学会表达解决问题的过程和方法,培养学生综合运用知识分析、处理实际问题的能力;锻炼学生发现问题的能力,提高学生组织能力、交往与合作能力、学习技能。 3.教育目标:培养学生的情感、态度、价值观:培养学生实际操作能力,以及与同伴合作交流意识和能力,加强团队合作。 项目重点: 1.使学生了解实施一个项目的全流程。 2.综合运用知识解决实际问题。 3.熟练所学的网页设计与制作知识解决实际实际项目。 项目难点: 1.学生综合运用知识来解决实际问题的能力。 2.分工合作完成整个项目。 3. 网页界面创新能力。 教学方法: 项目教学法 教学过程:</p><p>一、项目要求: 为迎接国家教育部本科教学工作水平评估,要体现“以评促建,以评促改,以评促管,评建结合,重在建设”的方针,实现评估倒计时,包括“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块,网站中应包含“学院主页”与“教务在线”链接,网站风格要简介、清爽。 确定任务:建设淮阴师范学院本科教学评建网项目。 二、项目分析(导入课程) 1. 我们的学校有这种需求吗?有哪些学校有类似的需求? 教师根据回答进行总结,展示类似项目较广。 2. 引出今天的课程,展示一张由教师最终设计的效果图为例子。将Photoshop、Dream weaver软件与具体的网站设计工作结合起来,设计一张实际工作中的网站效果图,让学生从亲身的感受中说、做、学,优化教学过程,改进学习方式,并倡导学生主动参与学习和同学交流合作,用不同的方式来学习知识。通过自己的讨论交流进行探索和实现问题的解决,形成一定的知识解决模型,最终解决实际生活问题。 示范项目:以一张网站效果图为例,细致演示项目的整个流程。 (整个演示过程制作成多媒体课件(视频录像)放在局域网上,可供学生在实战项目时,遇到问题可随时下载再观看。) 3.项目分析 得到问题解决的思路与方法。 分析: 根据客户提供的需求,利用Word(visio)、Photoshop、Dreamweaver等软件制作项目策划或草图设计、效果图、网站前台方案。整个设计过程分为以下四个子项目: 1.项目需求的整理。 2.项目策划(详细)或草图设计(粗略)。 3.效果图设计。 4.后期制作与前后台代码整合。 三、教学策略分析 1.学习者分析 学生学习该项目之前已经掌握了Photoshop、Dreamweaver的基本命令,能够熟练使用这些网页设计与制作软件。 2. 教学理念和教学方式 教学是师生之间、学生之间交往互动与共同发展的过程。计算机教学,要紧密联系学生的生活实际。采用项目教学法学习,教师可以利用网络的优势,成为知识传播者、问题情境的创设者、尝试点拨的引导者、知识反馈的调整者。学生是学习的主人,在教师的帮助下,小组合作交流中,利用动手操作探索,发现新知识,自主学习。 教学评价方式多样化,包括师生评价、学生评价、小组评价等多种方式。在课堂上利用明确无误的工作表结果对学生的学习和练习作出评价,让每个学生都能体验到成功的乐趣。采用项目教学法,让学生把分散知识的各知识点综合起来,应用于实际的行业工作中。 四、教学准备</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="8567619"><a href="/topic/8567619/" target="_blank">网页制作教程案例</a></li> </ul> </div> </div> </div> <div class="container"> <div>文本预览</div> <div class="textcontent"> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/c612723619.html" target="_blank">案例九简单的HTML网页制作.</a></li> <li><a href="/doc/0015318976.html" target="_blank">《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解</a></li> <li><a href="/doc/59638370.html" target="_blank">《网页设计与制作》教学计划</a></li> <li><a href="/doc/7f5069739.html" target="_blank">网页制作教程2网页中表格的设置</a></li> <li><a href="/doc/a76677229.html" target="_blank">《网页制作案例教程》题库</a></li> <li><a href="/doc/e6466488.html" target="_blank">网页设计与制作实例教程</a></li> <li><a href="/doc/2b2155558.html" target="_blank">网页制作案例教程-清华大学</a></li> <li><a href="/doc/5814489646.html" target="_blank">网页设计与制作课程教学大纲</a></li> <li><a href="/doc/8313777616.html" target="_blank">Dreamweaver网页设计与制作案例教程 (1)</a></li> <li><a href="/doc/c53836623.html" target="_blank">网页制作案例教程试题库</a></li> <li><a href="/doc/0b13043579.html" target="_blank">Dreamweaver CS6网页设计案例教程</a></li> <li><a href="/doc/f915178890.html" target="_blank">网页设计与制作课程教学案例</a></li> <li><a href="/doc/4016929927.html" target="_blank">网页设计与开发HTML、CSS、JavaScript实例教程 (郑娅峰 著) 清华大学出版社课后习题1-10章答案</a></li> <li><a href="/doc/764576318.html" target="_blank">《制作一个简单的网页》教学案例</a></li> <li><a href="/doc/9317942499.html" target="_blank">网页设计与制作案例教程 PPT</a></li> <li><a href="/doc/d410381520.html" target="_blank">网页制作案例教程(HTML+CSS+JavaScript) 清华大学出版社 第8章 CSS样式表</a></li> <li><a href="/doc/1d17017351.html" target="_blank">2019年DW网页制作教程案例</a></li> <li><a href="/doc/5c12608767.html" target="_blank">Dreamweaver实例视频教程之网页设计与制作100例</a></li> <li><a href="/doc/828781872.html" target="_blank">网页制作案例教程 清华大学出版社习题答案</a></li> <li><a href="/doc/b816703688.html" target="_blank">HTML5+CSS3网页设计与制作案例教程</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0619509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0a19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9619184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3319258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d719211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a519240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9019184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8819195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8319195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7b19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7019336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6819035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6819035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4219232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2a19396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2c19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1619338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e619066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b019159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "a52a0a88d0d233d4b14e69ba"; </script> <script type="text/javascript">bdtj();</script> <footer class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2022 www.doczj.com <a href="/sitemap.html">网站地图</a></p> <p> <a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a>  本站资源均为网友上传分享,本站仅负责分类整理,如有任何问题可通过上方投诉通道反馈 <script type="text/javascript">foot();</script> </p> </footer> </body> </html>