青春驿站网页设计范例

《青春驿站网页设计范例》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、第10章网页设计范例10.1设计站点10.2制作进站页面10.3制作主页10.4制作“时尚话题”页面10.5制作“头发的时尚”、“城市的性格”及“服装百年”页面10.6制作“心情文章”页面10.7制作“热点讨论”页面10.8测试和上传站点主要内容本章我们将通过详细描述一个网站—“青春驿站”的建设过程，学习用Dreamweavermx2004制作一个完整的站点的步骤与关键技术。本章重点网站建设过程网页设计常用技术通过本章的学习，熟悉网站建设的全过程，掌握网页设计常用技术。教学目标“青春驿站”是一个流溢着青春气息的网

2、站，网页的内容围绕着年青人喜欢的主题展开。10.1设计站点10.1.1网站的总体结构进入页面主页时尚话题心情文章热点讨论驿站留言头发的时尚城市的性格服装百年图10.1站点总体结构图10.1.2建立站点本例是在E盘book文件夹下建立一个名为youngsite的站点。制作步骤如下：（1）先在E盘book文件夹下建立一个名为youngsite的文件夹，用来存放创建的网页；在youngsite文件夹下建立一个名为images的文件夹，用以存放站点中的图像，可以把要用的图片先放入该文件夹中。（2）选择【站点】

3、【管理站点

4、】，打开【管理站点】对话框，单击【新建】按钮，在弹出的下拉菜单中选择【站点】命令，在打开的【站点定义】对话框中做如图10.2所示的设置。此时站点管理面板如图10.3所示。图10.2站点定义对话框图10.3站点管理面板10.1.3生成网页1.生成进站页面(1)选择菜单【文件】

5、【新建】，则弹出【新建文档】对话框，在该对话框中选择【常规】选项卡，在【类别】选项中选择【基本页】，然后在【基本页】列表框中选择HTML，单击【创建】按钮即创建一个HTML页面文档。(2)在文档工具栏的标题栏中，输入网页标题“进站页面”。(3

6、)选择菜单【文件】

7、【保存】，则弹出【另存为】对话框，则将该页面以index.htm的名字保存在E:bookyoungsite中。2．生成主页及其它页面以相同方法生成主页及其它页面，各个页面的名称及存储位置见图10.4所示。服装百年城市的性格头发的时尚热点讨论心情文章时尚话题主页图10.4主页及其它页面10.2制作进站页面打开进站页面文档index.htm，进行设计。1．用表格进行整体布局选择菜单【插入】

8、【表格】或在插入工具栏中的【布局】类中选择表格按钮，则会出现【表格】设置对话框，插入一个4行1列宽度为8

9、00个像素的表格。2．添加网页元素(1)在表格中的第1行，输入“青春驿站”四个字，选择这四个字，在属性面板中进行设置，字体为“华文行楷”，大小为20。单元格对齐方式为水平“居中对齐”，垂直“居中”。(2)在表格中的第2行和第4行，分别输入如图10.5所示的第2行文字“青春的美丽……”和最后一行文字“欢迎你的到来……”。选择这些文字，在属性面板中进行设置，字体和大小都为“默认”。单元格对齐方式为水平“居中对齐”，垂直“居中”。(3)选择菜单【插入】

10、【图像】在表格中的第3行，插入图像43.jpg。3．页面属性的设置

11、选择菜单【修改】

12、【页面属性】，在打开的页面属性对话框中进行设置，将背景颜色设为绿色(#99CC33)，文本颜色设为白色(#FFFFFF)。10.3制作主页10.3.1整体效果设计主页采用T形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的布局。主页的色彩以蓝绿色为主，给人以青春、旺盛的感觉。整个页面共插入了六幅gif图像，其中四幅静态图像分别作为网页横幅部分、网页标志、表格单元格的背景，给页面添加了美感，容易使人产生联想；而在左下半部分的主菜单上方及作为网页主页部分的背景的动态

13、gif图像的插入，赋予整个页面以动感，给人以明快的感觉。主页中的文字采用的是浏览器的默认字体，即中文宋体和英文TimesNewRoman字体，显得整齐有序。10.3.2用表格进行整体布局并设置(1)插入一个3行1列，宽度为800个像素，边框粗细、单元格边距及单元格间距均为0的表格。(2)将光标置于表格第1行，选择【修改】

14、【表格】

15、【拆分单元格】，将单元格拆分成2列。拖动两列中间的框线，使左侧宽度大约在150像素。(3)将光标置于表格第1行中第1个单元格，选择【修改】

16、【表格】

17、【拆分单元格】，将单元格拆分成2行

18、。(4)将光标置于表格第2行，选择【修改】

19、【表格】

20、【拆分单元格】，将单元格拆分成2列。10.3.3网页横幅及标志部分的设计(1)将光标置于第1行第2列单元格中，选择菜单【插入】

21、【图像】，插入图像5.gif，调整大小到适当宽度。(2)将光标置于第1行第1列上面的单元格中，选择菜单【插入】

22、【图像】，插入图像text.gif。在属性面板上，设置图像居中，其余默认。(3)