一,确定主题

二,做好结构规划(板块)

三,收集素材,(文字、图片、视频,声音等素材)

四,安装好Dreamweaver,软件对网页进行设计制作。本设计使用Dreamweaver cs5软件建立的网站、Photoshop图片处理、flash动画设计辅助完成(利用所学知识对网页进行设计)

制作过程

1、在自已电脑中新建一个文件夹(自定义命名),做为站点如下图,文件夹根目录下再建一个名为一个为images的文件夹,作为默认图像文件夹。

2打开Adobe Dreamweaver ,新建HTML文件,对刚新建的文件夹进行设置。

在标题栏中找到新建站点,新建站点

3、对站点内的默认图像文件夹进行设置

4、在编辑区第一行位置插入表格,一个4行8列的表格

5、第一行高设为高400,合并第一行所有单元格。

6、设置第二行高为50宽为1260,第2行,第2至第6列宽为14%,有格背景颜色设为黑色。

7、设置第三行高为350,宽为1260,合并背景色为#C0AD8B

9、第4行高为90宽1260并合并,填充为黑色

10、在第2行输入,标题名,新建CSS样式,类形:为可应用于任何HTML元素并设置好相应的文字大小类形。

11、插入页眉图片,页眉为图片,或FLASH,大小高为宽高400宽1260,可做成图片形式也可以做成FLASH的格式。

12、设置第三部分正文,为正文填充一个背景颜色,并编辑正文。

13、设置正文样式

设置第页脚,填充背景颜色,填写版权信息

二、文化部份制作流程

1、 在文件面板右键点击,新建文件,新建一个新的LTML命名为WH,复制第一首页代码对中间内容部份进行修改。

复制正文文字对正文的样式进行修改。

在代码页面找至第二段文字后面的图片进行修改,向右对齐。

向右对齐代码align="right"/>

三、美食部份制作

直接复制,复制前面所做的文化页面代码,新建一个新的HTML文件,将其命名为MS,对复制的页面中间内容进行修改。

在正中间对标题进行命名,字体样式根据实际设置大小,(可采用新建CSS样式)

新建一个5行9列的表格

第1列宽73,高250

第2列宽218,高250

第3列宽60,高250

第4列宽218,高250

第5列宽60,高250

第6列宽218,高250

第7列宽60,高250

第8列宽218,高250

第一行高250

第2行高为60

第3行高40

第4行高250

第5行高60

四、景点部份制作

1、复制之前建好的文件,将其改命名为JD,删除正文将正文标题改成景点。

2、 在标题下新建一个6行5列的表格,

3、 第1行高为30

4、 第2行高为220,第一列、第五列宽为10%,第三列,宽126

第三行高为120

第四行高为30

第五行高220

第六行120

四、酒店部份制作

复制之前建好的文件,将其改命名为jiudian,删除正文将正文标题酒店景点。

1、新建2行1列,第一行高267,第二列70

2、插入5列1行表格

3、表格高度为267,第1列,第5列宽为5%,合并2、3、4列

4、在合并单元格中新建1行1列单元格,表格宽度为1134,边框为了1,表格高设为267,在将表格边设为白色

5、 scope="col" bordercolor="#FFFFFF">

6、在表格中插入1行3列的表格,宽为1134,表格高为267,表格第1列宽为400,第2列第3列分别为367

7、插入1行3列表格

2、在第一行插入1行3列表格,第一列高为267,宽为400,第2列宽为440,第3列宽为420,重复以上参数制作第2更列第列表格,(或学习视频中直接复制第一步的代码,将正文图片和内容进行修改)

留言板制作

新建一个8行6列表格

第1、3、5行高50,第2、4、6行高20,第7行高150,第8行高20

第一列宽为250,第2列宽为100,第3列宽为550,

将第7行,第三列与第四第五列合并,插入背景图片

小结

通过广州旅游网站的实例制作主要了解掌握以下几个知识点

1、 站点的建立,设置

2、 掌握页面的布局

3、 掌握表格的合并拆分

4、 掌握表格的创建属性的设置辅助布局

5、 掌握字体样式创建属性的设置

6、 超链接的创建

7、 掌握切片工具的使用

8、 掌握媒体swf文件的插入设置

更多推荐

html5毕业设计程序,网页毕业设计制作流程