您好,欢迎访问三七文档
当前位置:首页 > IT计算机/网络 > 电子商务 > 青春驿站网页设计范例
网页设计范例第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站点总体结构图网页设计范例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:\book\youngsite中。网页设计范例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:luqin@163.com,即当单击该链接时,将发送电子邮件到luqin@163.com邮箱。网页设计范例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代码中使用Script标志直接写入JavaScript脚本。网页设计范例1.设置状态栏文本(1)选中当前主页文档index1.htm下部的标签选择器中的body标签。(2)选择菜单【窗口】|【行为】,打开行为面板。(3)单击面板中的按钮,从弹出菜单中选择【设置文本】|【设置状态栏文本】,。打开【设置状态栏文本】对话框。在该对话框中的文本框中输入文字“欢迎你的到来,光临属于你的、我的、大家的青春驿站!”,单击【确定】按钮返回。(4)存盘预览,则可以看见在页面状态栏中显示的文字。网页设计范例2.显示当前日期(1)在【设计】视图中,将光标置于欲显示日期的单元格中。(2)切换到【代码】视图中,在光标所在位置输入如下代码:scriptlanguage=JavaScript!--varenabled=0;today=newDate();varday;vardate;date=今天是+(today.getYear())+年+(today.getMonth()+1)+月+today.getDate()+日;document.write(date);//--/script网页设计范例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,并调整该图像的大小,使之占满整个单元格。网页设计
本文标题:青春驿站网页设计范例
链接地址:https://www.777doc.com/doc-6322528 .html