青春驿站网页设计范例.ppt
- 文档编号:18717839
- 上传时间:2023-10-18
- 格式:PPT
- 页数:58
- 大小:197KB
青春驿站网页设计范例.ppt
《青春驿站网页设计范例.ppt》由会员分享,可在线阅读,更多相关《青春驿站网页设计范例.ppt(58页珍藏版)》请在冰点文库上搜索。
第10章网页设计范例,10.1设计站点10.2制作进站页面10.3制作主页10.4制作“时尚话题”页面10.5制作“头发的时尚”、“城市的性格”及“服装百年”页面10.6制作“心情文章”页面10.7制作“热点讨论”页面10.8测试和上传站点,主要内容,本章我们将通过详细描述一个网站“青春驿站”的建设过程,学习用Dreamweavermx2004制作一个完整的站点的步骤与关键技术。
本章重点,网站建设过程网页设计常用技术,通过本章的学习,熟悉网站建设的全过程,掌握网页设计常用技术。
教学目标,“青春驿站”是一个流溢着青春气息的网站,网页的内容围绕着年青人喜欢的主题展开。
10.1设计站点,10.1.1网站的总体结构,10.1.2建立站点,本例是在E盘book文件夹下建立一个名为youngsite的站点。
制作步骤如下:
(1)先在E盘book文件夹下建立一个名为youngsite的文件夹,用来存放创建的网页;在youngsite文件夹下建立一个名为images的文件夹,用以存放站点中的图像,可以把要用的图片先放入该文件夹中。
(2)选择【站点】|【管理站点】,打开【管理站点】对话框,单击【新建】按钮,在弹出的下拉菜单中选择【站点】命令,在打开的【站点定义】对话框中做如图10.2所示的设置。
此时站点管理面板如图10.3所示。
图10.2站点定义对话框,图10.3站点管理面板,10.1.3生成网页,1.生成进站页面
(1)选择菜单【文件】|【新建】,则弹出【新建文档】对话框,在该对话框中选择【常规】选项卡,在【类别】选项中选择【基本页】,然后在【基本页】列表框中选择HTML,单击【创建】按钮即创建一个HTML页面文档。
(2)在文档工具栏的标题栏中,输入网页标题“进站页面”。
(3)选择菜单【文件】|【保存】,则弹出【另存为】对话框,则将该页面以index.htm的名字保存在E:
bookyoungsite中。
2生成主页及其它页面,以相同方法生成主页及其它页面,各个页面的名称及存储位置见图10.4所示。
图10.4主页及其它页面,10.2制作进站页面,打开进站页面文档index.htm,进行设计。
1用表格进行整体布局选择菜单【插入】|【表格】或在插入工具栏中的【布局】类中选择表格按钮,则会出现【表格】设置对话框,插入一个4行1列宽度为800个像素的表格。
2添加网页元素,
(1)在表格中的第1行,输入“青春驿站”四个字,选择这四个字,在属性面板中进行设置,字体为“华文行楷”,大小为20。
单元格对齐方式为水平“居中对齐”,垂直“居中”。
(2)在表格中的第2行和第4行,分别输入如图10.5所示的第2行文字“青春的美丽”和最后一行文字“欢迎你的到来”。
选择这些文字,在属性面板中进行设置,字体和大小都为“默认”。
单元格对齐方式为水平“居中对齐”,垂直“居中”。
(3)选择菜单【插入】|【图像】在表格中的第3行,插入图像43.jpg。
3页面属性的设置,选择菜单【修改】|【页面属性】,在打开的页面属性对话框中进行设置,将背景颜色设为绿色(#99CC33),文本颜色设为白色(#FFFFFF)。
10.3制作主页,10.3.1整体效果设计,主页采用T形布局,页面上部为横幅及网站标志,下方左半部分为导航区,右半部分为网页主体显示内容的布局。
主页的色彩以蓝绿色为主,给人以青春、旺盛的感觉。
整个页面共插入了六幅gif图像,其中四幅静态图像分别作为网页横幅部分、网页标志、表格单元格的背景,给页面添加了美感,容易使人产生联想;而在左下半部分的主菜单上方及作为网页主页部分的背景的动态gif图像的插入,赋予整个页面以动感,给人以明快的感觉。
主页中的文字采用的是浏览器的默认字体,即中文宋体和英文TimesNewRoman字体,显得整齐有序。
10.3.2用表格进行整体布局并设置,
(1)插入一个3行1列,宽度为800个像素,边框粗细、单元格边距及单元格间距均为0的表格。
(2)将光标置于表格第1行,选择【修改】|【表格】|【拆分单元格】,将单元格拆分成2列。
拖动两列中间的框线,使左侧宽度大约在150像素。
(3)将光标置于表格第1行中第1个单元格,选择【修改】|【表格】|【拆分单元格】,将单元格拆分成2行。
(4)将光标置于表格第2行,选择【修改】|【表格】|【拆分单元格】,将单元格拆分成2列。
10.3.3网页横幅及标志部分的设计,
(1)将光标置于第1行第2列单元格中,选择菜单【插入】|【图像】,插入图像5.gif,调整大小到适当宽度。
(2)将光标置于第1行第1列上面的单元格中,选择菜单【插入】|【图像】,插入图像text.gif。
在属性面板上,设置图像居中,其余默认。
(3)将光标置于表格的第3行,输入文字:
Copyright2005,AllRightsReserved青春驿站。
在属性面板上,设置文字居中,其余默认。
(4)横幅部分的当前日期,是通过在代码中插入一段JavaScript代码来实现的。
10.3.4导航区的设计,
(1)将光标置于左下方单元格中,选择菜单【插入】|【图像】,在该单元格上方插入图像ai01.gif,调整图像大小以适应单元格。
(2)将光标置于所插入图像的下方,选择菜单【插入】|【表格】,插入一个5行1列,宽度为140像素,边框粗细、单元格边距为0,单元格间距为20的表格。
(3)在表格的各行分别输入文字:
“驿站首页”,“时尚话题”,“心情文章”,“热点讨论”和“驿站留言”。
在属性面板上设置文字字体为默认字体,大小为14,居中。
(4)建立超级链接。
选择“驿站首页”四个字,在属性面板的【链接】框中选择index1.htm(即本主页)。
同理,设置“时尚话题”链接到网页文件shishanghuati.htm;设置“心情文章”链接到网页文件xinqingwenzhang.htm;设置“热点讨论”链接到网页文件rediantaolun.htm;在“驿站留言”链接框中写入如下脚本:
mailto:
,即当单击该链接时,将发送电子邮件到邮箱。
10.3.5主体部分的设计,在主体部分包含导航区主菜单中对应选项中的主要内容,可以从这里快速点击进入浏览。
1利用表格布局,
(1)将光标置于主体区单元格中,即导航区右侧单元格,选择菜单【插入】|【表格】,插入一个4行2列,宽度为650像素,边框粗细为2,单元格边距及单元格间距为0,其余各项为默认的表格。
调整表格各行到合适高度。
(2)将光标置于上述表格的第2行第1列对应的单元格,选择菜单【插入】|【表格】,插入一个6行1列,宽度为300像素,高为180像素,边框粗细、单元格边距及单元格间距均为0,居中对齐,其余各项为默认的表格。
(3)将上一步制作的表格拷贝下来。
分别粘贴到第2行第2列及第4行第1列对应的单元格中。
(4)将光标置于第4行第2列对应的单元格中,选择菜单【插入】|【表格】,插入一个2行2列,宽度为320像素,边框粗细、单元格边距及单元格间距均为0,居中对齐,其余各项为默认的表格。
选择菜单【修改】|【表格】将该表格第1行两个单元格合并。
2添加网页元素,
(1)添加单元格背景。
将主体部分大表格的第1行及第3行加入背景图片3rd_middle_left_bg1.gif
(2)添加图片。
在主体部分大表格的第1行及第3行的单元格左侧插入图片heart_s.gif。
(3)输入文字。
在各单元格中输入对应文字,字体为默认字体,大小为14。
(4)设置超级链接。
将“时尚话题”下的“头发的时尚”、“城市的性格”和“服装百年”分别链接到toufashishang.htm,chengshidexingge.htm和fuzhuangbainian.htm;将“热点讨论”下的“大学生校外租房调查”链接到rediantaolun.htm;将“心情文章”下所有的各项均链接到xinqingwenzhang.htm。
(5)将主体部分的表格加入背景图片。
在表格属性面板的【背景】框中选择xmasbg4.gif。
10.3.6添加页面动态效果,为了增强页面的显示效果及功能,可以在页面上适当地添加些JavaScript脚本。
在页面中添加JavaScript脚本,可以有两种方法,一种是使用DreamweaverMX提供的行为功能,另一种是直接在网页HTML代码中使用标志直接写入JavaScript脚本。
1设置状态栏文本,
(1)选中当前主页文档index1.htm下部的标签选择器中的标签。
(2)选择菜单【窗口】|【行为】,打开行为面板。
(3)单击面板中的按钮,从弹出菜单中选择【设置文本】|【设置状态栏文本】,。
打开【设置状态栏文本】对话框。
在该对话框中的文本框中输入文字“欢迎你的到来,光临属于你的、我的、大家的青春驿站!
”,单击【确定】按钮返回。
(4)存盘预览,则可以看见在页面状态栏中显示的文字。
2显示当前日期,
(1)在【设计】视图中,将光标置于欲显示日期的单元格中。
(2)切换到【代码】视图中,在光标所在位置输入如下代码:
10.4制作“时尚话题”页面,10.4.1网页横幅的制作1表格布局插入一个1行2列宽度为800个像素的表格。
2插入图像在上述左侧单元格中插入图像text.gif,在右侧单元格中插入图像4.gif。
10.4.2主体部分制作,1表格布局
(1)将光标置于横幅下面,插入一个3行2列宽度为800像素的表格。
(2)选中第3行两个单元格,选择菜单【修改】|【表格】|【合并单元格】。
2第1行第1列对应的单元格的设计
(1)在该单元格中插入一个2行2列的表格。
(2)在该表格的四个单元格中,顺次插入四个图像:
fashion_left_1.jpg,fashion_left_2.jpg,fashion_left_3.jpg和fashion_left_4.jpg,构成一个完整的画面。
3第1行第2列对应的单元格的设计,
(1)在该单元格中插入一个9行3列的表格。
(2)合并第1行3个单元格,在合并后的单元格中插入图像fashion_titleright01.gif。
(3)适当的调整下面8行各列的宽度。
(4)分别在第2行、第4行和第6行的第1列单元格中插入图像index_image15_1.gif,index_image15_2.gif和index_image15_3.gif。
(5)在其余单元格中输入文本。
字体为默认字体,3个标题的字体大小为14,其余大小默认。
(6)设置3个标题的超链接:
“头发的时尚”链接至toufashishang.htm;“城市的性格”链接至chengshidexingge.htm;“服装百年”链接至fuzhuangbainian.htm。
4第2行单元格的设计,
(1)在左侧单元格中插入图像linker.gif。
(2)在右侧单元格中输入文本“【返回主页】”。
(3)将“返回主页”链接至主页index1.htm。
5第3行单元格的设计,在该单元格中插入图像xjtu_05.jpg,并调整该图像的大小,使之占满整个单元格。
10.5制作“头发的时尚”、“城市的性格”及“服装百年”页面,“头发的时尚”、“城市的性格”及“服装百年”这三个页面同属“时尚话题”的下级页面,整体风格一致,故利用模板来创建。
10.5.1创建“时尚话题模板”模板页,1新建HTML模板文档选择菜单【文件】|【新建】,则弹出【新建文档】对话框。
在该对话框中选择【常规】选项卡,在【类别】选项中选择【模板页】,然后在【模板页】列表框中选择【HTML模板】,单击【创建】按钮即创建一个HTML模板页文档。
2定义页标题,在文档工具栏的标题栏中,输入网页标题“时尚话题模板”,3网页横幅的制作,
(1)表格布局插入一个1行2列宽度为800个像素的表格。
(2)插入图像选择菜单【插入】|【图像】,在上述左侧单元格中插入图像text.gif,在右侧单元格中插入图像4.gif。
4主体部分制作,
(1)表格布局光标置于横幅下面,插入一个3行2列宽度为800像素的表格,并适当调整表格中间的框线,使左侧列的宽度大约为330像素。
选中第3行两个单元格,选择菜单【修改】|【表格】|【合并单元格】。
(2)第1行第1列对应的单元格的设计在该单元格中插入一个2行1列的表格。
在该表格的第1行单元格中,插入图像fashion_titleright01.gif。
在该表格的第2行单元格中,插入一个3行1列,宽度为300像素,间距为10像素的表格。
在表格的三个单元格中分别输入:
“头发的时尚”,“城市的性格”和“服装百年”。
并设置它们分别链接到网页:
toufashishang.htm,chengshidexingge.htm和fuzhuangbainian.htm。
(3)第1行第2列对应的单元格的设计在该单元格中插入一个1行,1列的表格,准备作为文本的输入区域。
(4)第2行单元格的设计在左侧单元格中插入图像linker.gif。
在右侧单元格中输入文本“【返回主页】”。
将“返回主页”链接至主页index1.htm。
(5)第3行单元格的设计在该单元格中插入图像xjtu_05.jpg,并调整该图像的大小,使之占满整个单元格,5定义模板的可编辑区域,
(1)页面标题部分是默认的可编辑区域,不用加以设置。
(2)定义主体部分输入文本区域为可编辑区域选中主体部分第1行第2列插入的准备输入文本区域的表格选择菜单【插入】|【模板对象】|【可编辑区域】,打开【新建可编辑区域】对话框,在【名称】栏中输入“EditRegion1”。
单击【确定】按钮,关闭【新建可编辑区域】对话框。
6保存模板文档,将当前模板文档保存为shishangsample.dwt。
此时,在当前的youngsite站点的根目录中自动增加一个文件夹Templates,新保存的模板就在该文件夹中。
10.5.2使用“时尚话题模板”创建文档,1创建“头发的时尚”页面
(1)选择菜单【文件】|【新建】,则弹出【新建文档】对话框,在该对话框中选择【模板】选项卡。
(2)选中【当模板改变时更新页面】选项,单击【创建】按钮,进入新文档设计视图。
在该视图中,光标只能移动到可编辑区域。
(3)改变文档标题为“头发的时尚”。
(4)将光标移到EditRegion1,输入对应文字。
(5)保存文档为toufashishang.htm。
2创建“城市的性格”和“服装百年”页面,按照“1创建头发的时尚页面”的方法,来创建“城市的性格”和“服装百年”页面,只需将文档标题分别改变为“城市的性格”和“服装百年”;将文档分别保存为chengshidexingge.htm和fuzhuangbainian.htm。
10.6制作“心情文章”页面,10.6.1网页横幅的制作1表格布局插入一个1行2列宽度为800个像素的表格。
2插入图像在上述左侧单元格中插入图像text.gif,在右侧单元格中插入图像5.gif。
10.6.2主体部分制作,1表格布局将光标置于横幅下面,插入一个3行1列宽度为800个像素的表格。
2第1行单元格的设计
(1)在该单元格中插入一个4行3列,宽为795,边框粗细为2的表格。
(2)在该表格第1行第1列、第2行第3列、第3行第1列及第4行第3列对应的单元格内,各插入一个2行1列,宽度为250像素的表格。
在表格的第1行输入文字标题,第2行输入对应正文。
(3)在该表格第1行第3列、第2行第2列、第3行第3列及第4行第2列对应的单元格内,依次插入四个图像:
489.jpg,472.jpg,fullimage.jpg和phot065.jpg。
(4)在第1行第2列对应的单元格内输入文字“心情文章”,字体为“华文行楷”,大小为7,颜色为蓝色(#0099FF),居中。
3第2行单元格的设计在该单元格中输入文本“【返回主页】”,居中。
将“返回主页”链接至主页index1.htm4第3行单元格的设计在该单元格中插入图像huabian01.gif,居中。
10.7制作“热点讨论”页面,10.7.1网页横幅的制作1表格布局插入一个1行2列宽度为800个像素的表格。
2插入图像在上述左侧单元格中插入图像text.gif,在右侧单元格中插入图像6.gif。
(3)左侧单元格的设计在该单元格插入一个9行1列的表格,分别在第1、3、5、7、9行输入文字及插入图像soap1.jpg、ashtray1.jpg、soap2.jpg和ashtray2.jpg,在插入的过程中适当调整表格边线的位置,达到美观的效果。
3第2行单元格的设计在该单元格中输入文本“【返回主页】”,居中。
将“返回主页”链接至主页index1.htm。
10.7.2主体部分制作,1表格布局将光标置于横幅下面,插入一个2行1列宽度为800个像素的表格。
2第1行单元格的设计
(1)将该单元格中拆分成2列。
将第1列的宽度调整为大约136像素。
(2)右侧单元格的设计在该单元格插入一个6行1列边框为2的表格。
在表格的第1行输入讨论的标题:
“冰与火大学生校外租房调查”;在以下各行分别插入图像04062801c.jpg,04062801d.jpg,04062801e.jpg,04062801f.jpg,04062801j.jpg以及对应的说明文字,居中。
3第2行单元格的设计在该单元格中输入文本“【返回主页】”,居中。
将“返回主页”链接至主页index1.htm。
10.8测试和上传站点,10.8.1测试站点1测试浏览器兼容性
(1)选择菜单【窗口】|【结果】,打开【结果】面板。
选择【目标浏览器检查】选项卡,单击【结果】面板左上角的按钮,在下拉菜单上选择【设置】,打开【目标浏览器】对话框。
(2)在该对话框的“浏览器最低版本”框中选择IE5.0(由于国内大多采用IE浏览器5.0上以版本,故在此对其进行测试)。
单击【确定】按钮。
(3)单击【结果】面板左上角的按钮,在下拉菜单上选择【为整个站点检查目标浏览器】。
(4)检查的结果在【结果】面板的下部列出,如有错误则需进行更正。
本例无错误。
2测试链接,
(1)选择菜单【窗口】|【结果】,打开【结果】面板。
选择【链接检查器】选项卡,单击【结果】面板左上角的按钮,在下拉菜单上选择【为整个站点检查链接】。
(2)检查的结果在面板的下部列出,在【显示】列表中分别选择“断开的链接”,“外部链接”和“孤立文件”项,查看结果,如有错误,则进行更正。
本例无错误。
10.8.2上传站点,
(1)选择菜单【站点】|【管理站点】,打开【管理站点】面板。
单击【编辑】按钮,打开【站点定义】对话框,在【高级】选项卡中,进行如右图所示的设置。
单击【确定】按钮返回。
(2)选择菜单【窗口】|【文件】,打开【文件】面板,单击【上传】按钮,则将当前站点上传到本地服务器(http:
/127.0.0.1)中。
(3)打开IE浏览器,在地址栏输入“http:
/127.0.0.1/youngsite”或“http:
/localhost/youngsite”,若显示页面正常,则表示上传成功。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 青春 驿站 网页 设计 范例