WEB网站设计基础.docx
- 文档编号:29347020
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:48
- 大小:529.68KB
WEB网站设计基础.docx
《WEB网站设计基础.docx》由会员分享,可在线阅读,更多相关《WEB网站设计基础.docx(48页珍藏版)》请在冰豆网上搜索。
WEB网站设计基础
WEB网站设计基础
实验指导书
前言
随着Internet(互联网)的迅速发展,越来越多的人在使用互联网。
网上提供内容者也越来越多,政府部门、服务机构、教育机构、银行、企事业单位甚至是各人都加入到互联网信息提供者的行列里面,其最主要的手段就是制作网页并建立网站。
HTML是HypertextMarkupLanguage(超文本标记语言)的缩写,它是构成Web页面(Page)的主要工具。
在网上,如果要向全球范围内出版和发布信息,需要有一种能够被广泛理解的语言,即所有的计算机都能够理解的一种用于出版的“母语”。
WWW(WorldWideWeb)所使用的出版语言就是HTML语言。
ASP(ActiveServerPage)是Microsoft推出的一种服务器端命令执行环境,它让读者可以轻松地结合HTMLWEB页面、脚本(Script)程序和ActiveX组件建立或执行动态、交互式WEB服务器应用程序。
在教学实践过程中,我们发现不少初学网站设计的学生对于网站设计概念复杂、规则繁多、使用灵活、难点较多的特点无所适从,很多问题知其然而不知其所以然,似是而非。
要尽快学会和掌握网站设计编程的技巧,去解决实际问题,就必须要多读程序,多编写程序,多上机调试程序。
因此,我们根据实际教学经验和体会,编写了这本实验指导书。
Dreamweaver:
Dreamweaver是美国Macromedia公司开发的集网页制作与管理于一身的“所见即所得”的网页编辑器,它是一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出跨平台限制和浏览器限制的充满动感的网页。
本次使用的Dreamweaver MX2004是它的最新版本。
本实验指导书结合教材,按照大纲要求,针对网站开发设计了十个实验。
在内容安排上,本书注重理论与实践的结合,学生通过每个实验的实验原理部分可以复习相关知识点,按照实验内容部分的要求,可以通过上机实践巩固所学的理论知识。
通过学习与练习的结合,使学生能够真正地掌握HTML语言编程的技巧,掌握Dreamweaver软件开发网站技能,提高学习的兴趣及解决实际问题的能力。
教育的改革将不会停止,教材也将会不断推陈出新。
目前本指导书即将推出,将接受广大教学第一线教师及同学们的检验。
由于我们的水平和经验有限,本书难免存在缺点和不足,希望专家和使用本书的师生提出批评和建议,以便本实验指导书的质量不断
编者
2008年2月
实验一HTML基础
一、实验目的:
1.熟悉HTML语法;
2.熟悉HTML文件结构;
3.熟悉利用编辑器编辑HTML文本;
4.练习用记事本编辑HTML文本并用IE浏览器执行。
二、实验内容:
1.构建最简合法的HTML文档“我的第一个网页”。
2.使用简单文字标记进行文字处理。
3.在网页中创建超级链接。
4.在网页中插入图片。
三、实验要求:
1.掌握使用记事本进行简单网页编辑的方法。
2.熟练掌握基本标记及属性的书写。
四、实验学时:
2学时
五、实验步骤:
1、实验准备:
(1)在硬盘上为本实验建立文件夹(以下称为“实验文件夹”),用于保存本实验的实验结果;
(2)准备1幅图片,其扩展名分别为.jpg,将这幅图片放到实验文件夹中。
2、构建最简合法的HTML文档“我的第一个网页”:
(1)从开始菜单启动记事本;
(2)在记事本中,录入一个最简合法HTML文档;
(3)设置该文档在最终在浏览器中显示的标题为“我的第一个网页”;
(4)在页面添加可见的文本“我的第一个网页”;
(5)使用记事本的菜单“文件”→“保存”,在“另存为”对话框中,在“保存类型”下拉列表中选择“所有文件”,录入“文件名”myfirstpage.htm,单击“保存”按钮将该页面保存到实验文件夹。
提示:
最简合法HTML文档必须包含的元素有html、head、title、body。
3、使用简单标记进行文字处理:
(1)从开始菜单启动记事本;
(2)在记事本中,录入一个最简合法HTML文档;
(3)设置该文档最终显示标题为“简单文字处理”;
(4)在文档的
和之间,插入适当元素使最终网页中显示以下内容:这是一段文本
这是一段文本
©Microsoft®Windows2007
A=a1+a2+a3
这是一段文本
这是一段文本
注:
以上文字不涉及到文字字体、大小、颜色的设置,且并不居中显示。
提示:
对于特殊字符,要使用字符实体。
(5)紧接着步骤(4)插入的元素插入适当元素,使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字:
这是一段文本
(6)紧接着步骤(5)插入的元素插入适当元素,使得最终网页上显示下列样式的文字(隶书、4号、绿色):
这是一段文本
(7)如果以上的每条文本之间没有换行,则在它们之间分别插入一个换行;
(8)使用步骤1-(5)中的方法保存当前HTML文档为simpleinline.htm。
4、在网页中创建超级链接:
(1)同步骤2-
(1)、2-
(2);
(2)设置该文档最终显示标题为“HTML中的超级链接”;
(3)插入一个可以到达第2个实验中保存的simpleinline.htm的超级链接,单击链接在自身窗口中打开该文件;
(4)插入一个可以到达实验一3-(4)中的网站的链接,单击链接在新窗口中打开该网站;
(5)使用类似1-(5)的方法保存当前HTML文档为anchor.htm;
(6)使用记事本打开和本实验放在同一目录中的文件glossary.htm,这是一个词汇表,在每个以新的首字母开始的单词前插入一个显示为该字母的命名锚链(书签),在页面的顶部“Glossary”标题下方插入26个大写英文字母,并将它们分别做成可以到达刚才所做的命名锚链的超级链接。
提示:
使用记事本打开.htm(l)文件的方法:
①直接双击.htm(l)文件图标使用浏览器打开该.htm(l)文件,在页面的空白区域单击右键,调用“查看源文件”命令;②从开始菜单启动记事本,使用菜单“文件”→“打开”,定位到指定文件夹,选择“文件类型”项为“所有文件”,选定指定.htm(l)文件,单击“打开”按钮打开文件。
5、在网页中插入图片:
(1)同步骤2-
(1)、2-
(2);
(2)设置该文档最终显示标题为“HTML中的图片”;
(3)插入0-
(2)中准备的实验文件夹中的.jpg图片;
(4)在页面再次插入(3)中的图片,通过适当设置使其只显示为原来尺寸的1/2;
(5)在页面中插入实验文件夹中的.gif图片,并设置其替换文本;
(6)在页面中插入实验文件夹中的.png图片,并为其设置宽度为5的边框;
(7)使用类似1-(5)的方法保存当前HTML文档为image.htm。
实验二熟悉DREAMWEAVERMX软件
一、实验目的:
1.熟悉DREAMWEAVERMX集成环境,掌握主菜单项及其子项的使用方法;
2.掌握在DREAMWEAVERMX的集成环境下编辑、保存、运行、调试等基本过程和方法;
3.练习用DREAMWEAVERMX编辑页面属性;
4.练习用DREAMWEAVERMX编辑HTML文本;
5.练习用DREAMWEAVERMX调试HTML文件。
二、实验内容:
1.打开DREAMWEAVERMX软件,了解DREAMWEAVERMX集成环境;
2.用DREAMWEAVERMX创建一个新网页;
3.用DREAMWEAVERMX编辑HTML文件;
4.在DREAMWEAVERMX调试HTML文件。
三、实验要求:
1.掌握使用DREAMWEAVERMX进行简单网页编辑的方法;
2.掌握使用DREAMWEAVERMX调试网页。
四、实验学时:
2学时
五、实验步骤:
1、实验准备:
在硬盘上为本实验建立文件夹(以下称为“实验文件夹”),用于保存本实验的实验结果。
2、打开DREAMWEAVERMX软件,了解软件的使用:
(1)从开始菜单启动DREAMWEAVERMX;
(2)点击文件-新建菜单,在图中选择基本页-HTML(如下图):
(3)熟悉DREAMWEAVERMX软件各项菜单;
(4)在老师指导下,熟悉DREAMWEAVERMX软件个窗口。
3、熟悉练习使用代码、拆分、设计窗口的切换
(1)点击代码按钮,切换到代码窗口;
(2)点击拆分按钮,切换到拆分窗口;
(3)点击设计按钮,切换到设计窗口;
(4)体验上述三个窗口的不同。
4、在代码窗口中输入代码
(1)点击代码窗口,切换到代码窗口;
(2)输入实验一中步骤二代码;
(3)点击设计代码,查看设计效果;
(4)F12预览。
(5)设置页面属性
a)点击菜单『修改』-『页面属性』,打开属性设置对话窗口;
b)设置页面字体、大小、文本;
c)设置文本颜色、背景颜色,学会使用调色板;
d)设置左边距、上边距;
e)注意观察代码的变化;
f)F12预览。
(6)设置页面标题
a)在标题栏中输入标题内容;
b)注意观察代码变化;
c)F12预览。
(7)建立站点
在DreamweaveMX中可以有效的建立并管理多个站点。
搭建站点可以有两种方法,一是利用向导完成,二是利用高级设定来完成。
选择菜单栏——站点——管理站点,出现“管理站点”对话框。
点击“新建”按钮,选择弹出菜单中的“站点”项。
在打开的窗口上方有“基本”和“高级”两个标签,可以在站点向导和高级设置之间切换。
下面选择“基本”标签。
在文本框中,输入一个站点名字以在DreamweaverMX中标识该站点。
这个名字可以是任何你需要的名字。
单击“下一步”。
出现向导的下一个界面,询问是否要使用服务器技术。
我们现在建立的是一个静态页面,所以选择“否”。
点下一步,在文档框设置本地站点文件夹的地址。
点下一步,进入站点定义,我们将在站点建设完成后在与FTP链接,这里选择“无”。
单击“完成”按钮,结束“站点定义“对话框的设置。
单击“完成”按钮,文件面板显示出刚才建立的站点。
六、实验体会:
实验三DreamweaverMX文本编辑
一、实验目的:
1.掌握用DREAMWEAVERMX在页面中插入文字方法;
2.练习在DREAMWEAVERMX编辑修改文字;
3.练习用DREAMWEAVERMX编辑文本段落格式;
二、实验内容:
1.打开DREAMWEAVERMX软件,了解DREAMWEAVERMX集成环境;
2.用DREAMWEAVERMX创建一个新网页;
3.用DREAMWEAVERMX编辑HTML文件;
4.在DREAMWEAVERMX调试HTML文件。
三、实验要求:
1.掌握使用DREAMWEAVERMX进行简单网页编辑的方法;
2.掌握使用DREAMWEAVERMX调试网页。
四、实验学时:
2学时
五、实验步骤:
1、实验准备:
在硬盘上为本实验建立文件夹(以下称为“实验文件夹”),用于保存本实验的实验结果。
2、插入文本
要向Dreamweaver文档添加文本,可以直接在Dreamweaver“文档”窗口中键入文本,也可以剪切并粘贴,还可以从word文档导入文本。
用鼠标在文档编辑窗口的空白区域点一下,窗口中出现闪动的光标,提示文字的起始位置,输入文字。
3、编辑文本格式
网页的文本分为段落和标题两种格式。
在文档编辑窗口中选中一段文本,在属性面板“格式”后的下拉列表框中选择“段落”把选中的文本设置成段落格式。
“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。
对应的字体由大到小,同时文字全部加粗。
另外,在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。
4、设置字体组合
Dreamweaver8预设读的可供选择的字体组合只有6项英文字体组合,要想使用中文字体,必须重新编辑新的字体组合,在“字体”后的下拉列表框中选择“编辑字体列表”,弹出“编辑字体列表”对话框:
5、文字的其它设置
文本换行,按Enter键换行的行距较大(在代码区生成标签),按Enter+Shift键换行的行间距较小(在代码区生成
标签)。
文本空格,我们选择编辑/首选参数,在弹出得对话框中左侧的分类列表中选择“常规”项,然后在右边选“允许多个连续的空格”项,我们就可以直接按“空格”键给文本添加空格了。
特殊字符,要向网页中插入特殊字符,需要在快捷工具栏选择“文本”,切换到字符插入栏,单击文本插入栏的最后一个按钮,可以向网页中插入相应的特殊符号。
6、插入列表,
列表分为两种,有序列表和无序列表,无序列表没有顺序,每一项前边都以同样的符号显示,有序列表前边的每一项有序号引导。
在文档编辑窗口中选中需要设置的文本,在性面板中单击
,则选中的文本被设置成无序列表,单击
则被设置成有序列表。
7、插入水平线,
水平线起到分隔文本的排版作用,选择快捷工具栏的“HTML”项,单击HTML栏的第一个按钮
,即可向网页中插入水平线。
选中插入的这条水平线,可以在属性面板对它的属性进行设置。
8、插入时间,
在文档编辑窗口中,将鼠标光标移动到要插入日期的位置,单击常用插入栏的“日期”按钮,在弹出的“插入日期”对话框中选择相应的格式即可。
六、实验体会:
注意观察设计窗口和代码窗口的变化。
附录、插入文本内容:
政协委员建议尽快推行十二年制义务教育
本报北京专电(特派记者 王洁)“有九年制义务教育,有大学生助学贷款,贫困高中学生却没有援助保障。
高中教育应得到更多的关注!
”在全国政协十一届一次会议上,在湘全国政协委员、湖南财经高等专科学校校长、湖南大学会计学院博士生导师伍中信提交《关于加强对高中贫困生扶助,逐步实施十二年制义务教育》的提案,呼吁建立高中贫困学生援助保障机制。
推行十二年制义务教育已具备条件
“义务教育只到初中阶段,因为相对九年义务教育高中收费较高,一些贫困家庭的学生特别是农村学生初中毕业后无法进入高中学习。
”伍中信急呼,在总结深圳、珠海、浙江等地十二年义务教育经验的基础上,尽快在全国范围内推行十二年制义务教育制度。
在伍中信看来,我国已有足够的财力来推行十二年制义务教育。
伍中信认为,通过法律保障高中阶段的教育,让农村和城市孩子享受到平等的教育,相对消除了教育不公。
同时,可以提高我国中青年劳动者的整体素质。
“现代经济科技的发展,对劳动者文化素质的要求,起码得具有高中文化程度。
”伍中信委员说。
让义务教育成人人享用的“免费午餐”
“义务教育要变成人人享用得起的‘免费午餐’,经费保障是关键。
”伍中信说,我国要借鉴世界各国义务教育经费保障体制的有效模式,加大对义务教育尤其是高中教育的投入。
伍中信认为由中央财政出资负担部分或全部贫困落后地区高中阶段义务教育经费的方式值得探索。
伍中信委员认为,推行十二年制义务教育,还应重点保障民工子女义务教育权。
“建议修改义务教育学生的入学条件。
”伍中信呼吁:
“义务教育受教育者可以选择在本人户籍所在地或监护人经常居住地接受义务教育,当地政府及义务教育学校必须予以保证。
”他还建议将落实义务教育政策的成绩作为考核当地官员政绩的重要标准之一,同时加强对高中贫困生的扶助。
实验四网页中的图像与链接
一、实验目的:
1.掌握用DREAMWEAVERMX在页面中插入图像方法;
2.掌握用DREAMWEAVERMX在页面中插入交互式图像方法;
3.掌握用DREAMWEAVERMX设置网页链接方法;
4.练习用DREAMWEAVERMX在页面中插入图像;
5.练习用DREAMWEAVERMX在页面中插入交互式图像
6.练习用DREAMWEAVERMX设置网页链接方法。
二、实验内容:
1.用DREAMWEAVERMX创建插入图像;
2.在DREAMWEAVERMX中编辑图像属性
3.用DREAMWEAVERMX插入超链接。
三、实验要求:
1.掌握使用DREAMWEAVERMX进行图像插入编辑的方法;
2.掌握使用DREAMWEAVERMX进行超链接设置。
四、实验学时:
2学时
五、实验步骤:
1、实验准备:
在硬盘上为本实验建立文件夹(以下称为“实验文件夹”),用于保存本实验的实验结果。
2、插入图像
在制作网页时,先构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然后存放在站点根目录下的文件夹里。
插图图像时,将光标放置在文档窗口需要插入图像的位置,然后鼠标单击常用插入栏的“图像”按钮。
弹出的“选择图像源文件”对话框,选择img/001.jpg,单击“确定”按钮就把图像001.jpg插入到了网页中。
注意:
如果我们在插入图片的时候,没有将图片保存在站点根目录下,会弹出下图所示的对话框,提醒我们要把图片保存在站点内部,这时单击“是”按钮,
然后选择本地站点的路径将图片保存,图像也可以被插入到网页中。
3、设置图像属性
选中图像后,在属性面板中显示出了图像的属性,如下如所示。
在属性面板的左上角,显示当前图像的缩略图,同时显示图像的大小。
在缩略图右侧有一个文本框,在其中可以输入图像标记的名称。
图像的大小是可以改变的,但是在DW里更改是极不好的习惯,如果我们的电脑安装了FW软件,单击属性面板的“编辑”旁边的
,即可启动FW对图像进行缩放等处理。
当图像的大小改变时,属性栏中“宽”和“高”的数值会以粗体显示,并在旁边出现一个弧形箭头,单击它可以恢复图像的原始大小。
“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。
“边框”文本框时用来设置图像边框的宽度,默认的边框宽度为0。
“替代”文本框用来设置图像的替代文本,可以输入一段文字,当图像无法显示时,将显示这段文字。
单击属性面板中的
对齐按钮,可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。
在属性面板中,“对齐”下拉列表框时设置图像与文本的相互对齐方式,共有10个选项。
通过它我们可以将文字对齐到图像的上端、下端、左边和右边等,从而可以灵活的实现文字与图片的混排效果。
4、插入其它图像元素
在我们单击常用插入栏的“图像”按钮时,可以看到,除了第1项“图像”外,还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。
插入图像占位符,在我们布局页面时,如果要在网页中插入一张图片,可以先不制作图片,而是使用占位符来代替图片位置。
单击下拉列表中的“图像占位符”,打开“图像占位符”对话框。
按设计需要设置图片的宽度和高度,输入呆插入图像的名称,即可。
鼠标经过图像,鼠标经过图像实际上由两个图像组成,主图像(当首次载入页时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)。
这两张图片要大小相等,如果不相等,DW自动调整次图片的大小跟主图像大小一致。
实验五表格操作
一、实验目的:
1、熟悉表格及其属性的设置;
2、熟悉运用表格进行简单排版;
3、熟悉框架的应用。
二、实验内容:
1.练习插入一个表格;
2.练习用表格构造网页的框架;
三、实验要求:
1.掌握HTML文件表格基本用法;
2.掌握用DREAMWEAVERMX在页面中插入表格的方法;
3.掌握用DREAMWEAVERMX在页面中编辑表格属性的方法
四、实验学时:
2学时
五、实验步骤:
1、实验准备:
(1)所有源代码均放在文件夹C:
\Inetpub\wwwroot\example\09\子目录下。
2、建立站点:
打开Dreamweaver软件,在菜单栏中选择[站点]→[管理站点]→[新建]→[站点],然后按屏幕提示操作,首先是给站点命名,命名后按下一步,在哪种服务器技术栏中选择Aspvbscript,再按下一步,在您把文件存储在计算机上的什么位置栏中,填写“C:
\inetpub\wwwroot\frame\”(注意请自己在C:
\inetpub\wwwroot\目录下建立一个文件夹frame),按下一步,在您应该使用什么URL来浏览站点的根目录栏中填写“http:
//localhost/frame/”,单击下方的“测试URL(T)”,如果出现弹出窗口中显示“URL前缀测试已成功”,则按下一步。
建好站点后在dreamweaver右下方的文件面板中将出现您刚刚命名的站点。
3、并保存框架
在上方的菜单中选择[文件]→[新建],接着弹出图1所示的窗口,选择“常规”,在类别中选“框架集”,在“框架集”窗口中选“上方固定,左侧嵌套”,然后单击[创建]按钮。
图1新建框架
接着在上方的菜单中选择[文件]→[保存全部]。
这时会弹出一个窗口,该窗口是指为整个框架命名,不妨取为index.htm,然后会接连弹出三个窗口,要你为框架的三个部分命名(次序一般为下右,下左,上),不妨取为:
downright.htm,downleft.htm,up.htm。
保存后双击index.htm页面,然后看到代码窗口,可以看到对应于框架的代码如下:
---------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------
从代码中可以看出这是一个典型的嵌套的框架集。
试与课本中47页的代码相比较。
点击[查看]→[可视化助理]→[框架边框]就可以看到具体的框架结构和相对位置。
点击[窗口]→[框架]可以打开“框架面板”,注意书本中47页关于制作嵌套的框架集的叙述。
4、制作主题图和菜单栏
在框架的上方插入一个2×1(两行一列)的表格,表格宽度为760象素,单元格间距为1象素,如图2所示。
然后在下方的属性面板中将“对齐(A)”设为“居中对齐”,将“高度”
图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 网站 设计 基础