教你制作静态网页的方法

《教你制作静态网页的方法》由会员分享，可在线阅读，更多相关《教你制作静态网页的方法（17页珍藏版）》请在装配图网上搜索。

1、 教你制作静态网页的方法 一、网页设计根底 1、熟悉Dreamweaver 8的工作环境 2、创立新站点 创立本地站点：站点----管理站点----新建----站点〔前三步也可直接从“新建站点〞进入下面的设置向导对话框〕----跟随向导设置直至完成 3、网页文件的根本操作 a、创立、翻开和保存网页文件 创立：文件----新建----创立 翻开：文件---翻开----选择欲翻开的文件 或者在右边的文件浮动面版中选择翻开 保存：文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置〔标题、背景、背景图像、文本

2、等〕 c. 设置网页对象的颜色 网页对象，如页面背景、文字、都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法：1、汉字输入法设置为全角方式，按空格键即可输入。2、属性面版格式中：预先格式化的 换行：ENTER、SHIFT+ENTER 实例练习： 1、输入以下文字 书签夹在诗集里， 落叶夹在深秋里。 喜悦夹在生活里， 追求夹在人生里。 2、第一次设置格式为“无〞，字体为“华文行楷〞，字体颜色为“红色〞，字号为“5号〞，添加工程符号。然后保

3、存、预览。 3、第二次设置格式为“标题一〞，字体为“楷体〞，字体颜色为“蓝色〞，字号为“5号〞，添加工程符号，对齐方式为“居中〞。然后保存、预览。 比拟两次设置的效果。 e. 网页图片的插入和属性设置 插入图片，在对话框中选择图片。〔最好在建立站点时将欲用的图片素材复制到本地站点目录中〕 插入图像占位符，在图片准备好后再参加图片。参加方法：1、双击图像占位符；2、点“属性面版〞中的“指向文件〞，拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层〞；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层； 3、可以随

4、意移动层的位置；4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法： 1、 先用鼠标点至欲插入表格的位置； 2、 点插入面版中的“表格〞—“插入表格〞； 3、 确定行数、列数后确定即将表格插入到选定位置了； 4、 可在表格中任何单元格里插入图像、文字等。 h. 建立超 方法: 1、选中要建立超的文字或图像； 2、点右键“创立〞翻开的窗口或在属性的栏里，填入的目标。〔如： 本另一个网页，或外部网页如.google.，或电子如：mailto:zdhwangji21.〕 3、在页面属性里修改的属性： 修改--页面属性〔、活动、访问过〕

5、 二、制作实例1 制作要求：〔网页效果〕 1、 页面的背景图片为bg0100.jpg; 2、 在适宜的位置插入图片earth.gif; 3、 在网页中输入横排带阴影的文字“欢送访问网络工程08级3、4班主页〞 4、 将网页用index.htm为名保存在本地站点My site中。 操作步骤： 1、按下面操作建立站点：先新建一个文件夹My site〔下面举例中是建立在桌面上〕。 l 选择“站点〞---“新建站点〞命令； l 在弹出的对话框中，在“站点名称〞文本框中输入“应用实例1〞，并点下一步； l 按下列图选择“否，

6、我不想使用效劳器技术〞，然后点“下一步〞； l 按下列图选择“编辑我的计算机上的本地副本，……〞，并选择文件存放的目录路径，然后点“下一步〞； l 在“您如何连接到效劳器？〞选项里选择“无〞，然后点“下一步〞； l 然后点“完成〞。这样就已经建立好一个新的站点了，可以在Dreamweaver界面右边的“文件〞窗口里看到新建立的站点信息。 5、 2、在文件夹My site下创立文件夹images，以后此站点中用到的图像文件准备全部存放在images文件夹里；为方便，这里先把此例中需要用到的图片bg0100.jpg和earth.gif事先存放在此images文件夹里了。

7、 3、创立一个新网页：网页文件--- 新建--- 选“根本页〞---创立； 然后在网页编辑器窗口中，选择“修改〞-—“页面属性〞命令，在“页面属性〞对话框中设置各项参数； 在“标题〞文本框中输入“实例1〞； 4、用index.htm为名保存文件到本地站点My site中，保存并按F12预览网页。 5、选择“插入〞—“布局对象〞—“层〞命令，或单击工具栏中 “布局〞选项卡中的“绘制层〞按钮，在工作区适宜的位置上插入图片定位用的层Layer1，并将光标定位在层中。 6、“插入〞--“图像〞命令，或 “常用〞选项卡的“图像〞按钮，在翻开的对话框中选择文件eart

8、h.gif插入层中〔假设跳出“图像标签辅助功能属性〞对话框，里面“替换文本〞可填写“地球〞或其他，或者不填〕，然后调整层及图像的位置至适宜处；保存并按F12预览网页，假设图像位置不适宜，那么调整到适宜位置。 7、在网页适宜位置插入第二个层Layer2，在层中输入文字“欢送访问网络工程08级3、4班主页〞，并设置文字属性中的字体、大小等，颜色为黑色；然后保存并按F12预览，假设文字属性及位置不适宜，那么调整到适宜为止。 8、选中层中的文字，将其复制到剪贴板中；在网页适宜位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中，将Layer3中的文字颜色改为白色，并适当调整

9、层Layer3，使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览，假设效果不满意，那么调整到满意为止。 三、制作实例2 要求：〔网页效果〕 1、网页名为exa.htm，网页的背景图片为bg0040.gif，网页保存在My site文件夹中； 2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉〞，用HTM样式“标题1”将其格式化，预览页面效果； 3、在网页的中部区域插入导航条，导航条的6个按钮对应的图片是a1.gif, a2.gif, a3.gif, …..f2.gif, f3.gif, f4.gif〔共有24个〕，每个按钮可以一个My

10、 site文件夹中的HTML文件。 4、在网页的适宜位置上插入图片t4_1.gif, t4-2.gif, t4-3.gif。 5、在网页的底部区域插入图片wyfy.jpg，并为该图片建立电子； 6、预览页面效果后，修改保存网页文件。 操作步骤： 先将要用到的图片素材复制到My site文件夹里的images文件夹。 1、新建一个网页，并将新网页取名为exa.htm，保存在My site文件夹中；在网页编辑器窗口中，选择“修改〞--“页面属性〞命令，在“页面属性〞对话框中设置标题为〞应用实例2”, 背景图片为bg0040.gif； 2、在网页的顶部区域适宜的

11、位置上输入标题文字“人生的伴侣.知识的源泉〞，并选中这些文字。在属性面板中，选择格式中“标题1”； 3、在网页的中部区域适宜的位置插入光标，选择菜单“插入〞—“图像对象〞—“导航条〞命令，此时的网页编辑窗口中，会弹出“插入导航条〞对话框。 在“工程名称〞文本框中设置第1个按钮的名称为a；在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif, a2.gif, a3.gif, a4.gif 4个文件的路径和名称；在“按下时，前往的URL〞文本框中输入该按钮的对象名称和路径〔因此实例站点中只有index.htm和exa2.htm两个网页文件，所以这里先填入index.htm

12、来看看效果〕。 选中“预先载入图象〞和“使用表格〞选项；选择“插入〞下拉列表框中的水平方向设置导航条； 4、点“插入导航条〞对话框最上面的“+〞后，重复步骤3，可设置其他5个按钮〔这里为简便，后五个按钮只对“状态图像〞进展设置，其他三种图像不再设置了〕，设置完成后，效果如下： 5、在网页适宜的位置上插入3个用于图片定位的层，并在不同的层中插入images文件夹中的图片文件tu1.gif, tu2.gif, tu3.gif； 6、在网页的底部区域插入带图片wyfy.jpg的层，选中图片，在图片“属性〞面板的“〞文本框中，输入mailto:+EMAIL地址，建立电子；

13、 7、保存并预览网页，调整各方面属性及位置直至满意。最终效果如下： 在预览中尝试点击“科学技术〞按钮和“我要发言〞图片。 四、制作实例3: 用表格布局定位应用实例 要求：页面效果 (1) 创立新网页名称为shu.htm, 网页的背景图片为本bg0040.gif, 网页文件保存在My site 文件夹中. (2) 在网页中插入7行6列的表格, 按照页面效果对网页中单元格进展合并调整，在表格上方适宜位置的单元格里插入Flash文件shu.swt，在表格左边适宜位置的单元格里分别插入图片文件t5-1.gif,t5-3.gif,t5-4. gif, t

14、5-6. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部建立超,被的HTML文件在新窗口中翻开，在表格右边适宜位置的单元格中,插入逐帧动画文件shu-1.gif. (3) 预览页面效果后,保存网页文件. 操作步骤：. (1) 新建一个页面,选择[修改]|[页面属性]命令,在[页面属性]对话框中设置背景图片为bg0040.gif, 并将网页取名为shu.htm保存在My site 文件夹中. (2) “插入〞---“表格〞, 在弹出的“表格〞对话框中设置7行6列，表格宽度设为800像素，然后确定，那么网页中插入了一个7行6列的表格。 (

15、3) 选定第一行，然后点右键，在菜单中选“表格〞—“合并单元格〞；选定第五列的三、四、五行，然后点右键，在菜单中选“表格〞—“合并单元格〞； (4) 在表格中的第一行单元格中插入光标，选择菜单中“插入〞—“媒体〞—“Flash〞，此时可在表格顶部的单元格中,插入Flash文件shu.swf。 假设希望动画是透明的，那么在属性中将“参数〞设置入下列图： (5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的单元格中中分别插入光标，插入图像文件 shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。

16、将图像shu1.gif到exa.html页面〔在下面图像shu1.gif的属性面板中“〞项填入“exa.html〞〕，将图像shu5.gif到一个外部的〔比方到百度，在属性“〞项中填入.baidu.〕。 按F12键预览页面后，保存文件。下面是预览效果图： 五、制作实例4: 框架集的使用 要求：页面效果 操作步骤： 1、 新建站点名为 “框架集应用〞的站点； 2、 “文件〞--- “新建〞--- 选“框架集〞--- 选“左侧固定〞--- “创立〞，然后在弹出的“框架标签辅助功能属性〞对话框中按“确定〞。 3、 “文件〞--- “保存全部〞：将框架集

17、页面保存为index.htm，左侧框架页面保存为leftFrame.htm，右侧框架页面保存为rightFrame.htm。 4、 在下面属性窗口中按如下进展设置，然后保存并按F12预览； 5、 这里补充一点：建立了框架集页面之后，任何时候，在菜单“窗口〞中选中“框架〞，在右下侧会出现“框架〞窗口，点击里面不同局部那么可激活相应的框架页面； 6、 接下来，在左侧框架页面中用表格定位的方法插入三个竖排的图片作为导航按钮，效果如下： 7、 新建一个根本页面，在页面里输入“科学技术〞，保存页面为kxjs.htm； 8、 在mainFrame.htm页面中

18、，鼠标点中“科学技术〞图片，在下面的图片属性中设置其属性如下： 9、 保存并预览，在预览页面中，点击左侧的“科学技术〞图片，可见到kxjs.htm页面会在右侧的框架页中显示〔如下列图效果〕。 提示：在以后需要修改框架各局部页面尺寸时，如果找不到框架边框，可通过“菜单〞—“查看〞---“可视化助理〞--- 选中“框架边框〞，即可使框架边框显示。 六、其他一些应用 1、插入声音：例如插入MP3 (1) 在右边“标签〞窗口中点“行为〞---“+〞---“播放声音〞； 〔2〕 翻开对话框中选择要插入的MP3文件后确定： 〔3〕翻开“代码〞编辑窗口，将HTML代码中的自动播放控制由“false〞改为“true〞： 修改后： 〔4〕保存文件并按F12预览，即可自动播放了。 2、插入视频： (1) “插入〞----“媒体〞-----“ActiveX〞-----弹出窗口“确定〞，双击页面编辑窗口中产生的图标，在翻开的“选择Netscape插件文件〞对话框中，选择要插入的视频文件，然后确定；把图标大小调整到适宜。 (2) 保存文件并预览。 17 / 17