青春驿站网页设计范例

第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:luqin，即当单击该链接时，将发送电子邮件到luqin邮箱。,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，04