dreamweaver网页设计实验指导书要点Word格式文档下载.docx
- 文档编号:18949246
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:84
- 大小:8.30MB
dreamweaver网页设计实验指导书要点Word格式文档下载.docx
《dreamweaver网页设计实验指导书要点Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《dreamweaver网页设计实验指导书要点Word格式文档下载.docx(84页珍藏版)》请在冰豆网上搜索。
c)返回首页链接
在分页面中放置返回首页链接,以便浏览者在访问分页面后快速回到首页,以重新选择其他页面进行浏览。
d)添加网页元素,网页添加相应的内容,以传递网页信息给浏览者。
(2)根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。
(3)设计人员进行二级页面设计工作。
(4)制作人员开始制作工作。
(5)程序开发阶段。
(6)完成。
(7)网站测试和改进
站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试,通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。
测试站点的过程中应注意以下几方面:
a)监测页面的文件大小以及下载速度。
b)运行链接检查报告对链接进行测试。
由于在网页制作中,各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除,所以应检查站点是否有断开的链接,若有则自动重新修复断开的链接。
c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常,可进行浏览器兼容性的检查。
使用“检查浏览器”行为,可自动将访问者定向到另外的页面,这样就可解决在较早版本的浏览器中无法运行页面的问题。
d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的,需在不同的浏览器和平台上预览页面进行查看。
3、网上安家
网上安家即将站点发布到互联网上。
发布站点之前需在Internet上申请一个主页空间,以指定网站或主页在Internet上的位置。
网页发布通常使用FTP(远程文件传输)软件上传网页到服务器中申请的网址目录下,这样速度较快,也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。
4、网站维护与管理
(1)网站内容更新与沟通
站点上传到服务器后,还需对站点进行更新和维护,以保持站点内容的最新和页面元素的正常。
(2)合理运用新技术。
(3)推广你的Web地址。
二、网站设计技巧
1、网页风格要统一。
2、网站导航要清晰。
3、网页内容便于浏览。
4、网站Logo要有代表性。
5、设计网站的标准色彩。
6、页面容量越小越好,别超过75KB。
7、能适应不同浏览器及分辨率。
8、网页内容要精彩。
三、网页的基本组成
网页由网页标题、页眉、站标、导航栏、内容版块的页脚组成。
Ø
标题(说明网站的形式和类型)
站标即网站标识(logo)(代表了网站的形象)
页眉(放置网站最希望浏览者看的信息)
导航栏(网站的索引)
内容(是网站的精神所在)
页脚(网站设计者的基本信息)
四、网页元素
网页中包含的元素很多,主要包括文字、图像、表格、表单、动画和视频等。
五、网页的分类
1、按所处位置分类
按网页在网站中所处的位置可将网页分为主页和子页两类。
打开一个网站时看到的第一个页面就是主页,也称为首页;
与主页相链接的其他各个页面就称之为子页。
2、按表现形式分类
按网页的表现形式可将网页分为静态网页和动态网页。
静态网页:
指用HTML语言编写的网页,其制作方法简单易学,但缺乏灵活性。
静态Web站点由一组相关的HTML页和文件组成,这些页和文件驻留在运行Web服务器的计算机上。
Web服务器是响应来自Web浏览器的请求以提供Web页的软件。
当访问者单击Web页上的某个链接、在浏览器中选择一个书签、或在浏览器的地址文本框中输入一个URL时,便生成一个页请求。
静态Web页的最终内容由网页设计人员确定,当接到请求时,内容不发生更改。
动态网页:
这类网页使用ASP、PHP和CGI等程序生成,具有动态效果,且大多数以数据库为基础,使用语言为HTML+ASP或HTML+PHP或HTML+JSP等。
当Web服务器接收到对静态Web页的请求时,服务器将该页直接发送到请求浏览器。
但是,当Web服务器接收到对动态页的请求时,它将作出不同的反应:
它会将该页传递给一个负责完成页面的特殊软件。
这个特殊软件叫做应用程序服务器,如ASP页面就要安装IIS服务器。
应用程序服务器读取页上的代码,根据代码中的指令完成页,然后将代码从页上删除。
所得的结果将是一个静态页,应用程序服务器将该页传递回Web服务器,然后Web服务器将该页发送到请求浏览器。
当该页到达时,浏览器得到的全部内容都是纯HTML。
第二章Dreamweaver静态网页设计实验
实验一在Dreamweaver中建立一个站点
一、实验目的
1、掌握认识并熟悉Dreamweaver的工作界面。
2、能够自定义工作环境。
3、进行一个简单的网页设计。
二、实验内容
建立一个以自己名字命名的站点,该站点包含三个文件夹,image,css,mdb,四个网页,分别为index.html,jianjie.html,zuopin.html,xuexi.html,设置主页index.html的标题为“本站主页”。
其中index.html页面效果图如2-1-1所示。
图2-1-1
三、知识点分解
本实验主要涉及到如下知识点:
1、在Dreamweaver中建立站点。
2、在Dreamweaver站点文件列表下新建文件和文件夹。
3、在网页中插入背景图片。
四、实验步骤
1、创建本地站点步骤:
(1)打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图2-1-2所示对话框。
(2)在弹出“站点定义”对话框的“高级”标签中输入如下信息。
图2-1-2
(3)“站点名称”——输入站点名称如“myweb”。
(4)“本地根文件夹”——选择本地文件夹如“D\myweb”
(5)“自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表,选中该选项。
(6)“默认图像文件夹”——选择图像所放置的文件夹如“‘D\myweb\image”
图像文件夹一定要在站点文件夹下,且一般命名为image或images。
(7)“HTTP地址”——输入实用的完整网站的URL,以便Dreamweaver能检验使用绝对URL网站链接。
(8)“缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。
选中该选项。
(9)设置完毕,点击“确认”按钮。
(10)在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb,如图2-1-3所示。
图2-1-3
如果要对所建立的站点进行修改的话,可以选择菜单下[站点]|[管理站点]|[编辑]命令。
2、在站点文件列表下新建文件和文件夹步骤:
(1)在站点文件列表中右键单击“站点—myweb(D:
\myweb)”,在弹出的菜单中选择“新建文件夹”,文件列表中就会出现名为“新建文件夹”的文件夹,将该文件夹命名为image,同样操作建立css文件夹和mdb文件夹。
(2)在站点文件列表下新建文件有2种方法:
a)选择[文件]|[新建],在弹出的“新建文档”对话框中,选择“HTML”,就新建了一个HTML网页,然后再选择[文件]|[保存]或者是按【Ctrl+S】键,将网页名称改为index.html,同样操作建立jianjie.html,zuopin.html,xuexi.html。
b)在站点文件列表中右键单击“站点—myweb(D:
\myweb)”,在弹出的菜单中选择“新建文件”,文件列表中就会出现名为“新建文件”的网页文件,将该文件命名为index.html,同样操作建立jianjie.html,zuopin.html,xuexi.html。
3、在“文件列表”中选中index.html文件,单击右键,在弹出的菜单中选择“设为首页”,回到页面上,在“文档工具栏”中将“标题”更改为“本站主页”。
要想在站点文件列表下自动出现新建的文件和文件夹,前提条件必需在建立站点时选中“自动刷新本地文件列表”,否则的话必需单击“刷新
”按钮才能出现新建的文件和文件夹,效果图如图2-1-4所示。
图2-1-4
4、设计index.html网页步骤:
(1)在站点文件列表中双击index.html,打开该网页。
(2)将光标定位到“文档工具栏”中的“标题”,将标题中的内容改为“本站主页”,如图2-1-5所示。
图2-1-5
(3)单击“属性面板”中的“页面属性”按钮,弹出如图2-1-6所示的“页面属性”对话框,单击“背景图像”后面的“浏览”按钮,添加背景图像即可。
(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”
图2-1-6
(5)浏览测试。
浏览测试的方法有3种,第1种方法是直接按【F12】键,这是最快捷的方法,建议大家以后尽量采用这种方法。
第2种方法是单击如上图所示的“文档工具栏”中的
按钮,在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览当前网页。
第3种方法是选择[文件]/[在浏览器中预览]/[iexplore]菜单命令即可在IE浏览器中浏览测试当前网页。
思考题:
在设置网页背景图像时,如果图像太小,铺不满整个网页,怎么办?
实验二 在网页中使用文本
掌握“插入面板”中的“文本面板”、“常用面板”,“文本菜单”和“文本属性面板”的使用及设置文本格式的方法。
1、在页面中插入特殊符号,如:
“¥和空格符”。
2、在页面中插入日期,要求日期格式为“×
×
年×
月×
日星期×
×
:
(时)×
(分)”。
3、在页面中插入水平线。
4、在新的页面中编辑一个项目列表,如图2-2-1所示,要求:
字体为“楷体”、大小为“16pt”、颜色为“黄色”,网页背景颜色为绿色。
图2-2-1
三、实验步骤
内容1的实验步骤如下:
1、将光标定位到插入特殊字符的位置。
2、单击“插入”面板中的“文本”选项卡,如图2-2-2所示。
图2-2-2
3、单击
按钮,展开如图2-2-3所示的“字符”下拉列表。
图2-2-3
4、单击相应的选项即可在Web页面中添加相应的特殊字符,如图2-2-3所示。
5、插入不换行空格,可执行如下操作之一。
(1)在“插入”面板的“文本”选项卡中,单击“字符”
按钮,在下拉列表中选择“插入不换行空格”选项。
(2)选择[插入]/[HTML]/[特殊字符]/[不换行空格]菜单命令。
(3)按【Ctrl+Shift+空格键】键输入。
(4)将输入法切换到全角状态再按空格键。
内容2的实验步骤如下:
1.选择[插入]/[日期]菜单命令,或者选择“插入”面板的“常用”选项中,然后单击“插入日期”按钮,则打开如图2-2-4所示的“插入日期”对话框。
图2-2-4
2.在弹出的“插入日期”对话框中选择星期格式为“星期四”、日期格式为“1974年3月7日”、时间格式为“22:
18”。
如果希望网页在保存时系统都会自动更新日期信息,则选中选中
复选框。
4、单击“确定”按钮即可插入日期。
内容3的实验步骤:
1、在“文档”窗口中,将插入点放在要插入水平线的位置。
2、执行以下操作之一。
(1)选择[插入]/[HTML]/[水平线]菜单命令;
(2)单击“插入”面板的“HTML”选项卡,再单击“水平线”按钮,如图2-2-5所示。
图2-2-5
内容4的实验步骤:
1、在页面中输入如下文字:
在页面中插入特殊符号如:
将光标定位到插入特殊字符的位置。
单击“插入”栏中的“文本”选项卡,如图所示。
在页面中插入日期,设置日期的星期、日期、时间格式和保存时自动更新。
选择[插入]/[日期]菜单命令,或者选择“插入”面板中的“常用”选项卡,然后单击“插入日期”按钮,则打开“插入日期”对话框。
在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。
在页面中插入水平线。
编辑一个项目列表。
2、选择上面输入的所有内容,进行如下的操作:
(1)选中文字:
“¥和空格符”,单击“文本”属性面板中的“项目列表”
按钮,则会出现图2-2-1中所示的圆形符号,重复该操作进行下面的项目列表符号的添加。
默认情况下项目列表符号为圆形,如果想要出现的项目列表符号为方形,可以进行如下操作:
a)选择[文本]/[列表]/[列表属性]菜单命令,弹出如图2-2-6所示的“列表属性”对话框。
图2-2-6
b)在“列表类型”下拉框中选择“项目列表”,在“样式”下拉框中选择“正方形”。
c)单击“确定”按钮。
(2)选中文字:
单击“文本”属性面板中的“编号列表”
按钮,则会出现图2-2-7中所示的编号,重复该操作进行下面的编号的添加。
(3)上述操作进行完毕后,效果图如图2-2-7所示,把该图与图2-2-1进行比较可以发现编号所在的位置不一样,此时我们只需要把图2-2-7中带编号的文字给缩进一下就可以了,选中带编号的文字,单击“文本缩进”
按钮即可。
图2-2-7
(4)在进行完上面操作后我们发现,第2块列表区域的列表符号还是1,2,此时,先将光标移到“选择”前,单击“属性面板”中的“列表项目”,弹出如图2-2-6所示的对话框,此时将“列表类型”改为“编号列表”,样式改为“小写字母(a,b,c)”,单击“确定”按钮即可。
(5)在“属性”面板中“字体”下拉列表中选择“楷体”,如果该下拉列表中没有“楷体”,则需要添加“楷体”,单击该下拉列表中的“编辑字体列表”,弹出如图2-2-8的所示的“编辑字体列表”对话框。
图2-2-8
(6)在“可用字体”列表框中找到“楷体”,单击
按钮,则“楷体”同时出现在“字体列表框”和“选择的字体”列表框中,再单击“确定”按钮,则在”字体”下拉列表中就可以选择“楷体”。
如果添加了错误的字体,则可以单击
按钮删除该字体。
(7)同理在“属性”面板中“大小”下拉列表中选择“16pt”。
(8)单击“文本颜色”
按钮,在弹出的拾色器中选择“#FFFF00”或者直接在按钮后面的文本框中输入“yellow”。
颜色可以用2种方式表示,一种是用英文,一种是用十六进制代码。
(9)单击“属性”面板中的“页面属性”
按钮,在弹出的“页面属性”对话框,单击“背景颜色”后面的按钮,在拾色器中选择“#006600”。
3、按【F12】键,预览。
思考题:
在编辑字体列表时如果同时选择了隶书、楷体、华文彩云,也就是在字体列表中出现“隶书,楷体,华文彩云”,则文本最终会以哪种字体出现?
实验三 超级链接的建立
1、掌握超链接的基本概念和种类
2、能熟练设置文本和图片超链接。
3、能熟练设置锚点超级链接和电子邮件链接。
4、掌握将外部文件导入Dreamweaver中的方法。
某站点下有如下4个网页,index.html,meiwen.html,aiqing.html,hunyin.html,
1、首页效果图如图2-3-1所示,图像显示在网页的中间,单击“情感美文”会在新的IE窗口打开meiwen.html,单击“爱情故事”会打开aiqing.html,单击“婚姻情感”会打开hunyin.html,单击“与我联系”会发送电子邮件。
图2-3-1
2、hunyin.html效果图如图2-3-2所示,图2-3-2(a)是网页上半部分的效果图,图2-3-2(b)是网页下半部分的效果图,单击“再看一遍”能返回到“中华人民共和国婚姻法”,该法规内容在fa.txt中,单击右下角的“返回首页”能够返回首页。
图2-3-2(a)图2-3-2(b)
1、由图2-3-1可以看出,在该页面正中间有一张图像,图像显示了边框,当鼠标移到文字“情感美文”时会显示提示文字“情感美文”。
2、由图2-3-2可以看出,文字以表格的形式显示在网页上的,此时注意不是在网页中绘制表格,把文字录入进去,而是采用导入fa.txt文件,使他以“表格式数据”显示出来,“再看一遍”采用了锚链接,“返回首页”采用文字链接,两个链接都无下划线。
内容1的实验步骤:
1、新建4个HTML文档,将其分别保存为index.html,meiwen.html,aiqing.html,hunyin.html。
2、将光标定位到要插入图像的位置。
3、执行如下方法之一:
(1)选择[插入]/[图像]菜单命令,打开“选择图像源”文件对话框;
(2)单击“插入”面板的“常用”选项卡中的
按钮,打开如图2-3-3所示的“选择图像源文件”对话框;
(3)按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。
图2-3-3
4、在“选择文件名自”栏中选中
单选项,在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称(*.gif、*.jpeg和*.png)
5、在“相对于”下拉列表框中选择“站点根目录”选项。
6、单击“确定”按钮,弹出如图2-3-4所示的“图像标签辅助功能属性”对话框。
图2-3-4
7、在“替换文本”下拉框中输入想要说明的文字,这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。
8、单击“确定”按钮。
9、如果所选择的图像文件不在定义的本地站点中,系统会打开如图2-3-5所示的询问对话框,询问是否保存到本地站点目录下。
图2-3-5
10、在提示对话框中单击
按钮,打开“复制文件为”对话框,在该对话框中选择保存路径,并在“文件名”文本框中更改图像的名称。
11、单击“确定”按钮即可将所选的图像插入到网页中指定的位置。
12、选中该图像,打开“属性面板”,将图像的高度改为“700”,边框改为“1”,选择“居中对齐”
按钮。
13、选取要添加热区的图片,此时属性面板中出现4个热点工具,单击“矩形热点工具”
,在图像上“情感美文”绘制热区后,自动打开“热区”属性面板,如图2-3-6所示。
图2-3-6
14、在“属性面板”中将“链接”改为meiwen.html,在“替换”中输入“情感美文”,在“目标”下拉列表框中选择“_blank”.
15、用同样的方法绘制其他热点,并设置相应的链接。
16、热点链接完成后按【F12】键预览页面,当鼠标移至热区上时即可看到手形图标下面有一个提示文本。
17、在建立“与我联系”链接时,则要创建电子邮件链接。
创建电子邮件链接有两种方法。
方法一:
(1)在“文档”窗口的“设计”视图中,选择“与我联系”热区。
(2)执行下列操作之一插入该链接:
a)选择[插入][电子邮件链接]菜单命令;
b)在“插入”栏的“常用”选项中,单击“插入电子邮件链接”按钮。
(3)打开“电子邮件链接”对话框,如图2-3-7所示。
图2-3-7
(4)在“文本”文本框中输入显示在Web页面中的链接文本,如“与我联系”。
(5)在“E-Mail”文本框中输入要链接到的电子邮箱地址,如“csygold@”。
(6)单击“确定”按钮。
方法二:
使用“属性面板创建电子邮件链接,具体操作如下。
(1)在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像,如“与我联系”。
(2)在属性面板的“链接”文本框中,输入“mailto:
”,然后在它后面输入电子邮件地址,如“***************”,在IE浏览器中单击该链接的显示效果。
18、按【F12】键,预览。
此时电子邮件的发送是采用OutExpress或者是OutLook发送的。
所以单击“与我联系”时,会自动创建OutExpress连接向导。
内容2的实验步骤:
1、打开“hunyin.html”页面,选择[文件]\[导入]\[表格式数据],弹出如图2-3-8所示的“导入表格式数据”对话框。
图2-3-8
2、单击“数据文件”后面的
按钮,选择“fa.txt”文件,定界符选择“Tab”,单击“确定”按钮。
在Dreamweaver8中还可以建立命名锚记的链接,也就是锚链接。
使用命名锚记的链接可以跳转至文档内的特定位置。
建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。
3、创建命名锚记:
将插入点放在需要命名锚记的地方,如本例中“中华人民共和国婚姻法”。
4、执行下列操作之一。
a)选择[插入][命名锚记]菜单命令;
b)在“插入”栏的“常用”选项中,单击“命名锚记”按钮。
5、在打开的“命名锚记”对话框的“锚记名称”文本框中,输入锚记名称,如top,并单击“确定”按钮,锚记标记出现在插入点处。
6、创建到该命名锚记的链接:
选择要创建命名锚记的文本或图像,如本例中的“再看一遍”。
7、在属性面板的“链接”文本框中,输入一个数字符号“#”和锚记名称,如“#top”。
若要链接到当前文档中名为“top”的锚记,则输入“#top”。
若要链接到同一文件夹内其他文档中的名为“top”的锚记,则输入“index.html#top”形式的锚记引用。
8、选中“返回首页”,打开“属性面板”,将“大小”改为“16px”,对齐方式改为“右对齐”。
9、单击“链接”文本框后的
按钮,在打开的“选择新文件”对话框中选择要链接的文件,这里选择“index.html”(即首页),同时在“相对于”下拉列表框中选择相应的“站点根目录”选项。
10、单击
按钮,在弹出的“页面属性对话框”中,“分类”选择“链接”,将“下划线样式”改为“始终无下划线”,单击“确定”按钮。
11、按【F12】键,在IE浏览器中单击“再看一遍”链接,则返回到“
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver 网页 设计 实验 指导书 要点